/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 @font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* .ew-a11y-toolbar, .ew-a11y-toolbar *, .ew-a11y-toolbar-trigger, .ew-a11y-toolbar-trigger * {
    all: unset;
    box-sizing: border-box;
} */

/* Colors */
:root{
    --ew-a11y-font-family: 'Ubuntu', sans-serif;
    --ew-a11y-font-weight-regular: 400;
    --ew-a11y-font-weight-medium: 500;

    --ew-a11y-font-size-small: 0.75rem;
    --ew-a11y-font-size-medium: 0.875rem;
    --ew-a11y-font-size-large: 1.125rem;

    --ew-a11y-font-size-heading-01: 1.5rem;
    --ew-a11y-font-size-heading-02: 1.25rem;
    --ew-a11y-font-size-heading-03: 1rem;
    --ew-a11y-font-size-heading-04: 0.875rem;
    --ew-a11y-font-size-heading-05: 0.75rem;
    --ew-a11y-font-size-heading-06: 0.625rem;

    --ew-a11y-primary-color: #0065B7;
    --ew-a11y-secondary-color: #55C1FF;
    --ew-a11y-tertiary-color: #CBA328;
    --ew-a11y-black-color: #000000;
    --ew-a11y-white-color: #FFFFFF;

    --ew-a11y-gray-50: #E2E2E5;
    --ew-a11y-gray-100: #CCCCCF;
    --ew-a11y-gray-200: #B5B5BA;
    --ew-a11y-gray-300: #9E9EA5;
    --ew-a11y-gray-400: #88888F;
    --ew-a11y-gray-500: #71717A;
    --ew-a11y-gray-600: #63636B;
    --ew-a11y-gray-700: #55555C;
    --ew-a11y-gray-800: #46464D;
    --ew-a11y-gray-900: #38383D;

    --ew-a11y-drop-shadow-button-blue: drop-shadow(0 0 2px var(--ew-a11y-secondary-color));
    --ew-a11y-drop-shadow-button-gray: drop-shadow(0 0 10px var(--ew-a11y-gray-50));

    --ew-a11y-border-radius-primary: 16px;
    --ew-a11y-border-radius-secondary: 6px;
}

/* headings */
h1{
    font-size: var(--ew-a11y-font-size-heading-01);
    margin: 0;
    margin-bottom: 12px;
}
h2{
    font-size: var(--ew-a11y-font-size-heading-02);
    margin: 0;
    margin-bottom: 12px;
}
h3{
    font-size: var(--ew-a11y-font-size-heading-03);
    margin: 0;
    margin-bottom: 12px;
}
h4{
    font-size: var(--ew-a11y-font-size-heading-04);
    margin: 0;
    margin-bottom: 12px;
}
h5{
    font-size: var(--ew-a11y-font-size-heading-05);
    margin: 0;
    margin-bottom: 12px;
}
h6{
    font-size: var(--ew-a11y-font-size-heading-06);
    margin: 0;
    margin-bottom: 12px;
}

/* Helpers */
.ew-a11y-hidden{
    display: none;
}

.ew-a11y-visible{
    display: block;
}

.ew-a11y-visible-grid{
    display: grid;
}

.--hidden{
    display: none!important;
}

@media screen and (min-width: 768px){
    .--hidden-desktop{
        display: none;
    }
}

.--hidden-mobile{
    display: none!important;
}

@media screen and (min-width: 767px){
    .--hidden-mobile{
        display: block!important;
    }
}

/* Buttons */
.ew-a11y-button{
    font-family: var(--ew-a11y-font-family)!important;
    font-weight: var(--ew-a11y-font-weight-medium)!important;
    font-size: var(--ew-a11y-font-size-medium)!important;
    color: var(--ew-a11y-black-color)!important;
    padding: 6px 12px!important;
    border-radius: var(--ew-a11y-border-radius-secondary)!important;
    cursor: pointer!important;
}

.ew-a11y-button-primary{
    background-color: var(--ew-a11y-white-color)!important;
    border: 1px solid var(--ew-a11y-white-color)!important;
    box-shadow: var(--ew-a11y-drop-shadow-button-blue)!important;
}

