/* =========================================================
   Fondacija Mihajlović – Feniks
   Svetla tema · boja identiteta promenljiva na jednom mestu
   Header: desktop providan → ljubičast pri skrolu; mobilni uvek ljubičast
   ========================================================= */
:root{
  /* ---- NOSILAC IDENTITETA — promeni samo ovu liniju ---- */
  --boja-identitet: #4B2E83;

  /* Izvedene nijanse — rezervne vrednosti za starije pregledače */
  --boja-identitet-hover: #3A2366;
  --boja-identitet-blaga: #F3F0F8;

  /* Neutralna paleta */
  --boja-pozadina: #FCFBF8;   /* toplo bela                       */
  --boja-tekst:    #201C1A;   /* skoro crna, blago zagrejana      */
  --boja-siva:     #6E6862;   /* sekundarni tekst, meta-podaci    */
  --boja-linija:   #E6E2D9;   /* hairline linije, ivice           */

  --font-tekst: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --sirina-max: 1280px;
  --header-visina: 84px;
  --prelaz: 300ms cubic-bezier(.4,0,.2,1);
}

/* U modernim pregledačima izvedene nijanse se same
   prilagođavaju boji identiteta */
@supports (color: color-mix(in srgb, red 50%, black)){
  :root{
    --boja-identitet-hover: color-mix(in srgb, var(--boja-identitet) 78%, black);
    --boja-identitet-blaga: color-mix(in srgb, var(--boja-identitet) 7%, white);
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-tekst);
  background:var(--boja-pozadina);
  color:var(--boja-tekst);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

body.menu-otvoren{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

:focus-visible{
  outline:2px solid var(--boja-identitet);
  outline-offset:3px;
}

/* =========================================================
   HEADER
   Sadržaj (logo, tekst, ikonice) je uvek beo.
   Desktop: pozadina providna preko hero slike;
            klasa .skrolovan (dodaje JS) je boji u identitet.
   Mobilni: uvek u boji identiteta.
--------------------------------------------------------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  width:100%;
  z-index:100;
  height:var(--header-visina);
  background:transparent;
  color:#fff;
  transition:background-color var(--prelaz), box-shadow var(--prelaz);
}

/* Pri skrolovanju ili dok je meni otvoren — puna boja identiteta */
.site-header.skrolovan,
body.menu-otvoren .site-header{
  background:var(--boja-identitet);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}

.header-inner{
  max-width:var(--sirina-max);
  height:100%;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* --- Logotip: znak + tekst u jednom redu, sve belo --- */
.logo{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

/* Desktop: logo je nevidljiv dok je header providan;
   pojavljuje se tek sa bojom (skrol ili otvoren meni).
   (Na mobilnom ovo poništavamo jer je header uvek obojen.) */
@media (min-width: 900px){
  .logo{
    opacity:0;
    visibility:hidden;
    transition:opacity var(--prelaz), visibility var(--prelaz);
  }
  .site-header.skrolovan .logo,
  body.menu-otvoren .logo{
    opacity:1;
    visibility:visible;
  }
}

/* Dok je meni otvoren, natpis MENI se sklanja — ostaje samo X */
.btn-menu[aria-expanded="true"] .btn-menu-label{
  display:none;
}

.logo-znak{
  width:52px; height:52px;
  flex:none;
}
.logo-tekst{
  display:flex;
  align-items:baseline;
  gap:10px;
  white-space:nowrap;
  text-transform:uppercase;
}
.logo-fondacija{
  font-size:24px;
  font-weight:400;
  letter-spacing:.2em;
  color:rgba(255,255,255,.75);
}
.logo-feniks{
  font-size:24px;
  font-weight:700;
  letter-spacing:.24em;
  color:#fff;
}

/* --- Desna strana headera --- */
.header-actions{
  display:flex;
  align-items:center;
  gap:26px;
}

.btn-search{
  background:none; border:0; cursor:pointer;
  color:#fff;
  width:40px; height:40px;
  display:grid; place-items:center;
  transition:opacity var(--prelaz);
}
.btn-search svg{ width:21px; height:21px; }
.btn-search:hover{ opacity:.75; }

.btn-menu{
  background:none; border:0; cursor:pointer;
  color:#fff;
  display:flex; align-items:center; gap:14px;
  padding:8px 0;
  font:inherit;
  transition:opacity var(--prelaz);
}
.btn-menu:hover{ opacity:.75; }

.btn-menu-label{
  font-size:15px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.hamburger{
  width:36px; height:24px;
  position:relative;
  display:block;
}
.hamburger span{
  position:absolute; left:0;
  width:100%; height:4px;
  background:currentColor;
  transition:transform var(--prelaz), top var(--prelaz), opacity var(--prelaz);
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:10px; }
.hamburger span:nth-child(3){ top:20px; }

.btn-menu[aria-expanded="true"] .hamburger span:nth-child(1){
  top:10px; transform:rotate(45deg);
}
.btn-menu[aria-expanded="true"] .hamburger span:nth-child(2){
  opacity:0;
}
.btn-menu[aria-expanded="true"] .hamburger span:nth-child(3){
  top:10px; transform:rotate(-45deg);
}

/* =========================================================
   MENI PREKO CELOG EKRANA
--------------------------------------------------------- */
.menu-overlay{
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  z-index:90;
  background:var(--boja-pozadina);
  padding-top:var(--header-visina);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--prelaz), visibility var(--prelaz);
}
.menu-overlay.aktivan{
  opacity:1;
  visibility:visible;
}
.menu-overlay[hidden]{ display:none; }

.menu-scroll{
  height:100%;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  max-width:var(--sirina-max);
  margin:0 auto;
  padding:32px 24px;
}

.menu-lang{
  display:flex;
  gap:22px;
  justify-content:flex-end;
  margin-bottom:36px;
}
.menu-lang a{
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--boja-siva);
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:color var(--prelaz), border-color var(--prelaz);
}
.menu-lang a[aria-current="true"]{
  color:var(--boja-tekst);
  border-color:var(--boja-identitet);
}
.menu-lang a:hover{ color:var(--boja-identitet); }

.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:44px 36px;
  flex:1;
  align-content:start;
}

.menu-group-title{
  font-size:inherit;
  border-bottom:2px solid var(--boja-tekst);
  margin-bottom:16px;
}

.menu-group-toggle{
  width:100%;
  background:none; border:0; cursor:default;
  color:var(--boja-tekst);
  font-family:var(--font-tekst);
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:left;
  padding:0 0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.menu-group-toggle .chevron{
  width:15px; height:15px;
  flex:none;
  display:none;
  transition:transform var(--prelaz);
}

.menu-links{ list-style:none; }
.menu-links li + li{ margin-top:1px; }

.menu-links a{
  display:inline-block;
  font-size:16px;
  font-weight:500;
  line-height:1.9;
  transition:color var(--prelaz);
}
.menu-links a:hover{
  color:var(--boja-identitet);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1.5px;
}

.menu-links--info{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid var(--boja-linija);
}
.menu-links--info a{
  font-size:13.5px;
  font-weight:400;
  letter-spacing:.03em;
  color:var(--boja-siva);
}
.menu-links--info a:hover{ color:var(--boja-identitet); }

.menu-footer{
  margin-top:52px;
  padding-top:20px;
  border-top:1px solid var(--boja-linija);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
}
.menu-social{
  list-style:none;
  display:flex;
  gap:26px;
}
.menu-social a{
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--boja-siva);
  transition:color var(--prelaz);
}
.menu-social a:hover{ color:var(--boja-identitet); }

.menu-footer-note{
  font-size:12.5px;
  color:var(--boja-siva);
}

/* =========================================================
   HERO SLAJDER — slike preko celog ekrana koje se smenjuju
--------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  color:#fff;
  background:#211A2E; /* vidi se na tren dok se prva slika učitava */
}

.hero-slajd{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  display:flex;
  align-items:flex-end;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 900ms ease;
}
.hero-slajd.aktivan{
  opacity:1;
  z-index:1;
}
.hero-slajd[hidden]{ display:flex; } /* hidden koristimo samo pre inicijalizacije JS-a */

/* Tamni preliv pri dnu — da beli tekst bude čitljiv na svakoj slici */
.hero-slajd::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  background:linear-gradient(180deg,
    rgba(10,7,16,.30) 0%,
    rgba(10,7,16,0) 35%,
    rgba(10,7,16,.62) 100%);
  pointer-events:none;
}

