/* Header, footer si meniu mobil comune tuturor paginilor.
   Extrase din home-5a9c987d.css ca sa arate identic peste tot.
   Pana in 2026-09 doar cele 4 homepage-uri aveau meniu; restul de 122 de
   pagini aveau in header doar sigla, deci cine intra din Google pe o pagina
   de ruta nu putea naviga nicaieri. */
:root{
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow-hover: 0 6px 18px rgba(15,23,42,.08), 0 16px 40px rgba(15,23,42,.10);
}
/* Paginile de articol au --max 880-920px, cat sa se citeasca confortabil.
   Bara de sus si footerul au nevoie de mai mult, altfel meniul intra peste
   sigla. Le dam latimea lor, ca pe homepage. */
.header > .container{ max-width:1320px }
footer  > .container{ max-width:1200px }
/* Cateva pagini (404, cele legale) n-au propriul CSS de container, deci fara
   marginile astea bara de sus iesea din ecran pe telefon. */
.header > .container,
footer  > .container{ margin-inline:auto; padding-inline:24px; box-sizing:border-box; width:100% }
@media (max-width:560px){
  .header > .container, footer > .container{ padding-inline:16px }
}
.brand-name{ white-space:nowrap }


  /* HEADER */
  .header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  }

  .header.scrolled { border-bottom-color: var(--border); box-shadow: 0 1px 0 var(--border); }

  .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }

  .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; color:var(--text); letter-spacing:-0.01em; min-width: 180px; white-space:nowrap; flex-shrink:0;}

  /* Stabilize the header so it stays fixed when changing language.
     Each nav link reserves enough width for the longest translation across RO/EN/DE/IT. */
  .nav-links { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }

  .nav-links a {
    color: var(--text-muted); font-weight: 500; font-size: .95rem;
    min-width: 96px; text-align: center; white-space: nowrap;
    display: inline-block;
  }

  .nav-links a:hover { color: var(--text); }

  .nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

  /* Reserve width for the primary CTA so it does not push other header items around.
     Fits the longest variant across RO/EN/DE/IT: "Richiedi preventivo" (~166px). */
  .nav-actions .btn-primary { min-width: 180px; text-align: center; white-space: nowrap; }


  .icon-btn {
    height: 40px; min-width: 40px;
    display:inline-flex; align-items:center; justify-content:center;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-elev); color: var(--text-muted);
    cursor: pointer; transition: all .2s var(--ease);
    padding: 0 10px; font: inherit;
  }

  .icon-btn:hover { color: var(--text); border-color: var(--brand-ink); }

  .icon-btn svg { width: 18px; height: 18px; }


  /* Language switcher with flag + dropdown */
  .lang-switcher { position: relative; }

  .lang-btn {
    display:inline-flex; align-items:center; justify-content: center; gap:8px;
    padding: 0 12px; font-weight:700; font-size:.82rem;
    width: 82px; /* width fix (nu min-width) ca să nu sară când schimbi limba */
  }

  .lang-btn .flag {
    width: 22px; height: 16px; border-radius: 3px; overflow: hidden;
    display:inline-block; flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
    transition: transform .35s var(--ease), opacity .35s var(--ease);
  }

  .lang-btn:hover .flag { transform: scale(1.08); }

  .lang-btn .flag svg { width:100%; height:100%; display:block; }

  .lang-btn .lang-code { letter-spacing:.06em; min-width: 22px; text-align: left; }

  .lang-btn.switching .flag { opacity: 0; transform: rotateY(90deg); }

  .lang-btn .chev { width: 10px; height: 10px; opacity: .6; transition: transform .2s; }

  .lang-switcher.open .lang-btn .chev { transform: rotate(180deg); }

  .lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-hover); padding: 6px; min-width: 160px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
    z-index: 110;
  }

  .lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

  .lang-menu a, .lang-menu button, .lang-menu .lang-off {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border: 0; background: transparent;
    border-radius: 7px; font: inherit; font-size: .88rem; color: var(--text);
    cursor: pointer; text-decoration: none; text-align: left;
  }

  /* Limba in care pagina nu exista: se vede, dar nu duce nicaieri. */
  .lang-menu .lang-off { opacity: .42; cursor: default; }
  .lang-menu .lang-off:hover { background: transparent; }
  .lang-menu .lang-nu { color: var(--text-soft); font-size: .95rem; line-height: 1; }

  .lang-menu a:hover, .lang-menu button:hover { background: var(--bg-soft); text-decoration: none; }

  .lang-menu .flag { width: 20px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; flex-shrink: 0; }

  .lang-menu .flag svg { width: 100%; height: 100%; display: block; }

  .lang-menu .lang-name { flex: 1; font-weight: 500; }

  .lang-menu .check { color: var(--brand-ink); opacity: 0; font-size: .9rem; }

  .lang-menu .active .check,
  .lang-menu [aria-current="true"] .check { opacity: 1; }

  .lang-menu .active,
  .lang-menu [aria-current="true"] { background: color-mix(in srgb, var(--brand-accent) 8%, transparent); }

  .burger { display: none; }


  /* FOOTER */
  footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding: 56px 0 24px; }

  .foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }

  .foot-grid h2, .foot-grid h3, .foot-grid h4 { font-size: .82rem; font-weight:700; letter-spacing:.12em; text-transform: uppercase; color: var(--text); margin-bottom: 14px; }

  .foot-grid ul { list-style:none; padding:0; margin:0; }

  .foot-grid li { margin-bottom: 8px; }

  .foot-grid a { color: var(--text-muted); font-size:.92rem; }

  .foot-grid a:hover { color: var(--brand-ink); }

  .foot-about p { font-size:.92rem; max-width: 340px; }

  .foot-bottom { border-top: 1px solid var(--border); padding-top:18px; display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:.85rem; color: var(--text-muted); flex-wrap:wrap; }