.ew-a11y-button-primary:hover{
    border: 1px solid var(--ew-a11y-primary-color)!important;
}

.ew-a11y-button-secondary{
    background-color: var(--ew-a11y-primary-color)!important;
    border: 1px solid var(--ew-a11y-white-color)!important;
    box-shadow: var(--ew-a11y-drop-shadow-button-blue)!important;
    color: var(--ew-a11y-white-color)!important;
}

.ew-a11y-button-secondary:hover{
    border: 1px solid var(--ew-a11y-secondary-color)!important;
}

.ew-a11y-button-settings{
    border: 0!important;
    border-radius: 0!important;
    padding: 12px 12px!important;
    width: 100%;
    cursor: pointer!important;
    background-color: transparent!important;
}

.ew-a11y-button-settings.--active{
   border-bottom: 2px solid var(--ew-a11y-primary-color)!important;
}

/* Trigger Button */
.ew-a11y-toolbar-trigger{
    z-index: 9999;
    cursor: pointer;
    background-color: transparent!important;
    border: 0!important;
}

.ew-a11y-toolbar-trigger:hover{
    background-color: transparent!important;
    border: 0!important;
}

.ew-a11y-toolbar-trigger:focus{
    outline-color: transparent!important;
}

.ew-a11y-position-bottom-left{
    position: fixed;
    bottom: 12px;
    left: 12px;
}

.ew-a11y-position-bottom-right{
    position: fixed;
    left: initial;
    right: 12px;
    bottom: 12px;
}

.ew-a11y-toolbar-trigger-icon{
    filter: var(--ew-a11y-drop-shadow-button-gray);
    width: 48px;
    height: 48px; 
}

.ew-a11y-toolbar-header-reset{
    display: none;
}

.ew-a11y-toolbar-header-close, .ew-a11y-toolbar-footer-reset{
    display: flex;
    align-items: center;
    gap: 4px;
}

.ew-a11y-toolbar-header-close-icon, .ew-a11y-toolbar-header-reset-icon, .ew-a11y-toolbar-footer-reset-icon{
    width: 20px;
    height: 20px;
}

@media screen and (min-width: 768px){
    .ew-a11y-toolbar-header-reset{
        display: flex;
        align-items: center;
        gap: 4px;
    }
}

/* Accessibility Toolbar */
.ew-a11y-toolbar{
    position: fixed;
    bottom: 14px;
    left: 14px;
    z-index: 9999;
    background-color: var(--ew-a11y-white-color);
    border-radius: var(--ew-a11y-border-radius-primary);
    filter: var(--ew-a11y-drop-shadow-button-gray);
    max-width: calc(100svw - 28px);
    width: 100%;
    height: 100svh;
    max-height: 60svh;
    overflow: hidden;
    grid-template-rows: auto 1fr auto;
    z-index: 99999;
}

.ew-a11y-toolbar-header{
    background: linear-gradient(336deg, var(--ew-a11y-primary-color), var(--ew-a11y-secondary-color));
}

.ew-a11y-toolbar-header-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
}

.ew-a11y-toolbar-header-icon{
    width: 32px;
    height: 32px; 
}

.ew-a11y-toolbar-header-buttons{
    display: flex;
    align-items: center;
    gap: 12px;
}

.ew-a11y-toolbar-content-language-settings{
    display: none;
}

/* Content */
.ew-a11y-toolbar-content{
    overflow-y: auto;
    min-height: 246px;
}

.ew-a11y-toolbar-content-wrapper{
    display: block;
    padding: 12px!important;
}

.ew-a11y-toolbar-content-display-settings{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 48%));
    gap: 12px;
}

.ew-a11y-display-settings-button{
    display: grid;
    align-items: flex-start;
    position: relative;
    padding: 12px 4px 8px;
    height: 104px;
    color: var(--ew-a11y-black-color)!important;
    background-color: var(--ew-a11y-white-color)!important;
    border-radius: var(--ew-a11y-border-radius-secondary)!important;
    box-shadow: var(--ew-a11y-drop-shadow-button-gray)!important;
    cursor: pointer;
    border: 2px solid var(--ew-a11y-white-color)!important;
    filter: drop-shadow(0 0 8px var(--ew-a11y-gray-50))!important;
    font-family: var(--ew-a11y-font-family)!important;
    font-weight: var(--ew-a11y-font-weight-regular)!important;
}

