/* ==========================================================================
   Zaglavlje. Sve mjere su iz PDF-a (okvir 1512 px), pretvorene u rem (÷16).
   Iznad 1024 px je 1 rem = 16 px skalirano, pa raspored ostaje proporcionalan.
   ========================================================================== */

.site-header {
  position: relative;          /* bez foto heroja zaglavlje zauzima svojih 160 px */
  z-index: 50;
  transition: background-color .25s ease, transform .25s ease;
}
/* preko foto heroja zaglavlje lebdi, pa hero pocinje od vrha stranice */
.site-header--over-hero {
  position: absolute;
  inset: 0 0 auto 0;
}
.site-header__inner {
  position: relative;
  width: 100%;
  max-width: var(--w-frame);
  height: 10rem;              /* 160 */
  margin-inline: auto;
}

/* Tamna elipsa iza menija (stranice s foto herojem i Straumann).

   Mjere su iz PUTANJE u PDF-u, ne iz njenog okvira. Okvir putanje je
   220,7 / -237,9 / 1110,6 x 468,8 i te brojke su ovdje stajale — ali gornja
   polovina putanje nije elipsa (kontrolna tačka joj je na -237,9, a krivulja
   ne ide ni blizu), dok je DONJA polovina, jedina koja se vidi, pravilna
   četvrtina elipse sa središtem (776, -71,06), poluosama 555,3 x 302 i dnom
   na 230,94. S okvirom kao elipsom (poluos 234,4) luk je bio spljošten:
   na y 3 širi 16 px sa svake strane, na y 120 za 42 px (izmjereno na svih
   10 PDF-ova s elipsom, isti rezultat). Ovdje je puna elipsa te donje
   polovine: vrh -373,06, visina 604. */
.site-header__ellipse {
  position: absolute;
  left: 13.79375rem;          /* 220,7 */
  top: -23.31625rem;          /* -373,06 */
  width: 69.4125rem;          /* 1110,6 */
  height: 37.75rem;           /* 604 */
  background: var(--c-ellipse);
  border-radius: 50%;
  pointer-events: none;
}
/* Okvir za elipsu izvan zaglavlja (`header.php`): isti okvir 1512 kao
   `.site-header__inner`, na vrhu stranice, bez vlastitog sloja. */
.site-ellipse {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: var(--w-frame);
  height: 0;
  margin-inline: auto;
}
@media (max-width: 1023px) {
  .site-ellipse { display: none; }
}

/* jezicni prekidac: desna ivica na 1467 od 1512. Redoslijed HR | ITA | ENG
   (M02) daje smile_language_switcher(); blok je desno poravnat, pa desna
   ivica ostaje ista. */
.site-lang {
  position: absolute;
  top: 1.65rem;               /* 26.4 */
  right: 2.8125rem;           /* 1512 - 1467 */
  font-size: var(--fs-legal); /* 13 */
  /* `--lang-fw`, `--c-lang`, `--c-lang-active`: „Impostazioni Smile" ›
     „Intestazione e menu", samo kad su popunjeni (smile_boje_sajta()). */
  font-weight: var(--lang-fw, var(--fw-light));
  line-height: 1.4;
  white-space: nowrap;
  z-index: 2;
}
.site-lang__item { color: var(--c-lang, var(--c-white)); text-decoration: none; }
.site-lang__item.is-current { color: var(--c-lang-active, var(--c-accent)); }
.site-lang__item:hover { color: var(--c-accent); }
.site-lang__sep { color: var(--c-lang, var(--c-white)); }

/* logo */
/* Okvir je tačan okvir vektorskog logotipa u PDF-u (115,39..300,75 x
   94,47..148,88), a logo.svg ima isti viewBox — crta se 1:1, bez umanjenja.

   M01 (Pragma, 30. 9. 2026: „The logo needs to be aligned with the menu
   items"): u PDF-u logo visi 14 px ispod menija (sredina 121,68 naspram
   107,7 stavki menija i 107,5 dugmeta), pa „POLIKLINIKA" ide ispod linije
   dugmeta. Sada je sredina logotipa na sredini stavki menija: 80,5 + 27,2
   = 107,7 = 97,2 + 10,5. Vodoravno i veličina ostaju iz PDF-a. */
