/* ─────────────────────────────────────────────────────────────
   Auto Škola Trijumf 2005 — header
   Bottom-dock → floating pill.  Vidi CLAUDE.md → "Header".

   Klase koje postavlja assets/js/header.js:
     .is-floating  skrolovano je ispod fold-a. Da li to išta znači
                   odlučuje CSS: samo iznad 1024px sa pointer:fine
                   header odlazi na vrh. Svugdje drugdje ostaje dolje.
     .is-burger    meni se prelio → burger (mjereno, ne pogađano)
     .is-inline    meni staje → nema burgera; gasi fallback media query
     .is-open      burger panel otvoren

   Pozicija se NIKAD ne animira preko top/bottom — `auto` se ne
   interpolira pa bi header skakao. Element je trajno `bottom:0`,
   a na vrh ga diže transform, koji se interpolira glatko.
   ───────────────────────────────────────────────────────────── */

/* Sentinel — 64px visine na samom vrhu dokumenta.
   Dok se vidi, header je dokovan. Vraćanje „na sam vrh" znači
   vratiti ovih 64px u viewport. */
.t-header-sentinel{
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:var(--t-header-h);
  pointer-events:none;
}

.t-header{
  /* lokalna mjera, ne globalni token — tiče se samo ove komponente */
  --pill-max:980px;

  position:fixed;
  z-index:100;
  left:50%;
  bottom:var(--t-header-inset);
  width:calc(100% - (var(--t-container-pad) * 2));
  max-width:var(--t-container);
  transform:translateX(-50%);
  background:var(--t-surface);
  /* Pill u OBA stanja. Radijus se više ne animira — mijenja se samo
     širina i vertikalni položaj, pa je prelaz mirniji nego kad je
     donje stanje bilo pravougaono. */
  border-radius:var(--t-r-full);
  box-shadow:var(--t-shadow-float);
  /* Logo prelazi traku — ništa ovdje ne smije da ga odsiječe. */
  overflow:visible;
}
.t-header__inner{ overflow:visible; }

.t-header__inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--t-header-gap);
  min-height:var(--t-header-h);
  padding-inline:var(--t-4);
}

/* ── Logo ─────────────────────────────────────────────────────
   Logo je VIŠI od trake i namjerno je prelazi.

   Zato je izvađen iz toka: kotva drži fiksnu širinu i visinu trake,
   a slika visi apsolutno preko nje. Da je slika ostala u toku, flex
   kontejner bi porastao na njenu visinu i traka bi se podebljala —
   a transform koji diže header u pill računa sa `100%` = visina
   headera, pa bi i skok na vrh promašio za istu razliku.

   Fiksna širina kotve ima i drugi posao: lenjir koji mjeri prag
   burgera čita `brand.offsetWidth`, a ta mjera mora biti ista u
   svim stanjima.                                                */
.t-header{
  --logo-h:88px;
  /* 1565 / 1224 — odnos strana iz viewBoxa logotipa. Slika se
     skalira po VISINI (width:auto), pa ovaj broj služi samo da
     kotva dobije tačnu širinu. Mijenjaš li logo, mijenja se i ovo. */
  --logo-ar:1.27859;
}

.t-header__brand{
  position:relative;
  flex:0 0 auto;
  display:block;
  width:calc(var(--logo-h) * var(--logo-ar));
  height:var(--t-header-h);
  color:var(--t-text);
  text-decoration:none;
}

/* Logo je vertikalno centriran u OBA stanja — viri podjednako iznad
   i ispod trake i nikad se ne pomjera. Zato ovdje nema ni transforma
   ni prelaza vezanog za `.is-floating`: mijenja se samo traka oko
   njega, logo miruje.

   Da bi donji preljev imao gdje, header je odlijepljen od ivice za
   `--t-header-inset`, koji je veći od polovine preljeva.           */
.t-header__logo,
.t-header__brand .custom-logo{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:block;
  height:var(--logo-h);
  width:auto;
}

