/* ========== Global vars & base ========== */
:root{
  /* Ako koristiš CSS-pozadinu za hero: */
  --hero-image: url('../images/header.webp');

  /* Boje i tipografija */
  --brand: #0ea5e9;
  --text: #0b1220;
  --muted: #475569;
  --bg: #ffffff;

  /* Fokus (WCAG) */
  --focus: #22d3ee;
}

*{box-sizing:border-box}
html{
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}
html,body{
  margin:0; padding:0;
  font-family: system-ui,-apple-system,'Segoe UI',Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}
img{max-width:100%; height:auto; display:block}

/* Bolji fokus za tastaturu (a11y) */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Skriveno za ekran, ali čitljivo čitačima ekrana */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Skip link – pomaže pristupačnosti i SEO indirektno */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 16px; top: 16px; width:auto; height:auto;
  background:#fff; color:#000; padding:10px 14px; border-radius:10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  z-index: 10000;
}

/* ========== Navbar (hamburger varijanta) ========== */
.navbar{
  position:absolute; top:0; left:0; right:0;
  display:flex; flex-wrap:wrap;                /* dozvoli prelamanje */
  align-items:center; gap:22px;
  padding:22px 32px; color:#fff; font-weight:600; z-index:10;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  will-change: transform;
}
.navbar .brand img{
  height:96px; width:auto; display:block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* Hamburger dugme (skriveno na desktopu) */
.menu-toggle{
  display:none;
  font-size:28px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  margin-left:auto;               /* gurne ga desno uz logo */
  line-height:1;
  padding:6px 8px;
}

/* Desni stub: meni gore, jezički preklopnik ispod */
.navbar .nav-right{
  margin-left:auto;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:12px;                        /* veći razmak menu ↔ language */
}

/* Glavni meni */
.navbar .menu{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.navbar .menu a{
  color:#fff; text-decoration:none; opacity:.95;
  transition: opacity .2s ease, color .2s ease, border-color .2s ease;
}
.navbar .menu a:hover{ color:#e6f6ff; opacity:1 }
.navbar .menu a[aria-current="page"],
.navbar .menu a.active{
  border-bottom:2px solid #7dd3fc;
}

/* Jezički preklopnik ispod menija */
.navbar .lang-switcher{
  font-size:14px; line-height:1;
  display:flex; align-items:center; gap:8px;
  opacity:.95;
}
.navbar .lang-switcher a{
  color:#fff; text-decoration:none;
}
.navbar .lang-switcher a[aria-current="page"],
.navbar .lang-switcher a[aria-current="true"]{
  border-bottom:2px solid #7dd3fc;
}

/* --- Responsive meniji (hamburger) --- */
@media (max-width: 980px){
  .navbar{ padding:18px 20px; gap:18px }
  .navbar .menu{ gap:20px }
}

@media (max-width: 760px){
  .menu-toggle{ display:block }     /* prikaži hamburger */

  /* desni stub prebacujemo u „panel” koji se otvara */
  .navbar .nav-right{
    display:none;                   /* zatvoreno po defaultu */
    width:100%;
    background:rgba(0,0,0,.82);
    backdrop-filter:saturate(120%) blur(2px);
    border-radius:10px;
    padding:12px;
    margin-top:8px;
  }
  .navbar .nav-right.open{ display:flex }

  .navbar .menu{
    flex-direction:column;
    align-items:flex-end;
    gap:14px;
  }
  .navbar .lang-switcher{
    align-self:flex-end;
    margin-top:4px;
  }
}

@media (max-width: 520px){
  .navbar .menu{ align-items:center }
  .navbar .lang-switcher{ align-self:center }
}

/* ========== Hero (background-image varijanta) ========== */
.hero{
  height:70vh; min-height:420px; position:relative; overflow:hidden;
  background-image: var(--hero-image);
  background-size: cover; background-position: center;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35) 40%, rgba(0,0,0,.25));
}
.hero-inner{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:0 24px; color:white; z-index:1;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.hero h1{
  font-size: clamp(34px, 5vw, 64px);
  margin: 0 0 12px 0; font-weight: 800; letter-spacing: .4px;
}
.hero p{
  font-size: clamp(16px, 2.2vw, 24px);
  max-width: 920px; margin: 0 auto 10px; opacity:.92;
}

/* Manja hero varijanta (za interne stranice: .hero.hero--sm) */
.hero.hero--sm{ height:40vh; min-height:320px }

/* ========== Hero (IMG fallback varijanta) ========== */
/* Ako želiš <img class="hero-bg"> umesto CSS pozadine: */
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position:center;
  z-index: 0;
}
/* Overlay ostaje preko slike */
.hero > .hero-inner{ position:absolute; z-index:1 }

/* ========== Footer ========== */
.footer{
  background:#0b1220; color:#cbd5e1; padding:32px;
}
.footer-inner{
  max-width:1100px; margin:0 auto;
  display:flex; gap:24px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
}
.footer h3{ color:white; margin:0 0 6px 0 }
.footer a{ color:#60a5fa; text-decoration:none }
.footer a:hover{ text-decoration:underline }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.org a{ color:#cbd5e1 }
.org a:hover{ color:#e2e8f0; text-decoration:underline }

.copy{
  font-size:12px; color:#94a3b8; text-align:center; margin-top:12px
}

/* ========== Kontejneri / layout helperi ========== */
.wrap{ max-width:1200px; margin:40px auto; padding:0 20px }

/* ========== Performanse i preferencije korisnika ========== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ========== Helpful utilities ========== */
.link-cta{
  color:#7dd3fc; font-weight:700; text-underline-offset: 3px;
}
.link-cta:hover{ text-decoration: underline }

/* Poboljšanje kontrasta za hover na svetloj pozadini ako zatreba */
a:hover{ filter: saturate(1.05) }

/* Print-friendly sitnice (SEO ne direktno, ali UX) */
@media print{
  .navbar, .hero::before { display:none !important }
  .hero{ height:auto; min-height:auto; background:none }
}

/* === Filter kit (global) ================================================ */
/* Filteri */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
}

/* Svaka grupa filtera */
.filters .group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 14px 14px; /* prostor gore za labelu */
  background: white;
}

/* Labela */
.filters .group .label {
  position: absolute;
  top: 0;
  left: 14px;
  transform: translateY(-50%);
  font-weight: 700;
  color: #0b1220;
  font-size: 13px;
  padding: 0 6px;
  background: linear-gradient(
    to bottom,
    #f8fafc 0%,   /* boja wrappera */
    white 100%    /* boja grupe */
  );
}

/* Tablete/telefon: grupe idu u kolonu, zadržavaju preglednost */
@media (max-width: 720px){
  .filters{ gap:12px }
  .filters .group{ width:100% }
}

/* Chip dugmad (checkbox/radio) */
.filters label{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid #e2e8f0; border-radius:999px;
  background:#fff; cursor:pointer; font-size:14px; line-height:1;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s linear;
  user-select:none;
}
.filters input{ /* checkbox/radio vizuelno čitljiviji */
  accent-color:#38bdf8; width:16px; height:16px;
}
.filters input:focus-visible + span,
.filters label:focus-visible{
  outline:3px solid #22d3ee; outline-offset:2px; border-radius:999px;
}
.filters input:checked + span,
.filters label:has(input:checked){
  background:#ecfeff; border-color:#bae6fd; box-shadow:0 1px 0 rgba(2,12,27,.04) inset;
}

/* Ikonice/tekstići unutar labela (opciono) */
.filters label .hint{ font-size:12px; color:#64748b; margin-left:2px }

/* Dugme "Očisti" sa brojačem selekcija */
.btn-clear{
  margin-left:auto; border:1px solid #e2e8f0; background:white;
  border-radius:10px; padding:8px 12px; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; gap:8px;
  transition: background .15s ease, border-color .15s ease;
}
.btn-clear:hover{ background:#f1f5f9 }
.btn-clear .count{
  min-width:20px; height:20px; border-radius:999px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; background:#0ea5e9; color:#fff; font-weight:700;
}

/* Male util oznake (npr. na karticama) */
.tag{
  font-size:12px; background:#ecfeff; border:1px solid #bae6fd; color:#0369a1;
  padding:4px 8px; border-radius:999px; white-space:nowrap;
}

/* Standardna responsive mreža rezultata (možeš globalno koristiti) */
.results{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
.card{
  grid-column:span 12;
  background:#fff; border:1px solid #e2e8f0; border-radius:16px; overflow:hidden;
  box-shadow:0 4px 20px rgba(2,12,27,.04);
}
@media (min-width:680px){ .card{ grid-column:span 6 } }
@media (min-width:1000px){ .card{ grid-column:span 4 } }

/* Scroll senka ako želiš „prilepljene“ filtere (uključi sticky gore) */
.filters::after{
  content:''; position:absolute; left:0; right:0; bottom:-10px; height:10px;
  pointer-events:none; background:linear-gradient(to bottom, rgba(15,23,42,.06), rgba(15,23,42,0));
  opacity:0; transition:opacity .2s ease;
}
.filters.is-stuck::after{ opacity:1 }

/* Dark mode (opciono) */
@media (prefers-color-scheme: dark){
  .filters{ background:#0b1220; border-color:#1f2a37 }
  .filters .group{ background:#0f172a; border-color:#1f2a37 }
  .filters .label{ background:#0b1220; border-color:#1f2a37; color:#cbd5e1 }
  .filters label{ background:#0f172a; border-color:#1f2a37; color:#e2e8f0 }
  .filters input{ accent-color:#7dd3fc }
  .btn-clear{ background:#0f172a; border-color:#1f2a37; color:#e2e8f0 }
  .btn-clear:hover{ background:#0b1220 }
  .tag{ background:#072b35; border-color:#0b4a5a; color:#8ce1ff }
}