/* ==========================================================================
   Accessibility Toolbar - page-wide override rules
   ==========================================================================
   These rules use high-specificity selectors plus !important so they win
   against arbitrary theme CSS on sites this module was never built for.

   KNOWN LIMITATION: browsers give inline style="" attributes written
   directly into page content (e.g. pasted from Word into a WYSIWYG editor)
   higher priority than !important stylesheet rules. There is no clean CSS
   fix for this - it's documented in README.md rather than "solved" here.
   ========================================================================== */

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

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

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

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

/* Font Awesome (and similar icon fonts) render glyphs by mapping specific
   Unicode codepoints to shapes within their own font file - swapping
   font-family on those elements doesn't just restyle them, it breaks
   them outright (missing-glyph boxes instead of icons). Excluding any
   element whose class contains "fa-" catches virtually all real-world
   Font Awesome markup across v4/5/6 syntax (fa, fas, far, fal, fad, fab,
   fa-solid, fa-brands, etc. are always paired with an icon-specific
   fa-xxx class in the same class list) without needing to know which
   Font Awesome version, or how many, a given site has loaded - this site
   alone loads three. Once excluded here, Font Awesome's own CSS rule
   (which explicitly targets the same class) applies normally instead of
   losing to inheritance from an OpenDyslexic-forced ancestor. */
/* Font Awesome (and similar icon fonts) render glyphs by mapping specific
   Unicode codepoints to shapes within their own font file - swapping
   font-family on those elements doesn't just restyle them, it breaks
   them outright (missing-glyph boxes, or for ligature-based libraries
   like Material Icons, literal words like "home" showing up as plain
   text instead of an icon - arguably worse, since it's not obviously
   "broken", just wrong). Excluded below, by common class-naming
   convention, wherever that convention is specific enough to be
   low-risk:
     - Font Awesome:    class contains "fa-"     (fa, fas, far, fal, fad,
                         fab, fa-solid, fa-brands, etc. - v4/5/6 all pair
                         a style class with an icon-specific fa-xxx class
                         in the same list, so this alone catches all
                         three Font Awesome versions this site loads)
     - Bootstrap Icons:  class contains "bi-"
     - Material Icons/
       Symbols:          class contains "material-icons" or
                         "material-symbols" (covers -outlined/-rounded/
                         -sharp/-two-tone variants via substring match)
     - Ionicons (legacy
       font-based, not
       the newer <ion-
       icon> web
       component):       class contains "ion-"
     - Glyphicons
       (Bootstrap 3):     class contains "glyphicon"
     - Dashicons
       (WordPress):       class contains "dashicons"
   Deliberately NOT included: a bare "icon-" prefix. It's used by some
   libraries (Simple Line Icons among them), but it's also generic enough
   that ordinary site markup unrelated to icon fonts sometimes uses it
   too (an "icon-wrapper" layout div, for instance) - excluding on a
   pattern that common risks silently exempting real content from the
   font toggle for no good reason. The patterns above were chosen to be
   distinctive enough that an accidental match is unlikely, not because
   any regex-style class match is ever 100% collision-proof - it's a
   pragmatic, not exhaustive, defense. */
html.a11y-font body,
html.a11y-font body *:not([class*="fa-"]):not([class*="bi-"]):not([class*="material-icons"]):not([class*="material-symbols"]):not([class*="ion-"]):not([class*="glyphicon"]):not([class*="dashicons"]) {
    font-family: 'OpenDyslexic', sans-serif !important;
}

