/* =========================================================
   Accessibility Widget
   Fixed panel — right side, vertically centered
   ========================================================= */

/* Respect OS-level reduced-motion preference (WCAG 2.3.3 / APCA best
   practice). Remove all transitions when the user has requested less motion. */
@media (prefers-reduced-motion: reduce) {
    #a11y-panel,
    #a11y-trigger,
    .a11y-font-btn,
    .a11y-switch,
    .a11y-switch-thumb {
        transition: none !important;
        animation: none !important;
    }
}

/* --- Outer container ------------------------------------ */
#a11y-widget {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    /* Stay above the uSkinned skip-to-content link at z-index 10000 */
    z-index: 10001;
}

/* --- Trigger button ------------------------------------- */
#a11y-trigger {
    width: 52px;
    height: 52px;
    border-radius: 50% 0 0 50%;
    background-color: #080b73;
    color: #ffffff;
    border: 2px solid #080b73;
    border-right: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

#a11y-trigger:hover {
    background-color: #2d62a1;
    border-color: #2d62a1;
}

/* WCAG 2.4.7 / 2.4.11: Focus indicators must have ≥ 3:1 contrast.
   #ee9c48 orange on white = 2.17:1 — FAIL.
   Dark navy #080b73 on white = 16.5:1 — PASS.
   A white outline-offset gap creates a two-tone ring visible on
   both light AND dark-background elements. */
#a11y-trigger:focus-visible {
    outline: 3px solid #080b73;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px #ffffff, 0 0 0 7px #080b73;
}

/* --- Expanded panel ------------------------------------- */
#a11y-panel {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.5rem);
    transform: translateY(-50%) scaleX(0.85);
    background: #ffffff;
    border: 1px solid #e2e1e1;
    border-top: 3px solid #080b73;
    border-radius: 6px;
    box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.18);
    padding: 1rem;
    min-width: 248px;
    /* animation */
    transform-origin: right center;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0.2s;
}

#a11y-panel.a11y-open {
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
    visibility: visible;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s linear 0s;
}

/* --- Panel heading -------------------------------------- */
#a11y-panel h2 {
    font-size: 0.875rem;
    font-weight: 700;
    color: #3f3f3c;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e1e1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Text size section ---------------------------------- */
.a11y-section-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem 0;
}

.a11y-font-controls {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.a11y-font-btn {
    flex: 1;
    padding: 0.375rem 0.25rem;
    border: 2px solid #080b73;
    border-radius: 4px;
    background: #ffffff;
    color: #080b73;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1;
    white-space: nowrap;
}

.a11y-font-btn sup {
    white-space: nowrap;
}

.a11y-font-btn:hover {
    background-color: #d3dfed;
}

/* WCAG 2.4.7 / 2.4.11 compliant focus ring */
.a11y-font-btn:focus-visible {
    outline: 3px solid #080b73;
    outline-offset: 2px;
}

/* Pin button label sizes in px so they don't shift with body scaling */
.a11y-font-btn[data-step="0"] {
    font-size: 13px;
}

.a11y-font-btn[data-step="1"] {
    font-size: 14px;
}

.a11y-font-btn[data-step="2"] {
    font-size: 15px;
}

.a11y-font-btn[data-step="3"] {
    font-size: 16px;
}

/* Active / current step */
.a11y-font-btn.a11y-active {
    background-color: #080b73;
    color: #ffffff;
}

/* --- Disabled state (at min/max boundary) --------------- */
.a11y-font-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Responsive: smaller trigger on very small screens -- */
@media (max-width: 480px) {
    #a11y-panel {
        min-width: 220px;
    }
}

/* =========================================================
   Step-based font-size overrides
   When JS scales body font-size, most elements inherit it.
   These selectors catch anything that doesn't inherit cleanly
   (nav dropdown links, footer links with explicit sizes, etc.)
   using data-a11y-step attribute stamped on <html> by the JS.
   ========================================================= */

