/* ============================================================================
   Stumpty — design system

   Editorial rather than app-like: paper background, serif headings, white cards
   that sit on the page rather than boxing it in.

   CENTRING CONTRACT — the thing that was broken before:
   every band is full-bleed, and an *inner* wrapper carries the max-width plus
   `margin-inline: auto`. A max-width alone left-aligns; it only looked centred
   because a narrow window was narrower than the cap.
   ============================================================================ */

:root {
    /* surfaces */
    --paper: #FCFBF6;
    --card: #FFFFFF;
    --line: #E4E1D6;

    /* text */
    --ink: #22334D;
    --ink-soft: #54627A;

    /* accents */
    --blue: #2B7BC7;
    --blue-deep: #1E5E9C;
    --blue-tint: #EAF3FB;
    --blue-tint-hover: #DCEBF8;
    --gold: #F0A500;
    --gold-tint: #FDF3DA;
    --gold-tint-hover: #FBEBC4;
    --amber: #9A6700;
    --green: #2F855A;
    --green-deep: #256B49;
    --green-tint: #E7F3EC;
    --red: #B03A2E;
    --red-tint: #F9E9E7;

    /* Form control borders — distinct from --line, which is for hairline dividers. Dark
       enough for the 3:1 contrast WCAG asks of a field's outline against white: the old
       #C9CFDA managed about 1.5:1, and fields were hard to find. */
    --field: #7D889B;

    --radius: 14px;
    --shadow: 0 1px 2px rgba(34, 51, 77, .06), 0 4px 14px rgba(34, 51, 77, .05);

    /* One place to change how wide the site reads. */
    --measure: 680px;      /* reading column — questions, forms */
    --measure-wide: 1040px; /* admin tables and other dense pages */
    --gutter: 24px;

    /* Legacy aliases: older scoped stylesheets still reference these. */
    --oad-blue: #2B7BC7;
    --oad-blue-dark: #1E5E9C;
    --oad-yellow: #F0A500;
    --oad-green: #2F855A;
    --oad-orange: #B03A2E;
}

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

html {
    scroll-behavior: smooth;
    /* Keep the page from shifting sideways when a scrollbar appears — otherwise
       centred content jumps a few px between short and tall pages. */
    scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Full height so short pages still paint paper to the bottom. */
    min-height: 100vh;
}

h1, h2, h3, h4 {
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

p { margin: 0; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

a {
    color: var(--blue-deep);
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- layout --- */

/* The reading column. Applied by the layout to <main>; pages just flow inside. */
.oad-measure {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;          /* ← the fix: cap AND centre */
    padding-inline: var(--gutter);
}

.oad-measure-wide {
    max-width: var(--measure-wide);
}

/* Page-level wrappers. These deliberately carry NO max-width of their own —
   centring is the layout's job, in exactly one place. */
.oad-static,
.oad-home {
    width: 100%;
}

/* The last card on a static page already sits on .oad-main's bottom padding. Keeping
   its own margin too doubled the gap above the footer, and cost the Contact page its
   no-scrollbar fit (PRD 09). */
.oad-static > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- masthead --- */

/* Dateline above the title, the way a paper prints the day above the headline.
   Quiet on purpose — it orients you without competing with the puzzle. */
.oad-dateline {
    text-align: center;
    font-size: 1rem;
    color: var(--ink-soft);
    margin: 0 0 0.35rem;
}

.oad-banner {
    font-family: 'Lora', Georgia, serif;
    font-weight: 650;
    font-size: clamp(1.7rem, 4.5vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0 0 1rem;
    padding: 0;
    background: none;
    border-radius: 0;
}

/* The gold rule under a masthead. */
.oad-banner::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: var(--gold);
    margin: 0.7rem auto 0;
}

/* ------------------------------------------------------------------ cards --- */

.oad-box {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem 1.6rem;
    margin-bottom: 0.85rem;
}

.oad-box h2 {
    font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0.6rem;
}

/* ---------------------------------------------------------------- buttons --- */

.oad-btn-green,
.oad-btn-plain,
.oad-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    padding: 0.75rem 1.4rem;
    font-size: 1.02rem;
    font-weight: 700;
    min-height: 48px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.oad-btn-green {
    background: var(--green);
    color: #fff;
}

.oad-btn-green:hover:not(:disabled) { background: var(--green-deep); }

.oad-btn-green:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.oad-btn-plain {
    background: #fff;
    color: var(--ink);
    border: 1.5px solid var(--field);
}

.oad-btn-plain:hover:not(:disabled) { border-color: var(--ink-soft); }

.oad-btn-danger {
    background: var(--red-tint);
    color: var(--red);
    border: 1.5px solid transparent;
}

.oad-btn-danger:hover:not(:disabled) { border-color: var(--red); }

/* ------------------------------------------------------------------ forms --- */

input[type="text"],
input[type="date"],
input[type="number"],
select,
textarea {
    width: 100%;
    border: 1.5px solid var(--field);
    border-radius: 10px;
    background: #fff;
    padding: 0.75rem 0.9rem;
    line-height: 1.5;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);
    outline: 3px solid rgba(43, 123, 199, .25);
    outline-offset: 0;
}

textarea { resize: vertical; }

select {
    max-width: 240px;
    cursor: pointer;
}

label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------- error pane --- */

.blazor-error-boundary {
    background: var(--red);
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
    border-radius: var(--radius);
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.validation-message { color: var(--red); }
.invalid { outline: 1px solid var(--red); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--green); }

/* ---------------------------------------------- subscription landing pages --- */

/* Shared by /subscribe/confirm and /unsubscribe — the two pages a subscriber reaches
   from a link in an email, usually on a phone, usually for a few seconds. */

.sub-box {
    text-align: center;
}

.sub-mark {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.sub-lead {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}

.sub-sub {
    color: var(--ink-soft);
    margin-bottom: 1.3rem;
    line-height: 1.55;
}

.sub-box .oad-btn-green,
.sub-box .oad-btn-danger {
    margin-top: 0.6rem;
}

.sub-home {
    display: inline-block;
    padding: 0.8rem 1.3rem;
    border-radius: 10px;
    font-weight: 700;
    color: var(--blue-deep);
    background: var(--blue-tint);
    text-decoration: none;
}

.sub-home:hover { background: var(--blue-tint-hover); }