/* ════════════════════════════════════════════════════════
   Nacionalna Zajednica Bošnjaka Bujštine — projektni stilovi
   Nelayered (namjerno) → lako nadjačava framework @layer slojeve.
   Sve boje, razmaci i radijusi koriste tokene iz framework.css.

   Sadržaj:
   1. Tokeni i tipografija
   2. Utility klase
   3. Gumbi i ikone
   4. Navigacija (header)
   5. Breadcrumb i zaglavlje stranice
   6. Hero
   7. Naslovnica: brojke + pridruži nam se
   8. Kartice
   9. Mreže sekcija (nadahnuća, događanja, obavijesti, članovi, galerija)
   10. Prilog (PDF poveznica)
   11. Kontakt forma
   12. Footer
   ════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   1. TOKENI I TIPOGRAFIJA
   Naslovi: Fraunces (topli serif) · Tekst: Source Sans 3.
   Za drugačiji ugođaj zamijeni vrijednosti — npr.
   naslovi 'Playfair Display' / 'Cormorant Garamond' / 'Marcellus'.
   ════════════════════════════════════════════════════════ */
:root {
  --font-base: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* ── Paleta (zastava BiH): duboka kraljevska plava + zlatni akcent ── */
  --color-primary: #002f6c;        /* glavna — logo, gumbi, linkovi, brojke */
  --color-primary-alt: #013a82;    /* hover (malo svjetlija plava) */
  --color-primary-light: #d6e0f0;  /* svijetli sjaj fokusa na poljima */
  --color-accent: #f2c94c;         /* zlatno-žuti akcent (na tamnim podlogama) */
  --color-accent-light: #fcefc7;

  /* ── Bijela pozadina ── */
  --surface-base: #ffffff;
}

h1, h2, h3 {
  letter-spacing: -0.01em;   /* serif naslovi izgledaju zbijeniji/elegantniji */
}

/* Paragrafi unutar centriranih blokova: centriraj i sam blok
   (reset im daje max-inline-size:65ch pa inače ostaju poravnati lijevo) */
.text-center p { margin-inline: auto; }

/* ════════════════════════════════════════════════════════
   2. UTILITY KLASE — zamjena za inline stilove u view-ovima.
   Razmaci preslikavaju framework tokene (--space-*).
   ════════════════════════════════════════════════════════ */

/* Stack razmaci */
.stack-3xs { --stack-space: var(--space-3xs); }
.stack-2xs { --stack-space: var(--space-2xs); }
.stack-xs  { --stack-space: var(--space-xs); }
.stack-s   { --stack-space: var(--space-s); }
.stack-m   { --stack-space: var(--space-m); }
.stack-l   { --stack-space: var(--space-l); }
.stack-xl  { --stack-space: var(--space-xl); }

/* Cluster razmaci i poravnanje */
.cluster-gap-2xs { --cluster-gap: var(--space-2xs); }
.cluster-gap-s   { --cluster-gap: var(--space-s); }
.cluster-gap-m   { --cluster-gap: var(--space-m); }
.cluster-gap-l   { --cluster-gap: var(--space-l); }
.cluster-center  { --cluster-justify: center; }

/* Grid razmaci */
.grid-gap-2xs { --grid-gap: var(--space-2xs); }
.grid-gap-m   { --grid-gap: var(--space-m); }

/* Suženi stupci sadržaja (centrirani) */
.stupac-45 { max-inline-size: 45rem; margin-inline: auto; }
.stupac-48 { max-inline-size: 48rem; margin-inline: auto; }
.stupac-50 { max-inline-size: 50rem; margin-inline: auto; }
.stupac-55 { max-inline-size: 55rem; margin-inline: auto; }

/* Tekstualni blok centriran unutar šireg stupca */
.tekst-sredina { max-inline-size: var(--measure-base); margin-inline: auto; }

/* Vertikalni odmaci */
.odmak-xl  { margin-block-start: var(--space-xl); }
.odmak-m   { margin-block-start: var(--space-m); }
.odmak-3xs { margin-block-start: var(--space-3xs); }

