/* ==========================================================================
   REWASH — global styles
   Tokens, base typography and the shared building blocks used across pages.
   Page-specific styles live next to each component in *.razor.css.
   ========================================================================== */

/* Montserrat, the typeface of the REWASH presentation template (SIL OFL 1.1, fonts/Montserrat-OFL.txt) */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/montserrat-normal-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/montserrat-normal-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/montserrat-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/montserrat-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Brand — the REWASH logo and presentation template */
    --rw-blue: #415AA6;
    --rw-teal: #5EB9A5;

    /* Derived */
    --rw-ink: #16204A;          /* deep water: hero, footer, headings on light */
    --rw-ink-2: #1F2C5E;        /* raised surfaces on ink */
    --rw-blue-deep: #2F4585;    /* hover on blue */
    --rw-teal-deep: #24806D;    /* teal that passes AA as text on white */
    --rw-teal-pale: #CDEBE4;
    --rw-mist: #EEF6F4;         /* soft section background */
    --rw-paper: #FFFFFF;
    --rw-line: #D6E2E6;
    --rw-text: #1D2747;
    --rw-text-muted: #4E5A78;
    --rw-on-ink: #E8EEF9;
    --rw-on-ink-muted: #A9B6D6;

    /* Page header bands: the blue of the presentation cover */
    --rw-hero: var(--rw-blue);
    --rw-hero-glow: #5672C2;
    --rw-on-hero: #FFFFFF;
    --rw-on-hero-muted: #DCE4F7;   /* 5.1:1 on the blue */
    --rw-teal-light: #93DCCB;      /* teal accents on the blue, 4.1:1 */

    --rw-font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Type scale: 1.25 ratio from 17px body */
    --fs-sm: 0.875rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.25rem;
    --fs-lg: 1.5625rem;
    --fs-xl: 1.953rem;
    --fs-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.05rem);
    --fs-3xl: clamp(2.4rem, 1.5rem + 4vw, 4.6rem);

    --wrap: 1200px;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section-y: clamp(4rem, 8vw, 7.5rem);
    --header-h: 76px;
    --radius: 6px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--rw-font);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--rw-text);
    background: var(--rw-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    color: var(--rw-ink);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); font-weight: 600; }
h2 { font-size: var(--fs-2xl); font-weight: 600; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--rw-blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--rw-blue-deep); }

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

::selection { background: var(--rw-teal-pale); color: var(--rw-ink); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 200;
    background: var(--rw-teal); color: var(--rw-ink);
    padding: .6rem 1rem; border-radius: var(--radius); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ── Layout primitives ───────────────────────────────────────────────── */

.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--mist { background: var(--rw-mist); }
.section--ink { background: var(--rw-ink); color: var(--rw-on-ink); }
.section--ink h2, .section--ink h3 { color: #fff; }

.measure { max-width: 68ch; }

.lead {
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--rw-text);
}

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head p { color: var(--rw-text-muted); font-size: var(--fs-md); }
.section--ink .section-head p { color: var(--rw-on-ink-muted); }

/* Two columns that collapse on narrow screens */
.split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px;
    padding: .75rem 1.4rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--teal { background: var(--rw-teal); color: var(--rw-ink); }
.btn--teal:hover { background: #79C9B7; color: var(--rw-ink); }
.btn--blue { background: var(--rw-blue); color: #fff; }
.btn--blue:hover { background: var(--rw-blue-deep); color: #fff; }
.btn--ghost { border-color: currentColor; color: var(--rw-blue); background: transparent; }
.btn--ghost:hover { background: var(--rw-blue); border-color: var(--rw-blue); color: #fff; }
.btn--ghost-light { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.btn--small { min-height: 38px; padding: .45rem 1rem; font-size: var(--fs-sm); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.text-link {
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--rw-teal);
    padding-bottom: 2px;
    color: var(--rw-ink);
}
.text-link:hover { color: var(--rw-blue); border-color: var(--rw-blue); }

/* ── Rich text (post bodies, long copy) ──────────────────────────────── */

.prose { max-width: 70ch; font-size: 1.0938rem; line-height: 1.7; }
.prose h2 { font-size: var(--fs-xl); margin-top: 2em; }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.6em; }
.prose h4 { font-size: var(--fs-md); margin-top: 1.4em; }
/* A heading that opens the text needs no space above it */
.prose > :first-child { margin-top: 0; }
.prose .updated { font-size: var(--fs-sm); color: var(--rw-text-muted); }
.prose img { border-radius: var(--radius); margin: 1.5em 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
/* Nested lists (the editor nests with Tab) */
.prose li > :is(ul, ol), .prose :is(ul, ol) > :is(ul, ol) { margin: .35em 0 0; }
.prose ul ul { list-style-type: circle; }
.prose ul ul ul { list-style-type: square; }
.prose ol ol { list-style-type: lower-alpha; }
.prose ol ol ol { list-style-type: lower-roman; }
.prose hr { border: 0; border-top: 1px solid var(--rw-line); margin: 2em 0; }
.prose sub, .prose sup { line-height: 0; }
.prose blockquote {
    margin: 1.5em 0; padding: .2em 0 .2em 1.2em;
    border-left: 3px solid var(--rw-teal);
    color: var(--rw-text-muted); font-size: var(--fs-md);
}
.prose a { word-break: break-word; }

/* ── Placeholder (content still to come from the consortium) ─────────── */

.placeholder {
    display: grid; place-items: center; gap: .5rem;
    min-height: 260px;
    padding: 2rem;
    border: 2px dashed var(--rw-line);
    border-radius: var(--radius);
    background:
        repeating-linear-gradient(135deg, transparent 0 14px, rgba(65, 90, 166, .035) 14px 28px),
        var(--rw-paper);
    color: var(--rw-text-muted);
    text-align: center;
    font-size: var(--fs-sm);
}
.placeholder strong { color: var(--rw-ink); font-size: var(--fs-base); }

/* ── Forms ───────────────────────────────────────────────────────────── */

.field { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.field label { font-weight: 600; font-size: var(--fs-sm); color: var(--rw-ink); }
.field .hint { font-size: var(--fs-sm); color: var(--rw-text-muted); }

.input, .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea {
    width: 100%;
    min-height: 48px;
    padding: .7rem .9rem;
    border: 1.5px solid var(--rw-line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--rw-text);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 160px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--rw-blue);
    box-shadow: 0 0 0 3px rgba(65, 90, 166, .18);
}
.field .validation-message, .validation-message { color: #B3261E; font-size: var(--fs-sm); }
.field input.invalid, .field textarea.invalid { border-color: #B3261E; }

.check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); }
.check input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--rw-blue); }

.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.notice {
    padding: 1rem 1.2rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--rw-teal);
    background: var(--rw-mist);
    margin-bottom: 1.5rem;
}
.notice--error { border-color: #B3261E; background: #FBEDEC; }

/* ── Blazor chrome ───────────────────────────────────────────────────── */

#blazor-error-ui {
    background: #FFF4D6;
    bottom: 0; left: 0; right: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    padding: .7rem 1.25rem;
    position: fixed;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.blazor-error-boundary { background: #B3261E; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* FocusOnNavigate moves focus to the h1 for screen readers; no ring needed there. */
h1:focus, h1:focus-visible { outline: none; }