/*
 * FAQ accordion — volunteers.php and nonprofits.php.
 *
 * These two pages carried the same eleven selectors inline, byte-identical
 * apart from volunteers.php stating `#faqs` twice. One component, written
 * twice, invisible to every guard in the suite because both copies lived in
 * a <style> block.
 *
 * Two rules did not survive the move:
 *
 *   `.faq-item.active .fa-plus { transform: rotate(45deg) }` could never
 *   match. The accordion script swaps the icon class from `fa-plus` to
 *   `fa-minus` when the item opens, so by the time `.active` is present the
 *   element the selector is looking for no longer exists. The swap is what
 *   renders; the rotation never did.
 *
 *   The second `#faqs` on volunteers.php restated the first exactly.
 *
 * Two literals became tokens. `#e0e0e0` is the card border the style guide
 * specifies as #ECECEC, and `#f7f7f7` is white by any measure the eye can
 * take. Every boundary in this component sits between 1.10:1 and 1.23:1
 * either way — the card is defined by its text, not by its edges. That is
 * worth revisiting, but not while moving a file.
 */

#faqs {
    background-color: var(--light-gray);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 5px;
    overflow: hidden;
}

/* .faq-question is the heading; .faq-trigger is the control inside it. The
   heading carries no padding of its own so the button fills the whole bar and
   the whole bar stays the hit target. The global focus ring in styles.css
   applies here unaltered — nothing in this file suppresses it. */
.faq-question {
    margin: 0;
    font-size: 1.1rem;
}

.faq-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    background-color: var(--white);
    color: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
}

.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-answer {
    display: none;
    padding: 20px;
    border-top: 1px solid var(--border-subtle);
}

.faq-item.active .faq-answer {
    display: block;
}