/* ============================================================
   faq.css - page styles for /faq/ only.
   Shared classes (.container, .section-head, .h2, .eyebrow,
   .btn) carry the rest, from base.css/components.css on top of
   tokens.css. Prefixed with faq- to avoid collisions.
   The accordion is native <details>/<summary> with ZERO JavaScript:
   the browser handles open/close, this file only restyles it. The
   first item ships expanded via the `open` attribute on its
   <details> in faq/index.html, not via CSS or JS.
   How to edit: add or remove questions by duplicating a
   <details class="faq-item"> block in faq/index.html; no CSS
   changes needed.
   ============================================================ */

/* ---- Intro / mini hero (Figma: pt 120, pb 56) ---- */
.faq-intro {
  padding-top: var(--space-28);    /* 120px */
  padding-bottom: var(--space-12); /* 56px */
}

/* ---- FAQ accordion section (Figma: pt 16, pb 100) ---- */
.faq-section {
  padding-top: var(--space-4);   /* 16px */
  padding-bottom: 100px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* 16px */
  max-width: 880px;
  margin-inline: auto;
}

/* ---- Accordion item (native <details>) ---- */
.faq-item {
  background: var(--bg-page);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-2xl); /* 12px */
  box-shadow: 0 2px 12px rgba(22, 27, 33, 0.06);
}

/* Question row (summary). Padding 28px x / 26px y per Figma. */
.faq-item__q {
  display: flex;
  align-items: center;
  gap: var(--space-4); /* 16px */
  padding: 26px 28px;  /* Figma: 26 y / 28 x */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

/* Remove the native disclosure triangle across browsers. */
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }

/* Chevron icon, pinned to the card's right edge, rotates when open.
   The question is a bare text node inside <summary>, so the icon pushes
   itself right with margin-left auto (a ">:first-child{flex:1}" rule
   would target the icon, not the text, and misplace the chevron).
   That exact bug shipped once: keep margin-left auto here and do not
   swap it for a flex-grow rule on a child selector. */
.faq-item__icon {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 200ms ease, color 200ms ease;
}
.faq-item[open] .faq-item__icon {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Answer body. Zero top padding on purpose: the summary's own bottom
   padding already provides the question-to-answer gap, so any top
   padding here would widen it (an earlier note said "negative top
   padding", which was wrong, padding cannot be negative). */
.faq-item__body {
  padding: 0 28px 26px;
}
.faq-item__body p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Keyboard focus ring on the summary. */
.faq-item__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-2xl);
}

/* ---- CTA band (Figma: bg-surface, pt 80, pb 90, gap 24) ---- */
.faq-cta {
  background: var(--bg-surface);
  padding-top: var(--space-18);  /* 80px */
  padding-bottom: 90px;
}
.faq-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6); /* 24px */
}
.faq-cta .h2 {
  font-size: 36px;
  letter-spacing: -0.6px;
  max-width: 760px;
}
.faq-cta__intro {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .faq-intro {
    padding-top: var(--space-20); /* 88px */
    padding-bottom: var(--space-10); /* 48px */
  }
  .faq-item__q {
    padding: 20px 20px;
    font-size: 17px;
  }
  .faq-item__body {
    padding: 0 20px 20px;
  }
  .faq-cta .h2 { font-size: 28px; }
}