/* ── Meni ─────────────────────────────────────────────────── */
.t-nav{
  flex:1 1 auto;
  min-width:0;
}
.t-nav__list{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--t-5);
  margin:0;
  padding:0;
  list-style:none;
  white-space:nowrap;
}
.t-nav__list li{ margin:0; }
.t-nav__list a{
  display:inline-block;
  padding-block:var(--t-1);
  font-weight:600;
  font-size:var(--t-size-small);
  line-height:1.2;
  color:var(--t-text-2);
  text-decoration:none;
  transition:color var(--t-m-fast) var(--t-ease);
}
.t-nav__list a:hover,
.t-nav__list .current-menu-item > a{
  color:var(--t-text);
}

/* ── CTA — jedino mjesto gdje amber smije ─────────────────────
   Od 03.09.2026 amber ima tačno jedno mjesto na sajtu i ovo je ono:
   dugme „Upiši se", u headeru, u herou i u cjenovniku. Drugo je bio
   bedž „Gratis 75 €" i otišao je sa promocijom.               */
.t-header__cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding-inline:var(--t-5);
  background:var(--t-amber);
  color:var(--t-b950);          /* 8.81 — AAA */
  font-weight:700;
  font-size:var(--t-size-small);
  text-decoration:none;
  white-space:nowrap;
  border-radius:var(--t-r-full);
  transition:background-color var(--t-m-base) var(--t-ease);
}
/* Boja teksta i na hover/fokus — Hello Elementor u reset.css nosi
   `a:active, a:hover { color:#336 }`, što je (0,1,1) i tuče golu
   klasu (0,1,0). Bez ovoga navy tekst na amberu postane ljubičast. */
.t-header__cta:hover,
.t-header__cta:focus,
.t-header__cta:focus-visible,
.t-header__cta:active{
  background:var(--t-amber-hover);
  color:var(--t-b950);
}

/* ── Burger ───────────────────────────────────────────────── */
.t-header__burger{
  display:none;                 /* JS ili fallback ga pale */
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  background:none;
  border:0;
  border-radius:var(--t-r-sm);
  color:var(--t-text);
  cursor:pointer;
}
/* Hello Elementor boji SVAKO dugme na :hover/:focus u #c36.
   Ovdje se to uzima nazad — inače burger postane roze kvadrat. */
.t-header__burger:hover,
.t-header__burger:focus{
  background:var(--t-surface-alt);
  color:var(--t-text);
}
.t-header__burger-box{
  position:relative;
  display:block;
  width:20px;
  height:14px;
}
.t-header__burger-box i{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:currentColor;
  border-radius:var(--t-r-full);
  transition:top var(--t-m-base) var(--t-ease),
             opacity var(--t-m-fast) var(--t-ease),
             transform var(--t-m-base) var(--t-ease);
}
.t-header__burger-box i:nth-child(1){ top:0; }
.t-header__burger-box i:nth-child(2){ top:6px; }
.t-header__burger-box i:nth-child(3){ top:12px; }

.t-header.is-open .t-header__burger-box i:nth-child(1){ top:6px; transform:rotate(45deg); }
.t-header.is-open .t-header__burger-box i:nth-child(2){ opacity:0; }
.t-header.is-open .t-header__burger-box i:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* ── Lenjir — nevidljivi klon menija koji uvijek stoji u redu.
   Jedini pouzdan način da se izmjeri prirodna širina menija dok
   je pravi meni već presložen u kolonu.

   TVRDO PRAVILO: nijedno pravilo burger moda ne smije doći do
   lenjira. Zato su ta pravila vezana za `.t-nav > .t-nav__list`,
   a klon nije unutar `.t-nav`. Ako lenjir promijeni širinu kad
   se upali burger, mjera zavisi od ishoda mjerenja i prag dobija
   histerezu — meni se onda ne vraća u red na istoj širini na
   kojoj je iz njega izašao.

   `!important` je ovdje mreža ispod toga: element postoji
   isključivo radi mjerenja i nema šta da ga presloži.          */
