/* ============================================
   faq-a11y.css — Accessible FAQ accordion
   ============================================
   The FAQ header is a real <button> so it is reachable and operable by
   keyboard and announced as a control. These rules neutralise the browser's
   default button appearance so the existing .faq-q styling is preserved
   exactly as designed on every page.

   The answer panel keeps its max-height transition for the expand/collapse
   animation; visibility of the collapsed text is controlled with
   `visibility` so hidden answers are removed from the accessibility tree and
   from in-page search without breaking the transition.
   ============================================ */

button.faq-q {
  /* Strip UA button chrome only. Typography is deliberately NOT set here:
     `.faq-q` already declares font-family/size/weight per page and this rule
     has higher specificity, so setting `font` would override Sora with the
     inherited body font. `font: inherit` in global.css only needs overriding
     where a page styles it, which the page rules already do. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  color: inherit;

  /* Re-assert the shared accordion layout used by every page */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  user-select: none;

  /* Buttons default to line-height: normal. Pages that styled .faq-q as a div
     relied on inheriting the body line-height, so restore that here. Pages
     which set their own line-height use a more specific selector and win. */
  line-height: inherit;
}

button.faq-q:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The visible question text is wrapped in a span so the icon stays a
   sibling, keeping flex layout identical to the previous markup. */
button.faq-q > .faq-q-text {
  flex: 1 1 auto;
}

/* Collapsed answers are hidden from assistive tech and text search while the
   max-height transition still animates the reveal. */
.faq-item:not(.open) > .faq-a {
  visibility: hidden;
}

.faq-item.open > .faq-a {
  visibility: visible;
}

/* Respect users who prefer less motion: reveal immediately. */
@media (prefers-reduced-motion: reduce) {
  .faq-a {
    transition: none;
  }
}