/* Kužiš — shared mobile header/nav styles.
   Loaded on every page so the mobile menu looks and behaves identically
   everywhere. Edit ONLY this file to change menu spacing, underline
   position, or the CTA button style site-wide — do not re-add page-local
   copies of these rules. Placed after each page's own <style> block so it
   wins the cascade (same selectors, same !important, later wins). */

/* ==========================================================================
   MOBILNI MENI — JEDINI IZVOR ISTINE (2026-08-22)
   Prije ovoga je svaka stranica imala svoju kopiju ovih pravila u vlastitom
   inline <style> bloku, pa je meni izgledao drugačije na Početnoj nego na
   ostalim stranicama (panel je kretao od vrha ekrana i prekrivao logo i X).
   Ovaj blok pokriva SVA tri markup obrasca koja postoje na sajtu:
     - Početna:       input#kz-nav-toggle → a.hp-logo-link → label.kz-hamb → nav.kz-nav
     - core stranice: a > img → input#kz-nav-toggle → label.kz-hamb → nav.kz-nav
     - blog članci:   header.site-header, CTA ima klasu .cta (ne .kz-nav-cta)
   Sve je !important i dolazi zadnje u kaskadi pa nadjačava lokalne kopije.
   ========================================================================== */
@media (max-width:860px){
  html body #kz-nav-toggle{ display:none!important; }

  /* Hamburger / X — z-index iznad panela da X ostane vidljiv dok je meni otvoren. */
  html body .kz-hamb{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:5px!important;
    width:36px!important;
    height:36px!important;
    margin-left:auto!important;
    flex-shrink:0!important;
    cursor:pointer!important;
    position:relative!important;
    z-index:70!important;
  }
  html body .kz-hamb span{
    display:block!important;
    width:24px!important;
    height:2.5px!important;
    background:#171412!important;
    border-radius:2px!important;
    transition:transform .2s ease,opacity .2s ease!important;
  }
  html body #kz-nav-toggle:checked ~ .kz-hamb span:nth-child(1){ transform:translateY(7.5px) rotate(45deg)!important; }
  html body #kz-nav-toggle:checked ~ .kz-hamb span:nth-child(2){ opacity:0!important; }
  html body #kz-nav-toggle:checked ~ .kz-hamb span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg)!important; }

  /* Header (logo + X) mora ostati iznad panela. */
  html body header, html body header.site-header{ z-index:60!important; }

  /* Panel kreće ISPOD headera (--kz-header-h postavlja nav-behavior.js). */
  html body .kz-nav{
    display:none!important;
    position:fixed!important;
    top:var(--kz-header-h,72px)!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
    flex-wrap:nowrap!important;
    gap:0!important;
    background:#fff!important;
    padding:28px 24px 40px!important;
    margin:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    z-index:40!important;
  }
  html body #kz-nav-toggle:checked ~ .kz-nav{ display:flex!important; }

  /* Linkovi: širina = širina riječi (zato se žuta crta podvlači samo ispod
     riječi, a ne preko cijele širine ekrana) i centrirani su. */
  html body .kz-nav a:not(.kz-nav-cta):not(.cta){
    width:auto!important;
    max-width:100%!important;
    align-self:center!important;
    text-align:center!important;
    padding:16px 0 5px!important;
    margin:0 0 6px!important;
    font-size:24px!important;
    line-height:1.2!important;
  }
  html body .kz-nav a.active{
    padding-top:16px!important;
    padding-bottom:5px!important;
  }

  /* CTA — veliki gumb na dnu menija, centriran. */
  html body .kz-nav a.kz-nav-cta,
  html body .kz-nav a.cta{
    box-sizing:border-box!important;
    width:auto!important;
    max-width:calc(100% - 4px)!important;
    align-self:center!important;
    padding:15px 44px!important;
    margin-top:20px!important;
    border-radius:10px!important;
    border:2px solid #171412!important;
    background:#FFD048!important;
    color:#171412!important;
    box-shadow:0 6px 16px rgba(23,18,15,.22)!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:0!important;
  }
  /* Footer CTA na mobitelu: kao gumb se tekst lomio u dva reda i izgledalo je
     lose, pa je tamo obican link kao i ostale stavke u footeru. */
  html body footer .kz-foot-cta{
    background:none!important;
    border:none!important;
    box-shadow:none!important;
    padding:0!important;
    margin-top:0!important;
    border-radius:0!important;
    color:rgba(255,255,255,.7)!important;
    font:400 14.5px Inter!important;
    align-self:flex-start!important;
    display:inline!important;
  }

  html body .kz-nav a.kz-nav-cta::after,
  html body .kz-nav a.cta::after{
    content:"Javite se"!important;
    font:700 17px Inter!important;
    color:#171412!important;
    position:static!important;
    width:auto!important;
    height:auto!important;
    background:none!important;
    border-radius:0!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* Desktop nav hover — plain yellow line, NO animation (Dorin zahtjev 2026-08-22).
   Applies to both nav markup patterns used sitewide: inline-styled links
   (.kz-nav, on Pocetna/Mentorstvo/etc.) and class-based links (header.site-header,
   on blog articles). The line is always laid out (width:100%) and only toggles
   opacity, so nothing slides, swipes or shifts. Because the link itself is
   shrink-wrapped to its text, width:100% == širina riječi. The inline
   style-hover attribute on some pages' nav links is overridden here with
   !important so the old lift/underline can't come back. */
.kz-nav a:not(.kz-nav-cta):not(.cta),
header.site-header nav a:not(.cta){
  position:relative;
  padding-bottom:3px;
  transition:none!important;
}
.kz-nav a:not(.kz-nav-cta):not(.cta)::after, header.site-header nav a:not(.cta)::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0px;
  width:100%;
  height:2.5px;
  background:#FFD048;
  border-radius:2px;
  opacity:0;
  transform:none;
  transition:none;
}
.kz-nav a:not(.kz-nav-cta):not(.cta):hover, header.site-header nav a:not(.cta):hover{
  color:#171412!important;
  text-decoration:none!important;
  transform:none!important;
  transition:none!important;
}
.kz-nav a:not(.kz-nav-cta):not(.cta):hover::after, header.site-header nav a:not(.cta):hover::after{
  opacity:1;
}
/* Aktivna stavka: !important jer bazno pravilo iznad ima :not(.kz-nav-cta):not(.cta)
   pa je specificnije od golog .active — bez ovoga zuta crta nestane. */
.kz-nav a.active::after, header.site-header nav a.active::after{
  opacity:1!important;
}
.kz-nav a.active, header.site-header nav a.active{
  border-bottom:none!important;
  padding-bottom:3px!important;
}
/* CTA button hover (also dead via style-hover on inline-styled pages before this fix). */
.kz-nav a.kz-nav-cta:hover,
header.site-header nav a.cta:hover{
  transform:translateY(-2px);
}

.hp-hero-btn:hover{
  transform:translateY(-2px);
}

.usluga-cta-btn:hover{
  transform:translateY(-2px);
}

/* ==========================================================================
   DVOSTRUKI SCROLLER (Dorin bug 2026-08-22)
   Svaka DC stranica ima omotac <div style="...;overflow-x:hidden"> oko cijelog
   sadrzaja. Po CSS specifikaciji, ako je JEDNA os razlicita od 'visible',
   druga se racuna kao 'auto' — pa taj div postane vlastiti scroll kontejner i
   nacrta DRUGU vertikalnu traku pored trake stranice.
   'overflow-x:clip' je jedina vrijednost koja se smije pariti s 'visible',
   pa i dalje rezemo vodoravno, ali bez druge trake.
   NE mijenjaj ovo natrag u hidden. */
/* DC runtime normalizira inline stil pa atribut moze biti zapisan i sa
   razmakom ("overflow-x: hidden") i bez njega - pokrivamo oba oblika. */
html body div[style*="overflow-x:hidden"],
html body div[style*="overflow-x: hidden"]{
  overflow-x:clip!important;
  overflow-y:visible!important;
}