/* Portreti (okrugli unutar .card preko postojećeg pravila za frame 1/1) */
.portret    { max-inline-size: 8rem;  margin-inline: auto; }
.portret-l  { max-inline-size: 10rem; margin-inline: auto; }
.portret-xl { max-inline-size: 14rem; margin-inline: auto; border-radius: var(--radius-full); }

/* Velike slike / video okviri na detaljnim stranicama */
.media-okvir { border-radius: var(--radius-m); }
.frame iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* Dvostupčane sekcije (slika + tekst) i raspored kontakta */
.sekcija-switcher  { --switcher-threshold: 45rem; --switcher-gap: var(--space-xl); }
.pridruzi-switcher { --switcher-threshold: 28rem; --switcher-gap: var(--space-m); }
.kontakt-raspored  { --sidebar-width: 20rem; --sidebar-gap: var(--space-xl); }

/* ════════════════════════════════════════════════════════
   3. GUMBI I IKONE
   ════════════════════════════════════════════════════════ */

/* Submit gumb u kontakt formi — viši (veći vertikalni padding + zraka iznad) */
form .button[type="submit"] {
  --button-padding: var(--space-xs) var(--space-s);
  margin-block-start: var(--space-m);
}

/* Zlatni gumb (akcent) — tamni tekst, ističe se na plavoj podlozi */
.button[data-accent="gold"] {
  --button-bg: var(--color-accent);
  --button-color: var(--color-dark);
  --button-bg-hover: #e3b73a;
}

/* Outline ikone (Lucide stil) — monokromatske, prate primarnu boju */
.icon {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--color-primary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mala ikona uz naslov (npr. Dokumenti na /o-nama) */
.icon-s {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* ════════════════════════════════════════════════════════
   4. NAVIGACIJA (sticky header)
   ════════════════════════════════════════════════════════ */

/* Skok na #sidro (npr. #kontakt) zaustavi se točno ispod sticky navigacije,
   ne ispod nje. --nav-visina postavlja app.js prema stvarnoj visini trake. */
html { scroll-padding-block-start: var(--nav-visina, 5rem); }

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--layer-nav);
  background-color: color-mix(in srgb, var(--surface-base) 90%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: var(--border-thin);
  padding-block: var(--space-2xs);
}

.brand {
  text-decoration: none;
  color: var(--text-base);
}
.brand__logo {
  border-radius: var(--radius-s);
}
/* Dugačak naziv → kompaktnije u traci, lomi se u 2 retka */
.brand span {
  font-size: var(--step--2);
  line-height: 1.2;
  max-inline-size: 22ch;
}

.nav__list a:not(.button) {
  text-decoration: none;
  color: var(--text-base);
  font-size: var(--step--1);   /* font navigacijskih linkova */
  font-weight: 600;            /* podebljano za bolju čitljivost */
  transition: color var(--transition-fast);
}
.nav__list a:not(.button):hover {
  color: var(--color-primary);
}

/* CTA gumb u navigaciji — malo veći vertikalni padding + korak veći font */
.nav__list .button {
  --button-padding: var(--space-2xs) var(--space-s);
  font-size: var(--step--1);
}

/* Veći razmak između "Kontakt" i CTA gumba (samo desktop) */
@media (min-width: 48rem) {
  .nav__list li:last-child {
    margin-inline-start: var(--space-s);
  }
}

/* Hamburger — skriven na desktopu */
.nav-toggle {
  display: none;
  position: relative;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: '';
  position: absolute;
  inset-inline: 25%;
  block-size: 2px;
  background-color: var(--text-base);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle__bar { inset-block-start: 50%; }
.nav-toggle__bar::before { inset-block-start: -7px; }
.nav-toggle__bar::after  { inset-block-start: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-7px) rotate(-45deg); }

/* Mobilni izbornik (< md) */
@media (max-width: 47.999rem) {
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background-color: var(--surface-base);
    border-block-end: var(--border-thin);
    box-shadow: var(--shadow-m);
    /* skriven dok JS ne postavi [data-open] */
    display: none;
  }
  .nav[data-open="true"] { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-s);
    --cluster-gap: var(--space-2xs) !important;
  }
  .nav__list a:not(.button) {
    display: block;
    padding-block: var(--space-2xs);
  }
}