/* Nav dropdown links and footer quick-link anchors */
[data-a11y-step="1"] footer a,
[data-a11y-step="1"] footer li,
[data-a11y-step="1"] nav a,
[data-a11y-step="1"] nav li,
[data-a11y-step="1"] .quick-links ul li a,
[data-a11y-step="1"] nav.footer-navigation > ul {
    font-size: var(--a11y-body-scaled-1) !important;
}

[data-a11y-step="2"] footer a,
[data-a11y-step="2"] footer li,
[data-a11y-step="2"] nav a,
[data-a11y-step="2"] nav li,
[data-a11y-step="2"] .quick-links ul li a,
[data-a11y-step="2"] nav.footer-navigation > ul {
    font-size: var(--a11y-body-scaled-2) !important;
}

[data-a11y-step="3"] footer a,
[data-a11y-step="3"] footer li,
[data-a11y-step="3"] nav a,
[data-a11y-step="3"] nav li,
[data-a11y-step="3"] .quick-links ul li a,
[data-a11y-step="3"] nav.footer-navigation > ul {
    font-size: var(--a11y-body-scaled-3) !important;
}

/* =========================================================
   SRTR custom.css hardcoded font-size overrides
   ---------------------------------------------------------
   custom.css contains several rem/px/percent font-size rules
   that sit outside uSkinned typography tokens. These selectors
   would not scale consistently with the text-size widget unless
   we override them by step.
   ========================================================= */

/* Step 1 (110%) */
[data-a11y-step="1"] .stat-number { font-size: calc(3rem * 1.1) !important; }
[data-a11y-step="1"] .stat-number-small { font-size: calc(1.3rem * 1.1) !important; }
[data-a11y-step="1"] .btn-text,
[data-a11y-step="1"] .btn-link,
[data-a11y-step="1"] .input-control,
[data-a11y-step="1"] .transplant-journey-wrapper .selector span .no-organ,
[data-a11y-step="1"] #centers-list .popup-content {
    font-size: calc(1rem * 1.1) !important;
}
[data-a11y-step="1"] .btn-dropdown { font-size: calc(1.1rem * 1.1) !important; }
[data-a11y-step="1"] .page-card { font-size: calc(0.9rem * 1.1) !important; }
[data-a11y-step="1"] .page-card h4 { font-size: calc(30px * 1.1) !important; }
[data-a11y-step="1"] .getting-started-table .header,
[data-a11y-step="1"] .repeatable.accordion.tab-buttons .tab a.nav-link,
[data-a11y-step="1"] .transplant-journey-wrapper .selector span {
    font-size: calc(18px * 1.1) !important;
}
[data-a11y-step="1"] #centers-list .transplant-center-search-results .center-name,
[data-a11y-step="1"] #centers-list .popup-content h1,
[data-a11y-step="1"] .paginationHeader,
[data-a11y-step="1"] .paginationNumberedBtnContainer a,
[data-a11y-step="1"] .paginationDropdownContainer {
    font-size: calc(1.25rem * 1.1) !important;
}
[data-a11y-step="1"] #centers-list .popup-close-btn,
[data-a11y-step="1"] #centers-list .export-wrapper button,
[data-a11y-step="1"] .transplant-center-search-mini-wrapper.floating label {
    font-size: calc(14px * 1.1) !important;
}
[data-a11y-step="1"] #centers-list .compare-wrapper .small { font-size: calc(90% * 1.1) !important; }

