/* =========================================================
   TRAKA PRISTUPAČNOSTI (sticky, vrh stranice)
   ========================================================= */
.a11y-traka{
  background:var(--boja-primarna-tamnija);
  color:#fff;
  padding:0.5rem 0;
  font-size:0.9rem;
}
html.vk .a11y-traka{ background:#000; border-bottom:2px solid #FFD400; }
.a11y-traka .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
}
.a11y-traka__grupa{ display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.a11y-traka__label{ font-weight:700; margin-right:0.3rem; }
.a11y-btn{
  background:rgba(255,255,255,0.12);
  color:#fff;
  border:1px solid rgba(255,255,255,0.5);
  border-radius:6px;
  padding:0.35rem 0.7rem;
  font-size:0.9rem;
  font-weight:700;
  cursor:pointer;
  line-height:1.2;
}
.a11y-btn:hover{ background:rgba(255,255,255,0.28); }
.a11y-btn[aria-pressed="true"]{ background:var(--boja-akcent); color:#16191F; border-color:var(--boja-akcent); }
.a11y-traka__kontakt a{ color:#fff; font-weight:700; text-decoration:none; }
.a11y-traka__kontakt a:hover{ text-decoration:underline; }
.a11y-traka__kontakt{ display:flex; gap:1.2rem; flex-wrap:wrap; }

@media (max-width: 600px){
  .a11y-traka{ font-size:0.78rem; padding:0.4rem 0; }
  .a11y-traka .container{ gap:0.4rem; }
  .a11y-traka__label{ display:none; }
  .a11y-btn{ padding:0.28rem 0.5rem; font-size:0.78rem; }
  .a11y-traka__grupa{ gap:0.3rem; }
  .a11y-traka__kontakt{ gap:0.8rem; font-size:0.78rem; }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  padding:var(--razmak-sm) 0;
  border-bottom:1px solid var(--boja-granica);
  background:var(--boja-pozadina);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--razmak-md);
  flex-wrap:wrap;
}
.site-brand{ display:flex; align-items:center; gap:0.9rem; text-decoration:none; }
.site-brand img{ max-height:64px; width:auto; }
.site-brand__tekst{ display:flex; flex-direction:column; line-height:1.25; }
.site-brand__naziv{ font-size:1.25rem; font-weight:800; color:var(--boja-primarna); }
html.vk .site-brand__naziv{ color:var(--boja-tekst); }
.site-brand__podnaslov{ font-size:0.9rem; color:var(--boja-tekst-suptilan); }

.glavni-meni{ list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; flex-wrap:wrap; }
.glavni-meni a{
  color:var(--boja-tekst);
  text-decoration:none;
  font-weight:700;
  font-size:1.05rem;
  padding:0.4rem 0.1rem;
  border-bottom:3px solid transparent;
}
.glavni-meni a:hover, .glavni-meni .current-menu-item > a{
  color:var(--boja-primarna);
  border-bottom-color:var(--boja-akcent);
}
html.vk .glavni-meni a:hover, html.vk .glavni-meni .current-menu-item > a{ color:var(--boja-tekst); }

.meni-toggle{
  display:none;
  background:var(--boja-primarna);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:0.6rem 0.9rem;
  font-weight:700;
  cursor:pointer;
}
@media (max-width: 880px){
  .meni-toggle{ display:inline-flex; align-items:center; gap:0.5rem; }
  .glavni-meni{
    flex-direction:column;
    width:100%;
    display:none;
    gap:0.2rem;
    border-top:1px solid var(--boja-granica);
    padding-top:0.75rem;
    margin-top:0.75rem;
  }
  .glavni-meni.otvoren{ display:flex; }
  .site-header .container{ position:relative; }
}

/* =========================================================
   HERO / NASLOVNICA
   ========================================================= */
.hero{
  background:linear-gradient(135deg, var(--boja-primarna) 0%, var(--boja-primarna-tamnija) 100%);
  color:#fff;
  padding:var(--razmak-xl) 0;
}
html.vk .hero{ background:#000; border-bottom:3px solid #FFD400; }
.hero .container{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--razmak-lg); align-items:center; }
@media (max-width:900px){ .hero .container{ grid-template-columns:1fr; } }
.hero h1{ color:#fff; margin-bottom:0.75rem; }
.hero p{ font-size:1.15rem; color:#E7ECF5; max-width:52ch; }
html.vk .hero p{ color:#fff; }
.hero__akcije{ display:flex; gap:1rem; margin-top:1.5rem; flex-wrap:wrap; }
.hero__karta{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:var(--radius);
  padding:var(--razmak-md);
}

/* =========================================================
   ČLANAK — sadržaj + traka za čitanje naglas (TTS)
   ========================================================= */
.clanak-alat-traka{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  align-items:center;
  background:var(--boja-pozadina-alt);
  border:1px solid var(--boja-granica);
  border-radius:var(--radius);
  padding:0.9rem var(--razmak-sm);
  margin-bottom:var(--razmak-md);
}
html.vk .clanak-alat-traka{ background:#0A0A0A; }
.tts-status{ font-size:0.9rem; color:var(--boja-tekst-suptilan); }
.tts-word{ background: color-mix(in srgb, var(--boja-akcent) 40%, transparent); border-radius:3px; }

.entry-content{ font-size:1.08rem; }
.entry-content p{ margin:0 0 1.2em; }
.entry-content h2, .entry-content h3{ margin-top:1.6em; }
.entry-content img{ border-radius:var(--radius); margin:1em 0; }
.entry-content a{ font-weight:600; }
.entry-meta{ display:flex; gap:1rem; flex-wrap:wrap; color:var(--boja-tekst-suptilan); font-size:0.95rem; margin-bottom:1.2rem; }

/* =========================================================
   AUDIO PLAYER — Kameni vrhunci
   ========================================================= */
.audio-kartica{
  display:flex;
  gap:var(--razmak-sm);
  background:var(--boja-pozadina-alt);
  border:1px solid var(--boja-granica);
  border-radius:var(--radius);
  padding:var(--razmak-sm);
  align-items:flex-start;
}
html.vk .audio-kartica{ border-width:2px; }
.audio-kartica__broj{
  flex:0 0 auto;
  width:64px; height:64px;
  border-radius:50%;
  background:var(--boja-primarna);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1rem; text-align:center;
}
html.vk .audio-kartica__broj{ background:var(--boja-akcent); color:#000; }
.audio-kartica__body{ flex:1; min-width:0; }
.audio-kartica__naslov{ margin:0 0 0.2rem; font-size:1.1rem; }
.audio-kartica__datum{ color:var(--boja-tekst-suptilan); font-size:0.9rem; margin-bottom:0.2rem; }
.audio-kartica__objavljeno{ color:var(--boja-tekst-suptilan); font-size:0.8rem; margin-bottom:0.6rem; }

.aplejer{
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-wrap:wrap;
  background:var(--boja-pozadina);
  border:1px solid var(--boja-granica);
  border-radius:8px;
  padding:0.6rem 0.8rem;
}
.aplejer__play{
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background:var(--boja-akcent);
  color:#16191F;
  font-size:1.1rem;
  cursor:pointer;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.aplejer__play:hover{ background:var(--boja-akcent-tamnija); }
.aplejer__vrijeme{ font-variant-numeric:tabular-nums; font-size:0.9rem; color:var(--boja-tekst-suptilan); min-width:88px; }
.aplejer__traka{ flex:1; min-width:120px; height:8px; }
.aplejer__brzina{ font-size:0.85rem; border:1px solid var(--boja-granica); border-radius:6px; padding:0.3rem 0.4rem; background:var(--boja-pozadina); color:var(--boja-tekst); }
.aplejer__preuzmi{ font-size:0.9rem; white-space:nowrap; }

.arhiva-audio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--razmak-sm); }
@media (max-width:700px){ .arhiva-audio-grid{ grid-template-columns:1fr; } }

.godina-filter{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:var(--razmak-md); }
.godina-filter__stavka{
  display:inline-flex;
  align-items:center;
  background:var(--boja-pozadina-alt);
  border:1px solid var(--boja-granica);
  color:var(--boja-tekst-suptilan);
  font-size:0.9rem;
  font-weight:600;
  padding:0.4rem 0.9rem;
  border-radius:20px;
  text-decoration:none;
}
.godina-filter__stavka:hover{ border-color:var(--boja-primarna); color:var(--boja-primarna); }
.godina-filter__stavka--aktivna{ background:var(--boja-primarna); border-color:var(--boja-primarna); color:#fff; }
html.vk .godina-filter__stavka--aktivna{ background:var(--boja-akcent); border-color:var(--boja-akcent); color:#000; }

.godina-filter__ostalo{ display:inline-block; }
.godina-filter__ostalo summary{ cursor:pointer; list-style:none; }
.godina-filter__ostalo summary::-webkit-details-marker{ display:none; }
.godina-filter__ostalo-lista{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.5rem; }

/* =========================================================
   NABAVKE
   ========================================================= */
.nabavke-lista{ display:flex; flex-direction:column; gap:1rem; }
.nabavka-kartica{
  background:var(--boja-pozadina);
  border:1px solid var(--boja-granica);
  border-radius:var(--radius);
  padding:var(--razmak-sm) var(--razmak-md);
}
html.vk .nabavka-kartica{ border-width:2px; }
.nabavka-kartica__datum{ font-size:0.85rem; font-weight:600; color:var(--boja-tekst-suptilan); margin-bottom:0.35rem; }
.nabavka-kartica__naslov{ margin:0 0 0.85rem; font-size:1.15rem; }
.nabavka-kartica__naslov a{ color:var(--boja-primarna); text-decoration:none; }
html.vk .nabavka-kartica__naslov a{ color:var(--boja-tekst); }
.nabavka-kartica__naslov a:hover{ text-decoration:underline; }
.nabavka-kartica__akcije{ display:flex; gap:0.6rem; flex-wrap:wrap; }

/* =========================================================
   SIDEBAR / WIDGETI
   ========================================================= */
.widget{
  background:var(--boja-pozadina-alt);
  border:1px solid var(--boja-granica);
  border-radius:var(--radius);
  padding:var(--razmak-sm);
  margin-bottom:var(--razmak-md);
}
.widget h2, .widget h3{ font-size:1.15rem; margin-bottom:0.9rem; }
.widget__radno-vrijeme{ font-size:0.9rem; color:var(--boja-tekst-suptilan); margin-top:-0.4rem; }
.ikona-slusalica{ color:var(--boja-akcent); vertical-align:-2px; margin-right:0.3rem; }
.widget ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.6rem; }
.widget li{ border-bottom:1px dashed var(--boja-granica); padding-bottom:0.6rem; }
.widget li:last-child{ border-bottom:none; padding-bottom:0; }
.widget li a{ text-decoration:none; }
.widget li a:hover{ text-decoration:underline; }

/* =========================================================
   FORMULARI (kontakt / članstvo / donacija)
   ========================================================= */
.forma{ display:flex; flex-direction:column; gap:1.1rem; max-width:640px; }
.forma__polje{ display:flex; flex-direction:column; gap:0.4rem; }
.forma__polje label{ font-weight:700; }
.forma__obavezno{ color:var(--boja-greska); }
.forma input[type=text],
.forma input[type=email],
.forma input[type=tel],
.forma input[type=search],
.forma select,
.forma textarea{
  font-family:inherit;
  font-size:1rem;
  padding:0.75rem 0.9rem;
  border:2px solid var(--boja-granica);
  border-radius:8px;
  background:var(--boja-pozadina);
  color:var(--boja-tekst);
}
.forma input:focus, .forma select:focus, .forma textarea:focus{
  border-color:var(--boja-primarna);
}
html.vk .forma input:focus, html.vk .forma select:focus, html.vk .forma textarea:focus{ border-color:var(--boja-akcent); }
.forma__radio-grupa{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.forma__radio-grupa label{ display:flex; align-items:center; gap:0.5rem; font-weight:600; }
.forma__pomoc{ font-size:0.88rem; color:var(--boja-tekst-suptilan); }
.forma__poruka{ padding:0.9rem 1rem; border-radius:8px; font-weight:600; }
.forma__poruka--ok{ background:#E6F4EA; color:var(--boja-uspjeh); border:1px solid var(--boja-uspjeh); }
.forma__poruka--greska{ background:#FBE9E7; color:var(--boja-greska); border:1px solid var(--boja-greska); }
.hp-polje{ position:absolute; left:-9999px; top:-9999px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--boja-primarna-tamnija);
  color:#EAEEF5;
  padding:var(--razmak-lg) 0 var(--razmak-md);
  margin-top:var(--razmak-xl);
}
html.vk .site-footer{ background:#000; border-top:3px solid #FFD400; }
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--razmak-lg); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h2{ color:#fff; font-size:1.05rem; margin-bottom:1rem; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.6rem; font-size:0.92rem; line-height:1.5; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.2);
  margin-top:var(--razmak-lg);
  padding-top:var(--razmak-sm);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.75rem;
  font-size:0.9rem;
  color:#C7CEDB;
}

/* =========================================================
   PAGINACIJA
   ========================================================= */
.paginacija{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:var(--razmak-lg); justify-content:center; }
.paginacija a, .paginacija span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 0.6rem;
  border:1px solid var(--boja-granica); border-radius:8px;
  text-decoration:none; color:var(--boja-tekst); font-weight:700;
}
.paginacija .current{ background:var(--boja-primarna); border-color:var(--boja-primarna); color:#fff; }
.paginacija a:hover{ border-color:var(--boja-primarna); color:var(--boja-primarna); }

/* =========================================================
   BREADCRUMBS
   ========================================================= */
.breadcrumbs{ font-size:0.92rem; color:var(--boja-tekst-suptilan); margin-bottom:var(--razmak-sm); }
.breadcrumbs a{ color:var(--boja-tekst-suptilan); }

/* =========================================================
   404
   ========================================================= */
.stranica-404{ text-align:center; padding:var(--razmak-xl) 0; }
.stranica-404 .broj{ font-size:5rem; font-weight:900; color:var(--boja-akcent); line-height:1; }