/* Sticky header. Fixný, na celú šírku, page inset 48px — bez obmedzenia
   na 1240px, presne ako v prototype. */

.site-header {
  /* Svislé odsadenie je premenná, pretože na ňu je zakotvená značka aktívnej
     sekcie — inak by to bolo magické číslo závislé od výšky CTA vedľa. */
  --header-pad-y: 22px;

  position: fixed;
  top: var(--admin-bar-h);
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: var(--header-pad-y) var(--page-inset);
  background: linear-gradient(to bottom, rgba(8, 9, 10, .85), rgba(8, 9, 10, .25));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair-06);
}

/* Admin bar je tiež fixný na vrchu, takže by sa s hlavičkou prekrýval.
   Hodnoty sú tie, ktoré používa WordPress: 32 px nad 782 px, 46 px pod.
   Sú tu preto, aby to sedelo aj bez JS; motion.js ich potom spresní podľa
   skutočnej polohy admin baru — pod 600 px je totiž position:absolute
   a odscrolluje sa, takže pevný odstup by nechal dieru. */
body.admin-bar {
  --admin-bar-h: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --admin-bar-h: 46px;
  }
}

/* --- Logo --- */

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  color: var(--c-text);
}

/* Logo je štvorcové (1254:1254), takže box zostáva štvorec. Veľkosť je
   premenná, pretože v pätičke je logo menšie — text vedľa neho má 13 px
   namiesto 15 px.

   Predvolene sa kreslí ako PNG. Je to záloha pre prehliadače bez podpory
   mask-image: bez nej by tam zostal len oranžový štvorec, pretože farba
   pozadia je nastavená a maska by sa neuplatnila. */
.logo__mark {
  display: block;
  flex: none;
  width: var(--logo-mark, 40px);
  height: var(--logo-mark, 40px);
  background: url("../icons/logo-256.png") no-repeat center / contain;
}

/* Kde mask funguje, teda vo všetkom modernom, sa kreslí z SVG a farbu berie
   z tokenu akcentu, takže sa oranžová v projekte neopakuje natvrdo. */
@supports (mask-image: url("../img/logo.svg")) or (-webkit-mask-image: url("../img/logo.svg")) {
  .logo__mark {
    background: var(--c-accent);
    -webkit-mask: url("../img/logo.svg") no-repeat center / contain;
    mask: url("../img/logo.svg") no-repeat center / contain;
  }
}

.logo__text {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.logo__tld {
  font-weight: 300;
  color: var(--c-text-3);
}

/* --- Navigácia --- */

.site-nav {
  display: flex;
  align-items: stretch;
  /* Hlavička centruje svoje prvky, takže by nav zostal vysoký len ako text
     a značka by nedosiahla na spodnú hranu. Stretch ho natiahne na výšku
     riadku, ktorú určuje CTA vedľa. */
  align-self: stretch;
  gap: 34px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

/* --- Prepínač mobilného menu --- */

.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--hair-14);
  border-radius: var(--r-input);
  cursor: pointer;
  color: var(--c-text);
}

.nav-toggle:hover { border-color: var(--c-accent); }

.nav-toggle:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Tri linky; pri otvorení sa stredná skryje a krajné sa preklopia na krížik. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

/* Stredná linka sa skrýva priehľadným pozadím, nie opacity — opacity na
   rodičovi by zneviditeľnila aj ::before a ::after, z ktorých je krížik. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.site-nav__list {
  display: flex;
  /* stretch, nie center: odkaz potom vyplní výšku riadku a jeho spodná hrana
     leží na hranici odsadenia hlavičky. Značka sa od nej vie odmerať bez
     ohľadu na to, aké vysoké je CTA vedľa. */
  align-items: stretch;
  gap: 34px;
  font-size: 14px;
  letter-spacing: .02em;
}

.site-nav__list .menu-item { display: flex; }

.site-nav__list a {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--c-text-body);
  transition: color .25s;
}

/* Značka pod aktívnou položkou. V prototype je to <span>, tu ::after —
   rovnaký výsledok bez nutnosti vlastného menu walkera.

   Je to ten istý trojuholník ako pri označeniach sekcií, len otočený hore.
   Kreslí sa clip-path, takže netreba súbor ani masku a farbu berie priamo
   z tokenu. Proporcia sedí s označením sekcie (7:13), len zväčšená na váhu
   menu — pri doslovnom otočení 13×7 by bola značka pod 14 px textom
   nenápadná. */
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 50%;
  /* Spodná hrana značky leží presne na spodnej hranici lišty, takže z nej
     vyrastá nahor namiesto toho, aby visela vo vzduchu. */
  bottom: calc(-1 * var(--header-pad-y));
  width: 20px;
  height: 11px;
  margin-left: -10px;
  background-color: var(--c-accent);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity .25s;
}

.site-nav__list a:hover { color: var(--c-text); }

.site-nav__list .is-active > a,
.site-nav__list a.is-active { color: var(--c-accent); }

