/* =========================================
   ACCESSIBILITY PANEL — SCREENSHOT DESIGN
========================================= */

.accessibility-panel[hidden] {
    display: none !important;
}

.accessibility-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;

    width: 280px;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;

    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;

    background: #FFFFFF;
    color: #d2dfff;

    border: none;
    border-radius: 0;
    box-shadow: -3px 0 15px rgba(0, 0, 0, 0.12);

    z-index: 10000;
    overflow: hidden;

    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

/* Apply box sizing inside the panel */

.accessibility-panel *,
.accessibility-panel *::before,
.accessibility-panel *::after {
    box-sizing: border-box;
}

/* =========================================
   PANEL HEADER
========================================= */

.accessibility-panel-header {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 60px;
    padding: 0 8px 0 10px;
    margin: 0;

    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
}

.accessibility-panel-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;

    color: #292929;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
}

.accessibility-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #162F6A;
    font-size: 16px;
}

.accessibility-close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    flex-shrink: 0;

    padding: 0;

    color: #d2dfff;
    background: #162F6A;

    border: 3px solid #d2dfff;
    border-radius: 9px;

    font-size: 30px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
}

/* =========================================
   ACCESSIBILITY OPTIONS GRID
========================================= */

.accessibility-options {
    flex-shrink: 0;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 10px;

    padding: 8px 11px 0;
    margin: 0;

    background: #FFFFFF;
}

/* Individual option buttons */

.accessibility-options button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-width: 0;
    height: 81px;

    padding: 6px 3px;
    margin: 0;

    color: #d2dfff;
    background: #FFFFFF;

    border: 1px solid #162f6a;
    border-radius: 5px;

    font-family: Arial, sans-serif;
    cursor: pointer;
}

/* Active setting */

.accessibility-options button.active {
    background: #162F6A;
    border-color: #d2dfff;
}

/* Icons */

.accessibility-options .accessibility-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 36px;

    color: #162f6a;
    font-size: 32px;
    line-height: 1;
}

.accessibility-options .text-size-icon {
    font-size: 31px;
    font-weight: 400;
}

/* Button labels */

.accessibility-options .accessibility-label {
    display: block;

    color: #162f6a;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

/* =========================================
   RESET BUTTON — FIXED AT BOTTOM
========================================= */

.accessibility-panel-footer {
    flex-shrink: 0;

    margin-top: auto;
    padding: 0 11px 7px;

    background: #FFFFFF;
}

#accessibilityReset {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 38px;

    padding: 8px;

    color: #162f6a;
    background: #FFFFFF;

    border: 1px solid #162f6a;
    border-radius: 4px;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

/* =========================================
   KEYBOARD ACCESSIBILITY
========================================= */

.accessibility-panel button:focus-visible {
    outline: 3px solid #162f6a;
    outline-offset: 2px;
}

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

@media (max-width: 300px) {
    .accessibility-panel-header h2 {
        gap: 6px;
        font-size: 14px;
    }

    .accessibility-options {
        gap: 7px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .accessibility-options .accessibility-label {
        font-size: 9px;
    }
}

/* =========================================
   ACCESSIBILITY EFFECTS
   Class names must match header.js
========================================= */

/* DARK CONTRAST
   :where() keeps the specificity low so the link,
   logo and panel rules below can override it.      */

html.a11y-dark-contrast :where(body, body *) {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.a11y-dark-contrast body a,
html.a11y-dark-contrast body a * {
    color: #FFFF00 !important;
    text-decoration: underline !important;
}

html.a11y-dark-contrast body ::placeholder {
    color: #CCCCCC !important;
    opacity: 1;
}

/* Dark logos and icons become white */

html.a11y-dark-contrast body .about-card-logo,
html.a11y-dark-contrast body .document-card-logo,
html.a11y-dark-contrast body .documents-heading-logo,
html.a11y-dark-contrast body .tender-logo,
html.a11y-dark-contrast body .whatsnew-logo,
html.a11y-dark-contrast body .announcement-logo,
html.a11y-dark-contrast body .about-us-logo,
html.a11y-dark-contrast body .search-logo,
html.a11y-dark-contrast body .skip-logo,
/* html.a11y-dark-contrast body .accessibility-logo, */
html.a11y-dark-contrast body .dropdown-arrow,
html.a11y-dark-contrast body .phone-logo,
html.a11y-dark-contrast body .address-logo 
/* {
    filter: brightness(0) invert(1) !important;
} */
/* Keep accessibility toggle icon unchanged in dark contrast */

html.a11y-dark-contrast #accessibilityToggle,
html.a11y-dark-contrast #accessibilityToggle img {
    filter: none !important;
    -webkit-filter: none !important;
}

/* All decorative icons (img with empty alt) become yellow in dark contrast */

html.a11y-dark-contrast body img[alt=""],
html.a11y-dark-contrast #accessibilityToggle img {
    filter: brightness(0) saturate(100%) invert(97%) sepia(94%)
            saturate(7482%) hue-rotate(358deg) brightness(104%)
            contrast(106%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(97%) sepia(94%)
            saturate(7482%) hue-rotate(358deg) brightness(104%)
            contrast(106%) !important;
    background-color: transparent !important;
}

/* Font Awesome / Material icons on the page also yellow */

html.a11y-dark-contrast body i[class*="fa-"],
html.a11y-dark-contrast body .material-symbols-outlined {
    color: #FFFF00 !important;
}
/* Keep the accessibility panel readable */


html.a11y-dark-contrast body .accessibility-panel,
html.a11y-dark-contrast body .accessibility-panel * {
    background-color: #FFFFFF !important;
    color: #162F6A !important;
    border-color: #162F6A !important;
}

html.a11y-dark-contrast body .accessibility-panel .accessibility-options button.active {
    background-color: #D2DFFF !important;
}

html.a11y-dark-contrast body .accessibility-panel .accessibility-close {
    background-color: #162F6A !important;
    color: #D2DFFF !important;
    border-color: #D2DFFF !important;
}

/* Accessibility toggle in dark contrast: blue icon on a light background */

html.a11y-dark-contrast body #accessibilityToggle {
    background-color: #D2DFFF !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

html.a11y-dark-contrast body #accessibilityToggle img,
html.a11y-dark-contrast body #accessibilityToggle .accessibility-logo {
    background-color: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Skip to main content button in dark contrast */

html.a11y-dark-contrast body #skip-to-main {
    background-color: #D2DFFF !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

html.a11y-dark-contrast body #skip-to-main img,
html.a11y-dark-contrast body #skip-to-main .skip-logo {
    background-color: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Search button in dark contrast: dark icon on a light background */

html.a11y-dark-contrast body #websiteSearchForm button[type="submit"] {
    background-color: #D2DFFF !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 8px !important;
}

html.a11y-dark-contrast body #websiteSearchForm button[type="submit"] img,
html.a11y-dark-contrast body #websiteSearchForm .search-logo {
    background-color: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
}
/* =========================================
   INVERT COLOURS AND LOW SATURATION
   Exclude only the accessibility toggle
========================================= */

