/*!
 * RankPlus Accessibility Widget
 * Loaded only when rankplus_accessibility_enabled = '1'.
 */

/* === Skip-to-content link (WCAG 2.4.1) === */
/* Visually hidden without negative offsets — `margin: -1px` shifts the box past
   the document edge and causes a horizontal scrollbar on RTL pages (left side)
   and LTR pages (right side). `inset: auto` + `clip-path: inset(50%)` keep the
   box at the body's origin while clipping it to nothing visually. */
.rankplus-skip-link {position:absolute!important;top:0!important;left:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;border:0!important;white-space:nowrap!important;}
.rankplus-skip-link:focus {position:fixed!important;top:8px!important;inset-inline-start:8px!important;width:auto!important;height:auto!important;margin:0!important;padding:8px 12px!important;overflow:visible!important;clip:auto!important;clip-path:none!important;white-space:normal!important;background:#000!important;color:#fff!important;text-decoration:none!important;border-radius:4px!important;z-index:999999!important;}

/* === Panel UI (v8.2.3 — offcanvas drawer, solid colour, theme-resistant icons) === */
#accessibilityWidget { all: initial !important; }
#accessibilityWidget, #accessibilityWidget * {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.5 !important;
    /* Host themes routinely set text-transform: uppercase + letter-spacing on
       buttons and headings. In RTL mode this clipped longer English labels
       (e.g. "SCREEN READER COMPATIBILITY") to their last few chars because
       LTR text in an RTL container is anchored to the right edge. Reset
       these so labels render mixed-case and wrap normally inside cells. */
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}
/* Defensive baseline — properties the widget doesn't set on every element but
   host themes routinely do (global resets, icon fonts, dark skins, page
   builders). :where() keeps specificity at a bare (1,0,0) so every component
   rule below — all ID-anchored and !important — still overrides it, while
   !important lifts this baseline above ANY host rule that doesn't target the
   widget's own ID. Deliberately excluded: display/position/width/height/
   inset/visibility/transform (component- or JS-controlled) and outline
   (focus rings). */
#accessibilityWidget :where(*),
#accessibilityWidget :where(*)::before,
#accessibilityWidget :where(*)::after {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    float: none !important;
    filter: none !important;
    opacity: 1 !important;
    animation: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;
    color: inherit !important;
    content: none !important;
}
#accessibilityWidget .acc-toggle span,
#accessibilityWidget .acc-radio span,
#accessibilityWidget .acc-section > summary,
#accessibilityWidget .acc-panel-header h2,
#accessibilityWidget .acc-footer-links a,
#accessibilityWidget .acc-footer-links button,
#accessibilityWidget #accResetAll,
#accessibilityWidget .acc-attribution {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
/* Logical alignment for labels — `start` follows the widget's `dir` attribute,
   so headings and links sit at the correct edge in both RTL and LTR. */
#accessibilityWidget .acc-panel-header h2,
#accessibilityWidget .acc-section > summary {
    text-align: start !important;
}

/* Hide the host theme's skip-link whenever the widget is loaded — the widget
   renders its own .rankplus-skip-link with safe positioning, so the duplicate
   isn't needed.
   `.screen-reader-text` is deliberately NOT hidden: it is WordPress core's
   visually-hidden class, carrying real content for assistive tech (search
   field labels, "Read more about X", pagination, nav-toggle text, section
   headings). `display: none` removes it from the a11y tree too, so hiding it
   site-wide stripped that text from screen-reader users. Only the layout
   side-effect is neutralised here — `margin: -1px` is what pushes the box past
   the document edge and causes the RTL/LTR horizontal scrollbar, so we zero
   the margin and keep the text clipped-but-exposed instead. */
.skip-link:not(.rankplus-skip-link) {
    display: none !important;
}
.screen-reader-text {
    margin: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
}
/* WordPress core (and most themes) reveal these on focus — core's own
   "Skip to content" link is a `.screen-reader-text` with a `:focus` rule. That
   rule carries `clip: auto !important` but only a plain `clip-path: none`, so
   the `!important` clip-path above would out-rank it and keep the focused link
   invisible (WCAG 2.4.7). Hand both properties back on focus; elements whose
   theme has no focus rule stay hidden anyway via its 1px box + overflow. */
.screen-reader-text:focus,
.screen-reader-text:focus-within {
    clip: auto !important;
    clip-path: none !important;
}

/* Icon ink follows --rp-acc-on-color so it stays legible on any brand colour.
   A custom property can NOT be substituted inside the data: URI — `url(...)` is
   tokenised as a single URL token, so a var() written inside it is never
   interpolated and the stroke would stay hard-coded white. The glyph is
   therefore painted as a MASK on a pseudo-element: the button keeps the brand
   background-color, and ::before is a solid --rp-acc-on-color rectangle that
   the mask cuts the icon shape out of. Visually identical to the old
   background-image, but the ink colour is now a real CSS value. */
