/.container/.content wrapper at all — without it, this toggle was a silent no-op on the most-visited page. The footer's link list (Fixes, Install guide, Privacy Policy, etc.) is plain text with no button styling, so underlining it is safe. The category tiles, the describe-chip pills, and the primary CTA buttons on the homepage are deliberately NOT in this list — they are plain tags with no distinguishing class inside plain

s, so there's no clean way to include "real" content links from that same markup without also underlining those button/tile links; leaving the list as-is (nav/tiles/CTAs unmatched) is the safe under-reach. */ html.a11y-underline-links :where(main, article, .container, .content, .page, #content, footer, p, li, td, th, blockquote, figcaption) a:not(.wh-nav-cta):not(.describe-chip):not(.a11y-fab):not(.a11y-close) { text-decoration: underline !important; text-underline-offset: 2px; } /* ---- 5f. MORE SPACING (readable body text) -------------------------- */ html.a11y-spacing :where(body, p, li, td, th, span, a, label, blockquote, figcaption, dt, dd) { line-height: 1.7 !important; letter-spacing: 0.02em !important; word-spacing: 0.12em !important; } html.a11y-spacing :where(p, li) { margin-bottom: 0.9em; } /* ---- 5g. BIGGER BUTTONS / TARGETS ------------------------------------ */ /* !important: the site sets padding/sizing via inline styles on almost every button and link (see the large-text note above), so a plain declaration here would silently lose to those inline styles and the toggle would do nothing. */ html.a11y-big-targets :where(button, a, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"], select) { min-height: 44px !important; min-width: 44px !important; padding-top: max(10px, 0.6em) !important; padding-bottom: max(10px, 0.6em) !important; } /* Plain content links default to display:inline, which ignores min-height/padding-block entirely — so the rule above is a no-op on them without this. Scoped to known non-flex content/CTA links (not a blanket `a` selector) so we never force inline-block onto a page's logo/brand link, which relies on its OWN flex layout for icon+text and would break if blockified to plain flow. */ html.a11y-big-targets :where(.describe-chip, .wh-footer-link, .wh-nav-cta) { display: inline-block !important; } /* Keep the widget's own compact controls (segmented buttons, close button, toggle rows) usable and un-distorted — they already meet the 44px target via their own layout. These need !important too now: the base rule above gained !important (it has to, to beat the site's inline padding), so a non-important reset here would no longer win against it. */ html.a11y-big-targets .a11y-seg button, html.a11y-big-targets .a11y-close, html.a11y-big-targets .a11y-row input[type="checkbox"] { min-height: 0 !important; min-width: 0 !important; padding-top: initial !important; padding-bottom: initial !important; } html.a11y-big-targets .a11y-fab { min-height: 0 !important; min-width: 0 !important; } /* ---- 5h. LARGER TEXT (third step: Normal / Large / Larger) --------- */ /* Same `zoom` technique as 5a (large-text), scaled further. Mutually exclusive with a11y-large-text — a11y.js only ever applies one of the two textSize classes at a time. */ /* 1.3 rather than a full 1.4 — still a clear third step up from Large's 1.18, but a smaller jump keeps phone widths (360-414px) from overflowing horizontally on top of the overflow-x guard below. */ html.a11y-larger-text body { zoom: 1.3; } html.a11y-larger-text .a11y-fab, html.a11y-larger-text .a11y-panel, html.a11y-larger-text .a11y-skip-link, html.a11y-larger-text .language-selector, html.a11y-larger-text .wh-lang-selector { zoom: 0.769231; /* 1 / 1.3 */ } html.a11y-larger-text :where(p, li, td, th, span, a, h1, h2, h3, .container) { overflow-wrap: break-word; word-break: normal; } /* Text-zoom safety net: never let the zoomed page scroll horizontally (phone widths in particular have no margin to absorb the bump). Only overflow-x is hidden — overflow-y is left alone so content never clips vertically. */ html.a11y-larger-text, html.a11y-larger-text body { overflow-x: hidden; }