.site-logo {
  position: absolute;
  left: 7.211875rem;          /* 115,39 */
  top: 5.03125rem;            /* 80,5 (PDF 94,474) */
  width: 11.585rem;           /* 185,36 */
  height: 3.400375rem;        /* 54,406 */
  z-index: 2;
}
.site-logo img { width: 100%; height: 100%; object-fit: contain; }

/* navigacija: blok pocinje na 409.1, razmak 51.07 */
/* `pointer-events`: blok je širok cijeli okvir (stavke imaju svoje x iz PDF-a),
   pa je njegov prazni dio ležao preko srednje trećine logotipa (pojas 97–118
   naspram logotipa 80–135; u zalijepljenom stanju 42–63 naspram 25–79) i
   primao klik umjesto linka logotipa — 27 od 63 tačke logotipa nije vodilo na
   naslovnu (prijavio korisnik 3. 10. 2026). Klik sada primaju samo linkovi. */
.site-nav {
  position: absolute;
  left: 0;
  top: 6.075rem;              /* 97.2 */
  width: 100%;
  z-index: 2;
  pointer-events: none;
}
.site-nav a { pointer-events: auto; }
/* Razmaci u dizajnu nisu jednaki, pa svaka stavka ima svoju x-koordinatu
   iz PDF-a (ispisuje je smile_nav() kao inline left). */
