/* ═══════════════════════════════════════════════════════════════════════
   faq.css — the FAQ accordion (templates/_faq/), on /faq and /mtplus

   Native <details>, one per question, ruled like a list. The chevron is
   drawn in CSS so the summary stays plain text for screen readers.
   ═══════════════════════════════════════════════════════════════════════ */

.faq-list { max-width: 78ch; border-top: 1px solid var(--border); }
.faq-item {
  border-bottom: 1px solid var(--border);
  /* The site header is sticky; keep a linked answer's question below it. */
  scroll-margin-top: 88px;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px;
  list-style: none;
  cursor: pointer;
  font: 600 1.05rem/1.4 var(--font-sans);
  color: var(--dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: -4px 6px 0 0;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.faq-item[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.faq-item summary:hover { color: var(--red); }
.faq-item summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }

.faq-a { padding: 0 2px 20px; color: var(--gray); line-height: 1.65; }
.faq-a p + p,
.faq-a p + ul,
.faq-a ul + p { margin-top: 10px; }
.faq-a ul { padding-left: 20px; display: grid; gap: 6px; }
.faq-a a { color: var(--red); }
.faq-a strong { color: var(--dark); font-weight: 600; }
.faq-a kbd {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  font: 500 0.85em var(--font-mono);
  color: var(--dark);
}

/* ── /faq page ── */
.faq-page { padding-top: 40px; }
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 36px; font-size: 0.95rem; }
.faq-jump a { color: var(--red); }
.faq-group { margin-bottom: 44px; }
.faq-group h2 { font: 600 1.45rem/1.2 var(--font-display); margin-bottom: 12px; scroll-margin-top: 88px; }
.faq-group-lede { color: var(--gray); margin: -4px 0 14px; }
.faq-group-lede a, .faq-more a { color: var(--red); }
.faq-more { color: var(--gray); margin-bottom: 24px; }

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