/*
 * Supporting content pages (Build 008 Gates 2-4, 7). Shared by
 * templates/supporting-content.php, templates/faq.php, and
 * templates/legal-placeholder.php — prose-heavy pages that reuse the core
 * design tokens/primitives rather than introducing new visual language.
 */

.er-supporting-hero {
    background: radial-gradient(ellipse 120% 90% at 50% -10%, var(--er-graphite-400) 0%, var(--er-carbon-800) 55%, var(--er-carbon-900) 100%);
}

/* ---- FAQ ---- */

.er-faq-item {
    border-bottom: 1px solid var(--er-border);
}

.er-faq-item summary {
    padding-block: var(--er-space-5);
    font-size: var(--er-text-md);
    font-weight: 600;
    color: var(--er-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--er-space-4);
}

.er-faq-item summary::-webkit-details-marker {
    display: none;
}

.er-faq-item summary::after {
    content: "+";
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xl);
    color: var(--er-accent-strong);
    flex-shrink: 0;
}

.er-faq-item[open] summary::after {
    content: "\2212";
}

.er-faq-item summary:focus-visible {
    outline: 2px solid var(--er-accent-strong);
    outline-offset: 3px;
}

.er-faq-item__body {
    padding-bottom: var(--er-space-5);
    color: var(--er-text-dim);
    max-width: 68ch;
}

/* ---- Legal placeholder ---- */

.er-policy-status {
    display: flex;
    align-items: center;
    gap: var(--er-space-3);
    background: var(--er-bg-raised);
    border: 1px solid var(--er-warn);
    border-left: 3px solid var(--er-warn);
    border-radius: var(--er-radius-sm);
    padding: var(--er-space-4) var(--er-space-5);
    margin-bottom: var(--er-space-7);
    font-family: var(--er-font-mono);
    font-size: var(--er-text-sm);
    color: var(--er-text);
}

.er-policy-status::before {
    content: "\26A0";
    color: var(--er-warn);
    font-size: var(--er-text-lg);
}