/* ==========================================================================
   TimLuks – header.css
   Plávajúca kapsula: nie je na celú šírku, má odstup od horného aj bočných okrajov
   (podľa referenčného obrázka od používateľa), menej zaoblené rohy.

   Pozadie kapsuly nemá vlastnú farbu – je to len rozmazané sklo, ktoré INVERTUJE farby toho,
   čo je za ňou (backdrop-filter: invert), takže vždy prirodzene kontrastuje s obsahom pod ňou
   (nech je pod ňou čokoľvek, nielen jednofarebné pozadie stránky). Je v samostatnej vrstve
   (::before), aby backdrop-filter nerozbil mobilné menu.
   Samotné prvky (logo, text, tlačidlo Kontakt) majú svoje VLASTNÉ farby (--ink/--bg, rovnaká
   dvojica ako používa pätička), nezávislé od invertovania pozadia – tie sledujú len tmavý/
   svetlý režim stránky (base.css: .lg-w), nie to, čo je práve pod kapsulou.

   Pri scrolle nadol sa schová, pri scrolle nahor sa vráti. Na mobile sa navigácia
   otvára ako celoobrazovkové (tmavé) menu.
   ========================================================================== */

.site-header {
  /* Farby kapsuly: predvolene podľa režimu stránky, s JS (header-tone.js) podľa obsahu pod kapsulou. */
  --hd-fg: var(--bg);
  --hd-bg: var(--ink);
  position: fixed;
  top: var(--header-top);
  left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  pointer-events: none;   /* klik mimo kapsuly nech prejde na obsah pod ňou (napr. hero) */
  transition: transform 0.45s var(--ease-out);
}
.site-header.is-hidden { transform: translateY(calc(-1 * (var(--header-h) + var(--header-top) + 12px))); }

.site-header__inner {
  position: relative;   /* kotva pre ::before nižšie */
  pointer-events: auto;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-inline: clamp(20px, 2.6vw, 32px);
  border-radius: 22px;
  color: var(--hd-fg);
  transition: color 0.4s var(--ease);
  padding-right: calc(clamp(20px, 2.6vw, 32px) + var(--toggle-w) + 12px);   /* miesto pre prepínač režimu (theme.css) – je mimo hlavičky */
}

/* Pozadie kapsuly: žiadna vlastná farba, len invertované + rozmazané sklo (pozri komentár vyššie).
   invert() je zámerne < 1 (nie plný invert) – nad tmavým hero by inak vyšla čistá žiarivá biela;
   takto z nej vyjde svetlošedá, nie však priveľmi tlmená (na výslovnú žiadosť zosvetlené z 0.82
   na 0.92 – predtým to bolo príliš sivé/tmavé). Menšie číslo = tlmenšia kapsula. */
.site-header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: grayscale(1) invert(0.92) blur(16px);
  backdrop-filter: grayscale(1) invert(0.92) blur(16px);
}

/* ---------- Logo ---------- */

/* Logo je vektor (tvary sú v skrytom SVG v index.html, farby v .lg-w / .lg-g v base.css). */
.logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.logo__img {
  display: block;
  height: 30px;
  width: auto;
  aspect-ratio: 2000 / 470;
  transition: transform 0.4s var(--ease-out);
}
.logo:hover .logo__img { transform: scale(1.03); }

@media (max-width: 899.98px) {
  .logo__img { height: 25px; }
}

/* ---------- Navigácia (desktop) ---------- */

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__item--mobile-only { display: none; }