/* Step 2 (125%) */
[data-a11y-step="2"] .stat-number { font-size: calc(3rem * 1.25) !important; }
[data-a11y-step="2"] .stat-number-small { font-size: calc(1.3rem * 1.25) !important; }
[data-a11y-step="2"] .btn-text,
[data-a11y-step="2"] .btn-link,
[data-a11y-step="2"] .input-control,
[data-a11y-step="2"] .transplant-journey-wrapper .selector span .no-organ,
[data-a11y-step="2"] #centers-list .popup-content {
    font-size: calc(1rem * 1.25) !important;
}
[data-a11y-step="2"] .btn-dropdown { font-size: calc(1.1rem * 1.25) !important; }
[data-a11y-step="2"] .page-card { font-size: calc(0.9rem * 1.25) !important; }
[data-a11y-step="2"] .page-card h4 { font-size: calc(30px * 1.25) !important; }
[data-a11y-step="2"] .getting-started-table .header,
[data-a11y-step="2"] .repeatable.accordion.tab-buttons .tab a.nav-link,
[data-a11y-step="2"] .transplant-journey-wrapper .selector span {
    font-size: calc(18px * 1.25) !important;
}
[data-a11y-step="2"] #centers-list .transplant-center-search-results .center-name,
[data-a11y-step="2"] #centers-list .popup-content h1,
[data-a11y-step="2"] .paginationHeader,
[data-a11y-step="2"] .paginationNumberedBtnContainer a,
[data-a11y-step="2"] .paginationDropdownContainer {
    font-size: calc(1.25rem * 1.25) !important;
}
[data-a11y-step="2"] #centers-list .popup-close-btn,
[data-a11y-step="2"] #centers-list .export-wrapper button,
[data-a11y-step="2"] .transplant-center-search-mini-wrapper.floating label {
    font-size: calc(14px * 1.25) !important;
}
[data-a11y-step="2"] #centers-list .compare-wrapper .small { font-size: calc(90% * 1.25) !important; }

/* Step 3 (150%) */
[data-a11y-step="3"] .stat-number { font-size: calc(3rem * 1.5) !important; }
[data-a11y-step="3"] .stat-number-small { font-size: calc(1.3rem * 1.5) !important; }
[data-a11y-step="3"] .btn-text,
[data-a11y-step="3"] .btn-link,
[data-a11y-step="3"] .input-control,
[data-a11y-step="3"] .transplant-journey-wrapper .selector span .no-organ,
[data-a11y-step="3"] #centers-list .popup-content {
    font-size: calc(1rem * 1.5) !important;
}
[data-a11y-step="3"] .btn-dropdown { font-size: calc(1.1rem * 1.5) !important; }
[data-a11y-step="3"] .page-card { font-size: calc(0.9rem * 1.5) !important; }
[data-a11y-step="3"] .page-card h4 { font-size: calc(30px * 1.5) !important; }
[data-a11y-step="3"] .getting-started-table .header,
[data-a11y-step="3"] .repeatable.accordion.tab-buttons .tab a.nav-link,
[data-a11y-step="3"] .transplant-journey-wrapper .selector span {
    font-size: calc(18px * 1.5) !important;
}
[data-a11y-step="3"] #centers-list .transplant-center-search-results .center-name,
[data-a11y-step="3"] #centers-list .popup-content h1,
[data-a11y-step="3"] .paginationHeader,
[data-a11y-step="3"] .paginationNumberedBtnContainer a,
[data-a11y-step="3"] .paginationDropdownContainer {
    font-size: calc(1.25rem * 1.5) !important;
}
[data-a11y-step="3"] #centers-list .popup-close-btn,
[data-a11y-step="3"] #centers-list .export-wrapper button,
[data-a11y-step="3"] .transplant-center-search-mini-wrapper.floating label {
    font-size: calc(14px * 1.5) !important;
}
[data-a11y-step="3"] #centers-list .compare-wrapper .small { font-size: calc(90% * 1.5) !important; }

/* Footer heading paragraphs (.heading, .heading.sm, .heading.lg)
   Reference the same CSS variable that the JS scales, with
   !important to beat any conflicting specificity. */
[data-a11y-step] footer p.heading,
[data-a11y-step] footer span.heading,
[data-a11y-step] footer .footer-heading {
    font-size: var(--p-heading_small-typography_font-size) !important;
}

[data-a11y-step] footer p.heading.sm,
[data-a11y-step] footer span.heading.sm {
    font-size: var(--p-heading_small-typography_font-size) !important;
}

[data-a11y-step] footer p.heading.lg,
[data-a11y-step] footer span.heading.lg {
    font-size: var(--p-heading_large-typography_font-size) !important;
}

