/* ========================================================================== EDGEucating 2026 Redesign — global tokens, header/nav, footer, utilities ========================================================================== */ /* * Off-screen fixed elements (the mobile nav panel) and unstyled third-party * embeds (the Zoho signup form) can otherwise expand the document's * scrollable width past the viewport, producing a horizontal scrollbar. */ html, body { overflow-x: hidden; max-width: 100%; } :root { /* Brand palette */ --edge-blue: #04316c; --edge-red: #650318; --edge-red-dark: #4f0212; --edge-yellow: #f3cc57; --edge-azure: #046bd2; --edge-azure-mid: #497fc8; --edge-grey-bg: #f9fafb; --edge-grey-chip: #f9fafb; --edge-silver: #bdbdbd; --edge-white: #ffffff; --edge-black: #0a0a0a; --edge-gradient: linear-gradient(135deg, var(--edge-red) 34%, var(--edge-azure-mid) 100%); /* Type */ --edge-font-heading: "Work Sans", "Helvetica Neue", Arial, sans-serif; --edge-font-body: "Poppins", "Helvetica Neue", Arial, sans-serif; --edge-font-accent: "Inter", "Helvetica Neue", Arial, sans-serif; /* * Layout — one shared width system for every section site-wide (header, * footer, hero, and every block). --edge-frame is the outer full-bleed * cap that sections center themselves against on wide viewports; * --edge-gutter is the responsive inset from that frame's edges, which * resolves to exactly 1280px of inner content width at ~1440px+ * viewports (1440 - 2*80). Elements that want extra breathing room * around their text (the hero heading, the Intro rows' left-indented * copy) add MORE padding on top of this shared frame rather than * defining their own independent max-width — see .edge-intro-row. */ --edge-frame: 1440px; --edge-container: 1280px; --edge-gutter: clamp(20px, 5.6vw, 80px); --edge-header-height: 92px; /* Stacking */ --z-header: 100; --z-dropdown: 110; --z-mobile-overlay: 120; --z-mobile-panel: 130; } /* -------------------------------------------------------------------------- Neutralize Astra's auto block-width constraint -------------------------------------------------------------------------- */ /* * Setting a page to Astra's "Full Width" container layout (which we do on * every block-built page, to escape the narrow .ast-container) also turns on * a SEPARATE Astra behavior: every direct child of a top-level block gets * auto-constrained to `max-width: var(--wp--custom--ast-content-width-size)` * (1200px) via a high-specificity selector * (`.entry-content[data-ast-blocks-layout] > :not(.wp-block-group) > *`). * That silently shrank/repositioned content inside edge/* blocks and core * columns/image blocks alike. Redefining the variable here (inherited by * every descendant) neutralizes it for our pages; blocks that want a * specific narrower width set their own max-width with !important below. */ .ast-page-builder-template .entry-content { --wp--custom--ast-content-width-size: none; } /* * Astra also auto-injects `padding-top`/`padding-bottom: * var(--wp--custom--ast-default-block-{top,bottom}-padding)` (48px each) * onto every top-level group/cover/columns block * (`.entry-content > .wp-block-group` etc.) on Full Width pages. That's * what was putting a huge gap between an .edge-intro-row eyebrow+heading * and the columns row right below it (both are separate top-level groups) * — every edge/* block already manages its own precise spacing via its * own CSS, so this generic theme default only ever fights our designs. * (The 30px .edge-intro-row pairing rule below was originally added * alongside only the bottom-padding neutralization, so it was stacking * with this 48px top padding to produce a 78px gap instead of 30px — * both variables need zeroing together.) Neutralized the same way as the * width constraint above; any gap that turns out to actually need space * gets an explicit, deliberate rule instead (e.g. * `.edge-media-row + .edge-media-row`). */ .ast-page-builder-template .entry-content { --wp--custom--ast-default-block-bottom-padding: 0; --wp--custom--ast-default-block-top-padding: 0; } /* Astra's base inline CSS (astra-theme-css-inline-css) sets `#primary, #secondary { padding: 1.5em 0; }` unconditionally, adding an unwanted gap above our hero block on every full-width page. Our blocks manage their own spacing, so this should always be zero. */ #primary, #secondary { padding: 0 !important; margin: 0 !important; } /* * ROOT CAUSE of "footer renders at the top of the page, overlapping * content": Astra's own style-flex.min.css floats #primary * (`#primary, #secondary { float: left; width: 100%; }`) — a legacy * float-based two-column (content + sidebar) layout technique. Astra's * *own* header.php/footer.php open/close a wrapper div that contains and * clears that float; our custom header.php/footer.php don't render that * wrapper, so the float goes uncleared and #primary contributes ZERO * height to the following sibling's (our