.site-nav__list .is-active > a::after,
.site-nav__list a.is-active::after { opacity: 1; }

/* --- Tlačidlá --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* Bez tohto sa text v úzkej hlavičke zalomí na tri riadky a z pilulky
     sa stane guľa. Zalomený popis tlačidla nechceme nikde. */
  white-space: nowrap;
  padding: 17px 30px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}

.btn--sm {
  gap: 11px;
  padding: 13px 26px;
}

.btn--primary {
  background: var(--c-accent);
  color: #0A0A0A;
  font-weight: 600;
}

.site-header .btn--primary { box-shadow: var(--sh-cta); }

.btn--primary:hover { background: var(--c-accent-hover); color: #0A0A0A; }

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--hair-22);
}

.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-text); }

.btn .arrow { flex: none; }

/* --- Mobil --- */

/* Hlavička s 40 px logom potrebuje 437 px šírky (logo 199 + medzera 16
   + akcie 174 + odsadenie 48). Nad 460 px je teda rezerva, pod ňou musí byť
   logo menšie — inak sa prepínač natlačí na okraj alebo hlavička pretečie. */
@media (max-width: 460px) {
  /* Nestačí zmenšiť znak — pri 15 px wordmarku má logo 183 px a hlavička
     potrebuje 421. Uberá sa preto aj z textu a medzery. */
  .site-header { --logo-mark: 24px; }
  .site-header .logo { gap: 9px; }
  .site-header .logo__text { font-size: 13px; }
}

@media (max-width: 900px) {
  .site-header { --header-pad-y: 18px; padding: var(--header-pad-y) 24px; gap: 16px; }

  .nav-toggle { display: inline-flex; }

  /* Popis tlačidla je klientska copy, tak sa neskracuje — ubranie ide
     z odsadenia a zo šípky, ktorá je len ozdoba. */
  .site-header__actions .btn {
    gap: 0;
    padding: 12px 18px;
    font-size: 14px;
  }

  .site-header__actions .btn .arrow { display: none; }

  /* CTA sa na prvej obrazovke zdvojuje s tlačidlom v heru a zbytočne tlačí
     na miesto v úzkej hlavičke. Skryje sa, kým sú vidno tlačidlá v heru;
     potom je to jediná cesta ku konverzii, tak zostáva.
     Trieda je na <html>, aby ju mohol nastaviť inline skript v <head> ešte
     pred prvým vykreslením — inak tlačidlo pri načítaní blikne. Skrýva sa
     jej pridaním, takže bez JS zostane viditeľné. */
  .site-header__actions .btn {
    transition: opacity .25s, transform .25s, visibility .25s;
  }

  .donster-cta-hidden .site-header__actions .btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }

  /* Ten istý element ako vodorovné menu, len iná forma: panel pod hlavičkou.
     top:100% ho drží presne pod ňou bez ohľadu na to, akú má výšku. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 4px 24px 20px;
    /* Plná farba, nie rgba: pri veľkom tučnom H1 v heru presvitali obrysy
       písmen aj cez 97 % krytia + blur. Vizuálne od pôvodnej takmer
       nerozoznateľné (bg je #08090A), ale nič už nepresvitá. */
    background: var(--c-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hair-08);
  }

  .site-nav.is-open { display: block; }

  .site-nav__list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 17px;
    letter-spacing: normal;
  }

  .site-nav__list .menu-item + .menu-item,
  .site-nav__list a + a { border-top: 1px solid var(--hair-06); }

  .site-nav__list a {
    display: block;
    padding: 15px 2px;   /* 47 px vysoký cieľ na prst */
  }

  /* Bodka pod textom nemá vo svislom zozname zmysel — stačí farba. */
  .site-nav__list a::after { display: none; }
}


/* Na najužších telefónoch sa logo a CTA nezmestili vedľa seba. */
@media (max-width: 400px) {
  /* Veľké logo prelomilo šírku hlavičky — začala scrollovať. Zmenšuje sa
     v dvoch krokoch, aby bežné 375 a 390 px dostali čo najviac a šetrilo sa
     len tam, kde to je naozaj potrebné. */
  .site-header { --header-pad-y: 14px; --logo-mark: 24px; padding: var(--header-pad-y) 14px; gap: 10px; }
  .logo { gap: 8px; }
  .logo__text { font-size: 12px; letter-spacing: .08em; }
  .site-header__actions { gap: 10px; }
  .site-header__actions .btn { padding: 11px 14px; font-size: 13px; }
}

/* Pod 360 px nestačí zmenšiť len znak: logo aj s 20 px znakom potrebuje
   137 px a k dispozícii je 125. Uberá sa preto aj z wordmarku a medzery. */
@media (max-width: 360px) {
  .site-header { --logo-mark: 20px; }
  .site-header .logo { gap: 6px; }
  .site-header .logo__text { font-size: 11px; letter-spacing: .05em; }
}