/* Avizoo accessibility widget. All widget selectors use the a11y- namespace. */
:root {
    --a11y-font-scale: 1;
    --a11y-line-height: normal;
    --a11y-letter-spacing: normal;
    --a11y-focus-color: #ffd54a;
}

/* Smooth scrolling when focusing within elements - accessibility enhancement */
html:focus-within {
    scroll-behavior: smooth;
}

html.a11y-font-100 { --a11y-font-scale: 1; }
html.a11y-font-125 { --a11y-font-scale: 1.25; }
html.a11y-font-150 { --a11y-font-scale: 1.5; }
html.a11y-font-175 { --a11y-font-scale: 1.75; }
html.a11y-font-200 { --a11y-font-scale: 2; }
html.a11y-line-normal { --a11y-line-height: normal; }
html.a11y-line-relaxed { --a11y-line-height: 1.65; }
html.a11y-line-loose { --a11y-line-height: 2; }
html.a11y-letter-normal { --a11y-letter-spacing: normal; }
html.a11y-letter-wide { --a11y-letter-spacing: 0.06em; }
html.a11y-letter-extra { --a11y-letter-spacing: 0.12em; }

/* Root scaling preserves responsive layout calculations based on rem units. */
html[class*="a11y-font-"] { font-size: calc(16px * var(--a11y-font-scale)); }
html.a11y-line-relaxed :where(p, li, blockquote, dd, dt, td, th, label, input, textarea, select, button) { line-height: var(--a11y-line-height) !important; }
html.a11y-line-loose :where(p, li, blockquote, dd, dt, td, th, label, input, textarea, select, button) { line-height: var(--a11y-line-height) !important; }
html.a11y-letter-wide :where(p, li, a, h1, h2, h3, h4, h5, h6, label, button, input, textarea, select) { letter-spacing: var(--a11y-letter-spacing) !important; }
html.a11y-letter-extra :where(p, li, a, h1, h2, h3, h4, h5, h6, label, button, input, textarea, select) { letter-spacing: var(--a11y-letter-spacing) !important; }

html.a11y-dyslexia :where(body, body button, body input, body select, body textarea) {
    font-family: Arial, Verdana, Tahoma, sans-serif !important;
    letter-spacing: 0.04em;
    word-spacing: 0.12em;
}

html.a11y-grayscale { filter: grayscale(100%); }
html.a11y-highlight-links a:not(.a11y-trigger):not(.a11y-skip-link) {
    color: #005fcc !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 0.14em !important;
    text-underline-offset: 0.18em !important;
    outline: 2px solid currentColor !important;
    outline-offset: 3px !important;
}

/* Enhanced focus for all interactive elements when accessibility widget is active */
.a11y-widget button:focus-visible,
.a11y-widget a:focus-visible,
.a11y-widget input:focus-visible,
.a11y-widget select:focus-visible {
    outline: 4px solid var(--a11y-focus-color) !important;
    outline-offset: 3px !important;
}

/* Focus enhancement for navigation menu when highlight-links is active */
html.a11y-highlight-links .mega-menu-item:focus,
html.a11y-highlight-links .nav-link:focus,
html.a11y-highlight-links button:focus,
html.a11y-highlight-links .theme-toggle:focus,
html.a11y-highlight-links .lang-toggle:focus,
html.a11y-highlight-links .nav-toggle:focus {
    outline: 3px solid var(--a11y-focus-color) !important;
    outline-offset: 2px !important;
}

/* Enhanced keyboard navigation for all interactive elements */
html[class*="a11y-"] button:focus-visible,
html[class*="a11y-"] a:focus-visible,
html[class*="a11y-"] input:focus-visible,
html[class*="a11y-"] textarea:focus-visible,
html[class*="a11y-"] select:focus-visible {
    outline: 3px solid var(--a11y-focus-color);
    outline-offset: 2px;
}

