/* FAQ Accordion Component — shared by 50+ pages
 * Two modes: multi (toggle independently) and single (close others on open).
 * Mode set by faq.js based on data-faq-mode attribute on .faq-section.
 * Static FAQ pages (.faq-list + .faq-item__q) do NOT use this file.
 */

.faq-section { margin-top: 48px; border-top: 1px solid var(--border-subtle); padding-top: 32px; }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; background: none; border: none; color: var(--text); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem; text-align: left; cursor: pointer; transition: color 0.3s; }
.faq-item button span { display: inline; }
.faq-item button:hover { color: var(--arc); }
.faq-item button::after { content: '\25B8'; font-size: 0.75rem; color: var(--text-dim); transition: transform 0.3s; flex-shrink: 0; margin-left: 12px; }
.faq-item.open button::after { transform: rotate(90deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; }
.faq-item.open .faq-answer { max-height: 800px; padding-bottom: 16px; }
.faq-answer p { font-size: 1rem; color: var(--text-muted); line-height: 1.75; }

@media (prefers-reduced-motion: reduce) {
  .faq-answer { transition: none !important; }
}

@media print {
  .faq-answer { max-height: none !important; padding-bottom: 16px !important; }
}