/* 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-white);
}
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 ──────────────────────────────────────────── */
/* the blocks inside space themselves with margins (see .contentBlock in
   content.css) – the shell only adds the extra breathing room before the
   footer, so the last block ends a full 2 × xl above it */
.page-content {
    padding-bottom: var(--space-xl);
}