/* ════════════════════════════════════════════════════════
   5. BREADCRUMB I ZAGLAVLJE STRANICE
   ════════════════════════════════════════════════════════ */
.breadcrumb { font-size: var(--step--1); }
.breadcrumb ol { --cluster-gap: var(--space-3xs); }
.breadcrumb li + li::before {
  content: '›';
  margin-inline-end: var(--space-3xs);
  color: var(--text-muted);
}
.breadcrumb a {
  color: var(--color-primary);
  text-decoration: underline;
}
.breadcrumb a:hover { color: var(--color-primary-alt); text-decoration: none; }
.breadcrumb [aria-current] { color: var(--text-muted); }
/* U centriranim zaglavljima centriraj i breadcrumb */
.text-center .breadcrumb ol { --cluster-justify: center; }

/* Razmak breadcrumb → naslov, jednak na svim stranicama (75% region paddinga).
   Cilja element odmah iza breadcrumba (h1); nadjačava stack razmak jer je styles.css nelayered. */
.breadcrumb + * { margin-block-start: calc(var(--space-xl) * 0.75); }

/* .page-head okružuje h1 (+ uvodnu rečenicu); element koji slijedi
   dobiva svugdje isti razmak — konzistentno na svim podstranicama. */
.page-head {
  --stack-space: var(--space-2xs);
}
.page-head + * {
  margin-block-start: var(--space-xl);
}

/* ════════════════════════════════════════════════════════
   6. HERO
   ════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: min(88vh, 720px);
  background-image: url('images/hero.jpg');
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.hero h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* tamni gradijent radi čitljivosti bijelog teksta */
  background: linear-gradient(180deg, hsl(0 0% 0% / 0.45), hsl(0 0% 0% / 0.65));
}
.hero__inner { position: relative; }
.hero__eyebrow { opacity: 0.85; letter-spacing: 0.12em; margin-inline: auto; }
.hero__lead { opacity: 0.95; }

/* Sekundarni gumb na tamnom herou → bijeli obrub i tekst */
.hero .button[data-variant="secondary"] {
  --button-color: var(--color-light);
  border-color: var(--color-light);
}
.hero .button[data-variant="secondary"]:hover {
  background-color: var(--color-light);
  color: var(--color-dark);
}

/* ════════════════════════════════════════════════════════
   7. NASLOVNICA: BROJKE + PRIDRUŽI NAM SE
   ════════════════════════════════════════════════════════ */
.stats {
  --grid-min: 12rem;
  --grid-gap: var(--space-m);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-l);
  border-block-start: var(--border-thin);
  /* auto-fit (umjesto framework auto-fill) → nema praznih stupaca;
     4 brojke se ravnomjerno rasporede preko pune širine i centriraju */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 12rem)), 1fr));
  justify-items: center;
}
.stat { display: flex; flex-direction: column; gap: var(--space-3xs); }
.stat__num { line-height: 1; }

.join {
  position: relative;
  isolation: isolate;
  /* TODO: zamijeniti s vedrom fotografijom proba/druženja */
  background-image: url('images/placeholder.svg');
  background-size: cover;
  background-position: center;
}
.join__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* duboka kraljevska plava (BiH) */
  background: linear-gradient(180deg, rgb(0 47 108 / 0.88), rgb(0 33 76 / 0.93));
}
.join__inner { position: relative; }
.join__benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
}
.join__benefit p { opacity: 0.92; }
.join__opis { opacity: 0.9; }

/* ════════════════════════════════════════════════════════
   8. KARTICE
   ════════════════════════════════════════════════════════ */

/* Portret (frame 1/1) unutar kartice — okrugao (npr. voditelj zbora) */
.card .frame[data-ratio="1/1"] {
  border-radius: var(--radius-full);
}

/* Fotografija na kartici događanja */
.event .frame { border-radius: var(--radius-s); }

