/*
 * waa-accessibility.css
 *
 * Styles for the floating accessibility widget and popup.
 */

/* Import OpenDyslexic font faces */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic.woff2') format('woff2'),
         url('../fonts/OpenDyslexic.eot') format('eot'),
         url('../fonts/OpenDyslexic.otf') format('otf'),
         url('../fonts/OpenDyslexic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?u5p8c3');
    src: url('../fonts/icomoon.eot?u5p8c3#iefix') format('embedded-opentype'),
         url('../fonts/icomoon.ttf?u5p8c3') format('truetype'),
         url('../fonts/icomoon.woff?u5p8c3') format('woff'),
         url('../fonts/icomoon.svg?u5p8c3#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* Widget container (fixed position) */
body #waa-accessibility-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    height: max-content;
    width: max-content;
}
#waa-accessibility-widget.topleft {
    left: 30px;
    top: 30px;
}

#waa-accessibility-widget.topright {
    right: 30px;
    top: 30px;
}

#waa-accessibility-widget.bottomleft {
    left: 30px;
    bottom: 30px;
}

/* Floating toggle button */
body #waa-accessibility-widget #waa-accessibility-toggle {
    background: none !important;
    padding: 0;
    line-height: normal;
    border: none;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none !important;
}
body #waa-accessibility-widget #waa-accessibility-toggle svg path:first-child {
    fill: var(--widget-icon-bg-color);
}

body #waa-accessibility-widget #waa-accessibility-toggle svg path:last-child {
    fill: var(--widget-icon-color);
}

/* Default: show accessibility icon, hide close icon */
body #waa-accessibility-widget #waa-accessibility-toggle svg .waa-icon-close {
    display: none;
}

/* When popup is open, swap to close icon SVG */
body #waa-accessibility-widget #waa-accessibility-toggle.waa-toggle-open svg .waa-icon-open {
    display: none;
}

body #waa-accessibility-widget #waa-accessibility-toggle.waa-toggle-open svg .waa-icon-close {
    display: inline;
}

/* Popup panel */
body #waa-accessibility-widget #waa-accessibility-popup {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: var(--widget-bg-color) !important;
    border-radius: 8px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.15);
    padding: 20px;
    min-width: 400px;
    width: 100%;
    font-size: 16px;
    height: max-content;
}
#waa-accessibility-widget.topleft #waa-accessibility-popup {
    left: 30px;
    top: 70px;
}

#waa-accessibility-widget.topright #waa-accessibility-popup {
    right: 30px;
    top: 70px;
}

#waa-accessibility-widget.bottomleft #waa-accessibility-popup {
    left: 30px;
    bottom: 70px;
}
/* Popup list */
#waa-accessibility-popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#waa-accessibility-popup ul li {
    flex: 1 1 45%;
    min-width: 0;
    box-sizing: border-box;
    max-width: calc(50% - 5px);
    background: var(--widget-list-color);
    border: 2px solid var(--widget-list-color);
    margin: 4px;
    border-radius: 5px;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    font-family: var(--widget-font-family) !important;
    font-size: var(--widget-font-size);
    cursor: pointer;
    transition: background 0.2s;
    color: var(--widget-font-color);
    font-weight: 500;
    line-height: 27px;
    letter-spacing: normal;
    word-spacing: normal;
    font-family: inherit;
}

/* Clear All button – distinct from feature tiles */
#waa-accessibility-popup .waa-reset {
    border: none;
    text-align: right;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--widget-font-active-color);
    margin: 0 4px 0 0;
    padding: 0;
    background: none;
    max-width: 100%;
    flex: 1 1 100%;
    line-height: normal;
}

#waa-accessibility-popup .waa-reset::before {
    content: none;
}

#waa-accessibility-popup .waa-reset:hover,
#waa-accessibility-popup .waa-reset:focus,
#waa-accessibility-popup .waa-reset.selected {
    border: none;
    box-shadow: none;
    text-decoration: underline;
}
#waa-accessibility-popup ul li::before {
    display: block;
    font-size: 24px;
    margin: 0 auto 4px auto;
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    opacity: 0.9;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Contrast*/
#waa-accessibility-popup ul li.waa-contrast::before {
    content: "\e92b";
}
#waa-accessibility-popup ul li.waa-invert-contrast::before {
    content: "\e902";
}
#waa-accessibility-popup ul li.waa-dark-contrast::before {
    content: "\e908";
}
#waa-accessibility-popup ul li.waa-light-contrast::before {
    content: "\e900";
}

/* Link Highlight*/
#waa-accessibility-popup ul li.waa-highlight-links::before {
    content: "\e926";
}