#accessibilityWidget #accToggleBtn {
    position: fixed !important; bottom: 100px !important; z-index: 99999 !important;
    width: 40px !important; height: 60px !important;
    background-color: var(--rp-acc-color) !important;
    background-image: none !important;
    border: 0 !important; cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
    transition: transform .2s, box-shadow .2s !important;
}
#accessibilityWidget #accToggleBtn::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--rp-acc-on-color, #fff) !important;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='4' r='2'/><path d='M12 6v6'/><path d='M8 10l4 2 4-2'/><path d='M8 22l4-10 4 10'/></svg>") !important;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='4' r='2'/><path d='M12 6v6'/><path d='M8 10l4 2 4-2'/><path d='M8 22l4-10 4 10'/></svg>") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 24px 24px !important;
    mask-size: 24px 24px !important;
}
/* Edge-pinned hover scales toward the inside of the page so the button never
   extends past the viewport edge (which would force a horizontal scrollbar). */
#accessibilityWidget.acc-pos-left  #accToggleBtn:hover { transform: scale(1.08) !important; transform-origin: left center !important; }
#accessibilityWidget.acc-pos-right #accToggleBtn:hover { transform: scale(1.08) !important; transform-origin: right center !important; }
/* Inner <svg> is decorative fallback only — icon paints via the masked
   ::before above so host-theme SVG rules can't blank it. */
#accessibilityWidget #accToggleBtn svg { display: none !important; }

/* Semicircle pinned flush to the page edge — flat side touches the viewport,
   rounded side faces the page content. Position class controls which side. */
#accessibilityWidget.acc-pos-left #accToggleBtn {
    left: 0 !important; right: auto !important;
    margin-left: 0 !important; margin-right: 0 !important;
    -webkit-border-top-right-radius: 50% !important;
    -webkit-border-bottom-right-radius: 50% !important;
    -moz-border-radius-topright: 50% !important;
    -moz-border-radius-bottomright: 50% !important;
    border-top-right-radius: 50% !important;
    border-bottom-right-radius: 50% !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
#accessibilityWidget.acc-pos-right #accToggleBtn {
    right: 0 !important; left: auto !important;
    margin-left: 0 !important; margin-right: 0 !important;
    -webkit-border-top-left-radius: 50% !important;
    -webkit-border-bottom-left-radius: 50% !important;
    -moz-border-radius-topleft: 50% !important;
    -moz-border-radius-bottomleft: 50% !important;
    border-top-left-radius: 50% !important;
    border-bottom-left-radius: 50% !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* When the offcanvas drawer is open, the round toggle button would otherwise
   sit on top of the panel's footer (Reset/Disable buttons) at bottom-left/right
   and trap the user's clicks. Hide it while the panel is open; clicking the
   panel's close button restores it. */
#accessibilityWidget:has(#accPanel[data-open="true"]) #accToggleBtn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* --- Offcanvas drawer: full-height, slides in from the configured side. --- */
#accessibilityWidget #accPanel {
    display: flex !important;
    position: fixed !important;
    top: 0 !important; bottom: 0 !important;
    width: 380px !important; max-width: 92vw !important;
    z-index: 99998 !important;
    flex-direction: column !important;
    background: #fff !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.25) !important;
    overflow: hidden !important;
    transition: transform .3s ease !important;
    will-change: transform !important;
}
#accessibilityWidget.acc-pos-left #accPanel { left: 0 !important;  right: auto !important; transform: translateX(-100%) !important; }
#accessibilityWidget.acc-pos-right #accPanel { right: 0 !important; left: auto !important;  transform: translateX(100%) !important; }
#accessibilityWidget #accPanel[data-open="true"] { transform: translateX(0) !important; }

/* Fallback for browsers without `inert` support (JS sets/removes `inert`):
   take the closed panel out of the tab order + a11y tree once the slide-out
   finishes, so keyboard users can't tab into the offscreen controls. The
   visibility flip is delayed until after the transform transition so the
   close animation still plays. */
#accessibilityWidget #accPanel:not([data-open="true"]) {
    visibility: hidden !important;
    transition: transform .3s ease, visibility 0s .3s !important;
}
#accessibilityWidget #accPanel[data-open="true"] {
    visibility: visible !important;
    transition: transform .3s ease, visibility 0s 0s !important;
}

/* Honour the WordPress admin bar so the panel header isn't hidden behind it.
   `html { margin-top: 32px }` only shifts in-flow content; position:fixed
   elements still sit against the viewport top. */
body.admin-bar #accessibilityWidget #accPanel { top: 32px !important; }
@media screen and (max-width: 782px) {
    body.admin-bar #accessibilityWidget #accPanel { top: 46px !important; }
}
/* Same for the re-enable pill if it ever sits at top — harmless when bottom-anchored. */
body.admin-bar #accessibilityWidget #accToggleBtn { /* no change; button is bottom-anchored */ }

