{{- /* faq-accordion.html — accordion over data/faq.yaml (sorted by weight).
       Progressive enhancement: each item is a native <details>/<summary>, so
       every answer is fully readable and keyboard-operable with NO JavaScript.
       Alpine (when present) layers single-open accordion behaviour on top via
       x-bind:open + the native `toggle` event — never hiding content with
       x-cloak. The FAQPage JSON-LD is emitted separately by schema-jsonld.html. */ -}}
{{- $faqs := sort .Site.Data.faq "weight" -}}
<div class="mx-auto max-w-3xl divide-y divide-secondary/10 rounded-xl border border-secondary/10" x-data="{ open: null }">
  {{- range $i, $f := $faqs -}}
    <details class="group"
             x-bind:open="open === {{ $i }}"
             @toggle="open = $event.target.open ? {{ $i }} : (open === {{ $i }} ? null : open)">
      <summary id="faq-btn-{{ $i }}" aria-controls="faq-panel-{{ $i }}"
               class="flex w-full cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 text-left text-base font-semibold text-secondary [&::-webkit-details-marker]:hidden">
        <span>{{ $f.question }}</span>
        <svg class="h-5 w-5 shrink-0 text-primary transition-transform duration-200 group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
        </svg>
      </summary>
      <div id="faq-panel-{{ $i }}" role="region" aria-labelledby="faq-btn-{{ $i }}"
           class="px-5 pb-5 text-secondary/80">
        <p>{{ $f.answer }}</p>
        {{- with $f.category }}<p class="mt-2 text-xs uppercase tracking-wide text-secondary/70">{{ . }}</p>{{ end -}}
      </div>
    </details>
  {{- end -}}
</div>