/* Hide Images*/
#waa-accessibility-popup ul li.waa-hide-images::before {
    content: "\e92e";
}

/* Text Bigger*/
#waa-accessibility-popup ul li.waa-text-bigger::before ,
#waa-accessibility-popup ul li.waa-text-bigger-3px::before ,
#waa-accessibility-popup ul li.waa-text-bigger-6px::before, 
#waa-accessibility-popup ul li.waa-text-bigger-9px::before {
    content: "\e92a";
}

/* Text Spacing*/
#waa-accessibility-popup ul li.waa-text-spacing::before, 
#waa-accessibility-popup ul li.waa-text-light-spacing::before, 
#waa-accessibility-popup ul li.waa-text-medium-spacing::before ,
#waa-accessibility-popup ul li.waa-text-heavy-spacing::before {
    content: "\e927";
}

/* Line Height*/
#waa-accessibility-popup ul li.waa-line-height::before, 
#waa-accessibility-popup ul li.waa-line-height-15x::before,
#waa-accessibility-popup ul li.waa-line-height-175x::before,
#waa-accessibility-popup ul li.waa-line-height-2x::before {
    content: "\e929";
}
/* Text Align*/
#waa-accessibility-popup ul li.waa-text-align::before {
    content: "\e903";
}
#waa-accessibility-popup ul li.waa-text-left::before {
    content: "\e905";
}
#waa-accessibility-popup ul li.waa-text-right::before {
    content: "\e906";
}
#waa-accessibility-popup ul li.waa-text-center::before {
    content: "\e903";
}
#waa-accessibility-popup ul li.waa-text-justify::before {
    content: "\e904";
}
#waa-accessibility-popup ul li.waa-cognitive-friendly::before,
#waa-accessibility-popup ul li.waa-dyslexic-friendly::before,
#waa-accessibility-popup ul li.waa-lexend-friendly::before {
    content: "\e92c";
}
#waa-accessibility-popup ul li.waa-contrast.selected::before,
#waa-accessibility-popup ul li.waa-highlight-links.selected::before,
#waa-accessibility-popup ul li.waa-hide-images.selected::before {
    color: var(--widget-font-active-color);
}

