/* ==========================================================================
   FONT-SWITCH.CSS  —  an A/B reading aid, bolted to nothing.
   --------------------------------------------------------------------------
   Author: Sharmila Parthiban.  3 Sep 2026.

   TWO INDEPENDENT CONTROLS, and a promise that removing them costs one line.
   This file (plus font-switch.js, loaded as a pair from _Layout) lets a reader
   A/B the site's typography without a redeploy: a text-size resizer and a
   sans-face toggle. Delete the one commented include block in _Layout and the
   site is back to exactly today's type -- nothing here fires on its own, every
   default below is the value the site already computes.

   WHY THIS FILE AND NOT brand.css. brand.css carries the two decisions that
   must WIN the cascade (Inter, and the thin focus border). This is an OPT-IN
   experiment layered on top of those decisions, not a change to them. Keeping
   it separate is what makes the rollback a single line rather than a diff.

   NO CDN, SAME AS INTER. Open Sans below is SELF-HOSTED under
   wwwroot/fonts/open-sans for the two reasons brand.css already spells out: the
   MDE network does not answer to fonts.gstatic.com, so a CDN webfont would 404
   and fall back silently; and a third-party font request from a government page
   carries the visitor's IP and the REFERRING URL -- which on this site can name
   a permit application -- to another company. The files were fetched once at
   build time and committed; the browser never talks to Google.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OPEN SANS — self-hosted, the Maryland Web Design System's standard sans.
   Open Sans v44 ships as a VARIABLE font, exactly like Inter v20: one file per
   subset covers the whole 400-700 range the site uses, so 400 body, 600 and
   700 all resolve to this file instead of the browser synthesising a fake bold.
   Two files, ~83 KB together -- latin, plus latin-ext for the same reason Inter
   loads it: Maryland licence holders and property owners have names in it (a
   Nuñez or a Krzyżewski would otherwise render in a second font mid-word).
   font-display:swap, again matching Inter: paint immediately in the fallback,
   repaint in Open Sans when it arrives, never a blank page on a slow link.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    /*  A RANGE, not a single value: one variable file, every weight. */
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans/open-sans-latin-var.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: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans/open-sans-latin-ext-var.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-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   THE SIZE MECHANISM — one root scale, everything else follows.
   The whole type scale in tokens.css is authored in REM (--fs-sm is 1rem, the
   16px body default; headings, labels and chips are all rem multiples of it),
   and rem is relative to the root font-size. So scaling ONE number -- the
   font-size on <html> -- scales body copy, form labels and headings together,
   in proportion, with no per-element px to chase. That is the point of a
   rem-relative scale, and this control is what finally uses it.

   --font-scale defaults to 1, and 100% is the browser's own root size, so the
   default computes to exactly today's 16px base AND still honours a reader who
   raised their browser's default font-size (the % keeps their preference in the
   multiplication instead of overwriting it with a hard px). font-switch.js sets
   --font-scale as an INLINE property on <html> before first paint, which beats
   this :root value on the element itself -- so there is no flash of the default
   size before the stored choice applies.
   -------------------------------------------------------------------------- */
:root {
    --font-scale: 1;
}

html {
    /*  calc against 100%, not a px, so the reader's browser setting survives. */
    font-size: calc(100% * var(--font-scale, 1));
}

/* --------------------------------------------------------------------------
   THE CONTROL GROUP — small, deliberate, built from the site's own classes.
   Injected by font-switch.js into the header utility area. The buttons ARE
   .btn (so they inherit the brand focus border and the site's button metrics);
   this file only adds the layout of the cluster and the "A" size glyphs.
   -------------------------------------------------------------------------- */
.font-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-15, .75rem);
    margin-bottom: var(--sp-1, .5rem);
}

.font-switch__set {
    display: flex;
    align-items: center;
    gap: var(--sp-05, .25rem);
}

/*  A quiet label so the cluster reads as a labelled control, not loose buttons.
    Sized off the smallest prose token; it rides the scale like everything else. */
.font-switch__label {
    font-size: var(--fs-3xs, .8125rem);
    color: var(--c-ink-muted, #565c65);
    font-weight: var(--fw-bold, 700);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/*  The buttons. .btn carries the shared look + the brand focus ring; these
    overrides keep the cluster compact and give the pressed button a filled,
    obviously-selected state that aria-pressed and the eye agree on. */
.font-switch .btn {
    line-height: 1;
    padding: var(--sp-05, .25rem) var(--sp-1, .5rem);
    min-width: 2rem;
}

/*  aria-pressed is the source of truth for "which one is on"; the fill just
    makes it visible. Driven off the attribute, not a JS-toggled class, so the
    accessible state and the painted state can never disagree. */
.font-switch .btn[aria-pressed="true"] {
    background: var(--c-primary, #005ea2);
    border-color: var(--c-primary, #005ea2);
    color: #fff;
}

/*  The three "A" glyphs, sized in em so they preview the relative step without
    being pinned to a px. The button label stays "A"; the em is the whole hint. */
.font-switch__a--small  { font-size: .8125em; }
.font-switch__a--medium { font-size: 1em; }
.font-switch__a--large  { font-size: 1.25em; }