@media (max-width: 560px){
    .foot-grid { grid-template-columns: 1fr; }
    .nav { height: 64px; padding-inline: 4px; } /* nav side padding */
    .brand span.brand-name { display:none; }
    .icon-btn { height: 38px; min-width: 38px; }}


  .mobile-menu {
    position: fixed; inset: 0; background: var(--bg);
    z-index: 200; padding: 24px; display:none; flex-direction: column;
    transform: translateX(100%); transition: transform .35s var(--ease);
  }

  .mobile-menu.open { transform: translateX(0); }

  .mobile-menu .mm-top { display:flex; justify-content:space-between; align-items:center; margin-bottom: 30px; }

  .mobile-menu nav { display:flex; flex-direction:column; gap: 8px; }

  .mobile-menu nav a { padding: 14px 4px; color: var(--text); font-weight: 600; font-size:1.1rem; border-bottom: 1px solid var(--border); }

  .mobile-menu .mm-actions { display:flex; gap:10px; margin-top:auto; padding-top:20px; }

  .mobile-menu .mm-actions .btn { flex:1; }
@media (max-width: 960px){ .mobile-menu { display: flex; }}


/* 6.2: headerul depasea viewportul pe mobil: brand 180px + actiuni 182px > latimea navului,
   asa ca butonul de meniu iesea 16px in afara ecranului. */
.nav { min-width: 0; }

.nav .brand { min-width: 0; flex-shrink: 1; white-space:nowrap;}

.nav-actions { flex-shrink: 0; }
@media (max-width: 560px){
  .nav { gap: 8px; padding-inline: 0; }
  .nav .brand-name { display: none; }
  .nav-actions { gap: 6px; }
  .lang-switcher .lang-code { display: none; }
  .lang-switcher .chev { display: none; }}

/* identificarea comerciantului, ceruta de Legea 365/2002 art. 5 */
.af-legal-line{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--border);
  font-size:.8rem;color:var(--text-muted);line-height:1.6}
/* Bara de sus pe ecran lat.
   Reparatia de mobil din audit (6.2) a lasat `.nav .brand{min-width:0; white-space:nowrap; flex-shrink:0;}` fara
   media query, deci sigla se putea stramta sub textul ei la orice latime. Pe
   homepage nu se vedea, fiindca meniul avea loc; pe paginile de articol navul
   umple exact containerul, iar "Absolute Fides" intra peste primul link.
   Aici sigla nu se mai strange, iar linkurile preiau presiunea printr-un gap
   fluid. */
@media (min-width: 961px){
  .nav .brand{ min-width:auto; flex:0 0 auto; white-space:nowrap; flex-shrink:0;}   /* nu se mai strange sub textul ei */
  .nav-links{ flex:0 1 auto; min-width:0; margin-left:auto;
              gap:clamp(12px, 1.4vw, 20px) }
}
/* Intre 961 si 1250 nu incap si sigla scrisa, si cele sase sectiuni, si
   butonul de ofertA. Ramane marca AF, care duce tot acasa. */
@media (min-width: 961px) and (max-width: 1250px){
  .nav .brand-name{ display:none }
}

/* Sub 960px meniul orizontal se ascunde si ramane butonul de meniu.
   Regula exista in CSS-ul de homepage; o scriu explicit aici fiindca
   extractorul a ratat-o si paginile ieseau lateral din ecran pe tablete. */