.hero-sadrzaj{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--sirina-max);
  margin:0 auto;
  padding:0 24px 118px;
}

/* Poluprozirna tamna podloga iza teksta slajda —
   čitljivo i na beloj slici, nenametljivo na slikama u boji */
.hero-kutija{
  display:inline-block;
  max-width:min(680px, 100%);
  background:rgba(22,18,16,.38);
  padding:26px 30px 30px;
}

.hero-dates{
  font-size:14px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  margin-bottom:14px;
}

.hero-title{
  font-weight:700;
  font-size:clamp(34px, 5.4vw, 74px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin-bottom:26px;
  max-width:20ch;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}

.hero-link{
  display:inline-block;
  font-size:14px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  border-bottom:2px solid #fff;
  padding-bottom:6px;
  transition:opacity var(--prelaz);
}
.hero-link:hover{ opacity:.75; }

/* --- Kontrole slajdera --- */
/* Strelice: uz levu i desnu ivicu, vertikalno centrirane (kao Venecija) */
.hero-strelica{
  position:absolute;
  z-index:3;
  top:50%;
  transform:translateY(-50%);
  background:rgba(22,18,16,.45);   /* poluprozirna tamna podloga — vidljivo i na beloj slici */
  border:0; cursor:pointer;
  color:#fff;
  width:64px; height:64px;
  display:grid; place-items:center;
  transition:background-color var(--prelaz);
}
.hero-strelica svg{
  width:26px; height:26px;
}
.hero-strelica:hover{
  background:rgba(22,18,16,.7);
}
.hero-strelica--prethodna{ left:25px; }
.hero-strelica--sledeca{ right:25px; }

/* Tačkice: centrirane pri dnu */
.hero-tacke{
  position:absolute;
  z-index:3;
  left:0; right:0;
  bottom:34px;
  display:flex;
  justify-content:center;
  gap:12px;
}
.hero-tacka{
  width:11px; height:11px;
  border-radius:50%;
  border:1.5px solid #fff;
  background:transparent;
  cursor:pointer;
  padding:0;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:background-color var(--prelaz);
}
.hero-tacka[aria-selected="true"]{
  background:#fff;
}

/* =========================================================
   SEKCIJE PROBNOG SADRŽAJA
--------------------------------------------------------- */
.sekcija{
  max-width:var(--sirina-max);
  margin:0 auto;
  padding:88px 24px;
}
.sekcija--siva{
  max-width:none;
  background:var(--boja-identitet-blaga);
}
.sekcija--siva > *{
  max-width:var(--sirina-max);
  margin-left:auto;
  margin-right:auto;
}
.sekcija--siva{
  padding-left:24px;
  padding-right:24px;
}

.sekcija-zaglavlje{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:44px;
}
.sekcija-naslov{
  font-size:clamp(26px, 3vw, 38px);
  font-weight:700;
  letter-spacing:-.01em;
}
.sekcija-link{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--boja-identitet);
  border-bottom:2px solid var(--boja-identitet);
  padding-bottom:4px;
  white-space:nowrap;
  transition:color var(--prelaz), border-color var(--prelaz);
}
.sekcija-link:hover{
  color:var(--boja-identitet-hover);
  border-color:var(--boja-identitet-hover);
}

