/* css-degraded.css — CSS-only fallback when JavaScript fails to load Triggered by .css-degraded class on (set by FOUC gate). Load order: 7th (last in responsive cascade). ========================================================================== DEGRADED BEHAVIOR ───────────────── - Body always visible (overrides FOUC-prevention display:none or visibility:hidden) - Hamburger drawer always visible (no JS to toggle) - Overflow menu uses :focus-within for keyboard access - No animations or transitions (static layout) - Content is never invisible ========================================================================== */ /* ──────────────────────────────────────────────────────────────────────────── BODY VISIBILITY — highest-priority override for FOUC prevention Ensures the page is always visible when CSS is degraded, even if fouc-prevention.css or other styles hid it while waiting for JS. ──────────────────────────────────────────────────────────────────────────── */ body.css-degraded { visibility: visible !important; } /* ═══════════════════════════════════════════════════════════════════════════ HAMBURGER DRAWER — always visible when CSS degraded ═══════════════════════════════════════════════════════════════════════════ FOUC prevention (fouc-prevention.css) hides the drawer with display:none. When .css-degraded is on , we override that to keep it visible. */ body.css-degraded .hamburger__drawer { display: block !important; position: fixed; top: 52px; left: 0; width: var(--hamburger-drawer-width, 280px); max-width: 85vw; height: calc(100dvh - 52px); transform: translateX(-100%); visibility: visible; box-shadow: var(--rh-drawer-shadow, 2px 0 12px rgba(0, 0, 0, 0.15)); border-bottom: 0; } body.css-degraded .hamburger__drawer[aria-hidden="false"], body.css-degraded .hamburger__drawer[data-hamburger-state="EXPANDED"] { transform: translateX(0); } @media (min-width: 768px) { body.css-degraded .toolbar-new .hamburger__drawer, body.css-degraded .toolbar-new .hamburger__overlay, body.css-degraded .toolbar-new .hamburger__button, body.css-degraded .toolbar-new .more-overflow__button { display: none !important; } } body.css-degraded .hamburger__overlay { display: none !important; } body.css-degraded .hamburger__button { display: inline-flex !important; } /* ═══════════════════════════════════════════════════════════════════════════ MORE-OVERFLOW MENU — keyboard-accessible focus-within fallback ═══════════════════════════════════════════════════════════════════════════ Without JS, the overflow menu cannot toggle. Use :focus-within so keyboard users can tab into the container and reveal the menu. */ body.css-degraded .more-overflow__menu { display: none; } body.css-degraded .more-overflow__container:focus-within { position: relative; } body.css-degraded .more-overflow__container:focus-within .more-overflow__menu { display: block; position: absolute; right: 0; top: 100%; min-width: 180px; background-color: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); z-index: 1003; padding: 4px 0; } body.css-degraded .more-overflow__container .more-overflow__menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; padding: 0; } /* ═══════════════════════════════════════════════════════════════════════════ BASIC INLINE LAYOUT — no transitions or animations ═══════════════════════════════════════════════════════════════════════════ When JS is absent/degraded, remove all motion to prevent half-started CSS animations from causing confusion or accessibility issues. */ body.css-degraded *, body.css-degraded *::before, body.css-degraded *::after { transition: none !important; animation: none !important; }