.site-nav__list {
  position: relative;
  height: 1.3125rem;          /* 21 */
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.site-nav__item { position: absolute; top: 0; }
/* Rezerva kad se meni raziđe s dizajnom (drugi broj stavki ili drugi tekst,
   vidi `smile_nav()`): ravnomjeran raspored.

   Do sada je lista počinjala od LIJEVOG RUBA okvira (x 0) i išla preko
   logotipa — `.site-nav` je širok cijeli okvir 1512 — pa klijent nije mogao
   preimenovati nijednu stavku, a da mu meni ne prekrije logo (backend
   provjera: «Prima visita» → «Prima visita gratuita», Soluzioni na x 0).
   Sada rezerva zauzima samo pojas između logotipa i dugmeta: počinje tamo
   gdje i meni u dizajnu (409,1) i završava jedan razmak iz dizajna (51,07)
   prije dugmeta (1249). Stavke se u tom pojasu rasporede ravnomjerno;
   najmanji razmak je 24 px, da se ni dugi natpisi ne slijepe. */
.site-nav__list--flow {
  display: flex;
  justify-content: space-between;
  column-gap: 1.5rem;                          /* 24 */
  height: auto;
  margin-left: 25.56875rem;                    /* 409,1 */
  width: calc(78.0625rem - 3.192rem - 25.56875rem);   /* 1249 - 51,07 - 409,1 */
}
.site-nav__list--flow .site-nav__item { position: static; }
.site-nav__item a {
  display: block;
  color: var(--c-nav);
  font-size: var(--fs-nav);   /* 15 */
  font-weight: var(--nav-fw, var(--fw-light));   /* „Peso delle voci del menu" */
  line-height: 1.4;           /* 21 */
  text-decoration: none;
  transition: color .2s ease;
}
.site-nav__item a:hover { color: var(--c-accent); }
/* Podcrta stavke otvorene stranice. Dizajn je NEMA (na svih osam stranica
   menija stavka otvorene stranice izgleda kao ostale), pa se crta SAMO kad je
   popunjeno polje „Sottolineatura della voce attiva" (`--c-nav-active` na
   :root); prazno = prozirna crta = današnji piksel. Isto u mobilnom meniju,
   gdje klasu daje sam `wp_nav_menu()`. */
.site-nav__item.is-current > a {
  box-shadow: inset 0 -2px 0 0 var(--c-nav-active, transparent);
}
/* U mobilnom meniju link ima unutrašnji razmak 12 px, pa bi crta na dnu
   okvira stajala daleko od riječi; zato je tamo podcrtan sam tekst. */
.site-drawer__list .current-menu-item > a,
.site-drawer__list .current-menu-parent > a,
.site-drawer__list .current-menu-ancestor > a,
.site-drawer__list .current_page_parent > a {
  text-decoration: underline 2px var(--c-nav-active, transparent);
  text-underline-offset: .35em;
}

/* dugme u zaglavlju */
.site-header__cta {
  position: absolute;
  left: 78.0625rem;           /* 1249 */
  top: 5.375rem;              /* 86 */
  width: 12.875rem;           /* 206 */
  z-index: 2;
}
/* EN (28. 10. 2026): Pragmin natpis „Book an appointment" je 20 px duži od
   pilule 206, pa je krug strelice izlazio van. Pilula raste ulijevo (desni
   rub ostaje na 1455), meni završava daleko prije. IT/HR se ne mijenjaju. */
html:lang(en-GB) .site-header__cta {
  left: 76.8125rem;           /* 1229 */
  width: 14.125rem;           /* 226 */
}

/* hamburger, samo mobilni */
.site-burger { display: none; }

/* stanje nakon skrola */
/* `inset` NIJE ukras. Bez njega `position: fixed` skupi element na sadrzaj:
   zaglavlje je dobijalo sirinu 0 px, pa se crna podloga crtala preko nicega,
   a stavke menija su visile izvan okvira i stajale direktno preko fotografija.
   Uz to je stranica poskakivala 160 px cim se zaglavlje izvuce iz toka.
   Nista od toga nije uhvatilo nijedno mjerenje, jer je ljepljivo zaglavlje u
   QA nacinu bilo iskljuceno — mjerila se stranica koja se nikad ne skrola.
   Prijavio klijent. */
.site-header.is-stuck {
  position: fixed;
  inset: 0 0 auto 0;
  /* `--c-header-bg` = „Sfondo dell’intestazione fissa e del menu mobile" iz
     postavki, samo kad je popunjeno; inače pozadina sajta, kao u dizajnu. */
  background: var(--c-header-bg, var(--c-bg));
}
/* Mjesto koje zaglavlje ostavi kad izade iz toka. Visinu upisuje skripta,
   jer se razlikuje po sirini ekrana (160 / 152 / 76 px).

   Ne vrijedi za stranice s foto herojem: tamo zaglavlje LEBDI nad
   fotografijom i nikad nije bilo u toku, pa mjesto nema sta ni ostaviti —
   dodavanje razmaka bi stranicu gurnulo 104 px nadolje cim se zaglavlje
   zalijepi. To je isti `skok` koji brana `zaglavlje` mjeri. */
body.ima-ljepljivo:not(.zaglavlje-lebdi) { padding-top: var(--ljepljivo-h, 0); }
.site-header.is-stuck .site-header__ellipse { display: none; }

/* Zalijepljeno zaglavlje je NIZE od onog na vrhu stranice. Dizajn ljepljivo
   stanje uopce ne opisuje — PDF je nepomicna stranica — pa je do sada nosilo
   punih 160 px, zajedno s jezicnom trakom. Klijent je javio da je preveliko.

   U traci od 104 px logo, meni i dugme imaju ZAJEDNIČKU sredinu 52 (M01,
   Pragma 30. 9. 2026): logo 24,8 (52 − 27,2), meni 41,5 (52 − 10,5), dugme
   30,5 (52 − 21,5). Ranije se sve dizalo za istih 64,8 px, pa je logo i
   ovdje visio 14 px ispod menija.

   SAMO DESKTOP. Ova pravila su stajala bez medija i, jer su specifičnija
   (0,3,0) od mobilnih `.site-header__inner` / `.site-logo`, pobjeđivala su
   i na telefonu: logo je skakao na 30 px, traka se skraćivala na 104 px, a
   burger (za koji ljepljivog pravila nema) ostajao je na 94,7 px — 65 px
   ispod logotipa i 10 px ispod crne trake. Nad bijelim sekcijama vidjela se
   samo njegova gornja crta. Našla nezavisna kontrola (MHP-K01).
   Telefon ima svoja ljepljiva pravila (u mobilnom bloku niže), uključujući
   burger. */
.site-header.is-stuck .site-lang { display: none; }
@media (min-width: 1024px) {
  .site-header.is-stuck .site-header__inner { height: 6.5rem; }   /* 104 */
  .site-header.is-stuck .site-logo { top: 1.549813rem; }          /* 24,8 = 52 − 27,2 */
  .site-header.is-stuck .site-nav { top: 2.59375rem; }            /* 41,5 = 52 − 10,5 */
  .site-header.is-stuck .site-header__cta { top: 1.90625rem; }    /* 30,5 = 52 − 21,5 */
}
.is-qa .site-header.is-stuck { position: absolute; background: none; }

/* ===================== mobilni (okvir 430) ===================== */
/* Mobile HP.pdf je okvir telefona (430 = iPhone Pro Max): logo mu stoji na
   89 px, jer je gornjih ~59 px mjesto za statusnu traku telefona (sat,
   baterija). U pravom pregledniku stranica počinje ISPOD te trake, pa je
   doslovno prenesenih 89 px davalo prazan crni pojas: na stranicama bez foto
   heroja zaglavlje od 135 px s logom tek pri dnu, i isto toliko u
   zalijepljenom zaglavlju pri skrolu. Prijavio klijent (24. 9. 2026). Sve
   mobilne mjere zaglavlja su zato mjere iz PDF-a umanjene za tih 59,08 px
   (89,08 − 30): logo 30 px od vrha, burger i razmak ispod logotipa ostaju
   isti kao u dizajnu. Desktop ovo ne dira. */
@media (max-width: 1023px) {
  :root { --m-zaglavlje: 4.745rem; }           /* 75,92 = 135 − 59,08 */
  .site-header__inner { height: var(--m-zaglavlje); }
  .site-header__ellipse,
  .site-header .site-lang,
  .site-nav,
  .site-header__cta { display: none; }

  /* Mobile HP.pdf: logo 37,7..160,75 x 89,08..125,2 (123,05 x 36,12),
     vrh bez statusne trake: 89,08 − 59,08. */
  .site-logo {
    left: 2.35625rem;        /* 37.7 */
    top: 1.875rem;           /* 30 */
    width: 7.690625rem;      /* 123,05 */
    height: 2.2575rem;       /* 36,12 */
  }

  /* M01 (Pragma, 30. 9. 2026): burger na sredini logotipa, 48,06 − 9,5.
     U Mobile HP.pdf je bio 2,95 px iznad sredine (35,62 = 94,7 − 59,08). */
  .site-burger {
    display: block;
    position: absolute;
    right: 2.25rem;          /* 36 */
    top: 2.41rem;            /* 38,56 = 30 + 18,06 − 9,5 */
    width: 2.05rem;          /* 32.8 */
    height: 1.1875rem;       /* 19 */
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    z-index: 3;
  }
  /* DODIRNA META, a ne izgled.

     Burger je nacrtan 32,8 x 19 px i tako i ostaje — `MOBILE_RULES` izricito
     kaze da prag od 44 px pada tamo gdje dizajn govori drukcije, a ovdje
     govori. Ali dizajn propisuje ono STO SE VIDI; nevidljiva povrsina na koju
     prst pogadja nije njegova stvar. Nezavisna kontrola je izmjerila 33 x 19
     na svih 44 stranice i to je ispod svakog razumnog praga za prst.

     Zato se siri samo META, pseudo-elementom koji je izvan toka, pa se ni
     jedan piksel na stranici ne pomjera. Provjereno mjerenjem prije i poslije:
     okvir `.site-burger` ostaje 32,8 x 19, a `elementFromPoint` na 44 x 44
     oko njegovog sredista vraca burger.

     `::after` NE ulazi u `nth-child`, pa animacija X-a (koja gadja bas
     `nth-child(2..4)`) ostaje netaknuta. */
  .site-burger::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.75rem;          /* 44 */
    height: 2.75rem;         /* 44 */
    transform: translate(-50%, -50%);
  }
  .site-burger__bar {
    display: block;
    width: 100%;
    /* Mobile HP: tri linije debljine 2 (vektor, `width 2.0`), korak 9. Sa
       1,5 px je linija padala u JEDAN red piksela i ikona je bila tanja. */
    height: 2px;
    background: var(--c-burger, var(--c-white));   /* „Colore dell’icona del menu sul telefono" */
    transition: transform .25s ease, opacity .2s ease;
  }
  .site-burger__bar + .site-burger__bar { margin-top: calc(0.5625rem - 2px); } /* korak 9 */

  /* Zalijepljeno zaglavlje na telefonu: kompaktna traka, logo po sredini.
     Dizajn ljepljivo stanje ne crta. Na vrhu stranice zaglavlje ostaje
     `--m-zaglavlje` (30 px iznad logotipa, 10 ispod), a u traci pri skrolu
     je 12 px iznad i ispod — kao desktop, gdje je zalijepljeno 104 umjesto
     160. Klijent je javio da je i ljepljivi meni imao nepotreban prazan
     prostor. Mjesto u toku (`--ljepljivo-h`) skripta mjeri PRIJE lijepljenja
     (76 px), pa stranica ne poskoči. */
  .site-header.is-stuck .site-header__inner { height: 3.7575rem; }   /* 60,12 = 12 + 36,12 + 12 */
  .site-header.is-stuck .site-logo { top: .75rem; }                  /* 12 */
  .site-header.is-stuck .site-burger { top: 1.285rem; }              /* 20,56 = (60,12 − 19) / 2 */
  .site-header.is-stuck + .site-drawer { padding-top: 3.7575rem; }

  .site-burger[aria-expanded="true"] .site-burger__bar:nth-child(2) { transform: translateY(0.5625rem) rotate(45deg); }
  .site-burger[aria-expanded="true"] .site-burger__bar:nth-child(3) { opacity: 0; }
  .site-burger[aria-expanded="true"] .site-burger__bar:nth-child(4) { transform: translateY(-0.5625rem) rotate(-45deg); }
}