/* ---------- Dropdown "Služby" (desktop) ----------
   Celý blok je zámerne v @media (min-width: 900px) – nielen kvôli vzhľadu, ale aby tieto
   hover/:focus-within pravidlá (vyššia špecifickosť než jednoduché .nav__dropdown nižšie)
   nemohli "prebiť" úplne inú mobilnú verziu tej istej triedy (statický rozbaľovací zoznam,
   pozri @media (max-width: 899.98px) nižšie) – predtým sa práve preto na mobile dropdown
   posúval mimo obrazovku (desktopový transform: translate(-50%, …) mal prednosť).

   Otvára sa cez hover ALEBO fokus (:focus-within, aby sa dalo prejsť aj klávesnicou/Tabom).
   Panel je vlastné tmavé sklo (rovnaký princíp ako .theme-toggle – vždy tmavé bez ohľadu na režim
   stránky), aby bol čitateľný nad hocičím pod ním (hero aj bežný obsah). Padding-top namiesto
   margin-top medzi odkazom a panelom, nech medzi nimi nie je "mŕtva zóna", kde by kurzor pri
   prechode myšou panel zavrel skôr, než naň nabehne. */
.nav__item--dropdown { position: relative; }

.nav__dropdown-toggle { display: none; }

@media (min-width: 900px) {
  .nav__caret { transition: transform 0.3s var(--ease-out); }
  .nav__item--dropdown:hover .nav__caret,
  .nav__item--dropdown:focus-within .nav__caret { transform: rotate(180deg); }

  .nav__dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 232px;
    padding: 18px 8px 8px;
    margin: 0;
    border-radius: 16px;
    transform: translate(-50%, 6px);
    background: rgba(10, 11, 14, 0.92);
    border: 1px solid var(--on-ink-line);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-out), visibility 0s 0.25s;
  }
  .nav__item--dropdown:hover .nav__dropdown,
  .nav__item--dropdown:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-out);
  }

  .nav__dropdown li + li { margin-top: 2px; }

  .nav__dropdown a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--on-ink);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  }
  .nav__dropdown a:hover,
  .nav__dropdown a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent);
  }
  .nav__dropdown a[aria-current] {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.06);
  }
}

/* Prepisuje farby .btn--dark (tá je pevne tmavá) – toto tlačidlo má byť vždy opačné než kapsula
   okolo neho (tá sama sleduje režim), preto používa rovnaké tokeny ako obyčajná stránka (--bg/--ink).
   Funguje len vďaka poradiu <link> v index.html (header.css sa načíta až po base.css). */
.header-cta {
  justify-self: end;
  background-color: var(--hd-fg);
  color: var(--hd-bg);
}

/* ---------- Hamburger (len mobile) ---------- */

.menu-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  justify-self: end;
  margin-right: -10px;
}

