not respecting box-sizing, combined with fixed font-size. ============================================================ */ /* Ensure box-sizing is enforced on ALL elements including those with inline styles (the BLUF
block) */ *, *::before, *::after { box-sizing: border-box !important; } /* Hard stop on horizontal overflow at every structural level */ html, body { max-width: 100vw !important; overflow-x: hidden !important; } /* Force inline-styled elements (BLUF, callouts) to respect viewport */ p[style], div[style], section[style] { max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word !important; word-break: break-word !important; } /* Blockquote and left-border callout boxes */ blockquote, p[style*="border-left"], div[style*="border-left"] { margin-left: 0 !important; margin-right: 0 !important; padding-right: 1rem !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } @media (max-width: 480px) { /* Scale down H1 aggressively on narrow screens */ h1, .article-header h1 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; line-height: 1.2 !important; word-break: break-word !important; hyphens: auto !important; } /* Tighten BLUF / callout font-size so long words don't overflow */ p[style*="font-weight:700"], p[style*="font-weight: 700"] { font-size: 0.95rem !important; line-height: 1.6 !important; padding-left: 1rem !important; padding-right: 1rem !important; } /* Ensure container padding keeps content inside viewport */ .container { padding-left: 0.875rem !important; padding-right: 0.875rem !important; } } @media (max-width: 360px) { h1, .article-header h1 { font-size: 1.25rem !important; } p[style*="font-weight:700"], p[style*="font-weight: 700"] { font-size: 0.88rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } } /* ============================================================ GLOBAL WCAG CONTRAST FIX — Site-wide light-background enforcement Deployed: 2026-05-13 Rule: any element with a light/white background MUST use dark text. This file is loaded on every page, making this fix truly global. ============================================================ */ /* --- Named CSS classes with light backgrounds (audit-confirmed) --- */ .callout-warning, .callout-info, .callout, .fact, .myth, .myth-fact, .source-box, .survival-card, .info-callout, .high, .medium, .low, .comparison-table, .nuclear-table, .checklist-card, .checklist-card h4, .checklist-card li { color: #111827 !important; } /* ============================================================ DISCLAIMER-BOX — dark background, light text (AMOLED fix) The disclaimer-box uses a dark amber-tinted background. Must NOT inherit the #111827 dark-text rule above. Forces readable light text on all screens including AMOLED. ============================================================ */ .disclaimer-box { background: #1c1200 !important; border: 1px solid rgba(217, 119, 6, 0.55) !important; color: #e0dbd2 !important; } .disclaimer-box p { color: #e0dbd2 !important; line-height: 1.7; } .disclaimer-box strong { color: #fbbf24 !important; } /* Force dark text on ALL descendants inside light containers */ .callout-warning *, .callout-info *, .callout *, .fact *, .myth *, .myth-fact *, .source-box *, .survival-card *, .info-callout *, .high *, .medium *, .low * { color: #111827 !important; } /* Disclaimer-box children: keep light text (dark background) */ .disclaimer-box * { color: #e0dbd2 !important; } .disclaimer-box strong, .disclaimer-box b { color: #fbbf24 !important; } /* Restore link color inside light callouts to accessible blue */ .callout-warning a, .callout-info a, .callout a, .fact a, .myth a, .source-box a, .info-callout a { color: #1d4ed8 !important; text-decoration: underline !important; } /* --- Priority badges --- */ .priority-critical { color: #991b1b !important; } .priority-high { color: #92400e !important; } .priority-medium { color: #065f46 !important; } /* --- Sidebar cards with amber/light inline backgrounds --- */ .sidebar-card[style*="background:#fef"], .sidebar-card[style*="background: #fef"], .sidebar-card[style*="background:#fff"], .sidebar-card[style*="background: #fff"] { color: #111827 !important; } .sidebar-card[style*="background:#fef"] *, .sidebar-card[style*="background: #fef"] *, .sidebar-card[style*="background:#fff"] *, .sidebar-card[style*="background: #fff"] * { color: #111827 !important; } /* --- Inline-styled light backgrounds (attribute selectors) --- Covers any element with style="background: #f..." or "background:white" These are the most common patterns found in the site-wide audit. */ [style*="background: white"], [style*="background:white"], [style*="background: #fff"], [style*="background:#fff"], [style*="background: #fafafa"], [style*="background:#fafafa"], [style*="background: #f8f9fa"], [style*="background:#f8f9fa"], [style*="background: #f8fafc"], [style*="background:#f8fafc"], [style*="background: #f3f4f6"], [style*="background:#f3f4f6"], [style*="background: #f1f5f9"], [style*="background:#f1f5f9"], [style*="background: #fef3c7"], [style*="background:#fef3c7"], [style*="background: #fef9c3"], [style*="background:#fef9c3"], [style*="background: #fef2f2"], [style*="background:#fef2f2"], [style*="background: #fee2e2"], [style*="background:#fee2e2"], [style*="background: #fefce8"], [style*="background:#fefce8"], [style*="background: #eff6ff"], [style*="background:#eff6ff"], [style*="background: #dbeafe"], [style*="background:#dbeafe"], [style*="background: #d1fae5"], [style*="background:#d1fae5"], [style*="background: #f0fdf4"], [style*="background:#f0fdf4"], [style*="background: #fff1f2"], [style*="background:#fff1f2"], [style*="background: #fce7f3"], [style*="background:#fce7f3"], [style*="background: #ecfdf5"], [style*="background:#ecfdf5"], [style*="background: #e8f5e9"], [style*="background:#e8f5e9"] { color: #111827 !important; } /* Force dark text on children of inline light-bg elements */ [style*="background: white"] *, [style*="background:white"] *, [style*="background: #fff"] *, [style*="background:#fff"] *, [style*="background: #fafafa"] *, [style*="background:#fafafa"] *, [style*="background: #f8f9fa"] *, [style*="background:#f8f9fa"] *, [style*="background: #f8fafc"] *, [style*="background:#f8fafc"] *, [style*="background: #fef3c7"] *, [style*="background:#fef3c7"] *, [style*="background: #fef9c3"] *, [style*="background:#fef9c3"] *, [style*="background: #fef2f2"] *, [style*="background:#fef2f2"] *, [style*="background: #fee2e2"] *, [style*="background:#fee2e2"] *, [style*="background: #eff6ff"] *, [style*="background:#eff6ff"] *, [style*="background: #dbeafe"] *, [style*="background:#dbeafe"] *, [style*="background: #d1fae5"] *, [style*="background:#d1fae5"] *, [style*="background: #f0fdf4"] *, [style*="background:#f0fdf4"] * { color: #111827 !important; } /* --- Table zebra striping: any light-bg row must have dark text --- Covers comparison-table, nuclear-table, data-table, and generic tables that use alternating white/off-white rows */ .comparison-table tr td, .comparison-table tr th, .nuclear-table tr td, .nuclear-table tr th { color: #111827 !important; } /* --- Blockquotes with light inline backgrounds --- */ blockquote[style*="background: #f"], blockquote[style*="background:#f"], blockquote[style*="background: white"], blockquote[style*="background:white"] { color: #111827 !important; } blockquote[style*="background: #f"] *, blockquote[style*="background:#f"] *, blockquote[style*="background: white"] *, blockquote[style*="background:white"] * { color: #111827 !important; } /* --- Dark inline callouts: keep light text on dark panels --- */ .callout[style*="background:#1c1a0f"], .callout[style*="background:#1c1a0f"] *, .callout[style*="background:#0f1a2e"], .callout[style*="background:#0f1a2e"] *, .callout-warning[style*="background:#1a1200"], .callout-warning[style*="background:#1a1200"] * { color: #e0dbd2 !important; } .callout[style*="background:#1c1a0f"] a, .callout[style*="background:#0f1a2e"] a, .callout-warning[style*="background:#1a1200"] a { color: #fbbf24 !important; } /* --- Preserve dark-bg elements: do NOT override dark containers --- These are dark-theme elements that should keep light text. Listed explicitly to prevent cascade conflicts. */ .cta-box, .cta-box *, .warning-banner, .warning-banner *, .action-box, .action-box *, [style*="background: #1e3a"], [style*="background:#1e3a"], [style*="background: #0f"], [style*="background:#0f"], [style*="background: #111"], [style*="background:#111"], [style*="background: #1a"], [style*="background:#1a"], [style*="background: #0a"], [style*="background:#0a"] { color: inherit !important; } /* ============================================================ END GLOBAL CONTRAST FIX ============================================================ */ /* ── Responsive H1 fix (all guide pages, including bare h1 without article-header wrapper) ── */ .article-content h1, article h1, main h1 { font-size: clamp(1.4rem, 6vw, 2.4rem) !important; line-height: 1.2 !important; overflow-wrap: break-word !important; word-break: break-word !important; hyphens: auto !important; max-width: 100% !important; } @media (max-width: 480px) { .article-content h1, article h1, main h1 { font-size: clamp(1.25rem, 5.5vw, 1.7rem) !important; line-height: 1.22 !important; } } @media (max-width: 375px) { .article-content h1, article h1, main h1 { font-size: 1.25rem !important; line-height: 1.25 !important; } } /* ============================================================ Key Takeaways / quick-actions-box — mobile responsive fix On screens ≤768px the