/* INVERT */
html.a11y-invert body > *:not(#site-header):not(script):not(link):not(style) {
    filter: invert(1) hue-rotate(180deg);
}

/* LOW SATURATION */
html.a11y-low-saturation body > *:not(#site-header):not(script):not(link):not(style) {
    filter: saturate(0.5);
}

/* INVERT + LOW SATURATION */
html.a11y-invert.a11y-low-saturation body > *:not(#site-header):not(script):not(link):not(style) {
    filter: invert(1) hue-rotate(180deg) saturate(0.5);
}

/* Invert the page header except the accessibility toggle */
html.a11y-invert #site-header .department-header,
html.a11y-invert #site-header .main-navigation {
    filter: invert(1) hue-rotate(180deg);
}

/* Restore images inside inverted content */
html.a11y-invert body > *:not(#site-header) img,
html.a11y-invert body > *:not(#site-header) picture,
html.a11y-invert body > *:not(#site-header) video {
    filter: invert(1) hue-rotate(180deg);
}

/* Keep ONLY the accessibility toggle unchanged */
#accessibilityToggle,
#accessibilityToggle img,
#accessibilityToggle .accessibility-logo {
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
}

/* Keep the accessibility panel unchanged */
#accessibilityPanel {
    filter: none !important;
    -webkit-filter: none !important;
}

/* HIGHLIGHT LINKS */

html.a11y-highlight-links body a {
    color: #162F6A !important;
    background-color: #D2DFFF !important;
    outline: 2px solid #162F6A !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
}

/* HIDE IMAGES */

html.a11y-hide-images body img,
html.a11y-hide-images body picture,
html.a11y-hide-images body video {
    visibility: hidden !important;
}

/* DEFAULT CURSOR */

html.a11y-default-cursor,
html.a11y-default-cursor body,
html.a11y-default-cursor body * {
    cursor: auto !important;
}

/* TEXT SIZE
   Every size on this site is written in px, so changing the
   body font-size has no visible effect. Instead the page
   content is scaled with zoom. The accessibility panel is
   excluded so its buttons never move.                       */

html {
    --a11y-text-scale: 1;
}

html.a11y-text-scaled body > *:not(#site-header):not(script):not(link):not(style),
html.a11y-text-scaled #site-header > :not(.accessibility-panel) {
    zoom: var(--a11y-text-scale, 1);
}

/* Hover effect for accessibility option buttons */

.accessibility-options button:hover {
    background-color: #D2DFFF;
    border-color: #162F6A;
    color: #162F6A;
}

.accessibility-options button:hover .accessibility-icon,
.accessibility-options button:hover .accessibility-label {
    color: #162F6A;
}

.accessibility-close:hover {
    background-color: #D2DFFF;
    color: #162F6A;
}

#accessibilityReset:hover {
    background-color: #D2DFFF;
    color: #162F6A;
}

/* Keep active buttons visibly selected */

.accessibility-options button.active {
    background-color: #D2DFFF;
    border-color: #162F6A;
}