/* FAQ: heading, one line and a WhatsApp button on the start side; the questions as an accordion
   on the other. Native <details name="faq">: one answer open at a time, keyboard and screen
   readers for free, and it works without JavaScript.

   Motion: the plus turns into a cross (200ms ease-out). Where the browser can animate to
   height:auto (::details-content + interpolate-size), the answer slides open in 250ms; elsewhere
   it simply appears. Hover (fine pointers): the disc fills H10 yellow (fill, never text: light
   ground, base.css yellow rule). */

.faq {
  --gutter: clamp(24px, 5vw, 96px);
  padding: clamp(96px, 12vh, 144px) var(--gutter);
  background: var(--surface-alt);
  color: var(--h10-ink);
}
.faq__inner {
  width: 100%; max-width: 1760px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
  align-items: start; gap: clamp(40px, 6vw, 120px);
}
.faq__intro { position: sticky; top: 112px; }         /* stays beside the list while it scrolls */
.faq__lead { margin: 12px 0 28px; font-size: 17px; line-height: 1.8; color: var(--ink-muted); }

/* the list: separate white cards, a round disc with a plus at the start of each question (it
   turns into a cross when open), the answer indented under the question text. Pattern after
   joinswsh.com's FAQ, in H10 colours: pale-yellow disc at rest, full yellow on hover / open. */
.faq__list { display: grid; gap: 12px; }
.faq__item {
  --pad: 20px; --disc: 32px; --disc-gap: 14px;
  border-radius: 16px;
  background: #FFFFFF;
  transition: box-shadow 200ms ease;
}
.faq__item[open] { box-shadow: 0 1px 0 var(--line), 0 12px 32px -20px rgba(22, 24, 28, 0.35); }
.faq__item summary {
  display: flex; align-items: center; gap: var(--disc-gap);
  min-height: 72px; padding: 16px var(--pad);
  font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; font-weight: 600;
  list-style: none; cursor: pointer;
  border-radius: inherit;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: 2px; }
.faq__chip {
  display: grid; place-items: center; flex: none;
  width: var(--disc); height: var(--disc); border-radius: 50%;
  background: #FCEFC4;                                /* H10 yellow, pale: the disc at rest */
  transition: background-color 150ms ease;
}
.faq__chip svg {
  width: 16px; height: 16px; fill: none; stroke: var(--h10-ink); stroke-width: 2.2; stroke-linecap: round;
  transition: transform 200ms var(--ease-out);
}
.faq__item[open] .faq__chip { background: var(--h10-yellow); }
.faq__item[open] .faq__chip svg { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover .faq__chip { background: var(--h10-yellow); }
}
.faq__answer {
  margin: 0; max-width: 68ch;
  padding: 0 var(--pad) 22px;
  padding-inline-start: calc(var(--pad) + var(--disc) + var(--disc-gap));   /* lines up with the question text */
  font-size: 16px; line-height: 1.8; color: var(--ink-muted);
}

/* smooth open/close where supported (progressive enhancement) */
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0; overflow: clip;
    transition: block-size 250ms var(--ease-out), content-visibility 250ms allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

@media (max-width: 900px) {
  .faq { --gutter: 16px; padding-block: 72px; }
  .faq__inner { grid-template-columns: none; gap: 32px; }
  .faq__intro { position: static; }
  .faq__item { --pad: 16px; --disc: 28px; --disc-gap: 12px; }
  .faq__item summary { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__chip, .faq__chip svg { transition: none; }
  .faq__item::details-content { transition: none; }
}