{{-- One FAQ entry using a native <details> element (works without JavaScript). --}}
@props(['question'])

<details class="group border-b border-slate-200 py-4">
    <summary class="flex cursor-pointer list-none items-center justify-between gap-4 font-semibold text-slate-900">
        <span>{{ $question }}</span>
        <span class="text-brand-700 transition group-open:rotate-45" aria-hidden="true">+</span>
    </summary>
    <div class="mt-3 text-slate-600">{{ $slot }}</div>
</details>