/* =========================================================
   GLOBAL KEYBOARD FOCUS
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}


/* =========================================================
   SCREEN-READER-ONLY CONTENT
   ========================================================= */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   SKIP TO MAIN CONTENT
   ========================================================= */

.skip-to-content {
    position: fixed;
    top: -100px;
    left: 10px;
    z-index: 2147483647;
    padding: 12px 18px;
    background: #ffffff;
    color: #000000;
    border: 3px solid #005fcc;
    border-radius: 0 0 6px 6px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    transition: top 0.1s ease;
}

    .skip-to-content:focus {
        top: 0;
        outline: 3px solid #ffbf00;
        outline-offset: 2px;
    }


/* =========================================================
   ACCESSIBILITY WIDGET
   ========================================================= */

.accessibility-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2147483647;
    font-family: Arial, sans-serif;
}


/* =========================================================
   ACCESSIBILITY TOGGLE BUTTON
   ========================================================= */

.accessibility-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 158px;
    height: 46px;
    padding: 0 14px;
    border: 2px solid #005fcc;
    border-radius: 999px;
    background-color: #ffffff;
    color: #172033;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}


/* =========================================================
   WHEELCHAIR ICON
   ========================================================= */

.accessibility-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 21px;
    line-height: 1;
}


/* =========================================================
   BUTTON TEXT
   ========================================================= */

.accessibility-button-text {
    display: inline-block;
    white-space: nowrap;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.accessibility-toggle:hover {
    background-color: #f0f6ff;
    color: #003f7f;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   BUTTON KEYBOARD FOCUS
   ========================================================= */

.accessibility-toggle:focus-visible {
    outline: 3px solid #ffbf00;
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #005fcc, 0 5px 16px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   MENU OPEN
   ========================================================= */

.accessibility-toggle[aria-expanded="true"] {
    background-color: #005fcc;
    color: #ffffff;
}


/* =========================================================
   ACCESSIBILITY MENU
   ========================================================= */

.accessibility-menu {
    position: absolute;
    right: 0;
    bottom: 56px;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
    background: #ffffff;
    color: #222222;
    border: 2px solid #333333;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}


/* =========================================================
   MENU HEADER
   ========================================================= */

.accessibility-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #005fcc;
    color: #ffffff;
    border-radius: 9px 9px 0 0;
}

    .accessibility-header h2 {
        margin: 0;
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
    }


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.accessibility-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

    .accessibility-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .accessibility-close:focus-visible {
        outline: 3px solid #ffbf00;
        outline-offset: 2px;
    }


/* =========================================================
   ACCESSIBILITY SECTIONS
   ========================================================= */

.accessibility-controls {
    padding: 15px;
}

.a11y-section {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #cccccc;
}

    .a11y-section:last-child {
        border-bottom: 0;
        margin-bottom: 0;
    }

    .a11y-section h3 {
        margin: 0 0 8px;
        color: #333333;
        font-size: 15px;
        font-weight: 700;
    }


/* =========================================================
   CURRENT TEXT SIZE
   ========================================================= */

.a11y-current-setting {
    margin: 0 0 10px;
    color: #555555;
    font-size: 14px;
    line-height: 1.4;
}


/* =========================================================
   ACCESSIBILITY CONTROL BUTTONS
   ========================================================= */

.a11y-control {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 6px 0;
    padding: 11px;
    border: 1px solid #888888;
    border-radius: 6px;
    background: #f7f7f7;
    color: #222222;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 15px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .a11y-control:hover:not(:disabled) {
        background: #e5e5e5;
    }

    .a11y-control:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 2px;
    }

    .a11y-control.active {
        background: #005fcc;
        color: #ffffff;
        border-color: #004a9f;
    }


    /* =========================================================
   DISABLED CONTROLS
   ========================================================= */

    .a11y-control:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }


/* =========================================================
   TEXT SIZE BUTTONS
   ========================================================= */

.a11y-button-row {
    display: flex;
    gap: 8px;
}

    .a11y-button-row .a11y-control {
        justify-content: center;
        text-align: center;
        font-size: 18px;
        font-weight: 700;
    }


/* =========================================================
   RESET BUTTON
   ========================================================= */

.a11y-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px;
    border: 2px solid #555555;
    border-radius: 6px;
    background: #ffffff;
    color: #222222;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

    .a11y-reset:hover {
        background: #eeeeee;
    }

    .a11y-reset:focus-visible {
        outline: 3px solid #005fcc;
        outline-offset: 2px;
    }


/* =========================================================
   STATUS / SCREEN READER ANNOUNCEMENTS
   ========================================================= */

.a11y-status {
    min-height: 20px;
    padding: 0 15px 15px;
    color: #444444;
    font-size: 13px;
}


/* =========================================================
   ACCESSIBILITY TEXT SIZES
   ========================================================= */

/*
   TextSize values:

       -3 = Smallest
       -2 = Smaller
       -1 = Slightly smaller
        0 = Normal
        1 = Larger
        2 = Extra large
        3 = Huge
        4 = Maximum
*/


html.a11y-font-smallest {
    font-size: 75% !important;
}

html.a11y-font-smaller {
    font-size: 85% !important;
}

html.a11y-font-small {
    font-size: 92% !important;
}

html.a11y-font-normal {
    font-size: 100% !important;
}

html.a11y-font-large {
    font-size: 115% !important;
}

html.a11y-font-xlarge {
    font-size: 130% !important;
}

html.a11y-font-huge {
    font-size: 150% !important;
}

html.a11y-font-max {
    font-size: 175% !important;
}

/* =========================================================
   HIGH CONTRAST
   ========================================================= */

/*
   High contrast mode intentionally uses:
   - White page background
   - Black text
   - Black borders/dividers
   - Strong focus indicators
   - Yellow links

   This avoids turning existing black borders/dividers white
   and preserves the visual structure of the application.
*/

html.a11y-high-contrast {
    background-color: #ffffff !important;
    color: #000000 !important;
}

    html.a11y-high-contrast body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }


    /* ---------------------------------------------------------
   Text
   --------------------------------------------------------- */

    html.a11y-high-contrast body,
    html.a11y-high-contrast main,
    html.a11y-high-contrast section,
    html.a11y-high-contrast article,
    html.a11y-high-contrast aside,
    html.a11y-high-contrast div,
    html.a11y-high-contrast p,
    html.a11y-high-contrast span,
    html.a11y-high-contrast label,
    html.a11y-high-contrast li,
    html.a11y-high-contrast dt,
    html.a11y-high-contrast dd,
    html.a11y-high-contrast h1,
    html.a11y-high-contrast h2,
    html.a11y-high-contrast h3,
    html.a11y-high-contrast h4,
    html.a11y-high-contrast h5,
    html.a11y-high-contrast h6 {
        color: #000000 !important;
    }


    /* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

    html.a11y-high-contrast a {
        color: #0000ee !important;
        text-decoration: underline !important;
        text-decoration-thickness: 2px !important;
    }


    /* ---------------------------------------------------------
   Borders / Lines
   --------------------------------------------------------- */

    /*
   IMPORTANT:
   Do NOT use body * { border-color: white }.
   That was causing existing black lines to disappear.
*/

    html.a11y-high-contrast hr {
        border-color: #000000 !important;
        color: #000000 !important;
    }

    html.a11y-high-contrast .content-card,
    html.a11y-high-contrast .filing-card,
    html.a11y-high-contrast .penalties-card,
    html.a11y-high-contrast .a11y-section,
    html.a11y-high-contrast .accessibility-menu {
        border-color: #000000 !important;
    }


    /* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

    html.a11y-high-contrast button {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #000000 !important;
    }


        /* Button text/icons */

        html.a11y-high-contrast button span,
        html.a11y-high-contrast button i {
            color: inherit !important;
        }


    /* ---------------------------------------------------------
   Form Controls
   --------------------------------------------------------- */

    html.a11y-high-contrast input,
    html.a11y-high-contrast select,
    html.a11y-high-contrast textarea {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }


    /* ---------------------------------------------------------
   Accessibility Widget
   --------------------------------------------------------- */

    html.a11y-high-contrast .accessibility-toggle {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #000000 !important;
    }

        html.a11y-high-contrast .accessibility-toggle .accessibility-button-text,
        html.a11y-high-contrast .accessibility-toggle .accessibility-icon {
            color: #ffffff !important;
        }

    html.a11y-high-contrast .accessibility-menu {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }

    html.a11y-high-contrast .accessibility-header {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-bottom: 2px solid #000000 !important;
    }

        html.a11y-high-contrast .accessibility-header h2 {
            color: #ffffff !important;
        }

    html.a11y-high-contrast .accessibility-close {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #ffffff !important;
    }

    html.a11y-high-contrast .a11y-section {
        border-bottom-color: #000000 !important;
    }

        html.a11y-high-contrast .a11y-section h3,
        html.a11y-high-contrast .a11y-current-setting,
        html.a11y-high-contrast .a11y-status {
            color: #000000 !important;
        }

    html.a11y-high-contrast .a11y-control {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }

        html.a11y-high-contrast .a11y-control.active {
            background-color: #000000 !important;
            color: #ffffff !important;
            border-color: #000000 !important;
        }

    html.a11y-high-contrast .a11y-reset {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }


    /* ---------------------------------------------------------
   Focus
   --------------------------------------------------------- */

    html.a11y-high-contrast a:focus-visible,
    html.a11y-high-contrast button:focus-visible,
    html.a11y-high-contrast input:focus-visible,
    html.a11y-high-contrast select:focus-visible,
    html.a11y-high-contrast textarea:focus-visible {
        outline: 4px solid #ffbf00 !important;
        outline-offset: 3px !important;
    }