/* === Panel header === */
#accessibilityWidget .acc-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 16px !important;
    background: var(--rp-acc-color) !important;
    color: var(--rp-acc-on-color, #fff) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05) !important;
}
#accessibilityWidget .acc-panel-header h2 {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: var(--rp-acc-on-color, #fff) !important;
    letter-spacing: 0.005em !important;
}
#accessibilityWidget #accCloseBtn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 0 !important;
    flex-shrink: 0 !important;
    background-color: rgba(255, 255, 255, .15) !important;
    background-image: none !important;
    cursor: pointer !important;
    transition: background-color .15s !important;
}
/* Same mask technique as the launcher — var() can't be interpolated inside the
   data: URI, so the X is cut out of a --rp-acc-on-color rectangle. */
#accessibilityWidget #accCloseBtn::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--rp-acc-on-color, #fff) !important;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round'><path d='M6 6l12 12M6 18L18 6'/></svg>") !important;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round'><path d='M6 6l12 12M6 18L18 6'/></svg>") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 16px 16px !important;
    mask-size: 16px 16px !important;
}
#accessibilityWidget #accCloseBtn:hover { background-color: rgba(255, 255, 255, .28) !important; }
#accessibilityWidget #accCloseBtn:active { background-color: rgba(255, 255, 255, .35) !important; }
#accessibilityWidget #accCloseBtn svg { display: none !important; }

/* === Panel body === */
#accessibilityWidget .acc-panel-body {
    padding: 14px 16px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    background: #fafaf7 !important;
}

/* === Collapsible section === */
#accessibilityWidget .acc-section {
    margin-bottom: 12px !important;
    border: 1px solid #e9e6dc !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
}
#accessibilityWidget .acc-section:last-child { margin-bottom: 0 !important; }

#accessibilityWidget .acc-section > summary {
    list-style: none !important;
    cursor: pointer !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #2a2a30 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    user-select: none !important;
    transition: background-color .15s !important;
}
#accessibilityWidget .acc-section > summary:hover { background: #f6f4ec !important; }
#accessibilityWidget .acc-section > summary:focus-visible {
    outline: 3px solid var(--rp-acc-focus-color, #1f1f24) !important;
    outline-offset: -3px !important;
}
#accessibilityWidget .acc-section > summary::-webkit-details-marker { display: none !important; }

/* Section disclosure indicator — SVG chevron rendered via background-image
   so it doesn't depend on a font that has the `▾` glyph at the right size. */
#accessibilityWidget .acc-section > summary::after {
    content: '' !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23434349' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 5l4 4 4-4'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: transform .2s ease !important;
}
#accessibilityWidget .acc-section[open] > summary::after { transform: rotate(-180deg) !important; }
#accessibilityWidget .acc-section[open] > summary { border-bottom: 1px solid #efece2 !important; }

#accessibilityWidget .acc-section-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 14px 14px 16px !important;
    background: #fbfaf5 !important;
}

/* === Toggle / radio tiles === */
#accessibilityWidget .acc-toggle,
#accessibilityWidget .acc-radio {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 8px 10px !important;
    background: #ffffff !important;
    color: #434349 !important;
    /* 3.5:1 against the #fbfaf5 section body, 3.22:1 at worst against the pale
       #fbeedf pressed/hover fill — WCAG 1.4.11 needs 3:1 for a control
       boundary (the old #d7d2c2 was only 1.45:1). */
    border: 1.5px solid #8a857a !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    min-height: 86px !important;
    transition: border-color .15s, background .15s, transform .12s, box-shadow .15s !important;
}
#accessibilityWidget .acc-toggle:hover,
#accessibilityWidget .acc-radio:hover {
    border-color: #a78460 !important;
    background: #fffaf3 !important;
}
#accessibilityWidget .acc-toggle:active,
#accessibilityWidget .acc-radio:active {
    transform: translateY(1px) !important;
}
#accessibilityWidget .acc-toggle svg,
#accessibilityWidget .acc-radio svg {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 8px !important;
    stroke: #434349 !important;
    transition: stroke .15s !important;
}
#accessibilityWidget .acc-toggle span,
#accessibilityWidget .acc-radio span {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #434349 !important;
    text-align: center !important;
    line-height: 1.3 !important;
}
#accessibilityWidget .acc-toggle[aria-pressed="true"],
#accessibilityWidget .acc-radio[aria-pressed="true"] {
    background: #fbeedf !important;
    border-color: var(--rp-acc-color) !important;
    box-shadow: inset 0 0 0 1px var(--rp-acc-color) !important;
}
#accessibilityWidget .acc-toggle[aria-pressed="true"] svg,
#accessibilityWidget .acc-radio[aria-pressed="true"] svg {
    /* Near-black keeps the active tile's icon/label legible on the pale
       pressed background regardless of the chosen brand colour
       (var(--rp-acc-color) on #fbeedf was only ~3.27:1). Active state is still
       signalled non-textually by the coloured border + inset shadow above. */
    stroke: #1f1f24 !important;
}
#accessibilityWidget .acc-toggle[aria-pressed="true"] span,
#accessibilityWidget .acc-radio[aria-pressed="true"] span {
    color: #1f1f24 !important;
    font-weight: 600 !important;
}

