/* ==========================================================================
   Accessibility toolbar — global overrides
   Scoped under html[data-a11y-*] / .a11y-* so it never touches default
   site styling unless a visitor actively enables a setting.
   ========================================================================== */

:root {
    --a11y-font-scale: 1;
    --a11y-line-height: normal;
    --a11y-word-spacing: normal;
    --a11y-letter-spacing: normal;
    --a11y-content-scale: 1;
}

/* --------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------- */
.a11y-skip-link {
    position: absolute;
    top: -60px;
    left: 8px;
    z-index: 999999;
    background: #000;
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 6px 6px;
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease-in-out;
}
.a11y-skip-link:focus {
    top: 0;
    color: #fff;
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Launcher button
   -------------------------------------------------------------------- */
.a11y-launcher {
    position: fixed;
    top: 45%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    z-index: 999997;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 8px 0 0 8px;
    background: #0a5fc4;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    font-size: 24px;
    line-height: 1;
}
[dir="rtl"] .a11y-launcher {
    border-radius: 0 8px 8px 0;
}
.a11y-launcher:hover,
.a11y-launcher:focus-visible {
    background: #084a99;
}
.a11y-launcher:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Backdrop + panel
   -------------------------------------------------------------------- */
.a11y-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 999998;
    display: none;
}
.a11y-backdrop.is-open { display: block; }

.a11y-panel {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    height: 100%;
    width: 380px;
    max-width: 92vw;
    background: #f4f6f8;
    color: #1b1b1b;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease-in-out;
    font-size: 14px;
}
[dir="rtl"] .a11y-panel { transform: translateX(-100%); }
.a11y-panel.is-open { transform: translateX(0); }
/* Shadow only while the panel is open — otherwise it bleeds onto the
   viewport edge on every page even though the panel itself is translated
   off-screen. */
.a11y-panel.is-open { box-shadow: -4px 0 20px rgba(0,0,0,.3); }

.a11y-panel * { box-sizing: border-box; }

.a11y-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #0a5fc4;
    color: #fff;
    flex: 0 0 auto;
}
.a11y-panel__header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.a11y-panel__close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.a11y-panel__close:hover,
.a11y-panel__close:focus-visible {
    background: rgba(255,255,255,.2);
}

.a11y-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px 90px;
}

.a11y-panel__footer {
    flex: 0 0 auto;
    padding: 10px 16px;
    border-top: 1px solid #dde1e5;
    background: #fff;
}

.a11y-reset-btn {
    width: 100%;
    padding: 10px 14px;
    background: #b3261e;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.a11y-reset-btn:hover,
.a11y-reset-btn:focus-visible {
    background: #8f1e18;
}

.a11y-section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: #55606b;
    margin: 18px 0 8px;
}
.a11y-section-title:first-child { margin-top: 0; }

.a11y-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.a11y-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #dde1e5;
    border-radius: 8px;
    padding: 10px 6px;
    min-height: 68px;
    cursor: pointer;
    text-align: center;
    font-size: 11.5px;
    color: #1b1b1b;
    line-height: 1.2;
}
.a11y-tile svg { width: 20px; height: 20px; flex: 0 0 auto; }
.a11y-tile:hover { border-color: #0a5fc4; }
.a11y-tile:focus-visible {
    outline: 3px solid #0a5fc4;
    outline-offset: 1px;
}
.a11y-tile[aria-pressed="true"] {
    background: #0a5fc4;
    border-color: #0a5fc4;
    color: #fff;
}

.a11y-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #dde1e5;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.a11y-stepper__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    font-size: 12px;
    gap: 2px;
}
.a11y-stepper__value { font-weight: 700; font-size: 13px; }
.a11y-stepper button {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #dde1e5;
    background: #f4f6f8;
    cursor: pointer;
    font-weight: 700;
    flex: 0 0 auto;
}
.a11y-stepper button:hover { background: #e5e9ec; }
.a11y-stepper button:focus-visible {
    outline: 3px solid #0a5fc4;
    outline-offset: 1px;
}
.a11y-stepper button:disabled { opacity: .4; cursor: not-allowed; }

.a11y-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #dde1e5;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    gap: 10px;
}
.a11y-select-row label { font-size: 12.5px; font-weight: 600; flex: 1 1 auto; }
.a11y-select-row select {
    flex: 0 0 auto;
    max-width: 55%;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #c7ccd1;
    background: #fff;
}