#waa-accessibility-popup ul li:hover, #waa-accessibility-popup ul li:focus, #waa-accessibility-popup ul li.selected {
    border: 2px solid var(--widget-list-color);
    color: var(--widget-font-active-color);
}
#waa-accessibility-popup ul li.selected {
    box-shadow: 0 0 0 5px rgba(127, 88, 175, 0.1);
    color: var(--widget-font-active-color);
}
/** Contrast Mode Styles **/
body.waa-invert-contrast-on:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    background: #000 !important;
    color: #ffb700 !important;
}
body.waa-invert-contrast-on a:not(#waa-accessibility-popup ul li),
body.waa-invert-contrast-on p:not(#waa-accessibility-popup p) {
    color: #ffb700 !important;
}
body.waa-invert-contrast-on h1:not(#waa-accessibility-popup h1),
body.waa-invert-contrast-on h2:not(#waa-accessibility-popup h2),
body.waa-invert-contrast-on h3:not(#waa-accessibility-popup h3),
body.waa-invert-contrast-on h4:not(#waa-accessibility-popup h4),
body.waa-invert-contrast-on h5:not(#waa-accessibility-popup h5),
body.waa-invert-contrast-on h6:not(#waa-accessibility-popup h6) {
    color: #ffb700 !important;
}
body.waa-invert-contrast-on img {
    filter: invert(1) grayscale(1) brightness(1.1);
}
/* Invert background images in invert contrast mode */
body.waa-invert-contrast-on *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *):not(img):not(svg) {
    /* Only target elements with a background-image set */
    background-blend-mode: difference;
}
body.waa-invert-contrast-on *[style*="background-image"]:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    filter: invert(1) grayscale(1) brightness(1.1);
}
body.waa-invert-contrast-on [class*="bg-"]:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    filter: invert(1) grayscale(1) brightness(1.1);
}

/** Dark Contrast Mode Styles **/

body.waa-dark-contrast-on:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    background: #181818 !important;
    color: #f5f5f5 !important;
}
body.waa-dark-contrast-on a:not(#waa-accessibility-popup ul li),
body.waa-dark-contrast-on p:not(#waa-accessibility-popup p) {
    color: #ffd700 !important;
}
body.waa-dark-contrast-on h1:not(#waa-accessibility-popup h1),
body.waa-dark-contrast-on h2:not(#waa-accessibility-popup h2),
body.waa-dark-contrast-on h3:not(#waa-accessibility-popup h3),
body.waa-dark-contrast-on h4:not(#waa-accessibility-popup h4),
body.waa-dark-contrast-on h5:not(#waa-accessibility-popup h5),
body.waa-dark-contrast-on h6:not(#waa-accessibility-popup h6) {
    color: #ffd700 !important;
}
body.waa-dark-contrast-on img {
    filter: brightness(0.8) contrast(1.2) grayscale(0.2);
}
body.waa-dark-contrast-on input,
body.waa-dark-contrast-on textarea,
body.waa-dark-contrast-on select,
body.waa-dark-contrast-on button {
    background: #222 !important;
    color: #fff !important;
    border-color: #444 !important;
}
body.waa-dark-contrast-on table,
body.waa-dark-contrast-on th,
body.waa-dark-contrast-on td {
    background: #222 !important;
    color: #fff !important;
    border-color: #444 !important;
}
body.waa-dark-contrast-on hr {
    border-color: #444 !important;
}
body.waa-dark-contrast-on blockquote {
    background: #222 !important;
    color: #fff !important;
    border-left: 4px solid #ffd700 !important;
}
body.waa-dark-contrast-on pre,
body.waa-dark-contrast-on code {
    background: #222 !important;
    color: #ffd700 !important;
}
/** Light Contrast Mode */
body.waa-light-contrast-on,
body.waa-light-contrast-on *:not(#waa-accessibility-widget):not(#waa-accessibility-widget *) {
    background: #fff !important;
    color: #222 !important;
    border-color: #bbb !important;
}
body.waa-light-contrast-on a:not(#waa-accessibility-popup ul li),
body.waa-light-contrast-on p:not(#waa-accessibility-popup p) {
    color: #0057b8 !important;
}
body.waa-light-contrast-on h1:not(#waa-accessibility-popup h1),
body.waa-light-contrast-on h2:not(#waa-accessibility-popup h2),
body.waa-light-contrast-on h3:not(#waa-accessibility-popup h3),
body.waa-light-contrast-on h4:not(#waa-accessibility-popup h4),
body.waa-light-contrast-on h5:not(#waa-accessibility-popup h5),
body.waa-light-contrast-on h6:not(#waa-accessibility-popup h6) {
    color: #0057b8 !important;
}
body.waa-light-contrast-on img {
    filter: brightness(1.1) contrast(1.1) grayscale(0);
}
body.waa-light-contrast-on input,
body.waa-light-contrast-on textarea,
body.waa-light-contrast-on select,
body.waa-light-contrast-on button {
    background: #f5f5f5 !important;
    color: #222 !important;
    border-color: #bbb !important;
}
body.waa-light-contrast-on table,
body.waa-light-contrast-on th,
body.waa-light-contrast-on td {
    background: #fff !important;
    color: #222 !important;
    border-color: #bbb !important;
}
body.waa-light-contrast-on hr {
    border-color: #bbb !important;
}
body.waa-light-contrast-on blockquote {
    background: #f9f9f9 !important;
    color: #222 !important;
    border-left: 4px solid #0057b8 !important;
}
body.waa-light-contrast-on pre,
body.waa-light-contrast-on code {
    background: #f5f5f5 !important;
    color: #0057b8 !important;
}
body.waa-light-contrast-on .waa-accessibility-widget,
body.waa-light-contrast-on #waa-accessibility-popup {
    background: #fff !important;
    color: #0057b8 !important;
}


body.waa-highlight-links-on a:not(#waa-accessibility-popup ul li) {
    background: #000 !important;
    color: #ffb700 !important;
    padding: 3px 5px !important;
    text-decoration: underline !important;
}
body.waa-hide-images-on img:not(#waa-accessibility-popup img),
body.waa-hide-images-on picture:not(#waa-accessibility-popup picture),
body.waa-hide-images-on figure:not(#waa-accessibility-popup figure) {
    display: none !important;
}
body.waa-text-bigger-on *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    font-size: 22px !important;
}
body.waa-line-height-on *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    line-height: 2 !important;
}
body.waa-text-align-left *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    text-align: left !important;
}
body.waa-text-align-right *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    text-align: right !important;
}
body.waa-text-align-center *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    text-align: center !important;
}
body.waa-text-align-justify *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    text-align: justify !important;
}
body.waa-line-height-15x *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    line-height: 30px !important;
}
body.waa-line-height-175x *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    line-height: 40px !important;
}
body.waa-line-height-2x *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    line-height: 50px !important;
}

/* OpenDyslexic accessibility class */
body.waa-opendyslexic-on *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    font-family: 'OpenDyslexic', sans-serif !important;
} 
body.waa-lexend-on *:not(#waa-accessibility-popup):not(#waa-accessibility-popup *) {
    font-family: 'Lexend', sans-serif !important;
}