/* === Scale rows (font/line/word/letter/zoom) ===
   Span the section-body grid's full width — otherwise the 2-column grid
   squeezes them into a half-cell and the RTL Hebrew label wraps
   character-by-character. The top border separates a scale row from any
   tile-grid rows above it. */
#accessibilityWidget .acc-scale-row {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 4px !important;
    border-top: 1px solid #efece2 !important;
}
#accessibilityWidget .acc-scale-row:first-child {
    border-top: 0 !important;
    padding-top: 4px !important;
}
#accessibilityWidget .acc-scale-label {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #2a2a30 !important;
    /* Must wrap: the defensive baseline zeroes min-width, so at the 1.4.10
       reflow width (320px) a nowrap label overflows its flex box and is
       clipped by .acc-section's `overflow: hidden`. */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}
#accessibilityWidget .acc-scale-controls {
    display: flex !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}
#accessibilityWidget .acc-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    /* 3.5:1 on the #fbfaf5 section body, 3.67:1 on its own white fill — see
       the tile border above. */
    border: 1px solid #8a857a !important;
    background: #ffffff !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #434349 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s, border-color .15s !important;
}
#accessibilityWidget .acc-btn[data-value="reset"] {
    width: 54px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
#accessibilityWidget .acc-btn:hover {
    background: #fbeedf !important;
    border-color: var(--rp-acc-color) !important;
    /* Near-black label on the pale hover fill — the brand colour as ink on
       #fbeedf drops below 4.5:1 for lighter brand picks. The hover state is
       still signalled by the fill + coloured border. */
    color: #1f1f24 !important;
}

/* === Panel footer === */
#accessibilityWidget .acc-panel-footer {
    border-top: 1px solid #e9e6dc !important;
    padding: 12px 16px 14px !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
}
#accessibilityWidget #accResetAll {
    display: block !important;
    width: 100% !important;
    padding: 11px !important;
    background: var(--rp-acc-color) !important;
    border: 1px solid var(--rp-acc-color) !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--rp-acc-on-color, #fff) !important;
    cursor: pointer !important;
    transition: filter .15s, transform .12s !important;
    font-family: inherit !important;
}
#accessibilityWidget #accResetAll:hover { filter: brightness(1.08) !important; }
#accessibilityWidget #accResetAll:active { transform: translateY(1px) !important; }

#accessibilityWidget .acc-footer-links {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 10px 0 6px !important;
    font-size: 12.5px !important;
    gap: 12px !important;
}
#accessibilityWidget .acc-footer-links a,
#accessibilityWidget .acc-footer-links button {
    background: none !important;
    border: 0 !important;
    /* Brand colour AS TEXT on the pale footer — --rp-acc-brand-ink is the brand
       colour only when it clears 4.5:1 on white, otherwise near-black. */
    color: var(--rp-acc-brand-ink, #1f1f24) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    padding: 2px 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 500 !important;
}
#accessibilityWidget .acc-footer-links a:hover,
#accessibilityWidget .acc-footer-links button:hover { text-decoration: none !important; }

#accessibilityWidget .acc-attribution {
    display: block !important;
    text-align: center !important;
    font-size: 11px !important;
    color: #6b6760 !important; /* 5.62:1 on #fff — passes WCAG AA (was #98948a ≈ 2.6:1) */
    text-decoration: none !important;
    padding: 6px 0 0 !important;
    margin-top: 4px !important;
    border-top: 1px solid #efece2 !important;
}
#accessibilityWidget .acc-attribution strong { color: var(--rp-acc-brand-ink, #1f1f24) !important; font-weight: 700 !important; }

#accessibilityWidget #accToggleBtn:focus-visible,
#accessibilityWidget .acc-toggle:focus-visible,
#accessibilityWidget .acc-radio:focus-visible,
#accessibilityWidget .acc-btn:focus-visible,
#accessibilityWidget #accResetAll:focus-visible,
#accessibilityWidget .acc-footer-links a:focus-visible,
#accessibilityWidget .acc-footer-links button:focus-visible {
    /* --rp-acc-focus-color is the brand colour only when it clears 3:1 against
       the #fbfaf5 panel surfaces (WCAG 1.4.11 for the focus indicator),
       otherwise near-black — a pale brand pick can't silently kill the ring. */
    outline: 3px solid var(--rp-acc-focus-color, #1f1f24) !important;
    outline-offset: 2px !important;
}

