/* ==========================================================================
   faq.css — two-column FAQ (lead text + accordion list)
   Markup: <div class="faq-grid">
            <div class="lead">
              <div class="kicker">Common questions</div>
              <h2>...</h2>
              <p>Need something else? <a class="contact-link">Contact us</a>.</p>
            </div>
            <div class="faq-list">
              <details><summary>Question</summary><p>Answer</p></details>
   Uses native <details>/<summary> for zero-JS accordion.
   ========================================================================== */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-56);
  align-items: start;
}

/* (.kicker comes from layout.css — utility class) */
.faq-grid .lead h2 {
  font-size: var(--fs-h2-faq);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-12);
  font-weight: var(--fw-bold);
}
.faq-grid .lead p {
  color: var(--ink-3);
  margin: 0 0 var(--space-18);
}
.faq-grid .lead p:has(+ .contact-link) { margin-bottom: var(--space-8); }
.faq-grid .lead .contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  color: var(--brand-ink);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--brand-rgb), .5); /* --brand at 50% */
}
.faq-grid .lead .contact-link svg.lucide,
.faq-grid .lead .contact-link [data-lucide] { width: 16px; height: 16px; }

/* Enable height-keyword interpolation so .faq-list details::details-content
   can transition between block-size: 0 and block-size: auto. Browsers that
   don't support this rule (older Safari/Firefox) fall back to instant snap. */
:root { interpolate-size: allow-keywords; }

/* Accordion items */
.faq-list details {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-18) var(--space-22);
  margin-bottom: var(--space-12);
  transition: border-color .2s ease, box-shadow .25s ease;
}
.faq-list details:hover { border-color: rgba(var(--brand-rgb), .35); }
.faq-list details[open] {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-card);
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
  color: var(--ink);
  transition: color .2s ease, font-size .25s cubic-bezier(.2,.8,.2,1);
}
.faq-list summary::-webkit-details-marker { display: none; }
/* When open the question grows — visual lift that mirrors the expand. */
.faq-list details[open] summary { font-size: var(--fs-subhead); }

/* Question icon (left) — height matches one text line so the icon centers
   on the FIRST line of text when the question wraps to multiple lines. */
.faq-list .q-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1lh;
  flex-shrink: 0;
  color: var(--muted);
  transition: color .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.faq-list .q-icon svg.lucide,
.faq-list .q-icon [data-lucide] { width: 20px; height: 20px; }
.faq-list .q-text { flex: 1; min-width: 0; }

/* Hover on the question line — icon + toggle pick up brand color, text deepens */
.faq-list summary:hover { color: var(--brand-ink); }
.faq-list summary:hover .q-icon { color: var(--brand); transform: scale(1.08); }
.faq-list summary:hover .q-toggle { color: var(--brand-ink); }

/* Open state — icon stays brand-colored to mark the active item */
.faq-list details[open] .q-icon { color: var(--brand); }

/* Plus / minus toggle chip (right). Two stacked lucide SVGs — show plus when
   closed, minus when open. SVGs are geometrically centered, unlike text + / −
   glyphs which depend on font ascender metrics. */
.faq-list .q-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  color: var(--brand);
  flex-shrink: 0;
  margin-left: auto;
  /* The 34px circle is taller than one text line. Keep it centered against
     the first line by anchoring its center to the line center. */
  margin-top: calc((1lh - 34px) / 2);
  align-self: flex-start;
  transition: background .2s ease, color .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.faq-list .q-toggle svg.lucide,
.faq-list .q-toggle [data-lucide] {
  width: 18px;
  height: 18px;
  /* Stack both icons in the same grid cell so swapping is instant. */
  grid-area: 1 / 1;
}
.faq-list .q-toggle .q-minus { display: none; }
.faq-list details[open] .q-toggle .q-plus { display: none; }
.faq-list details[open] .q-toggle .q-minus { display: block; }

.faq-list summary:hover .q-toggle,
.faq-list details[open] .q-toggle { background: var(--brand-soft); }

.faq-list details p {
  /* Indent matches the summary's icon-column + gap so the answer text
     starts under the question text, not under the ? icon. */
  margin: var(--space-14) 0 var(--space-4);
  padding-left: calc(20px + var(--space-14));
  color: var(--ink-3);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
}

/* Smooth expand animation — uses ::details-content (Chrome 131+, FF 134+,
   Safari 18.2+) plus interpolate-size on :root above. Older browsers ignore
   the transition and snap instantly. */
.faq-list details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size .35s cubic-bezier(.2,.8,.2,1),
    opacity .25s ease,
    content-visibility .35s allow-discrete;
}
.faq-list details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .faq-list details,
  .faq-list summary,
  .faq-list .q-icon,
  .faq-list .q-toggle,
  .faq-list details::details-content {
    transition: none;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .faq-grid { grid-template-columns: 1fr; gap: var(--space-24); }
}

@media (max-width: 720px) {
  /* Center the lead block on mobile (kicker, h2, p, contact-link).
     Accordion items below stay left-aligned for readability. */
  .faq-grid .lead { text-align: center; }
}