/* SchoolCMS – Default Styles
   Global resets and the page shell. Everything else lives in its own file:
   css/base (buttons, content, table, animation, fancybox), the component
   folders under template-parts/ (header, banner, footer, alert, sidebar,
   news) – block styles live next to their block in blocks/<slug>/. */

/* ── Global ──────────────────────────────────────────────── */
/* Bootstrap's reboot sets scroll-behavior: smooth on :root, and CSS smooth
   scrolling breaks ScrollTrigger: refresh() restores the scroll position
   while it re-measures, the restore animates instead of landing, and every
   pinned block's start comes out short by however far the page was scrolled
   – reload a page mid-scroll and pins engage early or never engage at all
   (found on the Cathedral build; a minimal repro of one pin + this one rule
   reproduces it, and GSAP's docs say not to pair the two). Anchor links
   jump instead of gliding – the theme's scripted scrolls (curriculum/staff
   panel reveals) animate themselves. Must stay after bootstrap in the
   cascade; :root, not html, to tie its specificity. */
:root {
    scroll-behavior: auto;
}
*, *::before, *::after {
    box-sizing: border-box;
}
/* The page ground lives HERE, not in typography.css – that file rides the
   add_editor_style() list, so a background there paints the inside of every
   wysiwyg field the site's page colour. This file is front-end-only, so the
   colour never reaches the editor. */
body {
    background: var(--color-taupe);
}
/* Nothing may widen the page sideways. A reveal AOS parks a hundred
   pixels to one side, a fixed-width iframe pasted into copy, a band drawn
   wider than a phone – any of them makes a phone scroll the page off its
   own layout (the base's Sample Page scrolled to 572 at 430 on
   2026-11-01: a 560px YouTube iframe in the HTML block and a fade-left
   column). `clip`, not `hidden`: hidden makes a scroll container, which
   breaks position: sticky and swallows the keyboard's scroll-into-view.
   Fixed furniture – the menu panel parked a width to the right, the
   header bar – is laid out against the viewport, so this clips none of
   it. ON THE PAGE WRAPPER, NOT ON BODY: whichever of html/body is the
   first not to be `visible` has its overflow propagated to the viewport
   and is then treated as visible itself, so `overflow-x: clip` on body
   clips nothing, and Chrome does not take the clip on the viewport either
   (measured on Rokeby, 2026-09-21). #page is an ordinary div, so its clip
   is its own. Turn this off first when sweeping for real overflow. */
#page {
    overflow-x: clip;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.embed-container {
    position:       relative;
    padding-bottom: 56.25%;
    height:         0;
    overflow:       hidden;

    iframe, video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ── Page shell ──────────────────────────────────────────── */
/* .page-content adds nothing: the blocks inside space themselves with
   margins (.contentBlock in content.css), and the last block's own bottom
   margin is the clearance above the footer – a band that ends the page
   meets it. The base added 48 here, which put a plain block 198 above the
   footer at 1560 and a 48 strip of ground under a closing band (block:text,
   2026-11-03). */