/* --- Vesti --- */
.vesti-mreza{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:44px 32px;
}

.vest-slika{ display:block; margin-bottom:18px; }
.vest-slika img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border:1px solid var(--boja-linija);
}
.slika-placeholder{
  display:block;
  aspect-ratio:3/2;
  background:
    linear-gradient(135deg, var(--boja-identitet-blaga) 0%, var(--boja-linija) 100%);
  border:1px solid var(--boja-linija);
}

.vest-meta{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--boja-identitet);
  margin-bottom:10px;
}
.vest-naslov{
  font-size:21px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:10px;
}
.vest-naslov a:hover{
  color:var(--boja-identitet);
  text-decoration:underline;
  text-underline-offset:4px;
}
.vest-opis{
  font-size:15px;
  line-height:1.6;
  color:var(--boja-siva);
}

/* --- Agenda --- */
.sekcija--siva{ padding-top:88px; padding-bottom:88px; }

.agenda{ list-style:none; }

.agenda-stavka{
  display:flex;
  gap:40px;
  padding:26px 0;
  border-top:1px solid var(--boja-linija);
}
.agenda-stavka:last-child{ border-bottom:1px solid var(--boja-linija); }

.agenda-datum{
  flex:none;
  width:110px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--boja-siva);
}
.agenda-dan{
  display:block;
  font-size:34px;
  font-weight:700;
  letter-spacing:0;
  color:var(--boja-identitet);
  line-height:1.1;
}

