/* ─────────────────────────────────────────────────────────────
   content.css — shared styles for CourtConnect's public content
   pages (skill levels, open play guide, about/FAQ, changelog).

   Served from /static so all four pages share one stylesheet
   instead of duplicating a <style> block each. Loaded under
   style-src 'self', so no CSP change is needed.

   Design system mirrors the app: #0d1117 base, Outfit body,
   Barlow Condensed display, emerald accent.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #0d1117;
    color: #e2e8f0;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-wrap: break-word;
}

/* ── Atmosphere ── */
body::before {
    content: '';
    position: fixed;
    top: -20%; left: 50%;
    width: 900px; height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(16,185,129,0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
    from { transform: translateX(-50%) translateY(0); }
    to   { transform: translateX(-45%) translateY(40px); }
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ── Layout ── */
.wrap {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 22px 90px;
    animation: fadeUpPage 0.55s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes fadeUpPage {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ── Top bar ── */
.topbar {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.brand {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: 1.5em;
    letter-spacing: -0.01em;
    color: #f1f5f9;
    text-decoration: none;
}
.brand span { color: #34d399; }
.topbar nav { display: flex; gap: 6px; flex-wrap: wrap; }
.topbar nav a {
    font-size: 0.84em;
    font-weight: 600;
    color: rgba(226,232,240,0.6);
    text-decoration: none;
    padding: 6px 11px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.topbar nav a:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }
.topbar nav a.active { background: rgba(16,185,129,0.12); color: #6ee7b7; }

/* ── Hero ── */
.hero { padding: 46px 0 30px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 34px; }
.eyebrow {
    font-size: 0.74em;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(52,211,153,0.75);
    margin-bottom: 12px;
}
h1 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4em, 7vw, 3.6em);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #f1f5f9;
    margin-bottom: 14px;
}
.lede { font-size: 1.08em; color: rgba(226,232,240,0.68); max-width: 62ch; }

/* ── Prose ── */
h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 1.95em;
    letter-spacing: -0.01em;
    color: #6ee7b7;
    margin: 44px 0 14px;
    scroll-margin-top: 20px;
}
h3 {
    font-weight: 800;
    font-size: 1.09em;
    color: #e2e8f0;
    margin: 26px 0 8px;
}
p { margin-bottom: 15px; color: rgba(226,232,240,0.72); }
a { color: #34d399; }
a:hover { color: #6ee7b7; }
strong { color: #e2e8f0; font-weight: 700; }
em { color: rgba(226,232,240,0.8); }

ul, ol { margin: 0 0 16px 22px; }
li { margin-bottom: 7px; color: rgba(226,232,240,0.72); }
li::marker { color: rgba(52,211,153,0.65); }

/* ── Cards & callouts ── */
.card {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 15px;
    padding: 22px 24px;
    margin: 22px 0;
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.card > :last-child { margin-bottom: 0; }
.note {
    border-left: 3px solid #10b981;
    background: rgba(16,185,129,0.07);
    border-radius: 0 12px 12px 0;
    padding: 15px 20px;
    margin: 22px 0;
}
.note.warn { border-left-color: #fbbf24; background: rgba(251,191,36,0.07); }
.note p:last-child { margin-bottom: 0; }
.note .label {
    display: block;
    font-size: 0.74em;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6ee7b7;
    margin-bottom: 5px;
}
.note.warn .label { color: #fbbf24; }

/* ── Skill level rows ── */
.lvl-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.lvl-row:last-child { border-bottom: none; }
.lvl-key { flex: 0 0 104px; }
.lvl-stars { font-size: 0.92em; letter-spacing: 1px; display: block; margin-bottom: 4px; }
.lvl-dupr {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.07);
    color: rgba(226,232,240,0.6);
}
.lvl-body { flex: 1; min-width: 0; }
.lvl-name { font-weight: 800; color: #e2e8f0; margin-bottom: 3px; }
.lvl-body p { margin-bottom: 0; font-size: 0.95em; }

/* ── Numbered steps (How to Use) ── */
.step { display: flex; gap: 16px; padding: 19px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.step:last-child { border-bottom: none; padding-bottom: 0; }
.step-num {
    flex: 0 0 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 900; font-size: 1.2em;
    background: rgba(16,185,129,0.13);
    color: #6ee7b7;
    border: 1px solid rgba(16,185,129,0.3);
}
.step-body { flex: 1; min-width: 0; }
.step-body h3 { margin: 4px 0 5px; }
.step-body p { margin-bottom: 0; font-size: 0.96em; }
.step-body .opt { font-size: 0.8em; font-weight: 600; color: rgba(226,232,240,0.35); }

/* ── Tables ── */
.table-scroll { overflow-x: auto; margin: 20px 0; }
table { width: 100%; border-collapse: collapse; min-width: 460px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 0.94em; }
th { color: #6ee7b7; font-weight: 800; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.08em; }
td { color: rgba(226,232,240,0.72); }
tr:last-child td { border-bottom: none; }

/* ── FAQ ── */
details {
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.035);
    border-radius: 12px;
    padding: 0 20px;
    margin-bottom: 10px;
}
details[open] { background: rgba(255,255,255,0.055); }
summary {
    cursor: pointer;
    font-weight: 700;
    color: #e2e8f0;
    padding: 15px 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: #34d399; font-size: 1.3em; font-weight: 700; line-height: 1; }
details[open] summary::after { content: '−'; }
details > :not(summary) { padding-bottom: 4px; }
details > p:last-child { padding-bottom: 18px; }

/* ── Changelog ── */
.rel { padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.rel:last-child { border-bottom: none; }
.rel-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.rel-tag {
    font-size: 0.66em;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
}
.rel-tag.major { background: rgba(16,185,129,0.18); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.rel-tag.minor { background: rgba(255,255,255,0.07); color: rgba(226,232,240,0.6); border: 1px solid rgba(255,255,255,0.12); }
.rel-date { font-size: 0.82em; color: rgba(226,232,240,0.42); font-weight: 600; }
/* Changelog entry titles are h2 for document outline, but must not inherit
   the section-heading margin/typography above. */
.rel-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.14em;
    color: #e2e8f0;
    margin: 0 0 9px;
}
.rel ul { margin-left: 20px; margin-bottom: 0; }
.rel li { font-size: 0.95em; }

/* ── CTA + footer ── */
.cta {
    display: inline-block;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #04120c;
    font-weight: 800;
    font-size: 1.02em;
    padding: 13px 30px;
    border-radius: 12px;
    text-decoration: none;
    margin-top: 6px;
    box-shadow: 0 8px 24px rgba(16,185,129,0.22);
    transition: transform 0.15s, box-shadow 0.15s;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16,185,129,0.3); color: #04120c; }

.endcap { text-align: center; margin-top: 52px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,0.07); }
.endcap h2 { margin-top: 0; }

.site-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 26px 22px 40px;
    text-align: center;
}
.site-footer nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.site-footer a { font-size: 0.86em; color: rgba(226,232,240,0.55); text-decoration: none; }
.site-footer a:hover { color: #34d399; }
.site-footer .fine { font-size: 0.78em; color: rgba(226,232,240,0.3); }

@media (max-width: 640px) {
    .hero { padding: 32px 0 24px; }
    .lvl-row { flex-direction: column; gap: 7px; }
    .lvl-key { flex: none; display: flex; align-items: center; gap: 9px; }
    .lvl-stars { margin-bottom: 0; }
    .card { padding: 18px 18px; }

    /* Steps stack on narrow screens: the number sits above the text instead of
       beside it. Side-by-side relies on .step-body (flex:1, min-width:0)
       resolving correctly, and an organizer reported the text column collapsing
       to roughly one word per line on mobile (Aug 2026). Stacking removes the
       horizontal flex dependency altogether, so the body always gets the full
       width whatever the device does with flex sizing. */
    .step { flex-direction: column; gap: 9px; padding: 17px 0; }
    .step-num { flex: none; width: 34px; height: 34px; }
    .step-body { width: 100%; }
}