@media (max-width: 600px) {
    #accessibilityWidget #accPanel { width: 92vw !important; max-width: 380px !important; }
    /* Stack the scale label above its +/-/reset controls so the label keeps a
       full-width line at the 320px reflow width (WCAG 1.4.10). */
    #accessibilityWidget .acc-scale-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* Base accessibility styles - injected dynamically */
/* === Contrast modes (mutually exclusive) ===
   Per CSS spec, `filter` and `transform` on an ancestor create a NEW
   containing block for position:fixed descendants. If we apply `filter`
   directly to <body>, the widget's own fixed elements (toggle button,
   offcanvas panel, magnifier, mic indicator, reading-focus mask,
   text-reader bar) get re-anchored to body coordinates and travel with
   page scroll — the offcanvas appears "broken" the moment any contrast,
   colorblind, or zoom-fallback mode is activated.

   Fix: apply the effect to body's *direct children* EXCEPT the widget
   (`#accessibilityWidget`) and its helper elements (`[id^="acc-"]`).
   The visual result is identical — we're filtering the same page content,
   just at a level that doesn't establish a CB for the widget. */
body.acc-contrast-high > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: contrast(1.4) !important; }
body.acc-contrast-high > *:not(#accessibilityWidget):not([id^="acc-"]),
body.acc-contrast-high > *:not(#accessibilityWidget):not([id^="acc-"]) * { border-color: #000 !important; }

/* True dark-contrast theme (no filter:invert) — body gets the page-level
   background so the page edges stay dark; children/descendants (excluding
   the widget) get the cascade for text/border colour. */
body.acc-contrast-dark { background: #000 !important; }
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]),
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) * {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    background-image: none !important;
}
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) a,
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) a * { color: #ff0 !important; }
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) button { background: #222 !important; }
/* `color` doesn't reach placeholder text or SVG paint, so without these the
   old (now near-invisible) colours survive the repaint and icon-only controls
   disappear against the new background. */
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"])::placeholder,
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) *::placeholder {
    color: #ccc !important;
    opacity: 1 !important;
}
body.acc-contrast-dark > svg:not([id^="acc-"]) *:not([fill="none"]),
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) svg *:not([fill="none"]) { fill: #fff !important; }
body.acc-contrast-dark > svg:not([id^="acc-"]) *:not([stroke="none"]),
body.acc-contrast-dark > *:not(#accessibilityWidget):not([id^="acc-"]) svg *:not([stroke="none"]) { stroke: #fff !important; }

body.acc-contrast-light { background: #fff !important; }
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]),
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]) * {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
    background-image: none !important;
}
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]) a,
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]) a * { color: #0000ff !important; }
/* Same placeholder / SVG-paint repaint as the dark mode above. */
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"])::placeholder,
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]) *::placeholder {
    color: #333 !important;
    opacity: 1 !important;
}
body.acc-contrast-light > svg:not([id^="acc-"]) *:not([fill="none"]),
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]) svg *:not([fill="none"]) { fill: #000 !important; }
body.acc-contrast-light > svg:not([id^="acc-"]) *:not([stroke="none"]),
body.acc-contrast-light > *:not(#accessibilityWidget):not([id^="acc-"]) svg *:not([stroke="none"]) { stroke: #000 !important; }

body.acc-contrast-monochrome > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: grayscale(1) !important; }
body.acc-contrast-low-sat    > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: saturate(.5) !important; }
body.acc-contrast-high-sat   > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: saturate(1.5) !important; }