/* Naslov kartice je poveznica na detalj (događanja, nadahnuća...) —
   primarna boja kao vidljiv signal klikabilnosti */
.card :is(h2, h3) a {
  text-decoration: none;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}
.card :is(h2, h3) a:hover {
  color: var(--color-primary-alt);
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════
   9. MREŽE SEKCIJA — broj stupaca po širini ekrana
   ════════════════════════════════════════════════════════ */

/* Nadahnuća — 3 stupca (stack na mobitelu) */
#nadahnuca .grid {
  grid-template-columns: 1fr;
}
@media (min-width: 36rem) { #nadahnuca .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { #nadahnuca .grid { grid-template-columns: repeat(3, 1fr); } }

/* Detalj nadahnuća — veći portret (hero). Razmak breadcrumb → naslov je sada globalan. */
.nadahnuce-detalj .portret-xl { max-inline-size: 21rem; }

/* Događanja — 2 stupca sa slikom */
#dogadjanja .grid {
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  #dogadjanja .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Obavijesti — mobitel: 1 stupac → od 36rem: 2 → od 64rem: 4 */
#obavijesti .grid {
  grid-template-columns: 1fr;
}
@media (min-width: 36rem) {
  #obavijesti .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  #obavijesti .grid { grid-template-columns: repeat(4, 1fr); }
}

/* Tanka linija između teksta obavijesti i priloga */
.obavijest-linija {
  border: 0;
  border-block-start: var(--border-thin);
  margin-block: var(--space-2xs) var(--space-3xs);
}

/* Arhiva obavijesti (/obavijesti) — 3 stupca (širokoj listi bolje pristaju veće kartice) */
@media (min-width: 64rem) {
  #obavijesti.obavijesti-arhiva .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Članovi — mreža portreta: 2 → 3 → 4 stupca */
.members {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 36rem) { .members { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48rem) { .members { grid-template-columns: repeat(4, 1fr); } }

/* Popis imena članova zajednice na /o-nama */
.popis-clanova { --grid-min: 12rem; --grid-gap: var(--space-3xs) var(--space-m); }

/* Galerija na detalju događanja: 2 → 3 stupca */
.galerija {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 36rem) { .galerija { grid-template-columns: repeat(3, 1fr); } }

.galerija a {
  display: block;
  border-radius: var(--radius-s);
}
.galerija img { transition: transform var(--transition-base); }
.galerija a:hover img,
.galerija a:focus-visible img { transform: scale(1.05); }

/* ════════════════════════════════════════════════════════
   10. PRILOG UZ OBAVIJEST (PDF poveznica)
   ════════════════════════════════════════════════════════ */
.prilog {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
}
.prilog:hover { color: var(--color-primary-alt); text-decoration: none; }
.prilog svg {
  inline-size: 1em;
  block-size: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════
   11. KONTAKT FORMA
   ════════════════════════════════════════════════════════ */

/* honeypot — vizualno maknut, botovi ga ipak ispune */
.polje-web {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rezultat slanja (uspjeh/greška) — prvi element u formi */
.form-status {
  min-width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 0.4rem;
  border: 1px solid;
  font-size: var(--step--1);
}
.form-status--ok {
  background: #e8f3ed;
  border-color: #bcd9c9;
  color: #174a31;
}
.form-status--greska {
  background: #fdecea;
  border-color: #f3c1bd;
  color: #b3261e;
}

/* ════════════════════════════════════════════════════════
   12. FOOTER
   ════════════════════════════════════════════════════════ */
.site-footer {
  --region-space: var(--space-xl);
  border-block-start: 3px solid var(--color-accent);   /* zlatni akcent na vrhu */
  font-size: var(--step--1);                           /* korak manji od osnovnog teksta */
}
.footer-grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: 2fr 1fr 1.4fr; }
}
.footer-heading {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-base);
}
/* linkovi u stupcima — svaki u svom retku, klik samo na tekst */
.footer-col > a { width: fit-content; }

.site-footer a {
  color: var(--text-base);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.site-footer a:hover { color: var(--color-accent); }