/* =========================================================
   Toggle switch — High Contrast control
   WAI-ARIA switch role pattern (APG)
   ========================================================= */

.a11y-divider {
    border: none;
    border-top: 1px solid #e2e1e1;
    margin: 0.75rem 0 0.625rem;
}

.a11y-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.a11y-switch-row + .a11y-switch-row {
    margin-top: 0.5rem;
}

.a11y-switch-label-text {
    font-size: 13px;
    font-weight: 600;
    color: #3f3f3c;
    line-height: 1.3;
    white-space: nowrap;
}

/* Switch track */
.a11y-switch {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: 2px solid #080b73;
    background: #ffffff;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Switch thumb */
.a11y-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #080b73;
    transition: transform 0.2s ease;
    pointer-events: none;
}

/* ON state */
.a11y-switch[aria-checked="true"] {
    background: #080b73;
    border-color: #080b73;
}

.a11y-switch[aria-checked="true"] .a11y-switch-thumb {
    transform: translateX(20px);
    background: #ffffff;
}

.a11y-switch:hover {
    border-color: #2d62a1;
}

.a11y-switch[aria-checked="false"]:hover {
    background: #d3dfed;
}

.a11y-switch[aria-checked="true"]:hover {
    background: #2d62a1;
    border-color: #2d62a1;
}

/* WCAG 2.4.7 / 2.4.11 compliant focus ring */
.a11y-switch:focus-visible {
    outline: 3px solid #080b73;
    outline-offset: 2px;
}

/* =========================================================
   High Contrast Mode
   Activated by [data-a11y-contrast="high"] on <html>.

   The uSkinned theme uses rgba(var(--token), opacity) for all
   colors — overriding the RGB-triplet tokens here is the most
   complete and specificity-safe approach.

   Contrast ratios achieved (on white background):
     Text  #000000  → 21:1   (WCAG AAA)
     Links #0000cc  → 7.2:1  (WCAG AAA)
     Muted #1a1a1a  → 19:1   (WCAG AAA)
   ========================================================= */