html.a11y-spacing body,
html.a11y-spacing body * {
    line-height: 1.8 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

/* Matches the well-established "Underline Links" convention used by
   Joomla's own core accessibility plugin - forces an underline on every
   link, for visitors who rely on more than color alone to spot one.
   Not excluding .a11y-toolbar here deliberately: unlike the font/color
   overrides, underlining our own panel's links (e.g. the Accessibility
   Statement link) isn't a breakage worth guarding against - just visual
   consistency with the rest of the page. */
html.a11y-underline body a {
    text-decoration: underline !important;
}

/* Contrast palette values come from CSS custom properties set inline by
   mod_a11ytoolbar.php, per module instance/site configuration. Fallback
   values below only apply if that inline style somehow fails to load. */
html.a11y-contrast body,
html.a11y-contrast body *:not(.a11y-toolbar):not(.a11y-toolbar *):not(.a11y-reading-guide-mask) {
    background-color: var(--a11y-contrast-bg, #000000) !important;
    color: var(--a11y-contrast-text, #ffffff) !important;
    border-color: var(--a11y-contrast-border, #ffffff) !important;
}

html.a11y-contrast body a:not(.a11y-toolbar *),
html.a11y-contrast body a:not(.a11y-toolbar *) * {
    color: var(--a11y-contrast-link, #ffff00) !important;
}

/* Leave media alone - recoloring/inverting images, video, and icons usually
   makes things harder to read, not easier. */
html.a11y-contrast body img,
html.a11y-contrast body video,
html.a11y-contrast body svg,
html.a11y-contrast body picture,
html.a11y-contrast body iframe {
    background-color: transparent !important;
    filter: none !important;
}

/* Reading overlay: a single warm tint, distinct from High Contrast's
   stark recolor. JS enforces these two as mutually exclusive since
   combining them is visually contradictory (see a11ytoolbar.js). */
html.a11y-overlay body,
html.a11y-overlay body *:not(.a11y-toolbar):not(.a11y-toolbar *):not(.a11y-reading-guide-mask) {
    background-color: var(--a11y-overlay-bg, #fdf6e3) !important;
}

html.a11y-overlay body img,
html.a11y-overlay body video,
html.a11y-overlay body svg,
html.a11y-overlay body picture,
html.a11y-overlay body iframe {
    background-color: transparent !important;
}

/* Grayscale mode.
   IMPORTANT: this deliberately filters each element under body
   individually (`body *`), rather than applying `filter` to `body` or
   `html` directly. CSS filter creates a new containing block for any
   position:fixed descendant of the filtered element - which is exactly
   the bug the floating toolbar had before it was relocated to be a
   direct child of <body> (see a11ytoolbar.js). Filtering body/html
   directly here would risk reintroducing that bug, or breaking any of
   the HOST SITE's own fixed-position elements (sticky headers, cookie
   banners, chat widgets) if their containing block shifted unexpectedly.
   Filtering individual elements instead avoids touching body/html's own
   containing-block status. The residual risk - a site element that is
   ITSELF both grayscale-matched AND has its own nested fixed-position
   children - is far narrower and is called out in README.md rather than
   silently assumed away. */
html.a11y-grayscale body *:not(.a11y-toolbar):not(.a11y-toolbar *) {
    filter: grayscale(100%) !important;
}

/* Reading guide: two fixed masks (created/positioned by JS) that follow
   the pointer, leaving a highlighted band around it. Static appearance
   only lives here; a11ytoolbar.js owns their position/size on move. */
.a11y-reading-guide-mask {
    position: fixed;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 999998;
    display: none;
}

.a11y-reading-guide-mask--top {
    top: 0;
}

.a11y-reading-guide-mask--bottom {
    bottom: 0;
}

/* ==========================================================================
   Widget UI
   ========================================================================== */

.a11y-toolbar {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
}

.a11y-toolbar *,
.a11y-toolbar *::before,
.a11y-toolbar *::after {
    box-sizing: inherit;
}

.a11y-toolbar--floating {
    z-index: 999999;
}

/* Positioning style: Fixed keeps the toolbar pinned to the viewport
   regardless of scroll (the JS relocates Fixed-style toolbars to be a
   direct child of <body> specifically to guarantee this works on any
   theme - see a11ytoolbar.js and README.md "Why not the WebAssetManager"
   sibling section on containing blocks). Absolute anchors it at a fixed
   point in the page instead, so it scrolls away with the rest of the
   content - deliberately NOT relocated by JS, since the whole point is
   to sit in its natural place in the page. This means Absolute's exact
   anchor point can vary depending on the theme's own CSS in a way Fixed
   is specifically engineered to avoid - a real, disclosed tradeoff, not
   an oversight. */
.a11y-toolbar--style-fixed {
    position: fixed;
}

.a11y-toolbar--style-absolute {
    position: absolute;
}

.a11y-toolbar--bottom-right  { right: 1rem; bottom: 1rem; }
.a11y-toolbar--bottom-center { left: 50%; bottom: 1rem; transform: translateX(-50%); }
.a11y-toolbar--bottom-left   { left: 1rem; bottom: 1rem; }
.a11y-toolbar--top-right     { right: 1rem; top: 1rem; }
.a11y-toolbar--top-center    { left: 50%; top: 1rem; transform: translateX(-50%); }
.a11y-toolbar--top-left      { left: 1rem; top: 1rem; }

/* Mobile corner override. Only takes effect if an admin explicitly picks
   a mobile-specific corner (see MOD_A11YTOOLBAR_FIELD_CORNERMOBILE_*);
   each rule explicitly resets the opposing left/right/top/bottom/
   transform properties so it cleanly overrides whichever desktop corner
   was chosen, regardless of the combination. Breakpoint matches
   Bootstrap's own `md` breakpoint (768px), which is what T4 itself
   already uses - a deliberate convention, not a universal law. */
@media (max-width: 767.98px) {
    .a11y-toolbar--mobile-bottom-right {
        right: 1rem; bottom: 1rem; left: auto; top: auto; transform: none;
    }
    .a11y-toolbar--mobile-bottom-center {
        left: 50%; bottom: 1rem; right: auto; top: auto; transform: translateX(-50%);
    }
    .a11y-toolbar--mobile-bottom-left {
        left: 1rem; bottom: 1rem; right: auto; top: auto; transform: none;
    }
    .a11y-toolbar--mobile-top-right {
        right: 1rem; top: 1rem; left: auto; bottom: auto; transform: none;
    }
    .a11y-toolbar--mobile-top-center {
        left: 50%; top: 1rem; right: auto; bottom: auto; transform: translateX(-50%);
    }
    .a11y-toolbar--mobile-top-left {
        left: 1rem; top: 1rem; right: auto; bottom: auto; transform: none;
    }
}

.a11y-toolbar__launcher {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #1a1a2e;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.a11y-toolbar__launcher:focus-visible,
.a11y-toolbar__toggle:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

/* Read Aloud changes what a click does everywhere on the page - if the
   panel gets closed, there's nothing else on screen reminding a visitor
   it's still active. This keeps a persistent, hard-to-miss visual cue on
   the launcher itself. The pulse respects prefers-reduced-motion, same
   as the rest of this site's own motion-sensitive elements (see the
   cfd-badge wink script in the footer, which does the same check). */
.a11y-toolbar__launcher--readaloud-active {
    background: #b3261e;
    animation: a11y-readaloud-pulse 2s ease-in-out infinite;
}

@keyframes a11y-readaloud-pulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(179, 38, 30, 0.5);
    }
    50% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 6px rgba(179, 38, 30, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .a11y-toolbar__launcher--readaloud-active {
        animation: none;
    }
}

.a11y-toolbar__shortcut-hint {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 10px;
    color: #888888;
    background: transparent;
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.a11y-toolbar__toggle[aria-pressed="true"] .a11y-toolbar__shortcut-hint {
    color: #cccccc;
    border-color: #666666;
}

.a11y-toolbar__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.a11y-toolbar__panel {
    margin-top: 0.5rem;
    padding: 1rem;
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #cccccc;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    min-width: 220px;
}

.a11y-toolbar--inline .a11y-toolbar__panel {
    position: static;
    box-shadow: none;
    margin-top: 0;
}

.a11y-toolbar__heading {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 0.5rem;
}

.a11y-toolbar__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background: #f5f5f5;
    color: #1a1a1a;
    cursor: pointer;
    text-align: left;
}

.a11y-toolbar__toggle:last-of-type {
    margin-bottom: 0;
}

.a11y-toolbar__toggle[aria-pressed="true"] {
    background: #1a1a2e;
    color: #ffffff;
    border-color: #1a1a2e;
}

.a11y-toolbar__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.a11y-toolbar__tts-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.25rem 0 0.5rem;
    padding: 0.5rem;
    background: #f5f5f5;
    border-radius: 4px;
}

.a11y-toolbar__tts-label {
    font-size: 12px;
    color: #444444;
}

.a11y-toolbar__tts-select {
    font-size: 12px;
    padding: 0.2rem 0.3rem;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background: #ffffff;
    color: #1a1a1a;
    max-width: 100%;
}

.a11y-toolbar__statement-link {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e0e0e0;
    font-size: 12px;
    color: #1a1a2e;
    text-align: center;
}