body.acc-cb-protanopia    > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: url(#acc-cb-protanopia) !important; }
body.acc-cb-deuteranopia  > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: url(#acc-cb-deuteranopia) !important; }
body.acc-cb-tritanopia    > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: url(#acc-cb-tritanopia) !important; }
body.acc-cb-achromatopsia > *:not(#accessibilityWidget):not([id^="acc-"]) { filter: url(#acc-cb-achromatopsia) !important; }

body.acc-highlight-links a {
    outline: 3px solid #ff0 !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 255, 0, 0.2) !important;
    text-decoration: underline !important;
}
/* The resting highlight above is an author-origin !important outline, so it
   also overrides the UA's :focus-visible ring — without this rule the focused
   link would be pixel-identical to every other link (WCAG 2.4.7). Dark ring
   inside a thick yellow halo so it reads against both the highlight and the
   page. */
body.acc-highlight-links a:focus-visible {
    outline: 3px solid #0b0b0b !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px #ff0 !important;
}

body.acc-readable-font,
body.acc-readable-font * {
    font-family: Arial, Helvetica, sans-serif !important;
}

body.acc-stop-animations,
body.acc-stop-animations *,
body.acc-stop-animations *::before,
body.acc-stop-animations *::after {
    animation: none !important;
    transition: none !important;
}

body.acc-line-spacing-1 *,
body.acc-line-spacing-1 { line-height: 1.5 !important; }
body.acc-line-spacing-2 *,
body.acc-line-spacing-2 { line-height: 2 !important; }
body.acc-line-spacing-3 *,
body.acc-line-spacing-3 { line-height: 2.5 !important; }

body.acc-word-spacing-1 *,
body.acc-word-spacing-1 { word-spacing: 0.1em !important; }
body.acc-word-spacing-2 *,
body.acc-word-spacing-2 { word-spacing: 0.2em !important; }
body.acc-word-spacing-3 *,
body.acc-word-spacing-3 { word-spacing: 0.3em !important; }

body.acc-letter-spacing-1 *,
body.acc-letter-spacing-1 { letter-spacing: 0.05em !important; }
body.acc-letter-spacing-2 *,
body.acc-letter-spacing-2 { letter-spacing: 0.1em !important; }
body.acc-letter-spacing-3 *,
body.acc-letter-spacing-3 { letter-spacing: 0.15em !important; }

body.acc-cursor-black,
body.acc-cursor-black * { cursor: url('../images/accessibility/cursor-black.svg') 4 4, auto !important; }
body.acc-cursor-white,
body.acc-cursor-white * { cursor: url('../images/accessibility/cursor-white.svg') 4 4, auto !important; }

/* Font size scaling */
html.acc-font-size-1 {
    font-size: 112.5% !important;
}

html.acc-font-size-2 {
    font-size: 125% !important;
}

html.acc-font-size-3 {
    font-size: 150% !important;
}

html.acc-font-size-4 {
    font-size: 175% !important;
}

html.acc-font-size-5 {
    font-size: 200% !important;
}

/* Page zoom (display magnification) */
/* Scoped to body's direct children (excluding the widget and its helper
   elements) for the same reason as the filter modes above: used `zoom` is the
   product of every ancestor's zoom, so `zoom: 1` on the widget can NOT undo a
   zoom applied to <body>, and a body-level transform creates a containing block
   that re-anchors every position:fixed element. Scoping the effect one level
   down leaves the widget's own coordinate space untouched. */
@supports (zoom: 1.1) {
    body.acc-page-zoom-1 > *:not(#accessibilityWidget):not([id^="acc-"]) { zoom: 1.1 !important; }
    body.acc-page-zoom-2 > *:not(#accessibilityWidget):not([id^="acc-"]) { zoom: 1.2 !important; }
    body.acc-page-zoom-3 > *:not(#accessibilityWidget):not([id^="acc-"]) { zoom: 1.3 !important; }
    body.acc-page-zoom-4 > *:not(#accessibilityWidget):not([id^="acc-"]) { zoom: 1.4 !important; }
    body.acc-page-zoom-5 > *:not(#accessibilityWidget):not([id^="acc-"]) { zoom: 1.5 !important; }
}
@supports not (zoom: 1.1) {
    body.acc-page-zoom-1 > *:not(#accessibilityWidget):not([id^="acc-"]) { transform: scale(1.1) !important; transform-origin: top left !important; width: 90.91% !important; }
    body.acc-page-zoom-2 > *:not(#accessibilityWidget):not([id^="acc-"]) { transform: scale(1.2) !important; transform-origin: top left !important; width: 83.33% !important; }
    body.acc-page-zoom-3 > *:not(#accessibilityWidget):not([id^="acc-"]) { transform: scale(1.3) !important; transform-origin: top left !important; width: 76.92% !important; }
    body.acc-page-zoom-4 > *:not(#accessibilityWidget):not([id^="acc-"]) { transform: scale(1.4) !important; transform-origin: top left !important; width: 71.43% !important; }
    body.acc-page-zoom-5 > *:not(#accessibilityWidget):not([id^="acc-"]) { transform: scale(1.5) !important; transform-origin: top left !important; width: 66.67% !important; }
}

body.acc-highlight-headings h1,
body.acc-highlight-headings h2,
body.acc-highlight-headings h3,
body.acc-highlight-headings h4,
body.acc-highlight-headings h5,
body.acc-highlight-headings h6 {
    outline: 2px dashed var(--rp-acc-color, #b04e00) !important;
    outline-offset: 4px !important;
    padding: 4px !important;
    position: relative !important;
}
/* The H1..H6 markers paint onto the HOST page's background, which is unknown —
   11px brand-coloured text on it can land anywhere on the contrast scale. Given
   a solid chip of its own (brand fill + matching ink) the marker carries its
   own background pair, so contrast no longer depends on the theme. */
body.acc-highlight-headings h1::before,
body.acc-highlight-headings h2::before,
body.acc-highlight-headings h3::before,
body.acc-highlight-headings h4::before,
body.acc-highlight-headings h5::before,
body.acc-highlight-headings h6::before {
    font-size: 11px !important;
    font-weight: 700 !important;
    background: var(--rp-acc-color, #b04e00) !important;
    color: var(--rp-acc-on-color, #fff) !important;
    padding: 0 3px !important;
    border-radius: 3px !important;
    /* Replaces the trailing space the label used to carry — a space inside the
       chip would just widen the fill instead of separating it from the text. */
    margin-inline-end: 4px !important;
}
body.acc-highlight-headings h1::before { content: 'H1' !important; }
body.acc-highlight-headings h2::before { content: 'H2' !important; }
body.acc-highlight-headings h3::before { content: 'H3' !important; }
body.acc-highlight-headings h4::before { content: 'H4' !important; }
body.acc-highlight-headings h5::before { content: 'H5' !important; }
body.acc-highlight-headings h6::before { content: 'H6' !important; }

.acc-img-desc {
    display: block !important;
    padding: 6px 10px !important;
    background: var(--rp-acc-color, #b04e00) !important;
    color: var(--rp-acc-on-color, #fff) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-radius: 0 0 6px 6px !important;
    max-width: 100% !important;
}
/* Fixed red fill, so the ink is pinned rather than inherited: on a light brand
   pick --rp-acc-on-color resolves to #1f1f24, which is only 3.59:1 on #d33 at
   13px. White is 4.57:1. */
.acc-img-desc.acc-img-missing {
    background: #d33 !important;
    color: #fff !important;
}

.acc-bionic-bold { font-weight: 700 !important; }

#acc-magnifier {
    position: fixed !important;
    width: 200px !important; height: 200px !important;
    border-radius: 50% !important;
    border: 3px solid var(--rp-acc-color, #b04e00) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 99997 !important;
    background: #fff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
    display: none !important;
}
#acc-magnifier.acc-active { display: block !important; }
#acc-magnifier > div {
    position: absolute !important;
    transform-origin: 0 0 !important;
    transform: scale(2) !important;
}

#acc-reading-focus {
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 99996 !important;
    /* Dim only — the mask sits OVER live page text, so its alpha directly cuts
       the host's text contrast. At .55 even pure black on white fell to 4.41:1
       (below the 4.5:1 minimum); .35 keeps the unfocused area visibly dimmed
       while black-on-white stays above the threshold. */
    background: rgba(0,0,0,.35) !important;
    mask: linear-gradient(to bottom,
        rgba(0,0,0,1) 0,
        rgba(0,0,0,1) var(--rp-rf-top, 40%),
        rgba(0,0,0,0) var(--rp-rf-top, 40%),
        rgba(0,0,0,0) calc(var(--rp-rf-top, 40%) + 80px),
        rgba(0,0,0,1) calc(var(--rp-rf-top, 40%) + 80px),
        rgba(0,0,0,1) 100%) !important;
    -webkit-mask: linear-gradient(to bottom,
        rgba(0,0,0,1) 0,
        rgba(0,0,0,1) var(--rp-rf-top, 40%),
        rgba(0,0,0,0) var(--rp-rf-top, 40%),
        rgba(0,0,0,0) calc(var(--rp-rf-top, 40%) + 80px),
        rgba(0,0,0,1) calc(var(--rp-rf-top, 40%) + 80px),
        rgba(0,0,0,1) 100%) !important;
    display: none !important;
}
#acc-reading-focus.acc-active { display: block !important; }

/* === Virtual keyboard (Task 17) === */
/* The keyboard is appended to <body>, outside #accessibilityWidget, so it does
   NOT inherit the widget's border-box reset — it needs its own box-sizing and a
   viewport cap, otherwise a 10-key row's min-content width pushes the
   centre-anchored panel off the left edge on narrow screens. */
#acc-vkeyboard {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #2a2a2a !important; color: #fff !important; border-radius: 12px !important;
    padding: 8px !important; z-index: 99997 !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.4) !important;
    user-select: none !important;
    display: none !important;
    max-width: 96vw !important;
    box-sizing: border-box !important;
}
#acc-vkeyboard.acc-active { display: block !important; }
#acc-vkeyboard .acc-vk-header {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    padding: 4px 8px !important; font-size: 12px !important; cursor: move !important;
}
#acc-vkeyboard .acc-vk-row { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; justify-content: center !important; margin: 4px 0 !important; }
#acc-vkeyboard .acc-vk-key {
    min-width: 32px !important; height: 36px !important; padding: 0 8px !important;
    background: #444 !important; border: 0 !important; color: #fff !important; border-radius: 6px !important; cursor: pointer !important;
    font-size: 14px !important;
}
#acc-vkeyboard .acc-vk-key:hover { background: #555 !important; }
#acc-vkeyboard .acc-vk-key.acc-vk-wide { min-width: 64px !important; }
#acc-vkeyboard .acc-vk-key.acc-vk-extra-wide { min-width: 120px !important; }
/* 11-key rows (Arabic/Russian/German layouts) on narrow phones — 26x36 still
   clears the 24x24 target minimum. */
@media (max-width: 480px) {
    #acc-vkeyboard .acc-vk-key { min-width: 26px !important; padding: 0 4px !important; font-size: 13px !important; }
    #acc-vkeyboard .acc-vk-key.acc-vk-extra-wide { min-width: 80px !important; }
}

/* Keyboard navigation — high-contrast focus outlines + always-visible skip link */
body.acc-kbd-nav :focus-visible {
    outline: 3px solid var(--rp-acc-color, #b04e00) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(150, 82, 21, 0.2) !important;
}
body.acc-kbd-nav .skip-link,
body.acc-kbd-nav .rankplus-skip-link {
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    padding: 8px 12px !important;
    background: #000 !important;
    color: #fff !important;
    z-index: 99999 !important;
}

/* Screen-reader compatibility mode — surface hidden decorations.
   Marked, never dimmed: `aria-hidden` means "hidden from assistive tech", not
   "hidden from sighted users", and themes routinely put it on visible wrappers.
   The old `opacity: .5` therefore halved the contrast of real body text
   (black on white 21:1 -> 3.98:1) inside a mode the visitor enabled to make
   the page MORE readable. The outline + hatch pattern flag the region without
   touching the text's own rendering. */
/* Marker only — never `opacity`, which would composite real text toward the
   background (black-on-white drops 21:1 to 3.98:1) inside a mode the visitor
   enabled to improve legibility, and never an `!important` background-image,
   which would erase a legitimate background on any host wrapper that happens
   to carry aria-hidden. The outline marks the region without touching either. */
body.acc-sr [aria-hidden="true"] {
    outline: 2px dashed #d00000 !important;
    outline-offset: -2px !important;
}

/* Smart-navigation landmark chips */
.acc-landmark-chip {
    position: absolute !important;
    z-index: 99996 !important;
    background: var(--rp-acc-color, #b04e00) !important;
    color: var(--rp-acc-on-color, #fff) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.3) !important;
}

/* Live-region announcer for screen readers (visually hidden) */
#acc-announcer {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Text reader (Web Speech API) floating controls bar */
#acc-text-reader-bar {
    position: fixed !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important;
    background: #2a2a2a !important; color: #fff !important; padding: 8px 12px !important;
    border-radius: 24px !important; display: none !important; align-items: center !important; gap: 10px !important;
    z-index: 99996 !important; box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
}
#acc-text-reader-bar.acc-active { display: inline-flex !important; }
#acc-text-reader-bar button { background: #444 !important; color: #fff !important; border: 0 !important; padding: 6px 12px !important; border-radius: 16px !important; cursor: pointer !important; }
.acc-reader-cursor { cursor: help !important; }

/* AT-only text (same technique as the skip link's hidden state) */
.acc-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

/* Voice commands (Web Speech Recognition) mic indicator */
#acc-mic-indicator {
    position: fixed !important; bottom: 80px !important;
    width: 56px !important; height: 56px !important; border-radius: 50% !important;
    background: #d00 !important; color: #fff !important; z-index: 99996 !important;
    display: none !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
    animation: acc-mic-pulse 1.4s infinite ease-in-out !important;
}
#acc-mic-indicator.acc-active { display: flex !important; }
/* Horizontal side (left/right 90px) is set inline by ensureMic(): the element
   is a <body> child, so the .acc-pos-* class on the widget root never
   cascades to it. */
@keyframes acc-mic-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* === Visitor "disable accessibility" re-enable pill (Task 22) === */
#acc-reenable {
    position: fixed !important; bottom: 8px !important; z-index: 99999 !important;
    padding: 6px 10px !important; border-radius: 16px !important;
    background: rgba(0,0,0,.6) !important; color: #fff !important;
    font-size: 12px !important; text-decoration: none !important;
    display: none !important;
}
#acc-reenable.acc-active { display: inline-block !important; }

/* Respect the visitor's OS "reduce motion" setting — exactly the population an
   accessibility widget should serve (WCAG 2.3.3 / vestibular sensitivity). The
   panel still shows/hides via transform; it just snaps instead of sliding. */
@media (prefers-reduced-motion: reduce) {
    #accessibilityWidget #accToggleBtn,
    #accessibilityWidget #accPanel,
    #accessibilityWidget #accCloseBtn,
    #accessibilityWidget .acc-section > summary,
    #accessibilityWidget .acc-section > summary::after,
    #accessibilityWidget .acc-toggle,
    #accessibilityWidget .acc-radio,
    #accessibilityWidget .acc-btn,
    #accessibilityWidget #accResetAll {
        transition: none !important;
    }
    #accessibilityWidget #accToggleBtn:hover,
    #accessibilityWidget .acc-toggle:active,
    #accessibilityWidget .acc-radio:active,
    #accessibilityWidget #accResetAll:active {
        transform: none !important;
    }
    #acc-mic-indicator {
        animation: none !important;
    }
}