html.a11y-large-cursor, html.a11y-large-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5 3l11 30 5-12 12-5L5 3z' fill='white' stroke='black' stroke-width='3'/%3E%3C/svg%3E") 4 3, auto !important;
}
html.a11y-large-cursor .custom-cursor { display: none !important; }

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

html.a11y-high-contrast-dark { color-scheme: dark; }
html.a11y-high-contrast-dark body { background: #000 !important; color: #fff !important; }
html.a11y-high-contrast-dark :where(header, main, footer, section, article, aside, nav, div, form, table, tr, td, th, li) { background-color: #000 !important; background-image: none !important; border-color: #fff !important; }
html.a11y-high-contrast-dark :where(body *):not(.a11y-widget):not(.a11y-widget *) { color: #fff !important; text-shadow: none !important; box-shadow: none !important; }
html.a11y-high-contrast-dark :where(a, a *) { color: #ffff00 !important; }
html.a11y-high-contrast-dark :where(input, textarea, select, button) { background: #000 !important; color: #fff !important; border-color: #fff !important; }

html.a11y-high-contrast-light { color-scheme: light; }
html.a11y-high-contrast-light body { background: #fff !important; color: #000 !important; }
html.a11y-high-contrast-light :where(header, main, footer, section, article, aside, nav, div, form, table, tr, td, th, li) { background-color: #fff !important; background-image: none !important; border-color: #000 !important; }
html.a11y-high-contrast-light :where(body *):not(.a11y-widget):not(.a11y-widget *) { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
html.a11y-high-contrast-light :where(a, a *) { color: #003dcc !important; }
html.a11y-high-contrast-light :where(input, textarea, select, button) { background: #fff !important; color: #000 !important; border-color: #000 !important; }

.a11y-widget { position: relative; z-index: 2147483000; font: 16px/1.45 Arial, Verdana, sans-serif; color: #14213d; }
.a11y-trigger {
    position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 2147483001;
    width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%;
    background: #0756a4; color: #fff; box-shadow: 0 4px 16px rgb(0 0 0 / 35%); cursor: pointer;
}
.a11y-trigger svg { width: 2rem; height: 2rem; fill: currentColor; }
.a11y-trigger:hover { background: #063f78; transform: scale(1.06); }
.a11y-trigger:focus-visible, .a11y-widget :focus-visible { outline: 4px solid var(--a11y-focus-color) !important; outline-offset: 3px !important; }
.a11y-backdrop { position: fixed; inset: 0; z-index: 2147483002; background: rgb(0 0 0 / 50%); }
.a11y-panel {
    position: fixed; top: 1rem; right: max(1rem, env(safe-area-inset-right)); bottom: 1rem; z-index: 2147483003;
    width: min(25rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; box-sizing: border-box;
    background: #fff; color: #14213d; border: 3px solid #0756a4; border-radius: 1rem; box-shadow: 0 12px 36px rgb(0 0 0 / 35%); padding: 1rem;
}
.a11y-panel[hidden], .a11y-backdrop[hidden] { display: none; }
.a11y-panel-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 2px solid #d4e7fa; }
.a11y-panel-title { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.a11y-close { margin-left: auto; min-width: 2.5rem; min-height: 2.5rem; border: 2px solid #0756a4; border-radius: .5rem; background: #fff; color: #0756a4; font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.a11y-section { margin: 0; padding: .85rem 0; border: 0; border-bottom: 1px solid #d4e7fa; }
.a11y-section:last-of-type { border-bottom: 0; }
.a11y-legend { padding: 0; color: #14213d; font-size: 1rem; font-weight: 700; }
.a11y-option-list { display: grid; gap: .5rem; margin-top: .55rem; }
.a11y-option, .a11y-toggle { display: flex; align-items: center; gap: .65rem; min-height: 2.65rem; box-sizing: border-box; padding: .45rem .6rem; border: 2px solid #b8cce0; border-radius: .5rem; background: #fff; color: #14213d; cursor: pointer; }
.a11y-option:hover, .a11y-toggle:hover { border-color: #0756a4; background: #edf7ff; }
.a11y-option input, .a11y-toggle input { width: 1.2rem; height: 1.2rem; accent-color: #0756a4; flex: 0 0 auto; }
.a11y-select { display: block; width: 100%; min-height: 2.65rem; margin-top: .55rem; padding: .4rem .55rem; border: 2px solid #b8cce0; border-radius: .5rem; background: #fff; color: #14213d; font: inherit; }
.a11y-reset { width: 100%; min-height: 2.8rem; margin-top: 1rem; border: 2px solid #9d1c1c; border-radius: .5rem; background: #fff; color: #9d1c1c; font: inherit; font-weight: 700; cursor: pointer; }
.a11y-reset:hover { background: #fff0f0; }
.a11y-status { min-height: 1.2em; margin: .85rem 0 0; color: #245a2b; font-size: .9rem; font-weight: 700; }
.a11y-skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 2147483004; padding: .75rem 1rem; background: #fff; color: #000; border: 3px solid #000; border-radius: .4rem; transform: translateY(-150%); }
.a11y-skip-link:focus { transform: translateY(0); }
.a11y-reading-guide { 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: 2147482999; 
    height: 4px; 
    background: linear-gradient(180deg, rgba(228,0,124,0.3) 0%, #e4007c 50%, rgba(228,0,124,0.3) 100%); 
    box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(228,0,124,0.5); 
    pointer-events: none; 
    transition: top 0.05s ease-out;
}

/* Keep the control panel itself readable when a site-wide contrast mode is active. */
html.a11y-high-contrast-dark .a11y-panel,
html.a11y-high-contrast-dark .a11y-panel :where(.a11y-panel-header, .a11y-section, .a11y-option, .a11y-toggle, .a11y-close, .a11y-select, .a11y-reset) { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html.a11y-high-contrast-dark .a11y-panel :where(.a11y-status) { color: #7dff7d !important; }
html.a11y-high-contrast-light .a11y-panel,
html.a11y-high-contrast-light .a11y-panel :where(.a11y-panel-header, .a11y-section, .a11y-option, .a11y-toggle, .a11y-close, .a11y-select, .a11y-reset) { background: #fff !important; color: #000 !important; border-color: #000 !important; }
html.a11y-high-contrast-light .a11y-panel :where(.a11y-status) { color: #075c12 !important; }

/* WCAG 2.1 AAA Compliance: Minimum target size 44x44px for touch targets */
html[class*="a11y-"] button:not(.a11y-close),
html[class*="a11y-"] a,
html[class*="a11y-"] input[type="button"],
html[class*="a11y-"] input[type="submit"],
html[class*="a11y-"] .nav-link,
html[class*="a11y-"] .mega-menu-item {
    min-height: 44px;
    padding-top: max(0.45rem, calc((44px - 1.5em) / 2));
    padding-bottom: max(0.45rem, calc((44px - 1.5em) / 2));
}

/* Visual indicator for checked options in accessibility panel */
.a11y-option input:checked + span::before {
    content: '✓ ';
    color: #0756a4;
    font-weight: bold;
    margin-right: 0.25em;
}

/* Support for prefers-reduced-motion at system level */
@media (prefers-reduced-motion: reduce) {
    html:not(.a11y-reduce-motion) *, 
    html:not(.a11y-reduce-motion) *::before, 
    html:not(.a11y-reduce-motion) *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Support for prefers-color-scheme: dark at system level */
@media (prefers-color-scheme: dark) {
    html:not([class*="a11y-high-contrast-"]) .a11y-trigger {
        background: #0756a4;
        border-color: #fff;
    }
}

@media (max-width: 480px) {
    .a11y-panel { top: 8px; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: calc(100dvh - 16px); border-radius: .75rem; }
    .a11y-trigger { width: 3.25rem; height: 3.25rem; right: .75rem; bottom: .75rem; }
}