/* Prijavljeni korisnici: WordPressova admin traka (32 px, na ≤782 px 46 px)
   stoji iznad svega na vrhu prozora. Zaglavlje u toku je već ispod nje (WP
   pomjera <html> za visinu trake), ali zaglavlje koje lebdi nad herojem
   (absolute) i zalijepljeno (fixed) računaju od vrha prozora, pa ih je
   traka prekrivala: na stranicama s foto herojem nestajao je izbor jezika, a
   na telefonu vrh logotipa i burgera. Isto za mobilni zastor, koji je inače
   ispod zaglavlja. Na ≤600 px traka se skrola sa stranicom (absolute), pa
   zalijepljeno zaglavlje i njegov zastor tamo ostaju na 0. Posjetioci trake
   nemaju, pa ih ovo ne dira. */
.admin-bar .site-header--over-hero,
.admin-bar .site-header.is-stuck,
.admin-bar .site-ellipse { top: var(--wp-admin--admin-bar--height, 32px); }   /* elipsa iza menija ide sa zaglavljem */
.admin-bar .site-drawer { top: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 600px) {
  .admin-bar .site-header.is-stuck,
  .admin-bar .site-header.is-stuck + .site-drawer { top: 0; }
}

/* M24 (Pragma, 30. 9. 2026): sidro na stranici (#prenota, sidra sekcija)
   staje ISPOD ljepljivog zaglavlja, a ne pod njim. Isti pomak koriste skok
   bez skripte, dolazak s druge stranice (/contatto/#prenota) i glatko
   klizanje iz main.js (čita ovu vrijednost). Visina zalijepljenog zaglavlja
   je 104 px na desktopu i 60,12 na telefonu (gore), u rem, pa prati
   umanjenje 1024–1511. Prijavljenom uredniku se dodaje admin traka
   (`--wp-admin--admin-bar--height`, 32 / 46 px); na ≤ 600 px se traka skrola
   sa stranicom, pa se ne dodaje. `html:root` (0,1,1), a ne `html`: WP-ov
   admin-bar.css prijavljenom postavlja `html { scroll-padding-top: visina
   trake }` i pobijedio bi jednaku težinu. Skrol skripte (`scrollTo`, QA
   alati) ovo ne dira. */
