/* ============================================================
   Vikas Collectives — Homepage FAQ (v10)
   File: assets/faq.css — loaded on index.html after style.css.
   Native <details>/<summary> accordion, no JavaScript needed.
   Namespace: .faq-
   ============================================================ */

.faq-list{
  max-width:860px;
  margin:2rem auto 0;
  display:grid;
  gap:14px;
}

.faq-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.faq-item[open],
.faq-item:hover{
  border-color:var(--gold-l);
  box-shadow:0 8px 22px rgba(28,34,64,.10);
}

.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  font-family:'Marcellus', serif;
  font-size:1.08rem;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:focus-visible{
  outline:2px solid var(--saffron);
  outline-offset:-2px;
  border-radius:var(--radius);
}

/* Plus that turns into minus when open */
.faq-item summary::after{
  content:"+";
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--brass);
  border-radius:50%;
  color:var(--brass);
  font-family:'Mulish', sans-serif;
  font-size:1.1rem;
  font-weight:600;
  line-height:1;
  transition:transform .3s ease, background .3s ease, color .3s ease;
}
.faq-item[open] summary::after{
  content:"\2212";
  background:var(--brass);
  color:var(--ivory);
}

.faq-item .faq-answer{
  padding:0 20px 18px;
  color:var(--muted);
  line-height:1.65;
}
.faq-item .faq-answer p{ margin:0; }

@media (prefers-reduced-motion:reduce){
  .faq-item, .faq-item summary::after{ transition:none; }
}