/* =====================================================================
   KATASTOR v4 - ZAGLAVLJE, IZBORNIK I PODNOZJE (JEDINI IZVOR)
   -------------------------------------------------------------------
   Ucitava se ZADNJI na oba okruzenja:
     - WordPress: enqueue u shoptimizer-child/v4-most.php, poslije v4.css
     - landing /provjera-cestice/ (stoji izvan WP-a): <link> u index.php i
       rezultat.php, poslije ns.css
   Razlog: ns.css ima stariju kopiju istih pravila, a v4-dopune.css se ucitavao
   po predlosku - podnozje je zato izgledalo razlicito po stranicama. Sve buduce
   izmjene zaglavlja i podnozja idu ISKLJUCIVO ovamo (bitno prije prijevoda).
   Konsolidirano 18.08.2026.
   ===================================================================== */

/* --- osnovne vrijednosti gornje trake, prekidaca jezika i podnozja ---
   Ponovljene ovdje jer landing /provjera-cestice/ ima vlastiti ns.css sa starijom
   kopijom istih pravila; ova datoteka se ucitava POSLIJE njega, pa je mjerodavna. */
.ns-topbar{background:var(--navy-ink)}
.ns-topbar-in{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;height:40px}
.ns-topbar-l,.ns-topbar-d{display:flex;align-items:center;gap:22px}
.ns-topbar a{display:flex;align-items:center;gap:7px;text-decoration:none;color:#b9c7db;font-size:.8rem;line-height:1.2;font-weight:500;white-space:nowrap}
.ns-topbar a:hover{color:#fff}
.ns-topbar a svg{color:#7e93b3}
.ns-topbar-l a,.ns-topbar-d a{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ns-topbar-l a:first-child{max-width:150px}
.ns-ftr ul{list-style:none;display:grid;gap:9px}
.ns-ftr-dno-in{max-width:1140px;margin:0 auto;padding:18px 20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.78rem}
.ns-ftr-izrada{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.62)}.ns-ftr-izrada a{display:inline-flex;align-items:center;color:rgba(255,255,255,.9);text-decoration:none;font-weight:600}.ns-ftr-izrada a:hover{color:#fff;text-decoration:underline}.ns-ftr-izrada img{height:16px;width:auto;display:block}
.ns-jezik{position:relative;display:inline-flex}
.ns-jezik-gumb{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0 2px;font:inherit;font-size:.78rem;color:inherit;cursor:pointer;opacity:.85}
.ns-jezik-gumb:hover{opacity:1}
.ns-jezik-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;background:#fff;border:1px solid rgba(16,24,40,.1);border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,.14);padding:6px;display:none;z-index:60}
.ns-jezik.otvoren .ns-jezik-pop{display:block}
.ns-jezik-pop a{display:block;padding:8px 11px;border-radius:8px;font-size:.85rem;color:#1e3a5f;text-decoration:none}
.ns-jezik-pop a:hover{background:#f2f5fa}
.ns-jezik-pop a.aktivan{font-weight:700;background:#f2f5fa}

/* =====================================================================
   ZAGLAVLJE I PODNOZJE - JEDINI IZVOR (konsolidirano 18.08.2026.)
   Pravila su prije stajala u wp-content/themes/shoptimizer-child/assets/v4-dopune.css,
   koji se ucitava po predlosku i dolazi zadnji. Preseljena su ovamo, u dijeljeni sloj,
   da izbornik i podnozje izgledaju jednako na svakoj stranici i da prijevod na druge
   jezike ima jedno mjesto za odrzavanje.
   ===================================================================== */

/* --- traka jezika (tamna gornja traka) ---
   `.ns-jezik-gumb{color:inherit}` gore u datoteci, a traka boju postavlja samo na <a>
   (`.ns-topbar a`). Gumb je <button> pa je nasljedivao tamnu boju - tamno na tamnome. */
.ns-topbar .ns-jezik-gumb{color:#b9c7db}
.ns-topbar .ns-jezik-gumb:hover,
.ns-topbar .ns-jezik-gumb:focus-visible{color:#fff}
.ns-topbar .ns-jezik-gumb svg{color:#7e93b3}
/* Popis jezika: `.ns-topbar a:hover{color:#fff}` je specificniji od pravila za popis,
   pa je stavka na dodir postajala bijela na svijetloj podlozi. */
.ns-topbar .ns-jezik-pop a{color:#1e3a5f}
.ns-topbar .ns-jezik-pop a:hover,
.ns-topbar .ns-jezik-pop a:focus{color:#1e3a5f;background:#f2f5fa}
.ns-topbar .ns-jezik-pop a.aktivan{color:#2e9e3f;font-weight:700}
/* Padajuci popis mora biti iznad ljepljivog pill izbornika. */
.ns-topbar{position:relative;z-index:70}
.ns-jezik{z-index:75}
.ns-jezik-pop{z-index:120}

/* --- glavni CTA u pill izborniku: samo ikona ---
   S natpisom "Naruci vlasnicki list" gumb je razvlacio izbornik i lomio ga u drugi red.
   Natpis ostaje u kodu radi citaca ekrana i SEO-a. */
.ns-pill .ns-cta span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ns-pill .ns-cta{padding:11px 13px;gap:0}

/* --- traka pretrage ispod pill izbornika (otvara je lupa) --- */
.ns-search{max-width:760px;margin:10px auto 0;padding:0 16px}
.ns-search form{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-soft);border-radius:999px;box-shadow:0 10px 30px rgba(14,29,46,.12);padding:8px 10px 8px 18px}
.ns-search svg{color:var(--muted);flex:none}
.ns-search input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:.95rem;color:var(--ink)}
.ns-search input:focus{outline:none}
.ns-search .btn{padding:9px 20px;font-size:.88rem}

/* --- podnozje: popisi ---
   Popisi su nasljedivali preglednikov padding-left pa su stavke bile uvucene u odnosu
   na naslov stupca. */
.ns-ftr ul{padding-left:0;margin-left:0;list-style:none}
.ns-ftr li{margin-left:0}
/* NALAZ 45: nejednoliki razmaci. Stupac 2 ima tri skupine (naslov + popis), a `h4` nije
   imao gornji odmak - druga i treca skupina lijepile su se uz prethodni popis, dok je
   razmak medju stupcima 36 px. Sada je ritam isti u svim stupcima. */
.ns-ftr ul + h4{margin-top:26px}
.ns-ftr-in > div{align-content:start}

/* --- podnozje: drustvene mreze ---
   Na mobitelu su Facebook i Instagram stajali jedan ISPOD drugoga (tema je nadjacavala
   flex smjer). Osiguravamo red i jednake razmake bez obzira na predlozak. */
.ns-ftr-soc{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.ns-ftr-soc a{display:inline-grid!important;place-items:center;width:36px;height:36px;flex:none;margin:0}
.ns-ftr-soc a svg{display:block}

/* --- podnozje: donja traka ---
   Copyright ide u svoj red, izrada i kartice ispod - inace se "Web i softver" stisne
   uz copyright i tesko se cita. */
.ns-ftr-dno-in{flex-wrap:wrap;row-gap:14px}
.ns-ftr-dno-in > :first-child{flex:1 1 100%}
.ns-ftr-izrada{gap:12px}
.ns-ftr-izrada img{height:30px}
.ns-ftr-izrada a:first-of-type img{height:46px} /* Jupiter Media - bijeli, treba vise prostora */
@media(max-width:900px){
  .ns-ftr-izrada img{height:26px}
  .ns-ftr-izrada a:first-of-type img{height:38px}
}
/* Na uskim ekranima sve mora stati u JEDAN red (tekst je skracen na "Web i softver"). */
@media(max-width:560px){
  .ns-ftr-izrada{flex-wrap:nowrap;gap:8px;white-space:nowrap}
  .ns-ftr-izrada img{height:24px}
  .ns-ftr-izrada a:first-of-type img{height:32px}
}
@media(max-width:380px){
  .ns-ftr-izrada{gap:6px;font-size:.8rem}
  .ns-ftr-izrada img{height:21px}
  .ns-ftr-izrada a:first-of-type img{height:28px}
}
/* Razmak medju stupcima na mobitelu vodi grid `gap` iz `.ns-ftr-in` - dodatni
   margin-bottom se NE dodaje (prijasnje pravilo je gadjalo klase `.ns-ftr-kol` /
   `.ns-ftr-col` kojih u podnozju nema, a `.ns-ftr > div` su omotaci, ne stupci). */
@media(max-width:880px){.ns-ftr-in{row-gap:34px}}
@media(max-width:560px){.ns-ftr-in{row-gap:30px;padding-top:44px}}