/* Edmonton City Homes – main.css Custom component and page styles. All values reference tokens from assets/css/tokens.css — no hardcoded colours, font sizes, or spacing allowed here. */ /* ============================================================ SKIP LINK Invisible until focused via keyboard; required for WCAG 2.4.1. ============================================================ */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: fixed; top: var(--space-3); left: var(--space-3); z-index: 9999; width: auto; height: auto; overflow: visible; padding: var(--space-2) var(--space-3); background: var(--color-surface); color: var(--color-accent); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); border: 2px solid var(--color-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-md); text-decoration: none; } /* ============================================================ STICKY-HEADER FIX GeneratePress sets overflow-x: hidden on body (and sometimes #page / .site) to suppress horizontal scrollbars. Any overflow: hidden on an ancestor silently kills position: sticky on descendants — the sticky element can never "reach" the viewport edge it needs to stick to. Fix: override with overflow-x: clip, which has the same visual result (overflowing content is clipped, no horizontal scrollbar) but does NOT create a new block formatting context, so sticky positioning on child elements works correctly. clip vs hidden — the key difference: hidden → creates a BFC, scroll container for sticky purposes clip → purely visual clipping, no scroll container created ============================================================ */ body, #page, .site { overflow-x: clip; } /* ============================================================ HEADER Sticky bar at the top. Gains a frosted-glass blur once the user scrolls past 20px (the .is-scrolled class is toggled by main.js). Specificity note — why the selector is `body .site-header`: GeneratePress's Customizer outputs a late