/* ═══════════════════════════════════════════════════
   SBV — FAQ Page (faq.html)
   ═══════════════════════════════════════════════════ */

/* ── Page Intro ── */
.faq-hero { padding: 4rem 0 3rem; text-align: center; }
@media (min-width: 768px) { .faq-hero { padding: 5rem 0 4rem; } }
.faq-hero .eyebrow { justify-content: center; }
.faq-hero h1 { font-size: 2.25rem; color: hsl(var(--foreground)); margin-bottom: 0.75rem; }
@media (min-width: 768px) { .faq-hero h1 { font-size: 3rem; } }
.faq-hero .lead { font-size: 1.125rem; font-family: var(--font-body); color: hsl(var(--muted-foreground)); line-height: 1.625; max-width: 36rem; margin: 0 auto; }

/* ── FAQ Sections ── */
.faq-layout { padding: 0 0 5rem; }
.faq-group { max-width: 52rem; margin: 0 auto 4rem; }
.faq-group-title { font-size: 1.25rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: hsl(var(--accent)); margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid hsl(var(--border)); }

/* ── Accordion ── */
details { border-bottom: 1px solid hsl(var(--border)); }
details:first-of-type { border-top: 1px solid hsl(var(--border)); }

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  font-size: 1.0625rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: hsl(var(--foreground));
  cursor: pointer;
  list-style: none;
  transition: color 0.15s;
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: hsl(var(--accent)); }

/* Plus/minus indicator */
summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: hsl(var(--accent));
  flex-shrink: 0;
  transition: transform 0.2s;
  line-height: 1;
}
details[open] summary::after { content: '−'; }
details[open] summary { color: hsl(var(--accent)); }

.faq-answer {
  padding: 0 0 1.5rem;
  font-size: 0.9375rem;
  font-family: var(--font-body);
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  max-width: 44rem;
}
.faq-answer p { margin-bottom: 0.75rem; }
.faq-answer p:last-child { margin-bottom: 0; }