/* =========================================================
   FAQ Section — native <details> accordion.

   Every item shares name="faq", so opening one closes the rest.
   js/faq.js repeats that for engines that ignore the attribute.
   ========================================================= */

.faq-section {
    background-color: var(--color-ink-50);
}

.faq-section .faq-section-wrapper {
    padding-block: var(--section-padding);
}

.faq-section .faq-section-wrapper .faq-section-inner {
    gap: 22px;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
}

.faq-section .faq-section-wrapper .faq-section-inner .faq-section-list {
    gap: 10px;
    list-style: none;
}

/* ---------- Item ---------- */

.faq-section .faq-section-wrapper .faq-section-inner .faq-section-list details {
    padding: 18px 22px;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--color-border);
    /* Figma draws the stroke inside */
}

.faq-section .faq-section-wrapper .faq-section-inner .faq-section-list summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    /* Figma: 16 → 23 */
    color: var(--color-heading);
    cursor: pointer;
    list-style: none;
}

/* drop the default disclosure triangle in both engines */
.faq-section .faq-section-wrapper .faq-section-inner .faq-section-list summary::-webkit-details-marker {
    display: none;
}

.faq-section .faq-section-wrapper .faq-section-inner .faq-section-list summary::after {
    content: "+";
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-none);
    color: var(--color-slate-500);
}

.faq-section .faq-section-wrapper .faq-section-inner .faq-section-list details[open] summary::after {
    content: "\2013";
    color: var(--color-signal-700);
}

.faq-section .faq-section-wrapper .faq-section-inner .faq-section-list .faq-section-answer {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: 12px;
}

.faq-section .faq-section-wrapper .faq-section-inner .faq-section-list .faq-section-answer p {
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-prose);
    color: var(--color-slate-700);
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

    .faq-section .faq-section-wrapper .faq-section-inner .faq-section-list details {
        padding: var(--space-sm) 18px;
    }

}