.a11y-swatches {
    background: #fff;
    border: 1px solid #dde1e5;
    border-radius: 8px;
    padding: 12px 10px;
    margin-bottom: 8px;
    text-align: center;
}
.a11y-swatches__title { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.a11y-swatches__row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.a11y-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}
.a11y-swatch[aria-pressed="true"] { border-color: #1b1b1b; }
.a11y-swatch:focus-visible {
    outline: 3px solid #0a5fc4;
    outline-offset: 2px;
}
.a11y-swatches__cancel {
    display: block;
    margin: 8px auto 0;
    background: transparent;
    border: none;
    color: #55606b;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
}

.a11y-status {
    /* lives inside .a11y-grid alongside the tiles — span the full row so it
       doesn't occupy a single column and push the next tiles out of
       alignment, and collapse to nothing when there's no message so it
       never shows as a blank empty box. */
    grid-column: 1 / -1;
    font-size: 12px;
    color: #55606b;
    padding: 6px 2px;
    min-height: 16px;
}
.a11y-status:empty {
    display: none;
}
.a11y-status[data-state="active"] { color: #0a5fc4; font-weight: 700; }
.a11y-status[data-state="error"] { color: #b3261e; font-weight: 700; }
.a11y-hint {
    font-size: 11px;
    color: #7a848d;
    margin: -4px 0 8px;
}
.a11y-unsupported { opacity: .55; }

@media (max-width: 420px) {
    .a11y-panel { width: 100%; max-width: 100%; }
    .a11y-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   FEATURE STATES
   ========================================================================== */

/* ---- Toolbar isolation ----
   #a11y-widget wraps the skip link, launcher, backdrop and panel as a single
   unit. Every rule below that changes page-wide styling based on a toggle
   excludes this one selector, so the toolbar can never be affected no matter
   how many features are added later. */

/* ---- Color adjustments (mutually exclusive) ----
   Every rule in this section only ever sets color/background/filter — never
   display, position, width/height, margin or pointer-events — so a color
   adjustment can't shift layout or block clicking on anything.

   Scoping: rules are scoped to :is(nav, #main-content, footer.site-footer)
   — the site's own content regions — rather than "everything in body", for
   two reasons: (1) third-party widgets (e.g. a live-chat launcher) inject
   their own DOM straight into <body>, outside these regions, and forcing
   our colors onto them previously made one disappear; (2) filter is never
   applied to <body> itself, because a non-none filter makes its element a
   containing block for fixed/absolute descendants, which would make the
   panel's `height:100%` resolve against the full page instead of the
   viewport (the toolbar would balloon to page height and lose its own
   scrollbar). Invert is the one exception: it's applied once at <html>
   (exempt from that containing-block rule as the document element) with a
   single explicit cancelling filter on the toolbar, rather than to each
   element individually — filtering every element one-by-one double-inverts
   anything nested two levels deep, which is how a chat widget's icon ended
   up silently un-inverted while its container changed. */
html[data-a11y-color="invert"] {
    filter: invert(1) hue-rotate(180deg);
}
html[data-a11y-color="invert"] .a11y-panel,
html[data-a11y-color="invert"] .a11y-backdrop,
html[data-a11y-color="invert"] .a11y-skip-link {
    /* cancels the <html>-level inversion for the modal/backdrop/skip-link
       only — .a11y-launcher (the side button) is deliberately left out so
       it visibly shows every color adjustment, same as the rest of the
       page. Safe to filter these three directly (unlike <body>) because
       none of them has its own position:fixed *children* — their content
       is normal in-flow, so there's no containing-block fallout. */
    filter: invert(1) hue-rotate(180deg) !important;
}

html[data-a11y-color="dark-contrast"] body:not(#a11y-widget) {
    background: #0d0d0d !important;
    color: #f5f5f5 !important;
}
html[data-a11y-color="dark-contrast"] :is(nav, #main-content, footer.site-footer, nav *, #main-content *, footer.site-footer *):where(section, div, header, footer, nav, article, aside, main, ul, li, table, form) {
    background-color: #0d0d0d !important;
    color: #f5f5f5 !important;
}
/* These two are targeted fixes on specific, named components — not the
   broad section/div/header/footer/nav/article/aside/main/ul/li/table/form
   selector above, which stays background/color only. box-shadow (not
   border) so neither can shift layout or size.
   1) .card-services/.nbox are the site's actual "card" components; forced
      to the same flat fill as everything around them, they were reduced to
      just floating icon+text with no visible card boundary.
   2) footer.site-footer sits directly below body content that's now the
      identical color, so there's no visible seam marking where the footer
      begins. */
html[data-a11y-color="dark-contrast"] :is(.card-services, .nbox) { box-shadow: 0 1px 6px rgba(255,255,255,.18) !important; }
/* .video-section itself has no border-radius — its rounded look comes from
   the child .about-us-new-ui-video (border-radius:24px). Putting the
   shadow on .video-section drew a sharp-cornered rectangle around a
   rounded video, leaving visible dark gaps at the corners. Shadowing
   .about-us-new-ui-video directly instead matches its own rounded shape. */
html[data-a11y-color="dark-contrast"] .about-us-new-ui-video { box-shadow: 0 1px 6px rgba(255,255,255,.18) !important; }
/* .img-caption is an absolutely-positioned overlay (inset:0, z-index:1)
   sitting directly on top of the video thumbnail image, meant to stay
   transparent so the photo shows through underneath the play button.
   Forcing a background-color on it like every other div turned it into a
   solid opaque layer that completely hid the image behind it — confirmed
   live: the image's own pixel data was always intact (verified via
   canvas), only its on-screen rendering was covered. */
/* #main-content prefix matches (and beats) the specificity the broad rule
   above gets from embedding #main-content inside its :is(...) — a bare
   `.img-caption` selector loses to that on specificity despite !important
   on both, since :is() takes its most specific argument. */
html[data-a11y-color="dark-contrast"] #main-content .img-caption { background-color: transparent !important; }
/* .img-caption-inner is a nested div inside that same overlay — same bug,
   one level deeper: it caught the broad div background rule too, painting
   an opaque dark bar across the top of the video (it's a normal-flow block
   sitting at the top of the absolutely-positioned .img-caption), even
   though its only content here is an empty "&nbsp;" heading. */
html[data-a11y-color="dark-contrast"] #main-content .img-caption-inner { background-color: transparent !important; }
/* .about-us-new-ui-video is a plain rectangle with border-radius:24px +
   overflow:hidden clipping a plain rectangular image to that rounded
   shape — the forced dark background from the broad div rule shows through
   as a mismatched dark sliver at the 4 rounded corners (anti-aliasing gap
   between the image's square edge and the container's curved clip). Since
   every ancestor up to #main-content is already this same dark shade,
   making just this div transparent removes the visible corner without
   affecting anything else. */
html[data-a11y-color="dark-contrast"] #main-content .about-us-new-ui-video { background-color: transparent !important; }
html[data-a11y-color="dark-contrast"] #main-content .video-section { background-color: transparent !important; }
html[data-a11y-color="dark-contrast"] #main-content .img-overlay { background-color: transparent !important; }
html[data-a11y-color="dark-contrast"] footer.site-footer { box-shadow: 0 -1px 0 rgba(255,255,255,.25) !important; }
/* icon1.png has no separate background/text layer to recolor —
   background-color/color can never touch its baked-in pixels. Targeted at
   this specific icon by its alt text, NOT at every <img> in scope — a
   blanket `img` selector also caught real homepage photos (the hero image,
   insurance card photos), and inverting a photograph produces a jarring
   negative-film "shiny" look. Reuses the same invert+hue-rotate formula
   already proven correct for Invert Colors. */
html[data-a11y-color="dark-contrast"] img[alt="Inquiry"] { filter: invert(1) hue-rotate(180deg); }
/* a[class*="btn"] catches site button classes that aren't literally named
   .btn (e.g. .new-btn) — without this, only the plain `a` rule below
   touched them: their own background-color stayed whatever it originally
   was while their text turned link-blue, producing near-invisible
   light-on-light text on any button whose own background wasn't already
   dark (confirmed live: .new-btn "Read More" links). */
html[data-a11y-color="dark-contrast"] :is(nav, #main-content, footer.site-footer) a[class*="btn"],
html[data-a11y-color="dark-contrast"] :is(nav, #main-content, footer.site-footer) .btn,
html[data-a11y-color="dark-contrast"] :is(nav, #main-content, footer.site-footer) button {
    background-color: #1f1f1f !important;
    color: #f5f5f5 !important;
}
html[data-a11y-color="dark-contrast"] :is(nav, #main-content, footer.site-footer) a:not([class*="btn"]) { color: #7fbfff !important; }
/* Zoho SalesIQ chat launcher — verified via live DevTools inspection
   (getComputedStyle), not guessed: #zsiq_float is the 55x55 circular button
   itself (background:#0066cc, border-radius:100%), and .siqico-chat is the
   icon glyph inside it (transparent background, color:#fff — the glyph is
   drawn via ::before using `color`). Only background-color on the circle
   and color on the glyph are touched — nothing that affects size, position,
   or border-radius, so the shape can't change. */
html[data-a11y-color="dark-contrast"] #zsiq_float { background-color: #0d0d0d !important; }
html[data-a11y-color="dark-contrast"] #zsiq_float .siqico-chat { color: #f5f5f5 !important; }
/* the cookie banner is a plain body-level sibling, outside nav/#main-content
   /footer — its own background-color rule above never reaches it, but the
   body-level `color:#f5f5f5` a few lines up is inherited into it (color is
   an inheritable property), which against its own light cream
   background (bg-warning) made its text unreadable. Handled explicitly,
   background+color only — no border. */
html[data-a11y-color="dark-contrast"] #cookieConsentBanner { background-color: #0d0d0d !important; }
html[data-a11y-color="dark-contrast"] #cookieConsentBanner * { color: #f5f5f5 !important; }
html[data-a11y-color="dark-contrast"] #cookieConsentBanner a { color: #7fbfff !important; }
/* the site's own inline `color:white` on the footer's "Subject to the
   supervision..." line assumed the footer's original dark background;
   forcing that background white left white-on-white. Handled explicitly. */
html[data-a11y-color="dark-contrast"] footer.site-footer span[style*="color: white"] { color: #f5f5f5 !important; }
/* the launcher (side button) shows every color adjustment; the modal does
   not — background-color/color only, no border, nothing that affects its
   fixed position or the SVG icon's shape. */
/* .a11y-launcher isn't in the "no borders" list (that's about section/div/
   header/footer/nav/article/aside/main/ul/li/table/form) — it's the
   toolbar's own button, and its default box-shadow is plain black, which
   is invisible once the page behind it is also near-black. */
html[data-a11y-color="dark-contrast"] .a11y-launcher { background-color: #0d0d0d !important; color: #f5f5f5 !important; border: 1px solid #f5f5f5 !important; }

html[data-a11y-color="light-contrast"] body:not(#a11y-widget) {
    background: #ffffff !important;
    color: #111111 !important;
}
html[data-a11y-color="light-contrast"] :is(nav, #main-content, footer.site-footer, nav *, #main-content *, footer.site-footer *):where(section, div, header, footer, nav, article, aside, main, ul, li, table, form) {
    background-color: #ffffff !important;
    color: #111111 !important;
}
/* same reasoning as dark-contrast above — targeted at the two named
   components, not the broad selector; box-shadow, not border. */
html[data-a11y-color="light-contrast"] :is(.card-services, .nbox) { box-shadow: 0 1px 6px rgba(0,0,0,.18) !important; }
html[data-a11y-color="light-contrast"] .about-us-new-ui-video { box-shadow: 0 1px 6px rgba(0,0,0,.18) !important; }
html[data-a11y-color="light-contrast"] #main-content .img-caption { background-color: transparent !important; }
html[data-a11y-color="light-contrast"] #main-content .img-caption-inner { background-color: transparent !important; }
html[data-a11y-color="light-contrast"] #main-content .about-us-new-ui-video { background-color: transparent !important; }
html[data-a11y-color="light-contrast"] #main-content .video-section { background-color: transparent !important; }
html[data-a11y-color="light-contrast"] #main-content .img-overlay { background-color: transparent !important; }
/* .icon-play's triangle is an inline <path fill="white">; under light-contrast
   the surrounding .icon-bg-play circle also turns white (caught by the
   broad div background rule), making the white-on-white triangle invisible. */
html[data-a11y-color="light-contrast"] .icon-play path { fill: #111111 !important; }
html[data-a11y-color="light-contrast"] footer.site-footer { box-shadow: 0 -1px 0 rgba(0,0,0,.25) !important; }
html[data-a11y-color="light-contrast"] :is(nav, #main-content, footer.site-footer) a { color: #0a3f91 !important; }
html[data-a11y-color="light-contrast"] #zsiq_float { background-color: #ffffff !important; }
html[data-a11y-color="light-contrast"] #zsiq_float .siqico-chat { color: #111111 !important; }
/* the site's own inline `color:white` on the footer's "Subject to the
   supervision..." line assumed the footer's original dark background;
   forcing that background white left white-on-white. */
html[data-a11y-color="light-contrast"] footer.site-footer span[style*="color: white"] { color: #111111 !important; }
html[data-a11y-color="light-contrast"] .a11y-launcher { background-color: #ffffff !important; color: #111111 !important; }

/* High/low saturation apply once at <html> (same reasoning as invert above)
   so they also affect third-party widgets like a chat launcher, with a
   single reciprocal filter cancelling it on the toolbar — saturate(s1) then
   saturate(s2) on the same content is equivalent to a single saturate
   (s1*s2), so saturate(2) cancels via saturate(.5) and vice versa. */
html[data-a11y-color="high-saturation"] { filter: saturate(2); }
html[data-a11y-color="high-saturation"] .a11y-panel,
html[data-a11y-color="high-saturation"] .a11y-backdrop,
html[data-a11y-color="high-saturation"] .a11y-skip-link {
    filter: saturate(.5) !important;
}
html[data-a11y-color="low-saturation"] { filter: saturate(.5); }
html[data-a11y-color="low-saturation"] .a11y-panel,
html[data-a11y-color="low-saturation"] .a11y-backdrop,
html[data-a11y-color="low-saturation"] .a11y-skip-link {
    filter: saturate(2) !important;
}
/* grayscale(1) is lossy (all chroma is discarded), so there's no filter that
   can cancel it back to color on the toolbar the way invert/saturate are
   cancelled above — applying it once at <html> would grey out the panel
   with no way back. Applied per-element instead (excluding the toolbar and
   <body>); confirmed live (Playwright + real Chromium, not assumed) that
   this does not break the fixed-position chat widget elsewhere on the page
   — safe here specifically because grayscale is idempotent (applying it
   twice to the same nested content is identical to applying it once), so
   unlike invert it doesn't cancel back to color for two-levels-deep content
   such as a chat widget's icon inside its launcher div. */
/* .zsiq_theme1 (confirmed live) is the Zoho SalesIQ wrapper that directly
   parents the fixed-position chat launcher — filtering it too, like any
   other element, made the launcher jump to the wrong position (verified:
   it moved from y:935 to y:3018, i.e. off-screen), because a filtered
   ancestor becomes the new positioning anchor for its fixed descendants.
   The launcher and its own icon are still filtered directly (they have no
   fixed descendants of their own, so that's safe) — only their one
   problem ancestor is skipped. */
/* #a11y-widget itself (the wrapper div) is excluded rather than filtered,
   because it directly parents three position:fixed elements (launcher,
   backdrop, panel) — filtering it would make it their new positioning
   anchor, the same bug fixed above for .zsiq_theme1. .a11y-launcher (the
   side button) is deliberately left filterable so it shows Desaturate like
   the rest of the page; only its siblings .a11y-panel/.a11y-backdrop/
   .a11y-skip-link are protected. */
/* .about-us-new-ui-video (inside .video-section) combines overflow:hidden
   with a max-height; putting a filter anywhere in its ANCESTOR chain
   triggers a browser rendering bug that clips it to roughly its top half.
   Heights measured identical with and without the filter, so it isn't a
   layout collapse — it's specifically the filter+overflow:hidden
   interaction on an ancestor. excluding .video-section and its own
   descendants wasn't enough on its own — .about-us-new-ui/.container
   (ancestors of .video-section) were still getting their own filter,
   which still visually clipped the video underneath. :not(:has(.video-section))
   excludes those ancestors too, but only the specific instances that
   actually wrap this video — .container is a generic, widely-reused class,
   so excluding it outright would leave unrelated sections elsewhere on the
   page un-desaturated. */
html[data-a11y-color="desaturate"] :not(#a11y-widget):not(.a11y-panel):not(.a11y-panel *):not(.a11y-backdrop):not(.a11y-skip-link):not(body):not(.zsiq_theme1):not(.video-section):not(.video-section *):not(:has(.video-section)) { filter: grayscale(1); }

/* the crop bug only fires when a filtered ANCESTOR sits above the
   overflow:hidden+max-height element (.about-us-new-ui-video) — filtering
   that element ITSELF is safe (confirmed: no clipping), so apply the
   filter directly to it. This also covers its blue background color
   (#295CA9, set on .about-us-new-ui-video itself), not just the image. */
html[data-a11y-color="desaturate"] .about-us-new-ui-video {
    filter: grayscale(1);
}

/* ---- Color blindness simulation (SVG filters, applied via JS on <html>) ---- */
html[data-a11y-colorblind]:not([data-a11y-colorblind="none"]) :is(nav, #main-content, footer.site-footer, nav *, #main-content *, footer.site-footer *) {
    filter: url(#a11y-cb-filter);
}

/* ---- Bigger text ---- */
html[data-a11y-font-size="large"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, span, a, td, th, label, dt, dd, blockquote) { font-size: calc(1em * 1.15) !important; }
html[data-a11y-font-size="xlarge"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, span, a, td, th, label, dt, dd, blockquote) { font-size: calc(1em * 1.3) !important; }

/* ---- Line height ---- */
html[data-a11y-line-height="medium"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, span, blockquote, dd) { line-height: 1.7 !important; }
html[data-a11y-line-height="large"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, span, blockquote, dd) { line-height: 2.1 !important; }

/* ---- Word spacing ---- */
html[data-a11y-word-spacing="medium"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, span, blockquote, dd) { word-spacing: .2em !important; }
html[data-a11y-word-spacing="large"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, span, blockquote, dd) { word-spacing: .5em !important; }

/* ---- Letter spacing (excludes icon fonts / form controls to avoid breaking icons) ---- */
html[data-a11y-letter-spacing="medium"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, span, blockquote, dd, h1, h2, h3, h4, h5, h6):not(.fa):not([class*="fa-"]) { letter-spacing: .04em !important; }
html[data-a11y-letter-spacing="large"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, span, blockquote, dd, h1, h2, h3, h4, h5, h6):not(.fa):not([class*="fa-"]) { letter-spacing: .1em !important; }

/* ---- Alignment (textual content only, never nav/buttons/forms/icons) ---- */
html[data-a11y-align="center"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, blockquote, h1, h2, h3, h4, h5, h6) { text-align: center !important; }
html[data-a11y-align="left"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, blockquote, h1, h2, h3, h4, h5, h6) { text-align: left !important; }
html[data-a11y-align="right"] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, blockquote, h1, h2, h3, h4, h5, h6) { text-align: right !important; }

/* ---- Readable / dyslexia-friendly font ----
   English content switches to OpenDyslexic (locally hosted, loaded lazily by JS
   only when this feature is enabled). Arabic content keeps Cairo — OpenDyslexic
   does not cover Arabic script — falling back to a plain, high-legibility stack. */
html[data-a11y-font="readable"]:not(.arb) :is(nav, #main-content, footer.site-footer, nav *, #main-content *, footer.site-footer *):where(p, li, span, a, td, th, label, h1, h2, h3, h4, h5, h6, blockquote):not(.fa):not([class*="fa-"]) {
    font-family: "OpenDyslexic", "Comic Sans MS", "Segoe UI", Roboto, sans-serif !important;
}
html[data-a11y-font="readable"].arb :is(nav, #main-content, footer.site-footer, nav *, #main-content *, footer.site-footer *):where(p, li, span, a, td, th, label, h1, h2, h3, h4, h5, h6, blockquote) {
    font-family: "Tahoma", "Segoe UI", Cairo, sans-serif !important;
}

/* ---- Highlight titles ---- */
html.a11y-highlight-titles :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(h1, h2, h3, h4, h5, h6) {
    background: #fff3b0 !important;
    color: #111 !important;
    outline: 2px solid #e6b800;
    outline-offset: -2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ---- Highlight links ---- */
html.a11y-highlight-links :is(nav, #main-content, footer.site-footer) a:not(.btn) {
    background: #fff3b0 !important;
    color: #0a3f91 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    outline: 1px solid #e6b800;
    outline-offset: -1px;
}

/* ---- Text enhancer ---- */
html.a11y-text-enhancer :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(p, li, span, blockquote, dd) {
    line-height: 1.8 !important;
    letter-spacing: .02em !important;
    word-spacing: .12em !important;
    color: #111 !important;
}
html.a11y-text-enhancer body:not(#a11y-widget) { background: #fffdf7 !important; }

/* ---- Highlight hover / focus ---- */
html.a11y-highlight-hover :is(nav, #main-content, footer.site-footer) a:hover,
html.a11y-highlight-hover :is(nav, #main-content, footer.site-footer) button:hover,
html.a11y-highlight-hover :is(nav, #main-content, footer.site-footer) [role="button"]:hover {
    outline: 3px solid #ff6f00 !important;
    outline-offset: -3px;
    background-color: rgba(255,111,0,.12) !important;
}
html.a11y-highlight-focus :is(nav, #main-content, footer.site-footer) a:focus-visible,
html.a11y-highlight-focus :is(nav, #main-content, footer.site-footer) button:focus-visible,
html.a11y-highlight-focus :is(nav, #main-content, footer.site-footer) input:focus-visible,
html.a11y-highlight-focus :is(nav, #main-content, footer.site-footer) select:focus-visible,
html.a11y-highlight-focus :is(nav, #main-content, footer.site-footer) textarea:focus-visible,
html.a11y-highlight-focus :is(nav, #main-content, footer.site-footer) [tabindex]:focus-visible {
    outline: 4px solid #ff6f00 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(255,111,0,.25) !important;
}

/* ---- Cursor ---- */
html.a11y-cursor-white, html.a11y-cursor-white body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M4 2 L4 28 L11 21 L15 29 L19 27 L15 19 L24 19 Z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important; }
html.a11y-cursor-black, html.a11y-cursor-black body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M4 2 L4 28 L11 21 L15 29 L19 27 L15 19 L24 19 Z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important; }
html.a11y-cursor-white #a11y-widget, html.a11y-cursor-white #a11y-widget *,
html.a11y-cursor-black #a11y-widget, html.a11y-cursor-black #a11y-widget * {
    cursor: auto !important;
}
#a11y-widget button, #a11y-widget select, #a11y-widget [role="button"] { cursor: pointer !important; }

/* ---- Stop animation ---- */
html.a11y-stop-animation *:not(#a11y-widget):not(#a11y-widget *) {
    animation-play-state: paused !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
}

/* ---- Hide images ----
   Essential UI controls (buttons, icons, the toolbar itself) are excluded. */
html.a11y-hide-images body img:not(#a11y-widget *):not([role="button"]):not(.btn img) { visibility: hidden !important; }

/* ---- Reading mask ---- */
.a11y-reading-mask-layer {
    position: fixed;
    inset: 0;
    z-index: 999995;
    pointer-events: none;
    display: none;
    background: rgba(0,0,0,.75);
    -webkit-mask-image: linear-gradient(#000 0 0);
    mask-image: linear-gradient(#000 0 0);
}
html.a11y-reading-mask .a11y-reading-mask-layer { display: block; }

/* ---- Reading guide ---- */
.a11y-reading-guide-bar {
    position: fixed;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 999996;
    pointer-events: none;
    display: none;
    border-top: 2px solid #ffbf47;
    border-bottom: 2px solid #ffbf47;
    background: rgba(255,191,71,.18);
}
html.a11y-reading-guide .a11y-reading-guide-bar { display: block; }

/* ---- Image alt tooltip indicator ---- */
html.a11y-image-alt-tooltip img[alt]:not([alt=""]) {
    outline: 1px dashed #0a5fc4;
    cursor: help;
}

/* ---- Content scaling ---- */
html[data-a11y-scale] body {
    zoom: var(--a11y-content-scale);
}
@supports not (zoom: 1) {
    /* transform (like filter) makes its element a containing block for
       fixed-position descendants, so scale each content region individually
       instead of <body> — keeps the toolbar's own fixed positioning intact. */
    html[data-a11y-scale] :is(nav, #main-content, footer.site-footer) {
        transform: scale(var(--a11y-content-scale));
        transform-origin: top center;
    }
}
/* zoom compounds multiplicatively down the tree (the same way legacy IE
   zoom percentages nested) — a flat zoom:1 here would NOT cancel the parent's
   scale, it would just stack "no additional zoom" on top of the already-
   scaled body, leaving the panel still resized. Only the reciprocal factor
   actually cancels it back out to a true 100%. */
html[data-a11y-scale] #a11y-widget {
    zoom: calc(1 / var(--a11y-content-scale)) !important;
}

/* ---- Text / title colors ---- */
html[data-a11y-text-color] :is(nav, #main-content, footer.site-footer, nav *, #main-content *, footer.site-footer *):where(p, li, span, td, th, label, dd, blockquote) { color: var(--a11y-text-color-value) !important; }
html[data-a11y-title-color] :is(#main-content, footer.site-footer, #main-content *, footer.site-footer *):where(h1, h2, h3, h4, h5, h6) { color: var(--a11y-title-color-value) !important; }

/* ---- Focus visibility baseline (always improves keyboard focus, no toggle needed) ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #0a5fc4;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}