/* ==========================================================================
   Turath Accessibility — Toolbar UI
   --------------------------------------------------------------------------
   Floating accessibility toolbar. Brand color #04194e, accent #1a3a8e on
   hover, white text. Uses logical properties so it mirrors correctly under
   both RTL (Arabic, primary) and LTR contexts.
   ========================================================================== */

/* CSS variables — central tuning. */
.turath-a11y-root {
    --t-a11y-brand:        #04194e;
    --t-a11y-brand-hover:  #1a3a8e;
    --t-a11y-fg:           #ffffff;
    --t-a11y-panel-bg:     #ffffff;
    --t-a11y-panel-fg:     #04194e;
    --t-a11y-muted-bg:     #f3f4f8;
    --t-a11y-border:       #d8dbe6;
    --t-a11y-shadow:       0 10px 30px rgba(4, 25, 78, 0.25), 0 4px 10px rgba(0,0,0,0.08);
    --t-a11y-radius:       12px;
    --t-a11y-trigger-size: 56px;
    --t-a11y-z:            99999;

    /* Container is just a positioning anchor — no size of its own. */
    position: fixed;
    inset-block-end: 20px;
    inset-inline-start: 20px;
    z-index: var(--t-a11y-z);
    /* Reset font for the toolbar to respect host theme but stay readable. */
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    /* Ensure the toolbar is not affected by html font-size scaling we apply
       to the rest of the document. Users still benefit because their setting
       is reflected in the aria-pressed state. */
}

.turath-a11y-root *,
.turath-a11y-root *::before,
.turath-a11y-root *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Trigger button (the 56px circle)
   -------------------------------------------------------------------------- */
.turath-a11y-trigger {
    width:  var(--t-a11y-trigger-size);
    height: var(--t-a11y-trigger-size);
    border-radius: 50%;
    border: 2px solid var(--t-a11y-fg);
    background: var(--t-a11y-brand);
    color: var(--t-a11y-fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--t-a11y-shadow);
    transition: background-color .2s ease, transform .2s ease;
    padding: 0;
    margin: 0;
}

.turath-a11y-trigger:hover,
.turath-a11y-trigger:focus-visible {
    background: var(--t-a11y-brand-hover);
}

.turath-a11y-trigger:focus-visible {
    outline: 3px solid #ffd400;
    outline-offset: 3px;
}

.turath-a11y-trigger__icon {
    font-size: 28px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.turath-a11y-panel {
    /* Anchor relative to the .turath-a11y-root container. */
    position: absolute;
    inset-block-end: calc(var(--t-a11y-trigger-size) + 12px);
    inset-inline-start: 0;
    width: 320px;
    max-width: calc(100vw - 40px);
    padding: 18px;
    background: var(--t-a11y-panel-bg);
    color: var(--t-a11y-panel-fg);
    border: 1px solid var(--t-a11y-border);
    border-radius: var(--t-a11y-radius);
    box-shadow: var(--t-a11y-shadow);
    transform: translateY(8px);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    /* When hidden via [hidden], display:none kicks in (a11y-fixes.css). */
}

/* JS adds .is-open to .turath-a11y-root when expanded. */
.turath-a11y-root.is-open .turath-a11y-panel {
    transform: translateY(0);
    opacity: 1;
}

.turath-a11y-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-block-end: 12px;
    padding-block-end: 10px;
    border-block-end: 1px solid var(--t-a11y-border);
}

.turath-a11y-panel__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--t-a11y-brand);
}

.turath-a11y-close {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--t-a11y-brand);
    font-size: 22px;
    line-height: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.turath-a11y-close:hover,
.turath-a11y-close:focus-visible {
    background: var(--t-a11y-muted-bg);
    border-color: var(--t-a11y-border);
}

.turath-a11y-panel__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   Rows / grid
   -------------------------------------------------------------------------- */
.turath-a11y-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    background: var(--t-a11y-muted-bg);
    border-radius: 8px;
    border: 1px solid var(--t-a11y-border);
}

