/* ==== Globalna tema / osnove ==== */
:root{
  --bg:#0b1220; --ink:#e5e7eb; --muted:#94a3b8;
  --panel:#0f172a; --ring:#1e293b;
  --gradA:#38bdf8; --gradB:#22d3ee;
  --page-max:1200px; --page-pad:16px;
}
html,body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 system-ui,Segoe UI,Roboto,Inter,sans-serif;
}
.wrap{ max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad); }

/* ==== NAV (isti na svim stranicama) ==== */
nav{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg,#0b1220 0%,#0b1220cc 100%);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ring);
}
.navwrap{
  max-width:var(--page-max); margin:0 auto; padding:10px var(--page-pad);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.navitem{ position:relative }
.navlink{
  display:block; padding:10px 12px; border-radius:10px;
  color:#e5e7eb; border:1px solid transparent;
  text-decoration:none;
}
.navlink:hover{ background:#0c1a2a; border-color:#233144 }
.navlink.active{ background:#0c1a2a; border-color:#2a3a56 }
.caret{ margin-left:6px; opacity:.9 }

/* ==== Submenu (hover + click) ==== */
.has-sub .submenu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:240px;
  background:var(--panel); border:1px solid var(--ring); border-radius:12px; padding:8px;
  display:none; flex-direction:column; box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.has-sub:hover > .submenu,
.has-sub.open > .submenu{ display:flex; }
.submenu a{
  display:block; padding:8px 10px; border-radius:8px; color:#e5e7eb; text-decoration:none;
}
.submenu a:hover{ background:#0c1a2a }

/* ==== Shop ikona ==== */
.shop-ico{ width:18px; height:18px; vertical-align:-3px; margin-right:6px }

/* ==== Responsivno ==== */
@media (max-width: 900px){
  .navwrap{ gap:8px }
  .has-sub .submenu{ min-width:200px }
}

/* (opcionalno) Footer skladan s nav-om */
footer .muted{ color:var(--muted) }

/* ==== Ilustracije u tekstu ==== */
.illus{
  margin:14px 0; border:1px solid #1e293b; border-radius:12px;
  overflow:hidden; background:#0a1624;
}
.illus img{ display:block; width:100%; height:auto; }
.illus figcaption{ font-size:12px; color:#9fb2d4; padding:6px 10px; }

@media (min-width:900px){
  .illus{
    display:grid; grid-template-columns: 1fr 1fr; align-items:center;
  }
  .illus img{ grid-column:1/2 }
  .illus figcaption{ grid-column:2/3 }
  /* Alternirajuća varijanta – slika desno, opis lijevo */
  .illus.illus-alt img{ grid-column:2/3 }
  .illus.illus-alt figcaption{ grid-column:1/2 }
}

/* ==== Kartice na početnoj ==== */
/* Ako kartice NISU unutar .wrap, ovaj blok ih veže na širinu stranice. 
   Ako ih ubaciš unutar .wrap u HTML-u, slobodno makni max-width/margin/padding ispod. */
.cards{
  display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0,1fr));
  max-width:var(--page-max); margin:16px auto; padding:0 var(--page-pad);
}
.card{
  background:#0f172a; border:1px solid #1e293b; border-radius:14px; padding:14px;
}
.card h3{ margin:0 0 6px; font-weight:800; color:#cbd5e1 }
.card p{ margin:0; color:#a7b5c8 }
@media (max-width:900px){ .cards{ grid-template-columns: 1fr } }

/* ==== Gumb (npr. u karticama) ==== */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:.7rem;
  border:1px solid #24324a; background:#0c1a2a; color:#e5e7eb;
  text-decoration:none; font-weight:700;
}
.btn:hover{ border-color:#2d4264; background:#0e2540 }

/* Primjer: responzivna mreža kolona u footeru */
.fcols{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1000px){
  .fcols{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:620px){
  .fcols{ grid-template-columns: 1fr; }
}

/* Naslovi i liste u footeru */
.ftitle{ margin:0 0 8px; font-weight:800; color:#cbd5e1; font-size:14px }
.flist{ list-style:none; margin:0; padding:0 }
.flist li{ margin:4px 0 }
.flist a{ color:#e5e7eb; text-decoration:none }
.flist a:hover{ text-decoration:underline }
.muted{ color:#94a3b8 }

/* Osiguraj da se kartice ne pozicioniraju "izvan toka" */
.cards{ position: static; clear: both; }

/* Prikaži ilustracije samo kad su unutar glavnog kontejnera .wrap */
.illus{ display:none; }
.wrap .illus{ display:block; }

#site-nav{ box-shadow: 0 1px 0 rgba(0,0,0,.04); border-bottom: none; }


:root{ --site-surface: #ffffff; } /* ako stranica nije čisto bijela, promijeni ovdje */

/* Force neprozirnu podlogu na glavnom meniju */
#site-nav{
  background:#0b1220 !important;
  opacity:1 !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
#site-nav .navlink{ color:#e5e7eb; }
#site-nav .navlink:hover{ color:#ffffff; }