/*
 * Design tokens, self-hosted Inter, global reset and the two cross-page
 * accessibility primitives (focus ring, visually-hidden / skip-link).
 * Every other stylesheet in this folder reads colors and the container width
 * from here - no second copy of a role is allowed (static-site-css.md §2).
 */

:root {
    --color-primary: #16305A;
    --color-primary-dark: #0F2242;
    --color-accent: #2F6FED;
    --color-cta: #E63946;
    --color-cta-dark: #C62735;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F4F7FB;
    --color-text: #1B2233;
    --color-text-muted: #5B6472;
    --color-border: #E1E6EF;
    --focus-ring: #2F6FED;
    --container-width: 82vw;
    /* Single corner radius for the whole site - cards, panels, photos,
       buttons and inputs all read it, no section sets its own. Pills
       (kickers, badges) are the one exception: they stay fully round. */
    --radius: 1.04vw;
    --header-height: 5.4vw;
    /*
     * Elevation. The site separates surfaces with shadow, not borders, so the
     * same three navy-tinted values were written out by hand in two dozen
     * section files. Each token names the ROLE, not the geometry: a card at
     * rest, the same card lifted under the pointer, a panel that never moves.
     * The last four are single-surface roles that share the same ink and are
     * kept here so no section owns a raw rgba of the brand navy.
     */
    --shadow-card: 0 0.21vw 0.83vw rgba(22, 48, 90, 0.08);
    --shadow-card-hover: 0 0.83vw 1.67vw rgba(22, 48, 90, 0.14);
    --shadow-panel: 0 0.42vw 1.67vw rgba(22, 48, 90, 0.08);
    --shadow-accordion-open: 0 0.63vw 1.46vw rgba(22, 48, 90, 0.14);
    --shadow-emphasis: 0 0.83vw 2.08vw rgba(22, 48, 90, 0.2);
    --shadow-float: 0 0.83vw 2.08vw rgba(22, 48, 90, 0.14);
    --shadow-bar: 0 0.21vw 0.83vw rgba(22, 48, 90, 0.1);
    --shadow-drawer: 0 1.6vw 3.2vw rgba(22, 48, 90, 0.14);
    --color-border-soft: rgba(22, 48, 90, 0.1);
    --font-body: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
}

@font-face {
    font-family: "Inter";
    src: url("/public/fonts/Inter/Inter-Regular.woff") format("woff"),
         url("/public/fonts/Inter/Inter-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/public/fonts/Inter/Inter-Bold.woff") format("woff"),
         url("/public/fonts/Inter/Inter-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*
 * Montserrat ships as a variable font from Google's own repository (one file
 * covers the whole weight axis) - a single @font-face per subset with a
 * weight RANGE, not a pair of same-file "regular"/"bold" declarations.
 */
@font-face {
    font-family: "Montserrat";
    src: url("/public/fonts/Montserrat/Montserrat-cyrillic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Montserrat";
    src: url("/public/fonts/Montserrat/Montserrat-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.94vw;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-surface);
}

/*
 * The header is `position: sticky; top: 0` (02-header.css), so anything the
 * browser scrolls to by itself - the skip-link target, a `#hash` landing, the
 * quiz result via `scrollIntoView` (public/js/program-finder.js) - lands under
 * the bar and gets its first line clipped. One declaration on the scroll
 * container fixes every such jump; per-target `scroll-margin-top` would have
 * to be repeated in each section file.
 */
html {
    scroll-padding-top: calc(var(--header-height) + 1vw);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary);
}

h1, h2, h3, p, ul, ol {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -3vw;
    left: 1vw;
    z-index: 100;
    padding: 0.63vw 1.25vw;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius);
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 1vw;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}

@media only screen and (max-width: 767.98px) {
    /* Same corner radius recalculated from the 375px reference, so no
       section needs its own mobile radius override. */
    :root {
        --radius: 4vw;
        --container-width: 88vw;
        /*
         * Measured from the 375px reference: 4vw padding top and bottom
         * (02-header.css) around a 9.6vw burger, which is the tallest item of
         * the bar. The desktop 5.4vw is a single-row desktop figure and hides
         * half a heading behind the bar on a phone. The hero drops its
         * negative pull-up on mobile (03-hero.css), so nothing else reads
         * this token at this width.
         */
        --header-height: 17.6vw;
    }

    html {
        scroll-padding-top: calc(var(--header-height) + 4vw);
    }

    body {
        font-size: 4.27vw;
    }

    /*
     * The desktop -3vw/0.63vw figures are calibrated against the 1920px
     * reference (static-site-css.md's vw formula) and never had a mobile
     * pass: on a 375px viewport they resolve too small to fully push the
     * pill off-screen, so its bottom edge stayed visible above the header.
     * Recalibrated from the same 375px reference here.
     */
    .skip-link {
        top: -16vw;
        left: 4vw;
        padding: 1.6vw 4vw;
    }

    .skip-link:focus {
        top: 4vw;
    }
}