.menu-toggle__bar {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.menu-toggle__bar:nth-child(1) { top: 14px; }
.menu-toggle__bar:nth-child(2) { top: 21px; }
.menu-toggle__bar:nth-child(3) { top: 28px; }

.menu-toggle__bar:nth-child(2) { transition: transform 0.4s var(--ease-out), opacity 0.2s var(--ease); }
.menu-open .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.menu-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobil / tablet ---------- */

@media (max-width: 899.98px) {
  .site-header__inner {
    display: flex;
    justify-content: space-between;
    padding-right: clamp(20px, 2.6vw, 32px);   /* prepínač režimu je na mobile vnútri kapsuly, vedľa hamburgera */
  }

  .header-cta { display: none; }
  .nav__item--mobile-only { display: list-item; }

  /* Bez JS necháme navigáciu obyčajne v hlavičke, aby web fungoval aj tak. */
  .no-js .site-header { position: absolute; height: auto; }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: 12px; border-radius: var(--radius-lg); }
  .no-js .nav__list { flex-wrap: wrap; gap: 8px 20px; }

  .js .menu-toggle { display: block; }

  /* Celoobrazovkové menu. Je vnútri hlavičky (z-index -1), takže logo a hamburger ostávajú nad ním.
     Zámerne je (na rozdiel od kapsuly) vždy tmavé – tmavý fullscreen prechod funguje bez ohľadu na to,
     z akej (bielej) kapsuly sa otvára, a farebne nadväzuje na zvyšok webu v tmavom režime. */
  .js .nav {
    position: absolute;
    top: calc(-1 * var(--header-top));
    left: 0; right: 0;
    z-index: -1;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-h) + var(--header-top) + 16px) var(--gutter) 48px;
    background: var(--ink-fixed);
    color: var(--on-ink);
    visibility: hidden;
    clip-path: circle(0 at calc(100% - var(--gutter) - 12px) calc(var(--header-h) / 2));
    transition: clip-path 0.7s var(--ease-out), visibility 0s 0.7s;
  }

  .menu-open .nav {
    visibility: visible;
    clip-path: circle(150% at calc(100% - var(--gutter) - 12px) calc(var(--header-h) / 2));
    transition: clip-path 0.7s var(--ease-out), visibility 0s;
  }

  .js .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .js .nav__link {
    padding: 6px 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 11vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
  }

  .js .nav__item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.4s var(--ease), transform 0.6s var(--ease-out);
  }
  .menu-open .nav__item {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.18s + var(--i, 0) * 0.07s);
  }

  /* Dropdown "Služby" na mobile: hover neexistuje, tak ho namiesto toho rozbaľuje tlačidlo so šípkou
     (JS, main.js prepína .is-open) – samotný odkaz "Služby" naďalej normálne vedie na #sluzby. */
  .nav__item--dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
  }
  .nav__item--dropdown .nav__caret { display: none; }   /* na mobile ukazuje smer tlačidlo, nie odkaz */

  .nav__dropdown-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border-radius: 50%;
    color: inherit;
    transition: transform 0.35s var(--ease-out), background-color 0.2s var(--ease);
  }
  .nav__dropdown-toggle svg { transition: transform 0.35s var(--ease-out); }
  .nav__item--dropdown.is-open .nav__dropdown-toggle svg { transform: rotate(180deg); }
  @media (hover: hover) {
    .nav__dropdown-toggle:hover { background: rgba(255, 255, 255, 0.08); }
  }

  .nav__dropdown {
    position: static;
    width: 100%;
    max-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    background: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    overflow: hidden;
    transition: max-height 0.4s var(--ease-out);
  }
  .nav__item--dropdown.is-open .nav__dropdown { max-height: 420px; }

  .nav__dropdown a {
    padding: 8px 4px;
    font-size: clamp(1.05rem, 4.6vw, 1.3rem);
    font-weight: 600;
    color: var(--on-ink-muted);
  }
  .nav__dropdown a:hover,
  .nav__dropdown a:focus-visible { background: none; color: var(--accent); }

  /* Pri otvorenom menu je biela kapsula vidieť nad tmavým menu, jej text ostáva tmavý (--ink-fixed). */
  .menu-open { overflow: hidden; }
  .menu-open .site-header { transform: none; }
}

/* Logo v hlavičke: v tmavom režime je kapsula svetlá a limetková by na nej „svietila“, preto o kúsok tlmenšia
   zelená (zmiešaná s tmavou). Vo svetlom režime je kapsula tmavá, tam ostáva plná limetková. */
.logo__img { --logo-green: color-mix(in srgb, var(--accent) 80%, #2d4a00); }
:root[data-theme="light"] .logo__img { --logo-green: rgb(var(--accent-lime-rgb)); }

/* Tón obsahu pod kapsulou (header-tone.js): kapsula je vždy čiernobiela a opačná než obsah, text/logo/tlačidlo sa jej prispôsobia. */
.site-header[data-tone="light"] { --hd-fg: #f5f4f0; --hd-bg: #0d0d0f; }
.site-header[data-tone="dark"] { --hd-fg: #0d0d0f; --hd-bg: #f5f4f0; }
.site-header[data-tone="light"] .logo__img { --logo-green: rgb(var(--accent-lime-rgb)); }
.site-header[data-tone="dark"] .logo__img { --logo-green: color-mix(in srgb, rgb(var(--accent-lime-rgb)) 80%, #2d4a00); }
.logo__img { --lg-w: var(--hd-fg); }
.menu-open .site-header { --hd-fg: #f5f4f0; --hd-bg: #0d0d0f; }
.menu-open .site-header .logo__img { --logo-green: rgb(var(--accent-lime-rgb)); }