/* izbornik-zaglavlja.css -- gornja navigacija na uskom prikazu (GH #463).

   STO JE BILO. Ispod 900px .site-nav je ostajao red poveznica i jedino sto se
   dogadalo bilo je prelamanje: svaka je stavka pala u dva retka ("Kako /
   pocinjes"), tekst je pod dizajnerovim pravilom isao na 11px, a meta je
   ostajala visoka koliko i redak. Pet sitnih meta koje skacu po dva retka je
   za publiku ovog programa najgora varijanta, a hamburgera na tom zaglavlju
   nije bilo -- onaj koji postoji pripada admin ljusci s bocnom trakom.

   GRANICA JE 900px, ista koju vec koriste admin ladica, clanska donja traka i
   popravak zaglavlja u main.css. Jedna granica za cijelu aplikaciju.

   ZASTO VLASTITA DATOTEKA. Izgled naslovnice je dizajnerov i zivi u
   landing-modern.css; ovdje je samo ono sto task trazi -- razmjestaj, velicine
   meta i ponasanje. Boje se ne izmisljaju nego se citaju --v5-* tokeni, koje
   landing-modern.css vec definira za obje teme, pa panel ide za temom bez
   ijedne vrijednosti napisane ovdje.

   DATOTEKA SE UCITAVA ZADNJA. Dizajnerova pravila su ".modern-landing
   .site-nav" (dva razreda); ovdje je svako pravilo pisano ".v5 .site-header
   .site-nav" (tri), pa nadjacava bez !important i bez obzira na redoslijed.

   STANJE NOSI aria-expanded NA GUMBU, ne razred na panelu. Panel je u
   dokumentu IZA gumba, pa se iz njega ne moze unazad pogoditi gumb; obrnuto
   moze (~), a stanje je onda upisano na tocno jednom mjestu i to na onom koje
   citac zaslona ionako mora dobiti. Skripta ne dira nijedan razred.

   BEZ SKRIPTE panel se ne bi mogao otvoriti, pa zatvoreno stanje NIJE zadano
   za svakoga: izbornik-bez-skripte.css se ucitava iz <noscript> i vraca
   navigaciju u okomit popis koji stoji otvoren. Zato je ovdje zatvoreno
   stanje samo "display: none", a sve ostalo visi o otvorenom gumbu -- fallback
   time nema sto ponistavati osim jedne deklaracije.

   NISTA NE VISI O :hover. Na dodiru hovera nema, pa su retci uvijek u punom
   kontrastu, a povratna informacija na dodir je :active; obrub fokusa dolazi
   iz globalnog .v5 :focus-visible. */

/* Gumb postoji samo ispod granice. Iznad nje zaglavlje ostaje red poveznica
   kakav je bio i ovdje se ne dira nista. */
.v5 .site-header .izbornik-gumb { display: none; }

@media (max-width: 899.98px) {

  /* --- gumb --------------------------------------------------------------
     Uz crtice stoji i rijec "Izbornik": tri crtice same nisu svima ocite.
     48px visine i 16px teksta su iste mjere koje vrijede i za stavke panela. */
  .v5 .site-header .izbornik-gumb {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--v5-line);
    border-radius: var(--v5-control-radius);
    background: transparent;
    color: var(--v5-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
  }
  .v5 .site-header .izbornik-gumb svg { width: 20px; height: 20px; flex: none; }
  .v5 .site-header .izbornik-gumb:active { background: var(--v5-accent-soft); }

  /* Ikona prati stanje: crte kad je zatvoren, kriz kad je otvoren. Gumb je
     ujedno i jedini nacin da se panel zatvori klikom, pa mora reci sto radi. */
  .v5 .site-header .izbornik-gumb__kriz { display: none; }
  .v5 .site-header .izbornik-gumb[aria-expanded="true"] .izbornik-gumb__crte { display: none; }
  .v5 .site-header .izbornik-gumb[aria-expanded="true"] .izbornik-gumb__kriz { display: block; }

  /* --- panel -------------------------------------------------------------
     Zatvoren je display:none, a ne vidljivost ili pomak izvan zaslona: samo
     tako poveznice ispadaju iz reda tabulatora dok ih se ne vidi.

     Otvoren visi ispod zaglavlja, ne preko njega. Zaglavlje nosi gumb kojim se
     panel zatvara i ono je jedino "izvan panela" sto na uskom prikazu uopce
     ostaje vidljivo, pa klik izvan ima kamo pasti.

     position: absolute, a ne fixed: .site-header je fixed (i ima
     backdrop-filter, koji i sam postaje okvir za fixed potomke), pa je
     apsolutni polozaj racunat od zaglavlja i "top: 100%" je tocno njegov donji
     rub, bez ijedne izmjerene vrijednosti. Visina je jedino sto se mora
     izmjeriti, jer 100% ovdje znaci "visina zaglavlja" -- skripta upisuje
     --nz-zaglavlje-visina, a zapisana pricuva drzi panel upotrebljivim i u
     trenutku prije nego sto se to dogodi. */
  .v5 .site-header .site-nav { display: none; }

  .v5 .site-header .izbornik-gumb[aria-expanded="true"] ~ .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--nz-zaglavlje-visina, 64px));
    height: calc(100dvh - var(--nz-zaglavlje-visina, 64px));
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    /* Dizajnerovo pravilo za usku navigaciju je "justify-content: space-between",
       sto je u redu za red poveznica, a u stupcu visine zaslona razmakne
       stavke po cijeloj visini -- prvo izmjereno stanje panela. */
    justify-content: flex-start;
    margin: 0;
    gap: 0;
    padding: 4px var(--v5-pad) calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    /* Bez ovoga prst koji dode do kraja popisa nastavi vuci stranicu ispod
       panela -- ista stvar koju je admin ladica platila u GH #154. */
    overscroll-behavior: contain;
    background: var(--v5-paper);
    border-top: 1px solid var(--v5-line-soft);
  }

  /* --- stavke ------------------------------------------------------------
     Meta je cijeli redak, ne rijec u njemu: 48px visine i 16px teksta, jedna
     ispod druge, s crtom izmedu. Mjere vrijede i za okomit popis bez skripte,
     pa stoje na samoj stavci, a ne u pravilu otvorenog panela. */
  .v5 .site-header .site-nav > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--v5-line-soft);
    color: var(--v5-nav-link);
    font-size: 1rem;
    line-height: 1.3;
  }
  .v5 .site-header .site-nav > a:active { color: var(--v5-ink); }

  /* Ljepljivi CTA je fiksiran s z-index 70, dakle iznad zaglavlja, i
     landing-v5.js ga pokazuje cim se prode hero. Dok je izbornik otvoren
     lebdio bi preko dna panela, a vodi na isto mjesto kao stavka u njemu.
     Skriva se samo za to vrijeme; landing-v5.js ga vrati sam, jer stanje
     racuna iz pozicije skrolanja, a ne iz ovog pravila. Preglednik bez :has()
     ostaje na starom preklapanju, sto je i prije bilo jedino stanje. */
  body:has(.izbornik-gumb[aria-expanded="true"]) .sticky-cta { display: none; }
}