/*
 * Accessibility panel.
 *
 * Kept out of home.css because that file is a frozen Tailwind build that is
 * never re-processed. Everything here is plain CSS, scoped under .a11y-* so it
 * cannot collide with the generated utility classes.
 *
 * The user's chosen settings are applied as data attributes on <html>, so the
 * rules below are the entire rendering side of the feature.
 */

/* ---------------------------------------------------------------- trigger */

/* The trigger is now a <button> rather than the original dead <a>, so it no
   longer picks up `.header-top-right .items a { ... }` from home.css. These
   rules restore exactly that sizing/colour so it matches the globe and menu
   icons sitting next to it. */
.header-sec .header-top-right .items .accessibilityWidget {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.75rem;
    cursor: pointer;
}

@media (min-width: 640px) {
    .header-sec .header-top-right .items .accessibilityWidget {
        height: 2rem;
        width: 2rem;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

/* ------------------------------------------------------------------ panel */

.a11y-panel {
    position: fixed;
    top: 0;
    inset-inline-end: -400px;
    z-index: 10000;
    display: flex;
    height: 100vh;
    width: 100%;
    max-width: 400px;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    transition: inset-inline-end 0.5s ease;
    overflow-y: auto;
}

.a11y-panel.active {
    inset-inline-end: 0;
    transition-duration: 0.7s;
}

.a11y-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid #d1d1d1;
    padding: 0.75rem 1.5rem;
}

.a11y-panel__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0d2c54;
}

.a11y-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: transparent;
    color: #0d2c54;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 9999px;
}

.a11y-panel__close:hover {
    background-color: #f1f1f1;
}

.a11y-panel__body {
    padding: 1.25rem 1.5rem 2rem;
}

.a11y-group + .a11y-group {
    margin-top: 1.75rem;
}

.a11y-group__title {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6b80;
}

.a11y-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Buttons carry aria-pressed; the checked style keys off it so the visual
   state and the announced state can never drift apart. */
.a11y-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d1d1;
    border-radius: 0.5rem;
    background-color: #fff;
    color: #0d2c54;
    font-size: 0.9375rem;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.a11y-btn:hover {
    background-color: #f1f5fa;
    border-color: #0d2c54;
}

.a11y-btn[aria-pressed="true"] {
    background-color: #0d2c54;
    border-color: #0d2c54;
    color: #fff;
}

.a11y-btn--block {
    width: 100%;
    justify-content: center;
}

.a11y-btn__value {
    min-width: 3.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.a11y-stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.a11y-panel__overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgb(0 0 0 / 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.a11y-panel__overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Visible focus ring — the theme suppresses outlines in places, so restore a
   strong one for every control in the panel plus the trigger itself. */
.a11y-panel :is(button, a, input):focus-visible,
.accessibilityWidget:focus-visible {
    outline: 3px solid #ffb300;
    outline-offset: 2px;
}

/* ------------------------------------------------------- applied settings */

/* Font scaling. Rem-based type in the theme follows the root size; the few
   px-based rules are handled by the zoom step below. */
html[data-a11y-font="1"]  { font-size: 112.5%; }
html[data-a11y-font="2"]  { font-size: 125%; }
html[data-a11y-font="3"]  { font-size: 137.5%; }
html[data-a11y-font="-1"] { font-size: 93.75%; }
html[data-a11y-font="-2"] { font-size: 87.5%; }

/* Greyscale. */
html[data-a11y-theme="grayscale"] {
    filter: grayscale(100%);
}

/* High contrast: a hard black/yellow scheme, the pairing the original CMS
   shipped as "blind" mode. !important is required to beat the theme's own
   utility classes, which are themselves highly specific. */
html[data-a11y-theme="contrast"] body,
html[data-a11y-theme="contrast"] body :not(svg):not(path) {
    background-color: #000 !important;
    background-image: none !important;
    color: #ffe600 !important;
    border-color: #ffe600 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html[data-a11y-theme="contrast"] a,
html[data-a11y-theme="contrast"] a * {
    color: #4fc3f7 !important;
    text-decoration: underline !important;
}

html[data-a11y-theme="contrast"] img,
html[data-a11y-theme="contrast"] video {
    filter: grayscale(100%) contrast(120%);
}

/* The panel must stay legible while contrast mode is on. */
html[data-a11y-theme="contrast"] .a11y-btn[aria-pressed="true"] {
    background-color: #ffe600 !important;
    color: #000 !important;
}

/* Readable font — override the theme's display faces site-wide. */
html[data-a11y-readable="on"] body,
html[data-a11y-readable="on"] body :not(i):not([class*="fi-"]) {
    font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif !important;
    letter-spacing: 0.02em !important;
    word-spacing: 0.08em !important;
    line-height: 1.7 !important;
}

/* Link highlighting. */
html[data-a11y-links="on"] a {
    outline: 2px solid #ffb300 !important;
    outline-offset: 1px;
    text-decoration: underline !important;
}

/* Big cursor. */
html[data-a11y-cursor="on"],
html[data-a11y-cursor="on"] * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M6 2 L6 38 L15 30 L21 44 L28 41 L22 27 L34 27 Z' fill='%23000' stroke='%23fff' stroke-width='2'/></svg>") 6 2, auto !important;
}

/* Stop animation: kills CSS animation, transitions and smooth scrolling for
   users with vestibular sensitivity. */
html[data-a11y-motion="off"] * {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
}

/* The theme's WOW.js reveals start at opacity 0 and are animated in; with
   animation disabled they would never appear, so force them visible. */
html[data-a11y-motion="off"] .wow,
html[data-a11y-motion="off"] [class*="animate__"] {
    opacity: 1 !important;
    visibility: visible !important;
    animation-name: none !important;
    transform: none !important;
}

/* Print: the panel is chrome, never content. */
@media print {
    .a11y-panel,
    .a11y-panel__overlay {
        display: none !important;
    }
}
