/* odds.how theme — the odds.school livery.
 *
 * A LAYER over the engine's bundled default (the Epoch 24.6 crafted-
 * functionalist substrate, ADR-0051). That default is CHAMELEONIC: every
 * rule reads a variable from its :root CONTROL PANEL and is wrapped in
 * :where(...) (zero specificity), so overriding the control-panel
 * variables below re-themes the whole site, and any single-class rule
 * here wins the cascade cleanly. custom.css is auto-linked AFTER the
 * bundled sheet, so we also win the bare content-block classes
 * (.page-title / .page-body / .contents) by loading later.
 *
 * DO NOT create content/style.css — authoring it makes the engine drop
 * the bundled substrate wholesale, losing the whole scaffold. The theme
 * lives here, in custom.css.
 *
 * The look is the livery of odds.school (the practical-analytical
 * sibling site of The School of Odds; source of truth:
 * odds4/public/static/app.css): paper background, navy ink, site-blue
 * links that underline on hover, magenta brand hover, Courier Prime
 * type, a centered masthead (foot mark above wordmark above nav), and
 * a centered footer (school lockup + credit + small grey disclaimer).
 */

/* The engine binds content/font.ttf (Courier Prime Regular) as
   'sole-site-font'. Declare the three REAL companion faces under the
   same family so browsers use them instead of synthesizing bold and
   oblique — odds.school ships all four faces. */
@font-face {
    font-family: 'sole-site-font';
    src: url('/_fonts/CourierPrime-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'sole-site-font';
    src: url('/_fonts/CourierPrime-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'sole-site-font';
    src: url('/_fonts/CourierPrime-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    /* --- Control panel: the odds.school palette (the variable names the
           substrate reads — recolours masthead, nav, prose, listings,
           footer, search UI at once). --- */
    --bg: #f8f9fa;                 /* paper page                          */
    --ink: #1a1a2e;                /* navy body text                      */
    --muted: #666;                 /* dominant secondary grey in app.css  */
    --accent: #0066cc;             /* site blue — links, active states    */
    --accent-ink: #0066cc;         /* hover keeps the blue; underline
                                      signals hover, as on odds.school    */
    --rule: #dee2e6;               /* hairlines, table borders            */
    --code-bg: #faf9f6;            /* the paper-card tone                 */

    /* --- Control panel: type. Courier Prime everywhere, like the
           sibling; generic monospace stays for code via --font-mono. --- */
    --font-body: 'sole-site-font', 'Courier New', Courier, monospace;

    /* odds.school's type ladder: body 1.2rem / h3 1.1 / h2 1.25 /
       h1 & wordmark 1.5-1.25. Overriding the substrate's derived
       tokens retunes every heading, the .page-title, and the
       .site-title in one move. */
    --text-base: 1.2rem;
    --text-sm: 0.875rem;
    --text-lg: 1.1rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --leading: 1.5;

    /* Our own knobs (not substrate variables). */
    --brand-hover: #c20060;        /* magenta — wordmark hover            */
    --wordmark-ink: #1a1a1a;       /* near-black wordmark, .o4-brand-name */
}

/* odds.school has no dark mode; brand parity wins over OS preference.
   Re-assert the palette inside the dark media block so the substrate's
   own dark variant can never flip the livery. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #f8f9fa;
        --ink: #1a1a2e;
        --muted: #666;
        --accent: #0066cc;
        --accent-ink: #0066cc;
        --rule: #dee2e6;
        --code-bg: #faf9f6;
    }
}

/* Paint the root too, so the area outside the centered column fills
   with the page colour rather than the browser canvas. */
html { background: var(--bg); }

/* Body prose at the odds.school size (the substrate sets type tokens
   but leaves body copy at the reader's 1rem default). */
body { font-size: var(--text-base); }

/* --- Masthead (engine auto-chrome, themed) --------------------------- */

/* Centered crest like .o4-site-header: the foot mark above the wordmark
   above the nav row and language switcher. The blocks are flex children
   of <body> (header dissolves via display:contents), so align-self
   centres each one. odds.school's foot is 80px tall — 5rem here. */
header > .logo {
    max-height: 5rem;
    align-self: center;
}
header > .site-title,
header > .navigation,
header > .language-switcher,
header > .custom-header {
    align-self: center;
    text-align: center;
}

/* The wordmark, styled like .o4-brand-name: bold Courier, near-black,
   magenta on hover. */
header > .site-title {
    color: var(--wordmark-ink);
    font-weight: 700;
}
header > .site-title:hover { color: var(--brand-hover); }

/* Nav links are the site blue with underline on hover, like
   .o4-nav-link (the substrate defaults them to muted). */
header .navigation .link { color: var(--accent); }
header .navigation .link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* The family tagline (.custom-header block) sits under the nav as a
   quiet secondary line. */
.site-tagline {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-sm);
}

/* --- Prose (the .page-body content region) --------------------------- */

/* odds.school links rest without underline and underline on hover;
   colour stays the site blue. */
.page-body a { text-decoration: none; }
.page-body a:hover { text-decoration: underline; }

/* Headings in the ink, like the sibling's h1/h2 (its h2 is #333 on
   white; on our shared navy-ink paper the ink itself is the match). */
.page-title,
.page-body h1,
.page-body h2,
.page-body h3 { color: var(--ink); }

/* The simulator pages size their <canvas> by script (97vw); cap it to
   the column so the chart can never force a horizontal scroll. */
.page-body canvas { max-width: 100%; }

/* Wide tables (the journal's comparison tables) scroll within their
   own box on narrow screens instead of forcing the page sideways. */
.page-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* --- Footer: the school sign-off (lockup, credit, disclaimer) -------- */

footer .custom-footer {
    border-top: none;              /* the substrate adds a rule; the
                                      sibling's footer is open */
    text-align: center;
}

/* The school lockup, 200px on odds.school (.o4-footer-logo). The <img>
   carries width/height attributes for layout stability; this rule sets
   the rendered size. */
.school-lockup {
    width: 12.5rem;
    height: auto;
}

.site-credit { margin: 0.6rem 0 0; font-size: 0.75rem; }

/* The disclaimer tone is a literal match of .o4-footer-disclaimer
   (#888 at 0.75rem), deliberately NOT routed through --muted. */
.site-disclaimer {
    max-width: 40rem;
    margin: 1rem auto 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #888;
}

/* --- The school ribbon: the funnel to odds.school -------------------- */

/* The one advertisement the site carries: a slim, always-visible line
   pinned to the foot of the viewport, leading to the practical sibling
   site. It lives in the footer blocks (per language); position:fixed
   lifts it out of the sign-off flow onto the viewport edge. */
.school-ribbon {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: var(--code-bg);
    border-top: 1px solid var(--rule);
    color: var(--accent);          /* the site's link blue — the line
                                      must read as clickable at rest */
    font-size: var(--text-sm);
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}
.school-ribbon img { height: 1.2rem; width: auto; flex: none; }
.school-ribbon strong { color: var(--wordmark-ink); }
.school-ribbon:hover { text-decoration: underline; }
.school-ribbon:hover strong { color: var(--brand-hover); }

/* Keep the page's own foot content readable above the fixed ribbon. */
body { padding-bottom: 3.5rem; }

@media print {
    .school-ribbon { display: none; }
}