/* Theme Name: Avada Child - FILC Theme URI: https://floridasilc.org Description: Child theme for the Florida Independent Living Council. All customizations live here — Avada updates will never overwrite these changes. Targets WCAG 2.1 AA compliance. Author: FILC / Kevin McDaniel Template: Avada Version: 1.5.0 Text Domain: avada-child-filc */ /* * ===================================================================== * FILC ACCESSIBILITY & DESIGN FIXES — WCAG 2.1 AA * * This is the single source of truth for all CSS. * Clear the Avada Customizer "Additional CSS" area after deploying * this child theme — everything from there has been consolidated here. * * CONTENTS * 1. Focus Indicators (WCAG 2.4.7 / 2.4.11) * 2. Skip Link (WCAG 2.4.1) * 3. Screen-Reader Utilities * 4. Navigation — Desktop (WCAG 2.4.3, 2.4.7) * 5. Navigation — Mobile (WCAG 1.4.3, 2.4.7) * 6. Search Form (WCAG 1.4.3, 4.1.2) * 7. Color Contrast Overrides (WCAG 1.4.3) * 8. Typography Legacy Fixes * 9. Text Reflow & Spacing (WCAG 1.4.10 / 1.4.12) * 10. Reduced Motion (WCAG 2.3.3) * 11. Error Messaging (WCAG 3.3.1 / 3.3.3) * 12. Print Styles * 13. Touch Targets — Pagination (WCAG 2.5.5) * 14. Image Layout Shift (CLS prevention) * 15. Forced Colors / High Contrast * ===================================================================== */ /* ── CSS CUSTOM PROPERTIES ────────────────────────────────────────────── * Define once, reference everywhere. Override in :root if needed. */ :root { --focus-color: #0057B8; --focus-light: #5BA4F5; --nav-dark-bg: #0E3D4A; --gap-white: #ffffff; --link-color: #0057B8; --error-color: #b71c1c; --success-color: #1b5e20; } /* ── 1. FOCUS INDICATORS ────────────────────────────────────────────── * * Avada strips :focus outlines globally via reset CSS. * The JS script also injects inline focus styles for keyboard users * (beating Avada's !important via inline specificity). * These rules provide the base layer — the JS layer handles edge cases. * * WCAG 2.4.7 — Focus Visible (AA) * WCAG 2.4.11 — Focus Appearance (AAA target, good practice) */ /* Suppress WebKit default ring */ :focus { -webkit-focus-ring-color: transparent; } /* Remove focus ring for mouse users */ :focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* Restore for keyboard users */ :focus-visible { outline: 3px solid #0057B8 !important; outline-offset: 3px !important; } /* Global fallback — catches older browsers that don't support :focus-visible */ *:focus { outline: 3px solid #0057B8 !important; outline-offset: 3px !important; } /* Interactive elements — add white gap ring on focus AND hover EXCLUDES mobile nav (handled separately in §5 with light ring on dark bg) */ a:focus-visible, a:hover, button:focus-visible, button:hover, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, summary:hover, [role="button"]:focus-visible, [role="button"]:hover, [role="link"]:focus-visible, [role="link"]:hover, [role="menuitem"]:focus-visible, [role="menuitem"]:hover, [role="tab"]:focus-visible, [role="tab"]:hover, [tabindex]:focus-visible, [tabindex]:hover { outline: 3px solid #0057B8 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #0057B8 !important; border-radius: 2px; } /* Kill the global blue ring inside mobile/flyout nav — §5 handles it */ .fusion-mobile-nav-holder a:hover, .fusion-mobile-nav-holder a:focus, .fusion-mobile-nav-holder a:focus-visible, .fusion-flyout-menu a:hover, .fusion-flyout-menu a:focus, .fusion-flyout-menu a:focus-visible, .fusion-flyout-menu-content a:hover, .fusion-flyout-menu-content a:focus, .fusion-flyout-menu-content a:focus-visible { outline: 3px solid #5BA4F5 !important; outline-offset: -3px !important; box-shadow: none !important; color: #ffffff !important; background-color: #036897 !important; } /* Force ALL text inside flyout white — covers .menu-text, spans, everything */ .fusion-flyout-menu *, .fusion-flyout-menu-content *, .fusion-mobile-nav-holder * { color: #ffffff !important; } /* :focus fallback for browsers without :focus-visible */ a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [role="button"]:focus, [role="link"]:focus, [role="menuitem"]:focus, [role="tab"]:focus, [tabindex]:focus { outline: 3px solid #0057B8 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #0057B8 !important; border-radius: 2px; } /* Checkboxes and radio buttons */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, input[type="checkbox"]:focus, input[type="radio"]:focus { outline: 3px solid #0057B8 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #0057B8 !important; } /* Nav links sit on a dark background — use lighter ring */ .fusion-main-menu .fusion-menu-element-list a:focus-visible, .fusion-main-menu li a:focus-visible, #nav ul li a:focus-visible, .fusion-secondary-menu a:focus-visible, .fusion-mobile-menu-icons a:focus-visible, .fusion-main-menu .fusion-menu-element-list a:focus, .fusion-main-menu li a:focus, #nav ul li a:focus, .fusion-secondary-menu a:focus, .fusion-mobile-menu-icons a:focus { outline: 3px solid #5BA4F5 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #0E3D4A, 0 0 0 5px #5BA4F5 !important; border-radius: 2px; } /* Social links in footer — 2-ring pattern on dark bg (WCAG 2.4.11 AAA) */ .fusion-social-links a:focus-visible { outline: 3px solid #5BA4F5 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #0E3D4A, 0 0 0 5px #5BA4F5 !important; border-radius: 50%; } /* ── 2. SKIP LINK ───────────────────────────────────────────────────── * * WCAG 2.4.1 — Bypass Blocks (AA) * Avada renders