/* =====================================================
   REFORMREBELL — LEGAL / STATIC PAGE STYLES
   ===================================================== */

.legal-hero {
    padding: 5rem 1.5rem 3rem;
    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(232,0,45,.12) 0%, transparent 65%);
    text-align: center;
    border-bottom: 1px solid rgba(232,0,45,.15);
}

.legal-eyebrow {
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #e8002d;
    margin-bottom: .75rem;
    font-weight: 700;
}

.legal-hero-title {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -.02em;
    color: #f0f0f8;
    margin-bottom: .75rem;
    line-height: 1.1;
}

.legal-hero-sub {
    color: rgba(240,240,248,.55);
    font-size: .95rem;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ── Layout ──────────────────────────────────────────── */
.legal-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

.legal-card {
    background: #111118;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
    .legal-card { padding: 1.5rem 1.25rem; }
}

/* ── Typography ──────────────────────────────────────── */
.legal-card h2 {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e8002d;
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(232,0,45,.2);
    display: flex;
    align-items: center;
    gap: .6rem;
}

.legal-card h3 {
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(240,240,248,.9);
    margin: 1.5rem 0 .5rem;
    text-transform: uppercase;
}

.legal-card p,
.legal-card li {
    font-size: .92rem;
    color: rgba(240,240,248,.72);
    line-height: 1.8;
    margin-bottom: .6rem;
}

.legal-card ul,
.legal-card ol {
    padding-left: 1.4rem;
    margin: .5rem 0 .8rem;
}

.legal-card ul li { list-style: disc; }
.legal-card ol li { list-style: decimal; }

.legal-card a {
    color: #e8002d;
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
}

.legal-card a:hover { opacity: .8; }

.legal-card strong {
    color: rgba(240,240,248,.9);
    font-weight: 700;
}

.legal-card code {
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    padding: .15em .4em;
    font-size: .85rem;
    color: #e8002d;
}

/* ── Callouts ────────────────────────────────────────── */
.legal-callout {
    background: rgba(232,0,45,.08);
    border: 1px solid rgba(232,0,45,.25);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
}

.legal-callout p { margin-bottom: 0; color: rgba(240,240,248,.85); }

.legal-callout.warning {
    background: rgba(255,200,0,.06);
    border-color: rgba(255,200,0,.25);
}

.legal-callout.info {
    background: rgba(0,180,255,.06);
    border-color: rgba(0,180,255,.2);
}

.legal-callout.satire {
    background: rgba(232,0,45,.1);
    border-color: #e8002d;
    border-left: 4px solid #e8002d;
}

/* ── Todo marker ─────────────────────────────────────── */
.legal-todo {
    display: inline-block;
    background: rgba(255,200,0,.15);
    border: 1px solid rgba(255,200,0,.4);
    border-radius: 4px;
    padding: .1em .5em;
    font-size: .8rem;
    font-weight: 700;
    color: #ffc800;
    letter-spacing: .04em;
    margin: 0 .2em;
}

/* ── Table ───────────────────────────────────────────── */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    margin: .75rem 0;
}

.legal-table th {
    text-align: left;
    padding: .6rem .75rem;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #e8002d;
    border-bottom: 1px solid rgba(232,0,45,.25);
}

.legal-table td {
    padding: .6rem .75rem;
    color: rgba(240,240,248,.7);
    border-bottom: 1px solid rgba(255,255,255,.05);
    vertical-align: top;
    line-height: 1.6;
}

.legal-table tr:last-child td { border-bottom: none; }

/* ── Sidebar nav ─────────────────────────────────────── */
.legal-page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 900px) {
    .legal-page-layout {
        grid-template-columns: 200px 1fr;
        align-items: start;
    }
}

.legal-sidenav {
    position: sticky;
    top: 90px;
    background: #111118;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 1.25rem;
    display: none;
}

@media (min-width: 900px) {
    .legal-sidenav { display: block; }
}

.legal-sidenav h4 {
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #e8002d;
    margin: 0 0 .75rem;
    font-weight: 800;
}

.legal-sidenav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.legal-sidenav a {
    display: block;
    padding: .4rem .6rem;
    font-size: .8rem;
    color: rgba(240,240,248,.6);
    text-decoration: none;
    border-radius: 6px;
    transition: color .2s, background .2s;
    line-height: 1.4;
}

.legal-sidenav a:hover { color: #f0f0f8; background: rgba(232,0,45,.08); }

/* ── FAQ accordion ───────────────────────────────────── */
.faq-item {
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: rgba(240,240,248,.85);
    font-size: .92rem;
    font-weight: 600;
    padding: .9rem 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color .2s;
}

.faq-question:hover { color: #e8002d; }

.faq-question i { color: #e8002d; font-size: .8rem; flex-shrink: 0; transition: transform .25s; }

.faq-item.open .faq-question i { transform: rotate(45deg); }

.faq-answer {
    display: none;
    padding: 0 0 1rem;
    font-size: .9rem;
    color: rgba(240,240,248,.65);
    line-height: 1.8;
}

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

/* ── Back link ───────────────────────────────────────── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(240,240,248,.5);
    text-decoration: none;
    padding: .5rem .75rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.08);
    margin-bottom: 1.5rem;
    display: inline-flex;
    transition: color .2s, border-color .2s;
}

.back-link:hover { color: #e8002d; border-color: rgba(232,0,45,.3); }