/* donate-patreon-foundation / TASK_04 — donate-surface stylesheet.
 *
 * Shared between /support/ (5-tier ladder) and /founders/ (TASK_05
 * recognition wall). Both pages extend donate/_base.html which links
 * this file via {% static 'css/donate.css' %}. NO money signifiers
 * anywhere in copy (AC-C04 enforced by tests_no_money_display).
 *
 * Conventions match game.css naming where useful but the donate
 * pages are deliberately standalone (no canvas chrome, no toolbar)
 * so they read cleanly as a tip-jar surface rather than gameplay UI.
 */

:root {
    --donate-bg: #1a1410;
    --donate-fg: #eee7d8;
    --donate-fg-muted: #b8aa90;
    --donate-accent: #d4a04a;
    --donate-card-bg: #251c14;
    --donate-card-border: rgba(212, 160, 74, 0.35);
    --donate-radius: 8px;
}

* {
    box-sizing: border-box;
}

body.donate-body {
    margin: 0;
    padding: 0;
    background: var(--donate-bg);
    color: var(--donate-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
}

.donate-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 20px;
}

.donate-hero {
    text-align: center;
    margin-bottom: 36px;
}

.donate-hero h1 {
    font-size: 2.1rem;
    margin: 0 0 18px;
    color: var(--donate-accent);
}

.donate-lead {
    margin: 0 0 24px;
    color: var(--donate-fg-muted);
    font-size: 1.05rem;
}

.donate-cta-primary {
    display: inline-block;
    background: var(--donate-accent);
    color: #1a1410;
    text-decoration: none;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: var(--donate-radius);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.donate-cta-primary:hover,
.donate-cta-primary:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(212, 160, 74, 0.32);
}

.donate-tiers {
    display: grid;
    gap: 16px;
}

.tier-card {
    background: var(--donate-card-bg);
    border: 1px solid var(--donate-card-border);
    border-radius: var(--donate-radius);
    padding: 18px 22px;
}

.tier-card-head {
    margin-bottom: 12px;
}

.tier-card-name {
    margin: 0;
    font-size: 1.35rem;
    color: var(--donate-accent);
}

.tier-card-name-en {
    font-size: 0.85em;
    font-weight: 400;
    color: var(--donate-fg-muted);
    margin-left: 6px;
}

.tier-card-perks {
    margin: 0;
    padding-left: 20px;
}

.tier-card-perks li {
    margin: 4px 0;
}

.donate-footer {
    max-width: 760px;
    margin: 32px auto 0;
    padding: 24px 20px;
    border-top: 1px solid rgba(212, 160, 74, 0.18);
    text-align: center;
    color: var(--donate-fg-muted);
}

.donate-footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.donate-footer-links a {
    color: var(--donate-accent);
    text-decoration: none;
}

.donate-footer-links a:hover,
.donate-footer-links a:focus {
    text-decoration: underline;
}

.donate-footer-meta {
    margin: 0;
    font-size: 0.85rem;
}

/* donate-patreon-foundation / TASK_05 — founders wall styling.
 * Grouped tier sections; mottos rendered inline at T4+; lifetime
 * badge optional. No money signifiers per AC-C04. */

.founders-empty {
    text-align: center;
    color: var(--donate-fg-muted);
    font-style: italic;
    margin: 40px 0;
}

.founders-groups {
    display: grid;
    gap: 24px;
}

.founders-group {
    background: var(--donate-card-bg);
    border: 1px solid var(--donate-card-border);
    border-radius: var(--donate-radius);
    padding: 18px 22px;
}

.founders-group-name {
    margin: 0 0 12px;
    font-size: 1.25rem;
    color: var(--donate-accent);
    letter-spacing: 0.02em;
}

.founders-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.founders-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
}

.founder-name {
    font-weight: 600;
    color: var(--donate-fg);
}

.founder-motto {
    color: var(--donate-fg-muted);
    font-style: italic;
    font-size: 0.95em;
}

.founder-badge {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1a1410;
    background: var(--donate-accent);
    padding: 2px 8px;
    border-radius: 12px;
}

/* Mobile breakpoint — keep the hero readable + the tier cards full
 * width without horizontal scroll at 320px viewport (spec.md AC-W03). */
@media (max-width: 640px) {
    .donate-main {
        padding: 20px 14px;
    }

    .donate-hero h1 {
        font-size: 1.7rem;
    }

    .tier-card {
        padding: 14px 16px;
    }

    .founders-group {
        padding: 14px 16px;
    }

    .founders-row {
        flex-direction: column;
        gap: 4px;
    }
}