/*!
 * 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; }
#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;
}
#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 host-theme skip-link / screen-reader-text whenever the widget is
   loaded. The widget renders its own .rankplus-skip-link with safe positioning,
   so the theme-supplied helpers (which often use `margin: -1px` and cause an
   RTL/LTR horizontal scrollbar) aren't needed. */
.skip-link:not(.rankplus-skip-link),
.screen-reader-text {
    display: none !important;
}

#accToggleBtn {
    position: fixed; bottom: 100px; z-index: 99999;
    width: 56px; height: 56px; border-radius: 50%;
    background-color: var(--rp-acc-color);
    background-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='%23ffffff' 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>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    border: 0; cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    transition: transform .2s, box-shadow .2s;
}
#accToggleBtn:hover { transform: scale(1.1); }
/* Inner <svg> is decorative fallback only — icon paints via background-image
   above so host-theme SVG rules can't blank it. */
#accToggleBtn svg { display: none !important; }

.acc-pos-left #accToggleBtn  { left: 20px; right: auto; }
.acc-pos-right #accToggleBtn { right: 20px; left: auto; }

/* 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. --- */
#accPanel {
    display: flex;
    position: fixed;
    top: 0; bottom: 0;
    width: 380px; max-width: 92vw;
    z-index: 99998;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    overflow: hidden;
    transition: transform .3s ease;
    will-change: transform;
}
.acc-pos-left #accPanel  { left: 0;  right: auto; transform: translateX(-100%); }
.acc-pos-right #accPanel { right: 0; left: auto;  transform: translateX(100%); }
#accPanel[data-open="true"] { transform: translateX(0); }

/* 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 #accPanel { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar #accPanel { top: 46px; }
}
/* Same for the re-enable pill if it ever sits at top — harmless when bottom-anchored. */
body.admin-bar #accToggleBtn { /* no change; button is bottom-anchored */ }

.acc-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: var(--rp-acc-color);
    color: #fff;
    flex-shrink: 0;
}
.acc-panel-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: #fff; }
#accCloseBtn {
    width: 32px; height: 32px; border-radius: 50%; border: 0;
    background-color: rgba(255,255,255,.2);
    background-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='%23ffffff' stroke-width='2' stroke-linecap='round'><path d='M6 6l12 12M6 18L18 6'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    cursor: pointer;
}
#accCloseBtn:hover { background-color: rgba(255,255,255,.3); }
#accCloseBtn svg { display: none !important; }

.acc-panel-body { padding: 12px; overflow-y: auto; flex: 1; }

.acc-section { margin-bottom: 10px; border-radius: 10px; background: #f9f8f3; }
.acc-section > summary {
    list-style: none; cursor: pointer; padding: 10px 14px;
    font-weight: 600; font-size: 14px; color: #434349;
    display: flex; align-items: center; justify-content: space-between;
}
.acc-section > summary::-webkit-details-marker { display: none; }
.acc-section > summary::after { content: '▾'; transition: transform .2s; }
.acc-section[open] > summary::after { transform: rotate(180deg); }
.acc-section-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 10px 12px; }

.acc-toggle, .acc-radio {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 12px 8px; background: #fff;
    border: 2px solid #e5e3db; border-radius: 10px;
    cursor: pointer; min-height: 78px;
}
.acc-toggle svg, .acc-radio svg { width: 22px; height: 22px; margin-bottom: 6px; }
.acc-toggle span, .acc-radio span { font-size: 12px; font-weight: 500; color: #434349; text-align: center; }
.acc-toggle[aria-pressed="true"], .acc-radio[aria-pressed="true"] {
    background: #fbeedf; border-color: var(--rp-acc-color);
}

/* Scale rows must 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. */
.acc-scale-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 4px 12px;
}
.acc-scale-label { font-size: 13px; font-weight: 500; color: #434349; white-space: nowrap; }
.acc-scale-controls { display: flex; gap: 6px; flex-shrink: 0; }
.acc-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #d7d5cc;
    background: #fff; cursor: pointer; font-size: 14px; font-weight: 600; color: #434349;
    display: flex; align-items: center; justify-content: center; }
