/* Drawer / accordion block — expandable FAQ-style sections.
   Uses native <details>/<summary> so it works without JS and is accessible. */

.accordion-section .accordion-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.accordion-drawer {
    border: 1px solid var(--border-color, #2a3142);
    border-radius: 12px;
    background: var(--surface-bg, #141925);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.accordion-drawer[open] {
    border-color: color-mix(in srgb, var(--accent-gold, #38bdf8) 45%, var(--border-color, #2a3142));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.accordion-drawer-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.15rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.92rem;
    color: var(--accent-gold, #38bdf8);
    transition: background-color 0.15s ease;
}

.accordion-drawer-head::-webkit-details-marker {
    display: none;
}

.accordion-drawer-head:hover,
.accordion-drawer[open] > .accordion-drawer-head {
    background: color-mix(in srgb, var(--accent-gold, #38bdf8) 8%, transparent);
}

.accordion-drawer-head:focus-visible {
    outline: 2px solid var(--accent-gold, #38bdf8);
    outline-offset: -2px;
}

.accordion-drawer-chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--accent-gold, #38bdf8);
    transition: transform 0.2s ease;
}

.accordion-drawer[open] > .accordion-drawer-head .accordion-drawer-chevron {
    transform: rotate(180deg);
}

.accordion-drawer-title {
    flex: 1 1 auto;
    min-width: 0;
}

.accordion-drawer-body {
    padding: 0.25rem 1.15rem 1.15rem;
    color: var(--text-primary, #cbd5e1);
    border-top: 1px solid color-mix(in srgb, var(--border-color, #2a3142) 70%, transparent);
}

.accordion-drawer-body > :first-child {
    margin-top: 0.9rem;
}

.accordion-drawer-body > :last-child {
    margin-bottom: 0;
}

.accordion-drawer-lead {
    font-style: italic;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 0.6rem;
}

.accordion-drawer-action {
    margin-top: 0.9rem;
    margin-bottom: 0;
}

.accordion-drawer-action a {
    font-weight: 600;
}

/* Non-collapsible drawers ("Don't allow collapse"): always open, no toggle affordance. */
.accordion-drawer--static {
    border-color: color-mix(in srgb, var(--accent-gold, #38bdf8) 45%, var(--border-color, #2a3142));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.accordion-drawer--static > .accordion-drawer-head {
    cursor: default;
    user-select: auto;
    background: color-mix(in srgb, var(--accent-gold, #38bdf8) 8%, transparent);
}

/* Subtle open/close animation for the body. */
@media (prefers-reduced-motion: no-preference) {
    .accordion-drawer[open] > .accordion-drawer-body {
        animation: accordion-reveal 0.18s ease;
    }
}

@keyframes accordion-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}