/*
 * Base.
 *
 * The handful of rules the whole document depends on: box model, the body
 * defaults everything inherits from, and the scroll behaviour. Until now they
 * came from the inherited layer — box-sizing and the body reset out of the
 * Bootstrap reboot, the typography and the flex column out of legacy.css — so
 * a screen dropped from that layer lost them and got the browser defaults
 * back: an 8px margin on body and a serif font in the header and the footer.
 *
 * This file is deliberately outside the legacy layer and loads before it, so
 * legacy.css still wins on the screens that are still inherited and nothing
 * about them changes. Redesigned screens keep these rules after the layer is
 * gone. New stylesheets should declare 'ud-base' as a dependency, which is
 * what makes the cascade order explicit rather than accidental.
 *
 * The values are the ones the site renders with today, reproduced rather than
 * chosen: font-size 17px and Google Sans from legacy.css, line-height 1.5 and
 * colour #212529 from the reboot. Design tokens belong here later; picking new
 * values is a separate conversation.
 */

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

/* Reboot put this on :root, which outranks a bare html selector — worth
   knowing, because a screen that wants to opt out has to match it. */
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

/* Reboot again, and not cosmetic: an inline image sits on the baseline and
   leaves the descender gap under itself, which made the header eight pixels
   taller the moment Bootstrap stopped loading — .ud-header__logo a is an
   inline-block wrapped around the logo. */
img,
svg {
    vertical-align: middle;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: #fff;
    font-family: "Google Sans", sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: #212529;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}