.t-header__ruler{
  position:absolute;
  top:0;
  left:0;
  width:max-content;            /* bez ovoga ga kontejner stisne i mjera laže */
  visibility:hidden;
  pointer-events:none;
}
.t-header__ruler .t-nav__list{
  flex-direction:row !important;
  white-space:nowrap !important;
  gap:var(--t-5) !important;
}
.t-header__ruler .t-nav__list a{
  display:inline-block !important;
  font-size:var(--t-size-small) !important;
  padding-block:var(--t-1) !important;
}

/* ── Burger mod ───────────────────────────────────────────── */
/* Meni izlazi iz reda (position:absolute), pa burger preuzima
   njegov posao gurača — logo lijevo, burger + CTA krajnje desno. */
.t-header.is-burger .t-header__burger{
  display:inline-flex;
  margin-left:auto;
}

.t-header.is-burger .t-nav{
  position:absolute;
  left:0;
  right:0;
  bottom:100%;                  /* panel raste naviše — header je pri dnu */
  margin-bottom:var(--t-2);
  flex:0 0 auto;
  padding:var(--t-4);
  background:var(--t-surface);
  border-radius:var(--t-r-md);
  box-shadow:var(--t-shadow-float);
  visibility:hidden;
  opacity:0;
  transform:translateY(var(--t-2));
  transition:opacity var(--t-m-base) var(--t-ease),
             transform var(--t-m-base) var(--t-ease),
             visibility var(--t-m-base) var(--t-ease);
}
.t-header.is-burger .t-nav > .t-nav__list{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:var(--t-3);
  white-space:normal;
}
.t-header.is-burger .t-nav > .t-nav__list a{
  display:block;
  padding-block:var(--t-2);
  font-size:var(--t-size-body);
}
.t-header.is-burger.is-open .t-nav{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}

/* ── Plutajući pill — samo pravi desktop ───────────────────────
   Morfovanje postoji SAMO iznad 1024px I sa preciznim pokazivačem.

   `pointer:fine` je ovdje ključ, ne širina. Tablet u landscapeu zna
   biti 1180px širok — po širini bi prošao kao desktop, a prstom se
   header koji odlijeće na vrh koristi loše. `pointer` opisuje čime
   korisnik pokazuje, pa ne treba njuškati user agent.

   Sve ispod ovog praga — telefon, tablet, bilo koji dodirni ekran u
   landscapeu — ima header TRAJNO na dnu, u pill obliku, bez ijednog
   pravila iz ovog bloka. JS i dalje kači `.is-floating` (sentinel ne
   zna za pokazivač), ali tamo ta klasa nema šta da promijeni.

   translateY diže element od dna do inseta od vrha.               */
@media (min-width:1024px) and (pointer:fine){
  .t-header{
    transition:transform var(--t-m-emph) var(--t-ease-emph),
               max-width var(--t-m-emph) var(--t-ease-emph);
  }
  /* Element trajno sjedi na `bottom:var(--t-header-inset)`. Da bi mu
     vrh došao na isti inset od vrha ekrana, treba ga podići za
     (inset gore + inset dolje) − visina ekrana + njegova visina.
     Pozicija se nikad ne animira preko top/bottom — `auto` se ne
     interpolira, pa bi header skakao. */
  .t-header.is-floating{
    max-width:var(--pill-max);
    transform:translate(
      -50%,
      calc(var(--t-header-inset) * 2 - 100svh + 100%)
    );
  }

  /* Pun radijus na traci od 64px znači luk od 32px. Sa 16px paddinga
     logo bi sjedio na zaobljenju, pa se u pillu razmak diže na 32 —
     tačno do najšire tačke luka. Ista mjera i desno, zbog simetrije. */
  .t-header__inner{
    transition:padding-inline var(--t-m-emph) var(--t-ease-emph);
  }
  .t-header.is-floating .t-header__inner{
    padding-inline:var(--t-6);
  }

  /* Kad je gore, panel se otvara naniže. */
  .t-header.is-floating.is-burger .t-nav{
    top:100%;
    bottom:auto;
    margin-top:var(--t-2);
    margin-bottom:0;
    transform:translateY(calc(var(--t-2) * -1));
  }
  .t-header.is-floating.is-burger.is-open .t-nav{ transform:translateY(0); }
}