html:root { scroll-padding-top: calc(6.5rem + var(--wp-admin--admin-bar--height, 0px)); }
@media (max-width: 1023px) {
  html:root { scroll-padding-top: calc(3.7575rem + var(--wp-admin--admin-bar--height, 0px)); }
}
@media screen and (max-width: 600px) {
  html:root { scroll-padding-top: 3.7575rem; }
}
/* Odredište klizanja dobija fokus (main.js), da sljedeći Tab krene iz njega;
   okvir fokusa oko cijele sekcije ne treba — polja forme imaju svoj. */
[data-smile-sidro]:focus { outline: none; }

/* ===================== mobilna ladica ===================== */

/* `z-index` je bio 60, dakle IZNAD zaglavlja (50), i time je krstic za
   zatvaranje bio nedostupan: burger nosi `z-index: 3` unutar zaglavlja, pa
   ga je zastor pokrivao cijelog. Izmjereno na 390 px, s otvorenim zastorom:
   `document.elementFromPoint` na tacki burgera vracao je `DIV.site-drawer`,
   a `click()` bez prisile nije prolazio — ni na vrhu stranice ni odskrolan
   1500 px. Escape ga zatvara, ali telefon nema Escape; jedini izlaz je bio
   otici na drugu stranicu.

   Da je zaglavlje trebalo ostati vidljivo IZNAD zastora, pise na dva mjesta
   u ovom istom fajlu: `padding-top` zastora je `--m-zaglavlje` — tacno visina
   mobilnog zaglavlja — a burger vec ima animaciju u krstic na
   `[aria-expanded="true"]` (nize). Oboje je bilo nedostizno.

   Mijenja se SAMO redoslijed slojeva, ne raspored: prvi link zastora stoji
   odmah ispod zaglavlja i prije i poslije. Provjereno na obje visine skrola, s klikom
   koji sada prolazi i zatvara zastor. Nijedna mjera na 1512 px ovo ne
   dodiruje — `.site-burger` i `.site-drawer` postoje samo ispod 1024. */
