/* ──────────────────────────────────────────────────────────────────────────
   TAGRA — Shared navigation styles
   Used by: all top-level pages and subpages
   Last refactor: 2026-05-12 (extracted from inline page styles)
   ──────────────────────────────────────────────────────────────────────────
   Design tokens this file expects to inherit from the page <style>:
     --nav-h, --maxw, --border, --text, --text2, --bg-apple-solid,
     --blue-dark, --blue-mid, --blue-light, --green-cta, --green-brand
   ────────────────────────────────────────────────────────────────────────── */

/* ─── SKIP LINK ────────────────────────────────────────────
   První prvek v <body> (WCAG 2.4.1) — umožní klávesnici a čtečkám
   přeskočit navigaci rovnou na #main-content.

   Pravidlo dosud v žádném CSS nebylo, takže se odkaz vykresloval jako
   běžný modrý text nad navigací na všech stránkách. Schováváme ho
   odsunutím mimo viewport, NE přes display:none — ten by ho vyřadil
   z tab pořadí a odkaz by ztratil smysl. Zviditelní se až při fokusu.
   z-index nad .site-nav (900) i #scroll-progress (9999). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--blue-dark, #0b2c4a);
  color: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--blue-light, #1f5fa6);
  outline-offset: 2px;
}

/* ─── SCROLL PROGRESS ──────────────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--green-brand, #6E9B12), var(--blue-light, #1f5fa6));
  width: 0%; z-index: 9999; pointer-events: none;
  transition: width .1s ease-out;
}

/* ─── NAVIGATION ───────────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h, 64px);
  /* Liquid glass (Apple Tahoe-style): layered translucent fill for depth */
  background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.52) 100%);
  backdrop-filter: blur(28px) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.04);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  /* Specular top highlight + inner base sheen + soft lift shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(255,255,255,0.20),
    0 1px 1px rgba(16,42,74,0.04),
    0 8px 24px rgba(16,42,74,0.06);
}

/* Reserve room for the fixed nav site-wide; homepage opts out for full-bleed hero. */
body { padding-top: var(--nav-h, 64px); }
body.home-fullbleed { padding-top: 0; }
html { scroll-padding-top: var(--nav-h, 64px); }
/* Prevent horizontal page scroll caused by inner overflow (review rail, etc). */
html, body { overflow-x: hidden; max-width: 100vw; }
.nav-inner {
  /* nav-inner širší než content (1180px) — logo se odsadí ~110px doleva od krajů
     contentu, lépe vyniká a Control variant má víc dýchání od nav-links.
     POZOR: hodnotu nesnižovat — nejdelší menu (HU) potřebuje 1343 px, viz
     naměřený rozpis výše. Zúžení na 1180 px 29. 8. 2026 rozbíjelo EL/HU/DE menu. */
  max-width: var(--nav-maxw, 1400px);
  margin: 0 auto; padding: 0 24px;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo {
  /* Logo je <img> (SVG) — žádný gradient text-clip. Původní background-clip:text
     způsoboval v Chrome duplicitní gradientový otisk textu varianty nad logem. */
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  text-decoration: none; flex-shrink: 0;
  /* explicit dimensions tak aby výška nav byla identická na všech stránkách
     bez ohledu na to jestli je uvnitř Control variant nebo ne */
  display: inline-flex; align-items: flex-end; gap: 0;
  height: 32px; line-height: 1;
  position: relative; /* anchor pro případné product variant lockup (např. Control) */
}

/* Product variant lockup — přidává "CONTROL" / "TRUCKER" / "COMPANY" napravo od loga.
   V TOKU (ne absolute): dřívější absolutní pozicování drželo šířku logo bloku
   konstantní, ale variant se vykresloval PŘES nav-links a u delších menu
   (HU, EL) první položku překrýval. Teď variant šířku zabírá, takže se
   nav-links samy odsunou doprava a ke kolizi nemůže dojít.
   Aby menu mezi stránkami s variantem a bez něj neposkakovalo, rezervuje
   .nav-logo místo přes min-width (viz níže). */
.nav-logo-variant {
  margin-left: 12px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b7280;
  -webkit-text-fill-color: #6b7280;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  /* Zarovnání na účaří loga: logo je SVG (viewBox 0 0 415.8 94) vykreslené
     na výšku 32 px, účaří písmen TAGRA leží na y=80.9 → 27.5 px od horní
     hrany. Varianta se proto zarovná ke spodní hraně a posune o 2 px nahoru,
     aby obě slova stála na jedné lince. */
  align-self: flex-end;
  position: relative;
  bottom: 2px;
}
/* Naměřeno na nejdelším menu (HU): logo 142 + variant 97 + nav-links 951
   + jazyk 57 + gapy a padding 96 = 1343 px. Pod 1360 px by variant tlačil
   do menu, proto se skrývá. */
@media (max-width: 1359px) {
  .nav-logo-variant { display: none; }
}
/* Nad 1440 px je dost místa na rezervaci šířky logo bloku, takže nav-links
   začínají na stejném X i na stránkách bez variantu (menu mezi stránkami
   neposkakuje). Pod tím se rezervace ruší, aby menu mělo veškerou šířku. */
@media (min-width: 1440px) {
  .nav-logo { min-width: 250px; }
}
.nav-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links li a {
  font-size: 15px; font-weight: 500; color: var(--text, #1d1d1f);
  padding: 8px 10px; border-radius: 8px;
  transition: background .15s, color .15s;
  text-decoration: none;
  /* Položka navigace se nikdy nezalamuje. Lišta má pevnou výšku 64 px, takže
     druhý řádek z ní vyteče ven — u delších jazyků (EL, HU, DE) se to dělo
     už kolem 1100–1300 px. Přetečení řeší kompaktní rozměry + breakpoint
     níže, ne zalomení. */
  white-space: nowrap;
}
.nav-links li a:hover { background: var(--bg-apple-solid, #eaf3f8); color: var(--blue-mid, #134a8e); }
.nav-links a.nav-cta,
.nav-links .nav-cta-li a {
  background: linear-gradient(135deg, var(--green-brand, #6E9B12) 0%, var(--green-cta, #5C820F) 100%) !important;
  color: #fff !important;
  border-radius: 99px !important;
  padding: 8px 18px !important;
  font-weight: 600;
  text-decoration: none;
  /* Pill je jedna akce — rozlomený na dva řádky ztrácí tvar i čitelnost. */
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(110, 155, 18, 0.28),
              0 1px 0 rgba(255, 255, 255, 0.22) inset;
  transition: background .15s, box-shadow .2s;
}
.nav-links a.nav-cta:hover,
.nav-links .nav-cta-li a:hover {
  background: linear-gradient(140deg, #79a517 0%, #527311 100%) !important;
  box-shadow: 0 6px 16px rgba(110, 155, 18, 0.40),
              0 1px 0 rgba(255, 255, 255, 0.28) inset;
}

/* === Kompaktní rozměry navigace (platí na všech desktop šířkách) ===
   .nav-inner je zastropovaný na 1400 px, takže víc místa než 1400 px nav
   nikdy nedostane — tier omezený na užší okna proto nechytil stránky, které
   přetékaly i na 1920 px. Nejnáročnější sady menu (potřeba bez komprese):
     /privacy/sk/ 1445 · /privacy/cz/ 1408 · /el/stolos/ 1368 · /hu/ 1353
   Po kompresi zbývá i u nejtěsnější stránky (/privacy/sk/) 98 px rezervy,
   u zbytku 130–280 px — dost i na širší renderování fontů na Windows.
   Řecké CTA v liště používá kratší text "30 ημέρες δωρεάν" přímo v HTML
   (plná věta "Δοκιμάστε δωρεάν για 30 ημέρες" zůstává v hero CTA). */
.nav-inner { gap: 14px; padding: 0 18px; }
.nav-links { gap: 1px; }
.nav-links li a { font-size: 14px; padding: 8px 7px; }
.nav-links a.nav-cta,
.nav-links .nav-cta-li a { padding: 8px 14px !important; font-size: 14px; }
.nav-lang {
  /* Apple-style language dropdown: compact trigger, native names in menu. */
  position: relative;
  font-size: 13px; font-weight: 500;
}
.nav-lang > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 8px;
  color: var(--text2, #515154);
  user-select: none;
  transition: background .15s, color .15s;
}
.nav-lang > summary::-webkit-details-marker { display: none; }
.nav-lang > summary::after {
  content: ''; width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 2px;
  transition: transform .2s;
}
.nav-lang[open] > summary::after { transform: rotate(180deg); }
.nav-lang > summary:hover {
  background: var(--bg-apple-solid, #eaf3f8);
  color: var(--blue-mid, #134a8e);
}

.nav-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);
  padding: 6px;
  display: flex; flex-direction: column;
  /* Subtle fade-in. */
  animation: nav-lang-in .14s cubic-bezier(.16,1,.3,1);
}
@keyframes nav-lang-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-lang-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: 7px;
  color: var(--text, #1d1d1f);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background .12s;
}
.nav-lang-menu a:hover {
  background: var(--bg-apple-solid, #eaf3f8);
  color: var(--blue-mid, #134a8e);
}
.nav-lang-menu a.active::after {
  content: '✓'; color: var(--blue-mid, #134a8e);
  font-size: 14px; font-weight: 600;
}
/* Mobile-only CTA pill. Hidden on desktop; shown on mobile via media query. */
.nav-cta-mobile {
  display: none; /* default hidden — desktop shows in-list CTA instead */
  background: var(--green-cta, #5C820F); color: #fff !important;
  border-radius: 99px; padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  text-decoration: none !important; white-space: nowrap;
  transition: background .15s, transform .15s;
}
.nav-cta-mobile:hover, .nav-cta-mobile:active {
  background: var(--green-brand, #6E9B12);
  transform: scale(1.03);
}
.nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-mobile-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--text, #1d1d1f); margin: 5px 0;
  border-radius: 2px; transition: .3s;
}

/* Hamburger breakpoint je 1280 px. Rozhoduje nejtěsnější sada menu na webu —
   legacy CZ/SK menu na /privacy/{cz,sk}/ ("Zařízení na stahování dat",
   "Vyhodnocování dat"), které po kompresi potřebuje 1194 px. Na 1281 px mu
   zbývá 87 px rezervy, řečtině 171 px, maďarštině 192 px. Jednotné číslo pro
   všechny jazyky, ať lišta vypadá napříč weby stejně a nezávisí na délce
   překladu. */
@media (max-width: 1280px) {
  .nav-inner { padding: 0 16px 0 20px; gap: 12px; }
  .nav-links { display: none; }
  .nav-cta-mobile { display: inline-flex; align-items: center; }
  .nav-mobile-toggle { display: block; padding: 8px 0 8px 8px; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    position: absolute; top: var(--nav-h, 64px); left: 0; right: 0;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); padding: 12px 24px 20px;
  }
}

/* === Active page indicator ===
   The self-link gets aria-current="page" (see HTML). Style it with the
   brand mid-blue + heavier weight so users can see where they are
   without disturbing the uniform layout. */
.nav-links a[aria-current="page"] {
  color: var(--blue-mid, #134a8e);
  font-weight: 700;
}
.nav-links a[aria-current="page"]:hover {
  color: var(--blue-dark, #0b2c4a);
}

/* Logo lockup never gets an underline, even on hover/focus. */
.nav-logo,
.nav-logo:hover,
.nav-logo:focus,
.nav-logo:active {
  text-decoration: none;
}

/* === Mobilní lišta u delších jazyků ===
   .nav-inner je flex a jediné, co mělo flex-shrink:0, bylo logo. Mobilní CTA
   má white-space:nowrap, takže se nikdy nezmenšilo — u delších překladů
   ("Próbálja ki ingyen", "Wypróbuj za darmo", "Kostenlos testen") suma šířek
   přerostla viewport a hamburger vytlačila za pravý okraj, kde ho
   html{overflow-x:hidden} uřízlo. Na mobilu je hamburger jediná cesta do
   navigace, takže má přednost před šířkou CTA: nesmršťuje se on, ale pill. */
@media (max-width: 1280px) {
  .nav-inner { min-width: 0; }
  .nav-logo,
  .nav-lang,
  .nav-mobile-toggle { flex-shrink: 0; }
  .nav-cta-mobile {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
}

/* Pod 560 px se CTA zkracuje na jedno slovo — pill je akce, ne věta.
   Původní text zůstává v DOM kvůli čtečkám a odkaz cílí beze změny;
   vizuálně ho nahrazuje ::after, takže nedochází k probliknutí jako
   při výměně textu skriptem. */
@media (max-width: 560px) {
  .nav-cta-mobile { font-size: 0; padding: 8px 13px; }
  .nav-cta-mobile::after {
    content: "Try free";
    font-size: 13px; font-weight: 600; line-height: 1;
  }
  html[lang="de"] .nav-cta-mobile::after { content: "Testen"; }
  html[lang="pl"] .nav-cta-mobile::after { content: "Wypróbuj"; }
  html[lang="el"] .nav-cta-mobile::after { content: "Δοκιμή"; }
  html[lang="hu"] .nav-cta-mobile::after { content: "Kipróbálom"; }
}

/* Nejužší telefony (≤400 px) — utáhnout mezery a logo, ať zbyde místo na
   hamburger. Výška loga je v HTML inline stylem, proto !important. */
@media (max-width: 400px) {
  .nav-inner { gap: 8px; padding: 0 12px 0 14px; }
  .nav-logo img { height: 26px !important; }
}