.agenda-tip{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--boja-identitet);
  margin-bottom:6px;
}
.agenda-naslov{
  font-size:20px;
  font-weight:600;
  line-height:1.35;
  margin-bottom:6px;
}
.agenda-naslov a:hover{
  color:var(--boja-identitet);
  text-decoration:underline;
  text-underline-offset:4px;
}
.agenda-mesto{
  font-size:14px;
  color:var(--boja-siva);
}

/* --- Istaknuti baner --- */
.baner{
  background:var(--boja-identitet);
  color:#fff;
}
.baner-sadrzaj{
  max-width:var(--sirina-max);
  margin:0 auto;
  padding:88px 24px;
}
.baner-naslov{
  font-size:clamp(28px, 3.4vw, 44px);
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:14px;
}
.baner-opis{
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.82);
  max-width:56ch;
  margin-bottom:30px;
}
.baner-link{
  display:inline-block;
  font-size:14px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  border-bottom:2px solid #fff;
  padding-bottom:6px;
  transition:opacity var(--prelaz);
}
.baner-link:hover{ opacity:.75; }

/* --- Footer (privremeni) --- */
/* Delovi teksta koji se ne smeju prelamati iznutra */
.bez-preloma{ white-space:nowrap; }

.site-footer{
  max-width:var(--sirina-max);
  margin:0 auto;
  padding:36px 24px;
  font-size:14px;
  color:var(--boja-siva);
}

/* =========================================================
   MOBILNI PRIKAZ
--------------------------------------------------------- */
@media (max-width: 899px){

  :root{ --header-visina: 68px; }

  /* Na mobilnom header je UVEK u boji identiteta */
  .site-header{
    background:var(--boja-identitet);
  }

  .logo-znak{ width:45px; height:45px; }
  .logo-fondacija{ font-size:12px; letter-spacing:.14em; }
  .logo-feniks{ font-size:20px; letter-spacing:.18em; }

  .btn-search{ display:none; }
  .btn-menu-label{ display:none; }

  /* Hero počinje ispod headera jer header nije providan */
  .hero{
    min-height:calc(100vh - var(--header-visina));
    margin-top:var(--header-visina);
  }
  .hero-sadrzaj{ padding-bottom:96px; }
  .hero-strelica{ display:none; }   /* na mobilnom slajdovi se menjaju prevlačenjem */
  .hero-tacke{ bottom:24px; }

  .menu-scroll{ padding:20px 20px 28px; }
  .menu-lang{ margin-bottom:20px; }

  .menu-grid{ display:block; }

  .menu-group-title{
    margin-bottom:0;
    border-bottom:1px solid var(--boja-linija);
  }

  .menu-group-toggle{
    cursor:pointer;
    padding:18px 0;
  }
  .menu-group-toggle .chevron{ display:block; }
  .menu-group-toggle[aria-expanded="true"] .chevron{
    transform:rotate(180deg);
  }

  .menu-group-panel{
    overflow:hidden;
    max-height:0;
    transition:max-height var(--prelaz);
  }

  .menu-links a{ font-size:17px; line-height:2.1; }
  .menu-links:first-child{ padding-top:8px; }
  .menu-group-panel .menu-links:last-child{ padding-bottom:18px; }

  .menu-footer{
    margin-top:32px;
    flex-direction:column;
    align-items:flex-start;
  }

  .sekcija{ padding:56px 20px; }
  .baner-sadrzaj{ padding:56px 20px; }
  .site-footer{ font-size:12.5px; }
  .hero-kutija{ padding:20px 22px 24px; }

  .agenda-stavka{ gap:20px; }
  .agenda-datum{ width:80px; }
}

/* Vrlo uski ekrani: ostaje znak + FENIKS */
@media (max-width: 480px){
  .logo-fondacija{ display:none; }
}

/* =========================================================
   PRISTUPAČNOST: smanjeno kretanje
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
}