/* ============================================================
   12 · FAQ — section styles (cream-2 #EFE7D8, max-width 820)
   Scoped under #faq → collision-safe next to legacy components.css.

   Soft-open strategy (design canon, progressive enhancement):
   1. `interpolate-size: allow-keywords` — inherited property, scoped to
      #faq (NOT html) so it cannot surprise other sections. Browsers
      without support ignore the declaration.
   2. `details::details-content` transition — browsers that do not know
      the ::details-content pseudo-element drop BOTH rules entirely
      (invalid selector), so <details> opens natively, instantly, with
      content fully visible. Content is NEVER trapped.
   3. Browsers with ::details-content but without interpolate-size:
      block-size 0 → auto still toggles (no interpolation) = instant open.
   Exclusive accordion = native `name="faq"` attribute in the markup;
   browsers without support simply allow multiple open panels.
   ============================================================ */

#faq {
  /* local design tokens */
  --al-navy: #0B1929;
  --al-cream-2: #EFE7D8;
  --al-brass: #B8935A;
  --al-graphite: #2C3440;
  --al-hairline: rgba(184, 147, 90, 0.4);

  background: var(--al-cream-2);
  color: var(--al-navy);
  scroll-margin-top: 62px;
  interpolate-size: allow-keywords;
}

#faq .al-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 56px);
}

#faq .al-eyebrow {
  margin: 0;
  font: 600 12px/1.4 'Inter', system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--al-brass);
}

#faq h2 {
  margin: 12px 0 clamp(28px, 3.5vw, 40px);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--al-navy);
  text-wrap: balance;
}

/* ---- accordion ---- */
#faq details {
  border-top: 1px solid var(--al-hairline);
}
#faq details:last-of-type {
  border-bottom: 1px solid var(--al-hairline);
}

#faq summary {
  list-style: none;               /* hide default marker */
  cursor: pointer;
  padding: 20px 0;                /* ≥44px tap target */
  min-height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;        /* "+" stays top-right on wrapped questions */
  gap: 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.3;
  color: var(--al-navy);
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary:focus-visible {
  outline: 2px solid var(--al-brass);
  outline-offset: 2px;
}

/* marker: brass "+" rotates 45° into "×" when open */
#faq .al-faq-mark {
  flex: none;
  color: var(--al-brass);
  font-size: 22px;
  line-height: 0.85;
  margin-top: 2px;
  transition: transform 0.25s ease;
}
#faq details[open] .al-faq-mark { transform: rotate(45deg); }

#faq details p {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--al-graphite);
  max-width: 60ch;
  text-wrap: pretty;
}

/* soft open/close — see header comment for the fallback matrix */
#faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
}
#faq details[open]::details-content {
  block-size: auto;
}

/* ---- scroll reveal (progressive) ---- */
@keyframes al-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  #faq[data-reveal] {
    animation: al-fade-up 0.55s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #faq[data-reveal] { animation: none; }
  #faq .al-faq-mark { transition: none; }
  #faq details::details-content { transition: none; }
}