[data-a11y-contrast="high"] {

    /* --- Base palette ------------------------------------ */
    --base-text:               0, 0, 0;
    --base-bg-color1:          255, 255, 255;
    --base-bg-color2:          255, 255, 255;
    --base-link:               0, 0, 204;
    --base-link-hover:         0, 0, 153;
    --base-borders:            0, 0, 0;
    --base-highlight-text:     0, 0, 0;

    /* Buttons: black background, white text */
    --base-btn-bg-color1:      0, 0, 0;
    --base-btn-bg-color2:      0, 0, 0;
    --base-btn-bg-hover-color1: 26, 26, 26;
    --base-btn-bg-hover-color2: 26, 26, 26;
    --base-btn-text:           255, 255, 255;
    --base-btn-text-hover:     255, 255, 255;
    --base-btn-borders:        0, 0, 0;
    --base-btn-borders-hover:  0, 0, 0;

    /* --- Body -------------------------------------------- */
    --body-bg-color1:          255, 255, 255;
    --body-bg-color2:          255, 255, 255;

    /* --- Header ------------------------------------------ */
    --header-bg-color1:        255, 255, 255;
    --header-bg-color2:        255, 255, 255;
    --header-text:             0, 0, 0;
    --header-borders:          0, 0, 0;

    /* --- Footer ------------------------------------------ */
    --footer-bg-color1:        255, 255, 255;
    --footer-bg-color2:        255, 255, 255;
    --footer-text:             0, 0, 0;
    --footer-link:             0, 0, 204;
    --footer-link-hover:       0, 0, 153;
    --footer-borders:          0, 0, 0;

    /* --- Navigation -------------------------------------- */
    --logo-link:                       0, 0, 0;
    --logo-link-hover:                 0, 0, 204;
    --main-navigation-link:            0, 0, 0;
    --main-navigation-link-hover:      0, 0, 204;
    --main-navigation-link-active:     0, 0, 204;
    --navigation-dropdown-color1:      255, 255, 255;
    --navigation-dropdown-color2:      255, 255, 255;
    --navigation-dropdown-link:        0, 0, 0;
    --navigation-dropdown-link-hover:  0, 0, 204;
    --navigation-dropdown-link-active: 0, 0, 204;
    --secondary-navigation-link:       0, 0, 0;
    --secondary-navigation-link-hover: 0, 0, 204;

    /* --- Color zone 1 (light orange bg) ----------------- */
    --c1-bg-color1:       255, 255, 255;
    --c1-bg-color2:       255, 255, 255;
    --c1-text:            0, 0, 0;
    --c1-link:            0, 0, 204;
    --c1-link-hover:      0, 0, 153;
    --c1-borders:         0, 0, 0;
    --c1-btn-bg-color1:   0, 0, 0;
    --c1-btn-bg-color2:   0, 0, 0;
    --c1-btn-text:        255, 255, 255;
    --c1-btn-text-hover:  255, 255, 255;
    --c1-btn-borders:     0, 0, 0;
    --c1-btn-borders-hover: 0, 0, 0;

    /* --- Color zone 2 (light teal bg) ------------------- */
    --c2-bg-color1:       255, 255, 255;
    --c2-bg-color2:       255, 255, 255;
    --c2-text:            0, 0, 0;
    --c2-link:            0, 0, 204;
    --c2-link-hover:      0, 0, 153;
    --c2-borders:         0, 0, 0;
    --c2-btn-bg-color1:   0, 0, 0;
    --c2-btn-bg-color2:   0, 0, 0;
    --c2-btn-text:        255, 255, 255;
    --c2-btn-text-hover:  255, 255, 255;
    --c2-btn-borders:     0, 0, 0;
    --c2-btn-borders-hover: 0, 0, 0;

    /* --- Color zone 3 (dark/black bg) ------------------- */
    --c3-bg-color1:       255, 255, 255;
    --c3-bg-color2:       255, 255, 255;
    --c3-text:            0, 0, 0;
    --c3-heading:         0, 0, 0;
    --c3-secondary-heading: 0, 0, 0;
    --c3-link:            0, 0, 204;
    --c3-link-hover:      0, 0, 153;
    --c3-borders:         0, 0, 0;
    --c3-btn-bg-color1:   0, 0, 0;
    --c3-btn-bg-color2:   0, 0, 0;
    --c3-btn-text:        255, 255, 255;
    --c3-btn-text-hover:  255, 255, 255;
    --c3-btn-borders:     0, 0, 0;
    --c3-btn-borders-hover: 0, 0, 0;

    /* --- Color zone 4 (white bg — mostly fine already) -- */
    --c4-bg-color1:       255, 255, 255;
    --c4-bg-color2:       255, 255, 255;
    --c4-text:            0, 0, 0;
    --c4-heading:         0, 0, 0;
    --c4-secondary-heading: 0, 0, 0;
    --c4-link:            0, 0, 204;
    --c4-link-hover:      0, 0, 153;
    --c4-borders:         0, 0, 0;
    --c4-btn-bg-color1:   0, 0, 0;
    --c4-btn-bg-color2:   0, 0, 0;
    --c4-btn-text:        255, 255, 255;
    --c4-btn-text-hover:  255, 255, 255;
    --c4-btn-borders:     0, 0, 0;
    --c4-btn-borders-hover: 0, 0, 0;

    /* --- Color zone 5 (brand dark-blue bg) -------------- */
    --c5-bg-color1:       255, 255, 255;
    --c5-bg-color2:       255, 255, 255;
    --c5-text:            0, 0, 0;
    --c5-heading:         0, 0, 0;
    --c5-secondary-heading: 0, 0, 0;
    --c5-link:            0, 0, 204;
    --c5-link-hover:      0, 0, 153;
    --c5-borders:         0, 0, 0;

    /* --- Color zone 6 (medium blue bg) ------------------ */
    --c6-bg-color1:       255, 255, 255;
    --c6-bg-color2:       255, 255, 255;
    --c6-text:            0, 0, 0;
    --c6-link:            0, 0, 204;
    --c6-link-hover:      0, 0, 153;
    --c6-borders:         0, 0, 0;

    /* --- Color zone 7 (teal bg) ------------------------- */
    --c7-bg-color1:       255, 255, 255;
    --c7-bg-color2:       255, 255, 255;
    --c7-text:            0, 0, 0;
    --c7-link:            0, 0, 204;
    --c7-link-hover:      0, 0, 153;
    --c7-borders:         0, 0, 0;

    /* --- Color zone 8 (near-white bg) ------------------- */
    --c8-bg-color1:       255, 255, 255;
    --c8-bg-color2:       255, 255, 255;
    --c8-text:            0, 0, 0;
    --c8-link:            0, 0, 204;
    --c8-link-hover:      0, 0, 153;
    --c8-borders:         0, 0, 0;
}

