/* 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 */
/* A REVEAL THAT STARTS OFF-PAGE MUST NEVER SCROLL THE PAGE SIDEWAYS.
   AOS parks a horizontal fade 100px to one side until it fires, and the
   text-image block gives its two columns one each. On a phone those
   columns are stacked at the full width already, so one of them sat
   100px past the right edge and the whole document could be dragged off
   its own layout – banner cropped, copy half off screen (reported
   2026-09-15). Anything else that reveals from the side, or bleeds a
   few px, is caught here too.

   `clip`, not `hidden`: it clips without making a scroll container, so
   `position: sticky` inside – the home banner's journey – still sticks
   to the viewport. It goes on the CONTENT wrapper rather than `.site`
   because the menu panel lives in the header and has to rest off the
   right edge while it is closed. */
.site-content {
    overflow-x: clip;
}

/* Every page but the home page wears the plum band (nav.css), and the bar
   is fixed – so the shell starts below it rather than under it. Without
   this the band covers the top of the banner photograph, which is what the
   inner template draws but not what it should cost: the photo is the first
   thing on the page. The home page keeps its content at y=0, where the
   transparent bar floats over the home banner's own plum. */
body:not(.home) .site-main {
    padding-top: var(--header-height);
}

/* the admin bar pushes the fixed header down by its own height, so the
   shell follows it – 783px is WordPress's breakpoint, not the layout grid */
body.admin-bar:not(.home) .site-main {
    padding-top: calc(var(--header-height) + 46px);

    @media (min-width: 783px) {
        padding-top: calc(var(--header-height) + 32px);
    }
}

.page-content {
    padding-bottom: var(--space-xl);
}