/* ===== FAQ — premium accordion (bez JS) ===== */
#faq{
  font-family: 'Montserrat', sans-serif;
  width:min(1100px, 92vw);
  margin: 0 auto clamp(28px,6vw,56px);
}

#faq .faq-head{
  margin-bottom: clamp(16px, 3vw, 24px);
}
#faq .faq-head h2{
  margin:0 0 6px;
  font-size: clamp(22px, 3.2vw, 46px);
  font-weight: 300;
  color: var(--ink);
}
#faq .faq-head p{
  margin:0;
  color: var(--neutral-600);
  font-size: clamp(14px, 1.6vw, 16px);
}

/* Lista / stavke */
#faq .faq-list{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:12px;
}

#faq .faq-item{
  position:relative;
  background: linear-gradient(180deg, #fff, var(--neutral-50));
  border-radius: clamp(12px, 1.6vw, 16px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px rgba(0,0,0,.04);
  overflow:hidden;
}

/* premium ring (prsten) — prikazuje se na hover/focus */
#faq .faq-item::before,
#faq .faq-item::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transform:scale(1.03);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
#faq .faq-item::before{ background: linear-gradient(90deg, var(--ring1), var(--ring2)); }
#faq .faq-item::after { background: linear-gradient(90deg, var(--acc1), var(--acc2)); }

/* skrivamo radio, ali ostaje fokusabilan preko label-a */
#faq .faq-toggle{
  position:absolute; opacity:0; pointer-events:none;
}

/* Pitanje (label) */
#faq .faq-q{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; cursor:pointer;
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2.2vw, 20px);
  font-weight:400; letter-spacing:.2px;
  color: var(--ink);
  user-select:none;
  position:relative;
}

/* hover highlight + ring */
#faq .faq-q:hover{
  background: var(--neutral-100);
}
#faq .faq-q:hover ~ .faq-a,
#faq .faq-q:hover{
  /* samo vizuelni efekat — ring */
}
#faq .faq-item:hover::before{ opacity:.45; transform:scale(1.01); }
#faq .faq-item:hover::after { opacity:1;    transform:scale(1);    }

/* Chevron (strelica) */
#faq .faq-chevron{
  width:20px; height:20px; flex:0 0 20px; position:relative;
}
#faq .faq-chevron::before, 
#faq .faq-chevron::after{
  content:""; position:absolute; inset:0;
  margin:auto; width:10px; height:10px;
  border-right:1px solid #334155; border-bottom:1px solid #334155;
  transform: rotate(45deg); transition: transform .3s ease;
}

/* Odgovor */
#faq .faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, opacity .3s ease, transform .3s ease;
  opacity: 0;
  transform: translateY(-4px);
  padding: 0 clamp(14px, 2.2vw, 20px);
  will-change: max-height;
}
#faq .faq-a-inner{
  padding-bottom: clamp(14px, 2vw, 18px);
  color: var(--neutral-600);
  line-height: 1.55;
  font-size: clamp(13px, 1.6vw, 15px);
}

/* Otvaranje: kada je radio čekiran */
#faq .faq-toggle:checked + .faq-q + .faq-a{
  max-height: 320px;  /* dovoljno za većinu odgovora */
  opacity: 1;
  transform: translateY(0);
}

/* Rotacija chevron-a kada je otvoreno */
#faq .faq-toggle:checked + .faq-q .faq-chevron::before,
#faq .faq-toggle:checked + .faq-q .faq-chevron::after{
  transform: rotate(-135deg);
}

/* Fokus (tastatura) preko label-a */
#faq .faq-q:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #faq .faq-item::before, #faq .faq-item::after,
  #faq .faq-a{
    transition: none !important;
  }
}