/*
 * Universal accessibility styles.
 * Loaded on every page via the nav CSS bundle so that skip links,
 * screen-reader-only helpers, and keyboard focus indicators work
 * regardless of whether the React CSS bundle is present.
 */

/* Screen-reader only — visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Make sr-only elements visible when focused (skip links) */
.sr-only--focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Default keyboard focus indicator for all interactive elements */
:focus-visible {
    outline: 2px solid #2a9af8;
    outline-offset: -2px;
}

/* Suppress focus ring when main content receives programmatic focus
   after skip-link navigation (WCAG 2.4.1 bypass blocks) */
main[tabindex="-1"]:focus {
    outline: none;
}

/*
 * Nav component a11y fixes.
 * These rules exist in _nav.scss (React bundle) but are missing from
 * the pre-generated dist-nav.css snapshot. They ensure the skip button
 * and close button work correctly on legacy pages that only load
 * dist-nav.css.
 */

/* Skip-to-content button: visually hidden until focused.
   .sideNav button in dist-nav.css (0,1,1) sets display:block etc.
   Use .sideNav .sideNav__skip (0,2,0) to definitively win. */
.sideNav .sideNav__skip {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* Close nav button: changed from <svg> to <button> on a11y branch.
   .sideNav button (0,1,1) sets display:block, beating
   .sideNav__close display:none (0,1,0) in dist-nav.css.
   Use .sideNav .sideNav__close (0,2,0) to win. */
@media (min-width: 1366px) {
    .sideNav .sideNav__close {
        display: none;
    }
}

/* Expand nav on keyboard focus (matches hover behaviour from dist-nav.css) */
@media (min-width: 1366px) {
    .sideNav__primary:focus-within {
        width: 25rem;
        box-shadow: 0 0 3rem rgba(49, 65, 96, 0.6);
    }
    [dir=ltr] .sideNav__primary:focus-within {
        margin-right: -21.5rem;
    }
    [dir=rtl] .sideNav__primary:focus-within {
        margin-left: -21.5rem;
    }
}

/* Button nav items (Send Message, Customer Support, Profile).
   .sideNav button (0,1,1) sets display:block, breaking flex alignment.
   Use .sideNav button.sideNav__item (0,2,1) to restore flex layout. */
.sideNav button.sideNav__item {
    display: flex;
    align-items: center;
    text-align: left;
}
/* Restore padding zeroed by .sideNav button { padding: 0 } in dist-nav.css.
   Split by panel so each side matches its scope's anchor items:
   - Primary uses the base .sideNav__item padding (0.5 0.75 0.5 1)
   - Secondary matches .sideNav__secondary .sideNav__item (0.5 0 0.5 0.5),
     otherwise the toggle buttons sit 0.5rem right of anchor siblings AND
     lose vertical padding. */
[dir=ltr] .sideNav__primary button.sideNav__item {
    padding: .5rem .75rem .5rem 1rem;
}
[dir=rtl] .sideNav__primary button.sideNav__item {
    padding: .5rem 1rem .5rem .75rem;
}
[dir=ltr] .sideNav__secondary button.sideNav__item {
    padding: .5rem 0 .5rem .5rem;
}
[dir=rtl] .sideNav__secondary button.sideNav__item {
    padding: .5rem .5rem .5rem 0;
}

/* Focus ring for nav items — blue border via ::after pseudo-element,
   matching the focus-ring mixin from _nav.scss. Suppresses the default
   outline and uses an inset border instead. */
.sideNav .sideNav__item:focus {
    outline: none;
}
.sideNav .sideNav__item:focus-visible::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 2px solid #2a9af8;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}
.sideNav .sideNav__close:focus {
    outline: none;
}
.sideNav .sideNav__close:focus-visible::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 2px solid #2a9af8;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

/* Match hover and focus styling for secondary nav items */
.sideNav .sideNav__secondary .sideNav__item:hover,
.sideNav .sideNav__secondary .sideNav__item:focus-visible {
    background-color: #E7E9EC;
    color: #1788E6;
    fill: #2A9AF8;
}
.sideNav .sideNav__secondary .sideNav__item.sideNav__item--toggle:hover,
.sideNav .sideNav__secondary .sideNav__item.sideNav__item--toggle:focus-visible {
    background-color: transparent;
    color: #1788E6;
    fill: #2A9AF8;
}

/* Footer popup menu items: changed from <a> to <button> for a11y.
   Legacy Site.css applies background/border/font to bare `button` elements.
   Use class specificity to override. */
.sideNav__footer_popup button.menu__item {
    background: none;
    border: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    margin-right: 0;
    padding: 0.25rem 3rem 0.25rem 1rem;
    width: 100%;
}

.sideNav .sideNav__skip:focus {
    clip: auto;
    overflow: visible;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 1rem;
    background-color: #2a9af8;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    z-index: 6;
}