.turath-a11y-row--full {
    flex-direction: row;
    flex-wrap: wrap;
}

.turath-a11y-row__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--t-a11y-brand);
}

.turath-a11y-row__controls {
    display: inline-flex;
    gap: 6px;
}

.turath-a11y-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.turath-a11y-btn,
.turath-a11y-toggle,
.turath-a11y-reset {
    appearance: none;
    background: var(--t-a11y-panel-bg);
    color: var(--t-a11y-brand);
    border: 1px solid var(--t-a11y-border);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px; /* WCAG 2.5.5 target size */
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: start;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.turath-a11y-btn {
    padding: 6px 10px;
    font-size: 16px;
}

.turath-a11y-toggle {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 12px 8px;
}

.turath-a11y-toggle .turath-a11y-icon {
    font-size: 20px;
}

.turath-a11y-toggle__label {
    font-size: 13px;
    line-height: 1.3;
}

.turath-a11y-btn:hover,
.turath-a11y-toggle:hover,
.turath-a11y-reset:hover,
.turath-a11y-btn:focus-visible,
.turath-a11y-toggle:focus-visible,
.turath-a11y-reset:focus-visible {
    background: var(--t-a11y-brand-hover);
    color: var(--t-a11y-fg);
    border-color: var(--t-a11y-brand-hover);
}

/* Pressed (active) state for toggle buttons. */
.turath-a11y-toggle[aria-pressed="true"] {
    background: var(--t-a11y-brand);
    color: var(--t-a11y-fg);
    border-color: var(--t-a11y-brand);
}

.turath-a11y-toggle[aria-pressed="true"]:hover,
.turath-a11y-toggle[aria-pressed="true"]:focus-visible {
    background: var(--t-a11y-brand-hover);
    border-color: var(--t-a11y-brand-hover);
}

.turath-a11y-reset {
    width: 100%;
    background: var(--t-a11y-brand);
    color: var(--t-a11y-fg);
    border-color: var(--t-a11y-brand);
}

.turath-a11y-reset:hover,
.turath-a11y-reset:focus-visible {
    background: var(--t-a11y-brand-hover);
    border-color: var(--t-a11y-brand-hover);
}

.turath-a11y-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   PREFERENCE CLASSES — applied to <html> by JS.
   These are the actual visual changes the toolbar drives.
   -------------------------------------------------------------------------- */

/* 1. Font-size scaling.
   Blocksy and Elementor set explicit pixel font-sizes that ignore the root
   font-size, so a simple `html { font-size: ...% }` does nothing in practice.
   We use CSS `zoom` on the page wrapper, which scales every length unit
   (px, rem, em) proportionally and is now supported in all major browsers
   (Chromium, Safari, and Firefox 126+). The toolbar is excluded so its
   own controls stay at the chosen size. */
html.a11y-fs-large body > *:not(.turath-a11y-root):not(#wpadminbar)    { zoom: 1.18; }
html.a11y-fs-xlarge body > *:not(.turath-a11y-root):not(#wpadminbar)   { zoom: 1.35; }
html.a11y-fs-xxlarge body > *:not(.turath-a11y-root):not(#wpadminbar)  { zoom: 1.50; }

/* Belt-and-suspenders: also bump root + body font-size so any rem-based
   theme element scales too. */
html.a11y-fs-large    { font-size: 118% !important; }
html.a11y-fs-xlarge   { font-size: 135% !important; }
html.a11y-fs-xxlarge  { font-size: 150% !important; }
html.a11y-fs-large body, html.a11y-fs-xlarge body, html.a11y-fs-xxlarge body {
    font-size: 1em !important;
}

/* 2. High contrast: black bg, yellow text, blue links. */
html.a11y-high-contrast,
html.a11y-high-contrast body {
    background: #000 !important;
    color: #ffd400 !important;
}
html.a11y-high-contrast *:not(.turath-a11y-root):not(.turath-a11y-root *) {
    background-color: #000 !important;
    color: #ffd400 !important;
    border-color: #ffd400 !important;
}
html.a11y-high-contrast a:not(.turath-a11y-root *) {
    color: #4ea3ff !important;
    text-decoration: underline !important;
}
html.a11y-high-contrast img:not(.turath-a11y-root *),
html.a11y-high-contrast video:not(.turath-a11y-root *) {
    filter: contrast(1.2);
}

/* 3. Dark mode (mutually exclusive with high-contrast — JS enforces). */
html.a11y-dark-mode,
html.a11y-dark-mode body {
    background: #0e1726 !important;
    color: #e6e9f2 !important;
}
html.a11y-dark-mode *:not(.turath-a11y-root):not(.turath-a11y-root *) {
    background-color: transparent !important;
    color: inherit !important;
    border-color: #2a3550 !important;
}
html.a11y-dark-mode a:not(.turath-a11y-root *) {
    color: #8ab4ff !important;
}
html.a11y-dark-mode img:not(.turath-a11y-root *) {
    filter: brightness(.9);
}

/* 4. Dyslexic-friendly spacing. We do NOT swap fonts because that would
   break Arabic shaping; instead we widen letter/word spacing and line
   height per WCAG 1.4.12 (Text Spacing). */
html.a11y-dyslexic-font body :not(.turath-a11y-root):not(.turath-a11y-root *) {
    letter-spacing: 0.06em !important;
    word-spacing:   0.16em !important;
    line-height:    1.9    !important;
}

/* 5. Reduce motion. Kill animations & transitions site-wide except inside
   the toolbar (the toolbar already respects prefers-reduced-motion below). */
html.a11y-reduce-motion *:not(.turath-a11y-root):not(.turath-a11y-root *) {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* 6. Highlight links: underline + 1px currentColor border + padding. */
html.a11y-highlight-links a:not(.turath-a11y-root *) {
    text-decoration: underline !important;
    border: 1px solid currentColor !important;
    padding: 0 2px !important;
    border-radius: 2px;
}

/* 7. Large cursor. Inline base64 PNG (32x32, simple white arrow w/ black
   border) so the plugin works fully offline. */
html.a11y-large-cursor,
html.a11y-large-cursor *:not(.turath-a11y-root):not(.turath-a11y-root *) {
    cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAAAOjbeYAAABg0lEQVR42u3WPUtCURzH8U+lmJiZmpaaaWlqamhqaGhoaGoIgmiI3kFTjW2NbW1tjW2NbWxsbGxsbGxsbWxsbGxubGxsfM+9PnDvPefcc8+9hX2gcM/h/h//L+f8lMLh8DH+9CqwijKqKKOECopYwjxiH9yL2EERZWxhE2tIYJoPsoUq4nTxIb6JElYxhTlMYg6TmMUiVlBCBzExzCBOFx/iByihjFXMI4FpfIgRTGAaCUxjBhuoxXpQT9ag+9NnP+Pn9KCevu/ufj/H+fT89J/uvWf3Tf/7zk7zpIcs94BdPGINS1jALCYxhglEMYwBdKMd3xqgFw0YwBjmsYE6mngRDdjENPpCVtsX+OS+sB3v2I0zuEYL/Iw/ohk1zCEdsto5b/hI23E2/LRrsRoq3xY9YEv3ITPZxxfu0Ig21EJWuw14sOuaeXEab7izh3sdrXjAFTZRRRX9wf5xXt6jD2do+kvBnY9zNNEYlH5LqGAPRWxoH3vvPfshXfYFJtCNEAY/4i97/n0lF8UlVAAAAABJRU5ErkJggg==") 4 4, auto !important;
}

/* --------------------------------------------------------------------------
   System-level prefers-reduced-motion → disable our own animations too.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .turath-a11y-trigger,
    .turath-a11y-panel,
    .turath-a11y-btn,
    .turath-a11y-toggle,
    .turath-a11y-reset,
    .turath-a11y-close {
        transition: none !important;
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Print: no toolbar on paper.
   -------------------------------------------------------------------------- */
@media print {
    .turath-a11y-root { display: none !important; }
}

/* --------------------------------------------------------------------------
   Small screens: keep panel within viewport, slightly smaller.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .turath-a11y-panel {
        width: calc(100vw - 40px);
    }
    .turath-a11y-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Erticaz: position the accessibility toolbar on the physical LEFT (aliraqia) to avoid
   the chat widget anchored on the right. Overrides the default inline-start placement. */
.turath-a11y-root  { inset-inline-start: auto !important; inset-inline-end: 20px !important; }
.turath-a11y-panel { inset-inline-start: auto !important; inset-inline-end: 0 !important; }

/* Erticaz high-contrast fix: paint the dark canvas on <body> only and keep element
   backgrounds TRANSPARENT (over that black body). The original opaque #000 on every
   element turned Slider Revolution's <sr7-mask> overlay into a solid black mask that
   hid the whole hero. Same selector + later source order → this wins. Background images
   are intentionally NOT removed so the hero slide still shows. */
html.a11y-high-contrast *:not(.turath-a11y-root):not(.turath-a11y-root *) {
    background-color: transparent !important;
}

/* Dim imagery/slides in high-contrast so yellow text stays legible over it and the page
   reads as a genuine dark high-contrast theme (structure preserved, no voids). */
html.a11y-high-contrast img:not(.turath-a11y-root *),
html.a11y-high-contrast video,
html.a11y-high-contrast rs-sbg,
html.a11y-high-contrast rs-sbg-wrap,
html.a11y-high-contrast .rev-slidebg,
html.a11y-high-contrast [class*="slidebg"],
html.a11y-high-contrast canvas {
    filter: brightness(0.32) contrast(1.15) !important;
}

/* Erticaz: enforce the toolbar panel's own colors with !important. The host theme's global
   button styles bled in (dark-navy #023161 button background) while the plugin's navy text
   stayed → unreadable navy-on-navy option cards. Restore the intended design: white cards
   with navy text/icons, and a filled-navy state (white text) on hover/active. */
.turath-a11y-root .turath-a11y-panel { background:#fff !important; color:#04194e !important; }
.turath-a11y-root .turath-a11y-btn,
.turath-a11y-root .turath-a11y-toggle,
.turath-a11y-root .turath-a11y-reset {
    background:#fff !important; color:#04194e !important; border:1px solid #d8dbe6 !important;
}
.turath-a11y-root .turath-a11y-toggle .turath-a11y-icon,
.turath-a11y-root .turath-a11y-toggle__label,
.turath-a11y-root .turath-a11y-btn .turath-a11y-icon { color:#04194e !important; }
.turath-a11y-root .turath-a11y-btn:hover,       .turath-a11y-root .turath-a11y-btn:focus-visible,
.turath-a11y-root .turath-a11y-toggle:hover,    .turath-a11y-root .turath-a11y-toggle:focus-visible,
.turath-a11y-root .turath-a11y-reset:hover,     .turath-a11y-root .turath-a11y-reset:focus-visible,
.turath-a11y-root .turath-a11y-toggle[aria-pressed="true"] {
    background:#04194e !important; color:#fff !important; border-color:#04194e !important;
}
.turath-a11y-root .turath-a11y-toggle:hover .turath-a11y-icon,
.turath-a11y-root .turath-a11y-toggle:hover .turath-a11y-toggle__label,
.turath-a11y-root .turath-a11y-toggle:focus-visible .turath-a11y-icon,
.turath-a11y-root .turath-a11y-toggle:focus-visible .turath-a11y-toggle__label,
.turath-a11y-root .turath-a11y-toggle[aria-pressed="true"] .turath-a11y-icon,
.turath-a11y-root .turath-a11y-toggle[aria-pressed="true"] .turath-a11y-toggle__label { color:#fff !important; }