/* Always underline links — WCAG 1.4.1 (Use of Color) requires
   that colour alone not be the only indicator for links. */
[data-a11y-contrast="high"] a {
    text-decoration: underline !important;
}

/* Remove solely decorative shadows that serve no functional purpose */
[data-a11y-contrast="high"] .component,
[data-a11y-contrast="high"] .card,
[data-a11y-contrast="high"] .usn_cmp_card,
[data-a11y-contrast="high"] .usn_cmp_image,
[data-a11y-contrast="high"] img {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* --- Background images ----------------------------------------
   Text layered on top of a decorative background image can't
   guarantee contrast. Replace with solid white so the text
   colour change above is guaranteed to produce ≥ 7:1.          */
[data-a11y-contrast="high"] [class*="-bg"],
[data-a11y-contrast="high"] .hero,
[data-a11y-contrast="high"] .banner,
[data-a11y-contrast="high"] .component {
    background-image: none !important;
}

/* --- Form inputs (WCAG 1.4.11 — non-text contrast ≥ 3:1) ------
   uSkinned form borders use rgba(var(--token)) but also have
   hardcoded fallback values on some input variants.              */
[data-a11y-contrast="high"] input,
[data-a11y-contrast="high"] select,
[data-a11y-contrast="high"] textarea {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #000000 !important;
    border-width: 2px !important;
}

/* --- Placeholder text (WCAG 1.4.3 — ≥ 4.5:1; default grey
   placeholder is typically ≈ 1.8:1 on white)                    */
[data-a11y-contrast="high"] ::placeholder {
    color: #595959 !important;   /* 7:1 on white — AAA */
    opacity: 1 !important;        /* Firefox reduces opacity to 0.54 by default */
}

/* --- Selected text (WCAG 1.4.3)                                 */
[data-a11y-contrast="high"] ::selection {
    background-color: #000000;
    color: #ffffff;
}

/* --- Hardcoded muted-grey colours that aren't token-driven ----
   uSkinned uses Bootstrap-derived values like #6c757d (#495057,
   #6a6a6a) for small print and metadata text.  These fail 4.5:1
   on a white background so we force them to near-black.          */
[data-a11y-contrast="high"] .text-muted,
[data-a11y-contrast="high"] [class*="text-muted"],
[data-a11y-contrast="high"] small,
[data-a11y-contrast="high"] .small,
[data-a11y-contrast="high"] figcaption,
[data-a11y-contrast="high"] caption,
[data-a11y-contrast="high"] .caption,
[data-a11y-contrast="high"] label {
    color: #000000 !important;
}

/* --- Focus rings in high contrast mode (all interactive elements)
   Black outline on white = 21:1. Two-tone ring ensures visibility
   on any background element, satisfying WCAG 2.4.7 / 2.4.11.    */
[data-a11y-contrast="high"] *:focus-visible {
    outline: 3px solid #000000 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px #ffffff, 0 0 0 8px #000000 !important;
}

/* Ensure the widget panel itself stays readable in high-contrast mode.
   The widget uses hard-coded hex colors, not CSS variable tokens,
   so it is already unaffected — this rule is a safety net only. */
[data-a11y-contrast="high"] #a11y-widget,
[data-a11y-contrast="high"] #a11y-trigger,
[data-a11y-contrast="high"] #a11y-panel {
    forced-color-adjust: none;
}