.ew-a11y-display-settings-button:hover{
    border: 2px solid var(--ew-a11y-gray-100)!important;
}

.ew-a11y-display-settings-button:focus{
    outline-color: transparent!important;
    border: 2px solid var(--ew-a11y-gray-100)!important;
}

.ew-a11y-display-settings-button.--active{
    border: 2px solid var(--ew-a11y-primary-color)!important;
    filter: drop-shadow(0 0 2px var(--ew-a11y-secondary-color))!important;
}


.ew-a11y-setting-item-levels{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding-bottom: 4px;
}

.ew-a11y-setting-item-level-icon{
    display: block;
    width: 14px;
    height: 14px;
    background-color: var(--ew-a11y-gray-50);
    border-radius: 50%;
}
.ew-a11y-setting-item-level-icon.--active{
    background-color: var(--ew-a11y-primary-color);
}

.ew-a11y-setting-item{
    display: grid;
    grid-template-rows: 30px auto;
    justify-content: center;
    justify-items: center;
}

.ew-a11y-setting-item-icon{
    margin-bottom: 2px;
}

.ew-a11y-setting-item-icon-img{
    border-radius: 0!important;
    max-width: 22px;
    max-height: 22px;
}

.ew-a11y-setting-item-name{
    font-family: var(--ew-a11y-font-family)!important;
    font-size: var(--ew-a11y-font-size-medium)!important;
    font-weight: var(--ew-a11y-font-weight-regular)!important;
    line-height: 1.1;
    text-align: center;
}

@media screen and (min-width: 768px){
    .ew-a11y-toolbar-content-wrapper{
        height: 220px;
        max-height: 220px;
    }

    .ew-a11y-toolbar-content-display-settings{
        grid-template-columns: repeat(auto-fit, minmax(104px, 15%));
    }
}


/* Footer */
.ew-a11y-toolbar-footer{
    border-top: 1px solid var(--ew-a11y-gray-50);
}

.ew-a11y-toolbar-footer-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
}

@media screen and (min-width: 768px){
    .ew-a11y-toolbar{
        max-width: 740px;
        right: 20px;
        bottom: 20px;
        left: inherit;
        grid-template-rows: auto auto auto;
        height: auto;
    }
}

/* STYLES FOR EACH SETTING */
/* CONTRST */
/* Invert colors */
html.ew-a11y-invert {
    filter: invert(100%);
}
html.ew-a11y-invert #ewA11yToolbar {
    filter: invert(100%);
}

/* Dark contrast */
html.ew-a11y-dark-contrast *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    background-color: #000 !important; /* Force dark background */
    color: #FFD700 !important; /* Yellow text */
    filter: none; /* Remove other filters */
}

/* Light contrast */
html.ew-a11y-light-contrast *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    background-color: #dddddd !important; /* Force light background */
    color: #303030 !important; /* Black text */
    filter: none; /* Remove other filters */
}

/* HIGHLIGHT LINKS */
html.ew-a11y-highlight-links a,
html.ew-a11y-highlight-links a:visited {
    outline: 3px solid #FFD700 !important;
    outline-offset: 2px !important;
}

/* Specific styles for highlighted links in different contrast modes */
html.ew-a11y-dark-contrast.ew-a11y-highlight-links a,
html.ew-a11y-dark-contrast.ew-a11y-highlight-links a:visited {
    background-color: #FFD700 !important;
    color: #000 !important;
    outline: 3px solid #FFD700 !important;
    outline-offset: 2px !important;
}

html.ew-a11y-light-contrast.ew-a11y-highlight-links a,
html.ew-a11y-light-contrast.ew-a11y-highlight-links a:visited {
    background-color: #303030 !important;
    color: #dddddd !important;
    outline: 3px solid #303030 !important;
    outline-offset: 2px !important;
}

/* INCREASE TEXT */
/* Default font size (1em = 16px in most browsers) */
:root {
    font-size: 1em;
}