/* =========================================================
   GRAYSCALE
   ========================================================= */

html.a11y-grayscale {
    filter: grayscale(100%);
}


/* =========================================================
   HIGHLIGHT LINKS
   ========================================================= */

html.a11y-highlight-links a {
    background-color: #ffff00 !important;
    color: #000000 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    outline: 2px solid #000000;
    outline-offset: 2px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

html.a11y-reduced-motion *,
html.a11y-reduced-motion *::before,
html.a11y-reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}


/* Respect operating-system preference */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}


/* =========================================================
   DISABLED CONTROLS
   ========================================================= */

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}


/* =========================================================
   TOUCH TARGETS
   ========================================================= */

@media (pointer: coarse) {

    .accessibility-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    button,
    a,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .accessibility-widget {
        right: 15px;
        bottom: 15px;
    }

    .accessibility-toggle {
        width: 148px;
        height: 44px;
        padding: 0 12px;
        font-size: 14px;
    }

    .accessibility-icon {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
        font-size: 20px;
    }

    .accessibility-menu {
        width: min(320px, calc(100vw - 24px));
        max-height: 75vh;
        bottom: 54px;
    }
}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 360px) {

    .accessibility-widget {
        right: 10px;
        bottom: 10px;
    }

    .accessibility-toggle {
        width: 142px;
        height: 44px;
        font-size: 14px;
    }

    .accessibility-menu {
        width: calc(100vw - 20px);
        right: -5px;
    }
}