.acc-btn[data-value="reset"] { width: 56px; font-size: 11px; }
.acc-btn:hover { background: #f4f3ee; }

.acc-panel-footer { border-top: 1px solid #eee; padding: 10px 12px; background: #fafafa; flex-shrink: 0; }
#accResetAll { display: block; width: 100%; padding: 10px;
    background: #f4f3ee; border: 1px solid #d7d5cc; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: #434349; cursor: pointer; }
#accResetAll:hover { background: #e5e3db; }
.acc-footer-links { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; font-size: 12px; }
.acc-footer-links a, .acc-footer-links button {
    background: none; border: 0; color: var(--rp-acc-color); cursor: pointer; text-decoration: none; padding: 4px 6px;
}
.acc-footer-links a:hover, .acc-footer-links button:hover { text-decoration: underline; }
.acc-attribution { display: block; text-align: center; font-size: 11px; color: #888; text-decoration: none; padding: 4px 0 2px; }
.acc-attribution strong { color: var(--rp-acc-color); }

#accToggleBtn:focus-visible,
.acc-toggle:focus-visible,
.acc-radio:focus-visible,
.acc-btn:focus-visible {
    outline: 3px solid var(--rp-acc-color);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    #accPanel { width: 92vw; max-width: 380px; }
}

/* 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; }

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; }

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;
}

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) */
@supports (zoom: 1.1) {
    body.acc-page-zoom-1 { zoom: 1.1; }
    body.acc-page-zoom-2 { zoom: 1.2; }
    body.acc-page-zoom-3 { zoom: 1.3; }
    body.acc-page-zoom-4 { zoom: 1.4; }
    body.acc-page-zoom-5 { zoom: 1.5; }
}
@supports not (zoom: 1.1) {
    body.acc-page-zoom-1 { transform: scale(1.1); transform-origin: top left; width: 90.91%; }
    body.acc-page-zoom-2 { transform: scale(1.2); transform-origin: top left; width: 83.33%; }
    body.acc-page-zoom-3 { transform: scale(1.3); transform-origin: top left; width: 76.92%; }
    body.acc-page-zoom-4 { transform: scale(1.4); transform-origin: top left; width: 71.43%; }
    body.acc-page-zoom-5 { transform: scale(1.5); transform-origin: top left; width: 66.67%; }
}
/* Keep the widget itself unscaled */
#accessibilityWidget { transform: none !important; zoom: 1 !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, #965215) !important;
    outline-offset: 4px !important;
    padding: 4px !important;
    position: relative !important;
}
body.acc-highlight-headings h1::before { content: 'H1 '; font-size: 11px; color: var(--rp-acc-color, #965215); font-weight: 700; }
body.acc-highlight-headings h2::before { content: 'H2 '; font-size: 11px; color: var(--rp-acc-color, #965215); font-weight: 700; }
body.acc-highlight-headings h3::before { content: 'H3 '; font-size: 11px; color: var(--rp-acc-color, #965215); font-weight: 700; }
body.acc-highlight-headings h4::before { content: 'H4 '; font-size: 11px; color: var(--rp-acc-color, #965215); font-weight: 700; }
body.acc-highlight-headings h5::before { content: 'H5 '; font-size: 11px; color: var(--rp-acc-color, #965215); font-weight: 700; }
body.acc-highlight-headings h6::before { content: 'H6 '; font-size: 11px; color: var(--rp-acc-color, #965215); font-weight: 700; }

.acc-img-desc {
    display: block;
    padding: 6px 10px;
    background: var(--rp-acc-color, #965215);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 0 0 6px 6px;
    max-width: 100%;
}
.acc-img-desc.acc-img-missing {
    background: #d33;
}

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

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

#acc-reading-focus {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99996;
    background: rgba(0,0,0,.55);
    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%);
    -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%);
    display: none;
}
#acc-reading-focus.acc-active { display: block; }

/* === Virtual keyboard (Task 17) === */
#acc-vkeyboard {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #2a2a2a; color: #fff; border-radius: 12px;
    padding: 8px; z-index: 99997;
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
    user-select: none;
    display: none;
}
#acc-vkeyboard.acc-active { display: block; }
.acc-vk-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 8px; font-size: 12px; cursor: move;
}
.acc-vk-row { display: flex; gap: 4px; justify-content: center; margin: 4px 0; }
.acc-vk-key {
    min-width: 32px; height: 36px; padding: 0 8px;
    background: #444; border: 0; color: #fff; border-radius: 6px; cursor: pointer;
    font-size: 14px;
}
.acc-vk-key:hover { background: #555; }
.acc-vk-key.acc-vk-wide { min-width: 64px; }
.acc-vk-key.acc-vk-extra-wide { min-width: 120px; }

/* Keyboard navigation — high-contrast focus outlines + always-visible skip link */
body.acc-kbd-nav :focus-visible {
    outline: 3px solid var(--rp-acc-color, #965215) !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 */
body.acc-sr [aria-hidden="true"] {
    opacity: 0.5 !important;
    outline: 1px dashed #f00 !important;
}

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

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

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

/* Voice commands (Web Speech Recognition) mic indicator */
#acc-mic-indicator {
    position: fixed; bottom: 80px;
    width: 56px; height: 56px; border-radius: 50%;
    background: #d00; color: #fff; z-index: 99996;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    animation: acc-mic-pulse 1.4s infinite ease-in-out;
}
#acc-mic-indicator.acc-active { display: flex; }
.acc-pos-left #acc-mic-indicator { left: 90px; }
.acc-pos-right #acc-mic-indicator { right: 90px; }
@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; bottom: 8px; z-index: 99999;
    padding: 6px 10px; border-radius: 16px;
    background: rgba(0,0,0,.6); color: #fff;
    font-size: 12px; text-decoration: none;
    display: none;
}
#acc-reenable.acc-active { display: inline-block; }