/* Medium text size (applied when <html> has .ew-a11y-text-medium) */
:root.ew-a11y-text-medium {
    font-size: 1.1em !important; /* +20% */
}

/* Large text size (applied when <html> has .ew-a11y-text-large) */
:root.ew-a11y-text-large {
    font-size: 1.4em !important; /* +70% */
}

/* Larger text size (applied when <html> has .ew-a11y-text-larger) */
:root.ew-a11y-text-larger {
    font-size: 1.7em !important; /* +100% */
}

/* Reset #ewA11yToolbar and its children to default font size */
#ewA11yToolbar,
#ewA11yToolbar * {
    font-size: initial !important;
}

/* INCREASE TEXT SPACING */
html.ew-a11y-text-spacing-medium *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    letter-spacing: 0.05em !important; /* +5% */
    word-spacing: 110% !important; /* +10% */
}
html.ew-a11y-text-spacing-large *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    letter-spacing: 0.1em !important; /* +10% */
    word-spacing: 120% !important; /* +20% */
}
html.ew-a11y-text-spacing-larger *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    letter-spacing: 0.2em !important; /* +20% */
    word-spacing: 130% !important; /* +30% */
}

/* HIDE IMAGES */
html.ew-a11y-hide-images body img:not(#ewA11yToolbar *, #ewA11yToolbarTrigger *){
    visibility: hidden!important;
}
html.ew-a11y-hide-images body picture:not(#ewA11yToolbar *, #ewA11yToolbarTrigger *){
    visibility: hidden!important;
}
html.ew-a11y-hide-images body *:not(#ewA11yToolbar *, #ewA11yToolbarTrigger *) {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
html.ew-a11y-hide-images body *:not(#ewA11yToolbar *, #ewA11yToolbarTrigger *)::before,
html.ew-a11y-hide-images body *:not(#ewA11yToolbar *, #ewA11yToolbarTrigger *)::after {
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* STOP ANIMATIONS */
html.ew-a11y-stop-animations *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    animation: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
}

/* Dyslexia font */
html.ew-a11y-dyslexia-font body *:not(#ewA11yToolbar):not(#ewA11yToolbar *):not(#wpadminbar):not(#wpadminbar *) {
    font-family: 'OpenDyslexic', Arial, sans-serif !important;
}

/* Big cursor */
html.ew-a11y-big-cursor, html.ew-a11y-big-cursor * {
    cursor: url('../images/ew-a11y-big-cursor-white.png'), auto !important;
}

/* Line height */
html.ew-a11y-line-height-medium *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    line-height: 1.5 !important;
}
html.ew-a11y-line-height-large *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    line-height: 2 !important;
}
html.ew-a11y-line-height-larger *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    line-height: 2.5 !important;
}

/* Text align */
html.ew-a11y-text-align-left *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    text-align: left !important;
}
html.ew-a11y-text-align-center *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    text-align: center !important;
}
html.ew-a11y-text-align-right *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    text-align: right !important;
}
html.ew-a11y-text-align-justify *:not(#ewA11yToolbar):not(#ewA11yToolbar *) {
    text-align: justify !important;
}

/* Saturation */
html.ew-a11y-saturation-low {
    filter: saturate(.5) !important;
}
html.ew-a11y-saturation-high {
    filter: saturate(2) !important;
}
html.ew-a11y-saturation-desaturated {
    filter: saturate(0) !important;
}

/* Combined filters */
html.ew-a11y-invert.ew-a11y-saturation-low {
    filter: invert(100%) saturate(.5) !important;
}
html.ew-a11y-invert.ew-a11y-saturation-low #ewA11yToolbar {
    filter: invert(100%) !important;
}

html.ew-a11y-invert.ew-a11y-saturation-high {
    filter: invert(100%) saturate(2) !important;
}
html.ew-a11y-invert.ew-a11y-saturation-high #ewA11yToolbar {
    filter: invert(100%) !important;
}

html.ew-a11y-invert.ew-a11y-saturation-desaturated {
    filter: invert(100%) saturate(0) !important;
}
html.ew-a11y-invert.ew-a11y-saturation-desaturated #ewA11yToolbar {
    filter: invert(100%) !important;
}