/* =========================================================
   OS / Browser Forced-Colors (Windows High Contrast)
   When the browser is already in forced-colors mode we step
   back and let the OS handle everything. We only preserve our
   focus rings so they remain visible under system colours.
   ========================================================= */
@media (forced-colors: active) {
    /* Don't fight the OS color palette */
    #a11y-widget {
        forced-color-adjust: none;
    }

    /* Use system Highlight color for focus rings so they remain
       visible and consistent with other OS-rendered elements.
       (Our two-tone box-shadow rings are ignored by forced-colors;
        the outline alone is enough here.) */
    #a11y-trigger:focus-visible,
    .a11y-font-btn:focus-visible,
    .a11y-switch:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* =========================================================
   Text Spacing Mode (WCAG 2.1 AA SC 1.4.12)
   ---------------------------------------------------------
   Values match W3C guidance:
   - line-height: 1.5
   - paragraph spacing: 2x font size
   - letter spacing: 0.12em
   - word spacing: 0.16em
   ========================================================= */

[data-a11y-text-spacing="on"] #site-content p,
[data-a11y-text-spacing="on"] #site-content li,
[data-a11y-text-spacing="on"] #site-content dd,
[data-a11y-text-spacing="on"] #site-content dt,
[data-a11y-text-spacing="on"] #site-content blockquote,
[data-a11y-text-spacing="on"] #site-content figcaption,
[data-a11y-text-spacing="on"] #site-content label,
[data-a11y-text-spacing="on"] #site-content a,
[data-a11y-text-spacing="on"] #site-content span,
[data-a11y-text-spacing="on"] #site-content input,
[data-a11y-text-spacing="on"] #site-content textarea,
[data-a11y-text-spacing="on"] #site-content button,
[data-a11y-text-spacing="on"] #site-content select {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

[data-a11y-text-spacing="on"] #site-content p {
    margin-bottom: 2em !important;
}

/* Avoid clipping/truncation in nav breadcrumb when spacing expands text */
[data-a11y-text-spacing="on"] .breadcrumb-trail a,
[data-a11y-text-spacing="on"] .breadcrumb-trail li,
[data-a11y-text-spacing="on"] nav.breadcrumb {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
}

/* Prevent clipping in known fixed-height custom components */
[data-a11y-text-spacing="on"] .btn-dropdown {
    height: auto !important;
    min-height: 62px;
    white-space: normal !important;
    line-height: 1.5 !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

[data-a11y-text-spacing="on"] .paginationNumberedBtnContainer a {
    width: auto !important;
    min-width: 2.2em;
    height: auto !important;
    min-height: 2.2em;
    white-space: normal !important;
}

/* Fixed-height controls from form/search modules */
[data-a11y-text-spacing="on"] .form-control,
[data-a11y-text-spacing="on"] .input-control,
[data-a11y-text-spacing="on"] .site-search input,
[data-a11y-text-spacing="on"] .site-search button,
[data-a11y-text-spacing="on"] input,
[data-a11y-text-spacing="on"] select,
[data-a11y-text-spacing="on"] textarea,
[data-a11y-text-spacing="on"] button:not(.a11y-switch) {
    height: auto !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
}

/* Keep accessibility widget toggles at fixed switch dimensions. */
[data-a11y-text-spacing="on"] .a11y-switch {
    width: 44px !important;
    height: 24px !important;
    min-height: 24px !important;
}

[data-a11y-text-spacing="on"] .page-card,
[data-a11y-text-spacing="on"] .page-card h4,
[data-a11y-text-spacing="on"] .page-card p {
    overflow-wrap: anywhere;
}