/* ==========================================================================
   FAQ — an accessible accordion. Light (paper), the same register as
   Founder/Services, since this is reference material meant to be read
   calmly, not a moment that needs its own visual identity. Expand/collapse
   uses a grid-rows 0fr/1fr transition (see .faq-answer-wrap) so no JS height
   measurement is needed — main.js only toggles a class and ARIA state.
   ========================================================================== */

.faq {
  background-color: var(--color-paper);
  color: var(--color-ink-on-paper);
  /* See founder.css — regular slate/brass fail contrast on paper. */
  --color-slate: var(--color-slate-on-paper);
  --color-brass: var(--color-brass-on-paper);
}

/* No eyebrow above this heading — "FAQ" as a label over "Frequently Asked
   Questions" just restates the heading, so this section gets a single
   heading instead of the eyebrow+title pair every other section uses. */
.faq-title {
  max-width: 30rem;
}

.faq-list {
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-hairline-paper);
}

.faq-item {
  border-bottom: 1px solid var(--color-hairline-paper);
}

.faq-question-heading {
  margin: 0;
}

/* Same hover trick as .service-row — negative inline margin lets the hover
   background bleed to a rounded edge instead of stopping at the text. */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding-block: var(--space-4);
  padding-inline: var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-card-title);
  font-weight: 600;
  color: var(--color-ink-on-paper);
  text-align: left;
  transition: color var(--duration-micro) var(--ease-response),
              background-color var(--duration-micro) var(--ease-response);
}
.faq-question:hover {
  color: var(--color-brass);
  background-color: rgba(20, 22, 26, 0.03);
}

/* Chevron — same shape used for the select dropdowns in the contact form,
   so "there's more here" reads the same way in both places. Rotates open
   instead of morphing into a minus sign. */
.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-brass);
  transition: transform var(--duration-micro) var(--ease-response);
}
.faq-icon svg {
  width: 16px;
  height: 16px;
}
.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease-entrance);
}
.faq-answer-wrap.is-open {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer {
  padding-bottom: var(--space-4);
  padding-inline: var(--space-3);
  max-width: 40rem;
  color: var(--color-slate);
  opacity: 0;
  transition: opacity 0.3s var(--ease-entrance);
}
.faq-answer-wrap.is-open .faq-answer {
  opacity: 1;
  /* Answers fade in slightly after the row starts expanding, rather than
     appearing instantly mid-motion. */
  transition-delay: 0.1s;
}

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