@media (max-width: 960px){
  .nav-links{ display:none }
  .burger{ display:inline-flex }
}

/* Footerul de pe subpagini are cinci coloane egale, nu una lata de descriere
   ca pe homepage, deci 1.6fr+4x1fr il scotea din ecran intre 560 si 900px.
   auto-fit se aseaza singur pe cate coloane incap. */
footer .foot-grid{
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 28px 32px;
}

/* Tabelele din articole (comparativ salarii, comparativ remorci, rute) sunt
   mai late decat un telefon si impingeau toata pagina lateral. Acum se
   deruleaza in cutia lor, restul paginii sta pe loc. */
.tabel-lat{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; margin:0 0 18px }
.tabel-lat > table{ margin-bottom:0 }

/* Sub 960px butonul de ofertA iese din bara (pe 390px depasea ecranul cu 14px).
   Ramane in meniul mobil, unde e oricum mai la indemana. Regula exista in
   CSS-ul de homepage, dar extractorul a ratat-o. */
@media (max-width: 960px){
  .nav-actions .btn{ display:none }
}


/* Butoanele. Erau definite doar in CSS-ul de homepage, deci pe cele 122 de
   subpagini "Cere oferta" din bara de sus aparea ca text albastru simplu, nu ca
   buton plin. Se vedea doar comparand doua pagini una langa alta. */

  /* Reserve width for the primary CTA so it does not push other header items around.
     Fits the longest variant across RO/EN/DE/IT: "Richiedi preventivo" (~166px). */
  .nav-actions .btn-primary { min-width: 180px; text-align: center; white-space: nowrap; }


  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 10px;
    font-weight: 600; font-size: .95rem; cursor: pointer;
    transition: all .2s var(--ease); border: 1px solid transparent;
    white-space: nowrap;
  }

  .btn-primary {
    background: var(--brand-primary); color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary) 35%, transparent);
  }

  .btn-primary:hover { background: var(--brand-primary-hover); color:#fff; transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-primary) 50%, transparent); }

  .btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }

  .btn-secondary:hover { border-color: var(--brand-ink); color: var(--brand-ink); }

  .cta-final .btn-primary { background:#fff; color:var(--brand-primary); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }

  .cta-final .btn-primary:hover { background:#f1f5f9; color: var(--brand-primary); }

  .cta-final .btn-secondary { color:#fff; border-color: rgba(255,255,255,0.3); background: transparent; }

  .cta-final .btn-secondary:hover { border-color:#fff; color:#fff; background: rgba(255,255,255,0.08); }

  .form-nav .btn { flex: 1; }

  .form-nav .btn-secondary-soft { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); }

  .form-nav .btn-secondary-soft:hover { background: var(--bg); border-color: var(--brand-ink); }
@media (max-width: 520px){
    .calc-actions .btn-primary { width: 100%; padding: 14px; }}

  .mobile-cta .btn { flex: 1; justify-content: center; padding: 12px 14px; font-size: .92rem; }

  .mobile-menu .mm-actions .btn { flex:1; }


/* Scheme tehnice de pe paginile de servicii. Generate de docs/gen-scheme.py. */
.schema{margin:26px 0 30px;border:1px solid var(--border);border-radius:12px;
  background:var(--bg-elev);padding:20px 22px 16px}
.schema figcaption{font-size:.85rem;color:var(--text-muted);margin-top:10px;line-height:1.5}
.schema svg{display:block;width:100%;height:auto}
.schema .et{font:500 11px/1 ui-sans-serif,system-ui,sans-serif;fill:var(--text-muted)}
.schema .et-b{font:600 12px/1 ui-sans-serif,system-ui,sans-serif;fill:var(--text)}
.schema .cota{stroke:var(--text-muted);stroke-width:1;fill:none}
.schema .corp{fill:none;stroke:var(--text);stroke-width:1.6}
.schema .palet{fill:color-mix(in srgb,var(--brand-primary) 16%,transparent);
  stroke:var(--brand-primary);stroke-width:.9}
.schema .umplut{fill:color-mix(in srgb,var(--brand-primary) 9%,transparent)}
.schema .sasiu{fill:color-mix(in srgb,var(--text-muted) 14%,transparent);
  stroke:var(--text-muted);stroke-width:1}
.schema .gol{fill:color-mix(in srgb,var(--text-muted) 8%,transparent);
  stroke:var(--text-muted);stroke-width:.8;stroke-dasharray:3 3}
.schema .t1{fill:#15528F}.schema .t2{fill:#4681B5}.schema .t3{fill:#6E9AAE}.schema .t4{fill:#B07A2B}
@media (prefers-color-scheme:dark){
  .schema .t1{fill:#5A97D4}.schema .t2{fill:#7FB0DE}.schema .t3{fill:#9DC2CE}.schema .t4{fill:#D9A44E}
}
[data-theme="dark"] .schema .t1{fill:#5A97D4}
[data-theme="dark"] .schema .t2{fill:#7FB0DE}
[data-theme="dark"] .schema .t3{fill:#9DC2CE}
[data-theme="dark"] .schema .t4{fill:#D9A44E}
[data-theme="light"] .schema .t1{fill:#15528F}
[data-theme="light"] .schema .t2{fill:#4681B5}
[data-theme="light"] .schema .t3{fill:#6E9AAE}
[data-theme="light"] .schema .t4{fill:#B07A2B}
@media (max-width:560px){.schema{padding:14px 14px 12px}}


/* Link-ul de sarit peste meniu: invizibil pana primeste focus din tastatura.
   Exista in CSS-ul de homepage; il aducem si pe subpagini. */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--brand-primary);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 0;font-weight:600;font-size:.92rem;
  z-index:1000;text-decoration:none}
.skip-link:focus{left:0}

  /* Link care duce in continut romanesc, dintr-o pagina tradusa. */
  .doar-ro {
    display: inline-block; margin-left: 6px; padding: 1px 5px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--bg-soft); color: var(--text-soft);
    font-size: .7em; font-weight: 600; letter-spacing: .02em;
    vertical-align: baseline; white-space: nowrap;
  }

/* antet-consecvent.py */
.header > .container{max-width:1320px}
.header .nav{justify-content:space-between}
.header .nav .brand{min-width:max-content;flex-shrink:0}
.header .nav-links{margin:0;flex-shrink:0}

/* antet-consecvent.py */
.header > .container{max-width:1320px}
.header .nav{justify-content:space-between}
.header .nav .brand{min-width:max-content;flex-shrink:0}
.header .nav-links{margin:0;flex-shrink:0}
.header > .container{margin-inline:auto;padding-inline:24px;width:100%}
@media (max-width:560px){.header > .container{padding-inline:16px}}

/* antet-consecvent.py */
.header > .container{max-width:1320px}
.header .nav{justify-content:space-between}
.header .nav .brand{min-width:max-content;flex-shrink:0}
.header .nav-links{margin:0;flex-shrink:0}
.header > .container{margin-inline:auto;padding-inline:24px;width:100%}
@media (max-width:560px){.header > .container{padding-inline:16px}}
@media (min-width:961px){.header .nav-links{gap:clamp(12px,1.4vw,20px)}}

/* linkuri subliniate in text (docs/accesibilitate.py) */
main :is(p, li:not([class]), td, dd, label, blockquote, figcaption) > a:not([class]):not(:has(h1, h2, h3, h4, p, div, img, svg)) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}
/* /linkuri subliniate */

/* tipografie comuna (docs/tipografie.py) */
:root{--fs-h1:clamp(2rem,2.6vw + 1rem,3rem);--fs-h2:clamp(1.4rem,1.2vw + 1rem,1.9rem);--masura:68ch}
:root body h1{font-size:var(--fs-h1);line-height:1.12;letter-spacing:-.025em}
:root body main h2{font-size:var(--fs-h2);line-height:1.2;letter-spacing:-.015em}
:root body main :is(p, li:not([class]), dd, blockquote){max-width:var(--masura)}
/* /tipografie comuna */

/* numele firmei in antet, pe telefon (docs/antet-mobil.py) */
@media (min-width:385px) and (max-width:560px){
  :root body .nav .brand .brand-name{display:inline;font-size:.9rem;letter-spacing:-.01em}
}
/* /numele firmei in antet */

/* randul cu datele firmei, centrat pe toata latimea (docs/subsol-aliniat.py) */
footer .af-legal-line{max-width:none;text-align:center}
/* sfarsit rand date firma */

/* coloanele subsolului de pe subpagini, centrate pe fiecare rand (docs/subsol-aliniat.py) */
footer .foot-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 32px}
footer .foot-grid>*{flex:1 1 170px;max-width:240px}
footer .foot-bottom{justify-content:center;flex-wrap:wrap;text-align:center;gap:6px 24px}
@media (max-width:440px){footer .foot-grid{column-gap:16px}footer .foot-grid>*{flex-basis:140px}footer .foot-grid a{overflow-wrap:anywhere}}
/* sfarsit coloane subsol */