.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--c-header-bg, var(--c-bg));
  overflow-y: auto;
  padding: var(--m-zaglavlje, 8.4375rem) var(--m-side) 3rem;
}
.site-drawer[hidden] { display: none; }
.site-drawer__list {
  margin: 0 0 var(--sp-40);
  padding: 0;
  list-style: none;
}
/* Stavke mobilnog menija prate boju i debljinu stavki glavnog menija iz
   postavki (`--c-nav-drawer` puni isto polje kao `--c-nav`); prazno = bijelo,
   Light, kao u dizajnu. */
.site-drawer__list a {
  display: block;
  padding: var(--sp-12) 0;
  color: var(--c-nav-drawer, var(--c-white));
  font-size: var(--fs-card);
  font-weight: var(--nav-fw, var(--fw-light));
  text-decoration: none;
}
.site-drawer__cta { margin-bottom: var(--sp-24); }
.site-drawer__tel {
  display: block;
  margin-bottom: var(--sp-24);
  color: var(--c-drawer-tel, var(--c-white));
  font-size: var(--fs-label);
  font-weight: var(--drawer-tel-fw, var(--fw-light));   /* dosad naslijeđeno od body: 300 */
  text-decoration: none;
}
.site-drawer__lang { position: static; display: block; font-size: var(--fs-label); }
@media (min-width: 1024px) { .site-drawer { display: none !important; } }