/* ── Fallback breakpoint ───────────────────────────────────
   Ovo je mreža ispod JS-a: bez ResizeObserver-a (ili prije
   prvog mjerenja) do 768px se ide na burger. Čim JS izmjeri i
   utvrdi da meni staje, doda .is-inline i ovo se povlači.
   Ovaj prag (768) tiče se SAMO burgera i nema veze sa pragom za
   morfovanje (1025 + pointer:fine). Dvije nezavisne stvari: da li
   meni staje u red, i da li header odlijeće na vrh.            */
@media (max-width:767.98px){
  .t-header:not(.is-inline) .t-header__burger{
    display:inline-flex;
    margin-left:auto;
  }

  .t-header:not(.is-inline) .t-nav{
    position:absolute;
    left:0;
    right:0;
    bottom:100%;
    margin-bottom:var(--t-2);
    flex:0 0 auto;
    padding:var(--t-4);
    background:var(--t-surface);
    border-radius:var(--t-r-md);
    box-shadow:var(--t-shadow-float);
    visibility:hidden;
    opacity:0;
    transform:translateY(var(--t-2));
    transition:opacity var(--t-m-base) var(--t-ease),
               transform var(--t-m-base) var(--t-ease),
               visibility var(--t-m-base) var(--t-ease);
  }
  .t-header:not(.is-inline) .t-nav > .t-nav__list{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:var(--t-3);
    white-space:normal;
  }
  .t-header:not(.is-inline) .t-nav > .t-nav__list a{
    display:block;
    padding-block:var(--t-2);
    font-size:var(--t-size-body);
  }
  .t-header:not(.is-inline).is-open .t-nav{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
  }

  .t-header__inner{ padding-inline:var(--t-3); }
  .t-header__cta{ padding-inline:var(--t-4); }

  /* Manji logo — na 390px CTA i burger traže svoj prostor.
     Traku i dalje prelazi, samo za 12px umjesto 24. */
  .t-header{ --logo-h:76px; }
}

/* ── Nizak viewport ───────────────────────────────────────────
   Ponašanje headera je ISTO kao svuda — dolje zakačen pill, na
   scroll gore. Mijenja se samo mjera: traka je niža (token), logo
   srazmjerno manji.

   Jedino stvarno pravilo ovdje tiče se burger panela. On se otvara
   NAVIŠE, jer je header pri dnu; u ekranu od 344px taj panel lako
   bude viši od svega što je iznad trake, pa mu se ograničava visina
   i pušta se da se skroluje u sebi.                              */
@media (max-height:520px){

  .t-header{ --logo-h:62px; }

  .t-header.is-burger .t-nav,
  .t-header:not(.is-inline) .t-nav{
    max-height:calc(100svh - var(--t-header-band) - var(--t-5));
    overflow-y:auto;
  }
}

/* ── Reduced motion — ništa se ne pomjera, samo se prebaci ── */
@media (prefers-reduced-motion:reduce){
  .t-header,
  .t-header__inner,
  .t-header__logo,
  .t-header__brand .custom-logo,
  .t-header .t-nav,
  .t-header__cta,
  .t-header__burger,
  .t-header__burger-box i,
  .t-nav__list a{
    transition:none !important;
  }
  /* Panel se pojavi bez klizanja. Rotacija burgera OSTAJE —
     to je oznaka stanja, ne ukras; samo nema prelaza. */
  .t-header.is-burger .t-nav,
  .t-header:not(.is-inline) .t-nav{ transform:none; }
}