/* ==========================================================================
   Zaso Barrierefreiheit – Frontend Stylesheet
   WCAG 2.1 / BITV 2.0 / EAA compliant accessibility widget
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
    --zab-widget-width: 320px;
    --zab-widget-bg: #ffffff;
    --zab-widget-text: #1a1a1a;
    --zab-widget-border: #e0e0e0;
    --zab-widget-accent: #0073aa;
    --zab-widget-radius: 8px;
    --zab-widget-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    --zab-toggle-size: 56px;
    --zab-transition: 0.3s ease;
    --zab-focus-color: #FF6600;
}

/* --------------------------------------------------------------------------
   Skip Links
   -------------------------------------------------------------------------- */
.zab-skip-links {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100000;
}

.zab-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 12px 24px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    z-index: 100001;
    border-radius: 0 0 4px 0;
}

.zab-skip-link:focus {
    left: 0;
    outline: 3px solid var(--zab-focus-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Toggle Button
   -------------------------------------------------------------------------- */
.zab-toggle-btn-wrap {
    position: fixed;
    bottom: 20px;
    z-index: var(--zab-z-index, 999999);
}

.zab-toggle-btn-wrap[data-position="right"] {
    right: 20px;
}

.zab-toggle-btn-wrap[data-position="left"] {
    left: 20px;
}

.zab-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--zab-toggle-size);
    height: var(--zab-toggle-size);
    border: none;
    border-radius: 50%;
    background: var(--zab-widget-accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    transition: transform var(--zab-transition), box-shadow var(--zab-transition);
    padding: 0;
    line-height: 1;
}

.zab-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.zab-toggle:focus-visible {
    outline: 3px solid var(--zab-focus-color);
    outline-offset: 3px;
}

.zab-toggle .zab-icon {
    width: 28px;
    height: 28px;
}

.zab-toggle .zab-icon svg {
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.zab-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--zab-widget-width);
    max-width: 90vw;
    background: var(--zab-widget-bg);
    color: var(--zab-widget-text);
    box-shadow: var(--zab-widget-shadow);
    z-index: var(--zab-z-index, 999999);
    transform: translateX(100%);
    transition: transform var(--zab-transition);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Isolate from external theme/Elementor typography */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Reset all headings inside the panel to prevent theme/Elementor overrides */
#zab-panel h1,
#zab-panel h2,
#zab-panel h3,
#zab-panel h4,
#zab-panel h5,
#zab-panel h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    color: var(--zab-widget-text) !important;
    word-spacing: normal !important;
    text-indent: 0 !important;
}

#zab-panel h2.zab-panel-title {
    font-size: 18px !important;
    font-weight: 700 !important;
}

#zab-panel h3.zab-module-title {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Reset paragraph/span inside panel */
#zab-panel p,
#zab-panel span,
#zab-panel label,
#zab-panel button {
    font-family: inherit !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-transform: none !important;
}

.zab-panel[data-position="right"] {
    right: 0;
    transform: translateX(100%);
}

.zab-panel[data-position="left"] {
    left: 0;
    transform: translateX(-100%);
}

.zab-panel[aria-hidden="false"] {
    transform: translateX(0);
}

/* Panel Header */
.zab-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--zab-widget-border);
    flex-shrink: 0;
}

.zab-panel-title {
    margin: 0;
    font-size: 18px !important;
    font-weight: 700;
    color: var(--zab-widget-text);
    line-height: 1.3 !important;
    letter-spacing: normal !important;
}

.zab-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: var(--zab-widget-text);
    padding: 0;
}

.zab-panel-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.zab-panel-close:focus-visible {
    outline: 3px solid var(--zab-focus-color);
    outline-offset: 2px;
}

/* Panel Body */
.zab-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
}

/* Panel Footer */
.zab-panel-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--zab-widget-border);
    flex-shrink: 0;
}

.zab-panel-footer .zab-btn {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Module Sections
   -------------------------------------------------------------------------- */
.zab-module {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--zab-widget-border);
}

.zab-module:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.zab-module-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 14px !important;
    font-weight: 600;
    color: var(--zab-widget-text);
    line-height: 1.3 !important;
    letter-spacing: normal !important;
}

.zab-module-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zab-module-info {
    margin: 0;
    font-size: 13px;
    color: #666;
}

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */
.zab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.zab-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.zab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--zab-widget-border);
    border-radius: 6px;
    background: var(--zab-widget-bg);
    color: var(--zab-widget-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--zab-transition), border-color var(--zab-transition);
    line-height: 1.4;
}

.zab-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.zab-btn:focus-visible {
    outline: 3px solid var(--zab-focus-color);
    outline-offset: 2px;
}

.zab-btn[aria-pressed="true"],
.zab-btn.zab-btn-active {
    background: var(--zab-widget-accent);
    color: #fff;
    border-color: var(--zab-widget-accent);
}

.zab-btn-sm {
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 700;
    min-width: 36px;
}

.zab-btn-reset {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    border-color: transparent;
    background: transparent;
}

.zab-btn-reset:hover {
    color: var(--zab-widget-text);
    background: #f0f0f0;
}

/* Contrast grid */
.zab-contrast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   Sliders / Range Controls
   -------------------------------------------------------------------------- */
.zab-slider-group {
    width: 100%;
    margin-bottom: 12px;
}

.zab-slider-group:last-child {
    margin-bottom: 0;
}

.zab-control-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
}

.zab-slider-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.zab-slider-value {
    font-size: 14px;
    font-weight: 600;
    min-width: 50px;
    text-align: center;
}

.zab-range {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 3px;
    outline: none;
}

.zab-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--zab-widget-accent);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.zab-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--zab-widget-accent);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.zab-range:focus-visible {
    outline: 3px solid var(--zab-focus-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Contrast Modes
   -------------------------------------------------------------------------- */
html.zab-high-contrast {
    --zab-bg: #000000;
    --zab-text: #FFFFFF;
    --zab-link: #FFD700;
    --zab-link-visited: #FFA500;
    --zab-border: #FFFFFF;
    --zab-accent: #00FFFF;
}

html.zab-invert {
    filter: invert(1) hue-rotate(180deg);
}

html.zab-invert img,
html.zab-invert video,
html.zab-invert picture,
html.zab-invert [style*="background-image"] {
    filter: invert(1) hue-rotate(180deg);
}

html.zab-monochrome {
    filter: grayscale(1);
}

html.zab-low-vision {
    --zab-bg: #fff8e1;
    --zab-text: #1a1a1a;
    --zab-link: #0d47a1;
    --zab-border: #333;
}

html.zab-dark-mode {
    --zab-bg: #1a1a2e;
    --zab-text: #e0e0e0;
    --zab-link: #4fc3f7;
    --zab-link-visited: #ce93d8;
    --zab-border: #333;
    --zab-accent: #64b5f6;
}

/* Apply contrast variables */
[class*='zab-high-contrast'] body,
[class*='zab-low-vision'] body,
[class*='zab-dark-mode'] body,
[class*='zab-custom-colors'] body {
    background-color: var(--zab-bg) !important;
    color: var(--zab-text) !important;
}

[class*='zab-high-contrast'] a,
[class*='zab-low-vision'] a,
[class*='zab-dark-mode'] a,
[class*='zab-custom-colors'] a {
    color: var(--zab-link) !important;
}

[class*='zab-high-contrast'] *:not(a):not(body):not(script):not(style),
[class*='zab-low-vision'] *:not(a):not(body):not(script):not(style),
[class*='zab-dark-mode'] *:not(a):not(body):not(script):not(style),
[class*='zab-custom-colors'] *:not(a):not(body):not(script):not(style) {
    color: inherit !important;
    background-color: transparent !important;
    border-color: var(--zab-border, currentColor) !important;
}

/* Low vision: bigger, bolder text */
html.zab-low-vision body {
    font-size: 120% !important;
    font-weight: 500 !important;
}

html.zab-low-vision * {
    letter-spacing: 0.02em !important;
}

/* --------------------------------------------------------------------------
   Spacing Mode
   -------------------------------------------------------------------------- */
html.zab-spacing-active * {
    line-height: var(--zab-line-height) !important;
    word-spacing: var(--zab-word-spacing) !important;
    letter-spacing: var(--zab-letter-spacing) !important;
}

/* --------------------------------------------------------------------------
   Animation Control
   -------------------------------------------------------------------------- */
html.zab-no-animations *,
html.zab-no-animations *::before,
html.zab-no-animations *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

html.zab-no-animations video[autoplay] {
    display: none;
}

/* --------------------------------------------------------------------------
   Link Highlighting
   -------------------------------------------------------------------------- */
html.zab-links-underline a[href] {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

html.zab-links-color a[href] {
    color: #0066cc !important;
    font-weight: 600 !important;
}

html.zab-links-border button:not(.zab-btn),
html.zab-links-border [role="button"],
html.zab-links-border input[type="submit"],
html.zab-links-border input[type="button"] {
    outline: 2px solid currentColor !important;
    outline-offset: 2px;
}

html.zab-links-icons a[href^="http"]:not([href*=""])::after,
html.zab-links-icons a[target="_blank"]::after {
    content: " \2197";
    font-size: 0.8em;
    vertical-align: super;
}

/* --------------------------------------------------------------------------
   Reading Guide Overlay Elements
   -------------------------------------------------------------------------- */
.zab-reading-ruler {
    position: fixed;
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    z-index: 999998;
    transition: top 0.05s linear;
}

.zab-reading-mask-top,
.zab-reading-mask-bottom {
    position: fixed;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    z-index: 999998;
    transition: height 0.05s linear, top 0.05s linear;
}

.zab-reading-mask-top {
    top: 0;
}

.zab-reading-mask-bottom {
    bottom: 0;
}

.zab-reading-highlight {
    position: fixed;
    left: 0;
    right: 0;
    height: 30px;
    pointer-events: none;
    z-index: 999998;
}

.zab-reading-magnifier {
    position: fixed;
    width: 200px;
    height: 200px;
    border: 2px solid #333;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    z-index: 999998;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   Dictionary Tooltips
   -------------------------------------------------------------------------- */
.zab-dict-term {
    border-bottom: 2px dotted currentColor;
    cursor: help;
    position: relative;
}

.zab-dict-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 300px;
    width: max-content;
    z-index: 999997;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.zab-dict-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

.zab-dict-term:hover .zab-dict-tooltip,
.zab-dict-term:focus .zab-dict-tooltip {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Touch-target minimum sizes (WCAG 2.5.5 — 44×44px) */
.zab-btn {
    min-height: 44px;
    min-width: 44px;
}

.zab-panel-close {
    min-width: 44px;
    min-height: 44px;
}

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    :root {
        --zab-widget-width: 360px;
    }

    .zab-panel {
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);
    }

    .zab-btn {
        padding: 10px 16px;
        font-size: 14px;
    }

    .zab-btn-sm {
        padding: 6px 12px;
        font-size: 15px;
        min-width: 44px;
    }

    .zab-slider-buttons {
        gap: 16px;
    }

    .zab-range::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    .zab-range::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
}

/* Mobile (≤ 767px) — Bottom sheet layout */
@media (max-width: 767px) {
    :root {
        --zab-widget-width: 100%;
        --zab-toggle-size: 60px;
    }

    /* Panel becomes a bottom sheet */
    .zab-panel {
        width: 100%;
        max-width: 100vw;
        top: auto;
        bottom: 0;
        height: 85vh;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.25);
    }

    .zab-panel[data-position="right"],
    .zab-panel[data-position="left"] {
        right: 0;
        left: 0;
        transform: translateY(100%);
    }

    .zab-panel[aria-hidden="false"] {
        transform: translateY(0);
    }

    /* Drag handle indicator */
    .zab-panel-header::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: #ccc;
        border-radius: 2px;
        margin: 0 auto 12px;
    }

    .zab-panel-header {
        padding: 12px 16px 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .zab-panel-title {
        width: 100%;
        text-align: center;
        font-size: 16px !important;
        order: 1;
    }

    .zab-panel-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
    }

    /* Body: more padding, better scroll */
    .zab-panel-body {
        padding: 12px 16px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Footer safe area */
    .zab-panel-footer {
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    /* Module sections: more breathing room */
    .zab-module {
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    .zab-module-title {
        font-size: 14px !important;
        margin-bottom: 10px;
    }

    /* Buttons: larger touch targets */
    .zab-btn {
        padding: 12px 16px;
        font-size: 15px;
        min-height: 48px;
        border-radius: 10px;
    }

    .zab-btn-sm {
        padding: 10px 14px;
        font-size: 16px;
        font-weight: 700;
        min-width: 48px;
        min-height: 48px;
    }

    /* Contrast grid: stack on very narrow screens handled below */
    .zab-contrast-grid {
        gap: 10px;
    }

    /* Slider controls */
    .zab-slider-group {
        margin-bottom: 16px;
    }

    .zab-slider-buttons {
        gap: 16px;
        margin-bottom: 10px;
    }

    .zab-slider-value {
        font-size: 16px;
        min-width: 60px;
    }

    .zab-range {
        height: 8px;
    }

    .zab-range::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
    }

    .zab-range::-moz-range-thumb {
        width: 28px;
        height: 28px;
    }

    /* Module controls: wrap properly */
    .zab-module-controls {
        gap: 10px;
    }

    /* Toggle button */
    .zab-toggle-btn-wrap {
        bottom: 16px;
        /* Safe area for notch devices */
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .zab-toggle-btn-wrap[data-position="right"] {
        right: 16px;
    }

    .zab-toggle-btn-wrap[data-position="left"] {
        left: 16px;
    }

    .zab-toggle {
        width: var(--zab-toggle-size);
        height: var(--zab-toggle-size);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }

    .zab-toggle .zab-icon {
        width: 32px;
        height: 32px;
    }

    /* Reset button: full width on mobile */
    .zab-btn-reset {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        margin-top: 4px;
    }

    /* Skip links: adapt for mobile */
    .zab-skip-link {
        padding: 14px 20px;
        font-size: 15px;
    }

    /* Reading guide: touch-friendly */
    .zab-reading-magnifier {
        width: 150px;
        height: 150px;
    }

    /* Dictionary tooltips: full-width on mobile */
    .zab-dict-tooltip {
        position: fixed;
        bottom: auto;
        top: auto;
        left: 8px;
        right: 8px;
        transform: none;
        max-width: calc(100vw - 16px);
        width: auto;
        font-size: 14px;
        padding: 12px 16px;
        z-index: 999999;
    }

    .zab-dict-tooltip::after {
        display: none;
    }
}

/* Very small screens (≤ 374px, e.g. iPhone SE) */
@media (max-width: 374px) {
    .zab-panel-body {
        padding: 10px 12px;
    }

    .zab-contrast-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .zab-btn {
        padding: 10px 12px;
        font-size: 14px;
    }

    .zab-panel-title {
        font-size: 15px;
    }

    .zab-module-title {
        font-size: 14px;
    }
}

/* Landscape mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .zab-panel {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .zab-panel-header::before {
        display: none;
    }

    .zab-panel-body {
        padding: 8px 16px;
    }

    .zab-module {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
}

/* Reduced motion: disable panel transition */
@media (prefers-reduced-motion: reduce) {
    .zab-panel {
        transition: none;
    }

    .zab-toggle:hover {
        transform: none;
    }
}

/* High zoom support (≥ 200%) — reflow to single column */
@media (max-width: 320px) {
    .zab-contrast-grid {
        grid-template-columns: 1fr;
    }

    .zab-slider-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .zab-module-controls {
        flex-direction: column;
    }

    .zab-module-controls .zab-btn {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Elementor Pro Compatibility
   -------------------------------------------------------------------------- */

/* Contrast modes: override Elementor's inline styles and CSS variables */
[class*='zab-high-contrast'] .elementor-widget-container,
[class*='zab-low-vision'] .elementor-widget-container,
[class*='zab-dark-mode'] .elementor-widget-container,
[class*='zab-custom-colors'] .elementor-widget-container {
    color: inherit !important;
    background-color: transparent !important;
}

[class*='zab-high-contrast'] .elementor-heading-title,
[class*='zab-high-contrast'] .elementor-widget-text-editor,
[class*='zab-high-contrast'] .elementor-widget-text-editor p,
[class*='zab-high-contrast'] .elementor-tab-title,
[class*='zab-high-contrast'] .elementor-tab-content,
[class*='zab-high-contrast'] .elementor-accordion-title,
[class*='zab-high-contrast'] .elementor-toggle-title,
[class*='zab-low-vision'] .elementor-heading-title,
[class*='zab-low-vision'] .elementor-widget-text-editor,
[class*='zab-low-vision'] .elementor-widget-text-editor p,
[class*='zab-dark-mode'] .elementor-heading-title,
[class*='zab-dark-mode'] .elementor-widget-text-editor,
[class*='zab-dark-mode'] .elementor-widget-text-editor p,
[class*='zab-dark-mode'] .elementor-tab-title,
[class*='zab-dark-mode'] .elementor-tab-content,
[class*='zab-dark-mode'] .elementor-accordion-title,
[class*='zab-dark-mode'] .elementor-toggle-title,
[class*='zab-custom-colors'] .elementor-heading-title,
[class*='zab-custom-colors'] .elementor-widget-text-editor,
[class*='zab-custom-colors'] .elementor-widget-text-editor p {
    color: var(--zab-text) !important;
}

/* Elementor sections/containers background override */
[class*='zab-high-contrast'] .elementor-section,
[class*='zab-high-contrast'] .elementor-element.e-con,
[class*='zab-high-contrast'] .elementor-column-wrap,
[class*='zab-high-contrast'] .elementor-widget-wrap,
[class*='zab-low-vision'] .elementor-section,
[class*='zab-low-vision'] .elementor-element.e-con,
[class*='zab-dark-mode'] .elementor-section,
[class*='zab-dark-mode'] .elementor-element.e-con,
[class*='zab-dark-mode'] .elementor-column-wrap,
[class*='zab-dark-mode'] .elementor-widget-wrap,
[class*='zab-custom-colors'] .elementor-section,
[class*='zab-custom-colors'] .elementor-element.e-con {
    background-color: var(--zab-bg) !important;
    background-image: none !important;
}

/* Elementor section overlays (::before) */
[class*='zab-high-contrast'] .elementor-section::before,
[class*='zab-high-contrast'] .e-con::before,
[class*='zab-dark-mode'] .elementor-section::before,
[class*='zab-dark-mode'] .e-con::before,
[class*='zab-custom-colors'] .elementor-section::before,
[class*='zab-custom-colors'] .e-con::before {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* Elementor buttons */
[class*='zab-high-contrast'] .elementor-button,
[class*='zab-dark-mode'] .elementor-button,
[class*='zab-custom-colors'] .elementor-button {
    border: 2px solid var(--zab-border, currentColor) !important;
}

/* Elementor links inside widgets */
[class*='zab-high-contrast'] .elementor-widget a,
[class*='zab-low-vision'] .elementor-widget a,
[class*='zab-dark-mode'] .elementor-widget a,
[class*='zab-custom-colors'] .elementor-widget a {
    color: var(--zab-link) !important;
}

/* Elementor icons */
[class*='zab-high-contrast'] .elementor-icon i,
[class*='zab-high-contrast'] .elementor-icon svg,
[class*='zab-dark-mode'] .elementor-icon i,
[class*='zab-dark-mode'] .elementor-icon svg {
    color: var(--zab-text) !important;
    fill: var(--zab-text) !important;
}

/* Invert mode: re-invert Elementor background images and sliders */
html.zab-invert .elementor-section[data-settings*="background"],
html.zab-invert .e-con[data-settings*="background"],
html.zab-invert .elementor-background-overlay,
html.zab-invert .elementor-widget-image img,
html.zab-invert .elementor-carousel-image,
html.zab-invert .swiper-slide img {
    filter: invert(1) hue-rotate(180deg);
}

/* Elementor navigation/menu widget */
[class*='zab-high-contrast'] .elementor-nav-menu a,
[class*='zab-dark-mode'] .elementor-nav-menu a {
    color: var(--zab-link) !important;
}

[class*='zab-high-contrast'] .elementor-nav-menu--dropdown,
[class*='zab-dark-mode'] .elementor-nav-menu--dropdown {
    background-color: var(--zab-bg) !important;
    border-color: var(--zab-border) !important;
}

/* Elementor forms */
[class*='zab-high-contrast'] .elementor-field-group input,
[class*='zab-high-contrast'] .elementor-field-group textarea,
[class*='zab-high-contrast'] .elementor-field-group select,
[class*='zab-dark-mode'] .elementor-field-group input,
[class*='zab-dark-mode'] .elementor-field-group textarea,
[class*='zab-dark-mode'] .elementor-field-group select {
    background-color: var(--zab-bg) !important;
    color: var(--zab-text) !important;
    border-color: var(--zab-border) !important;
}

/* Spacing: apply to Elementor text widgets */
html.zab-spacing-active .elementor-widget-text-editor,
html.zab-spacing-active .elementor-widget-text-editor p,
html.zab-spacing-active .elementor-heading-title,
html.zab-spacing-active .elementor-tab-content,
html.zab-spacing-active .elementor-accordion-content {
    line-height: var(--zab-line-height) !important;
    word-spacing: var(--zab-word-spacing) !important;
    letter-spacing: var(--zab-letter-spacing) !important;
}

/* Animation control: Elementor motion effects & entrance animations */
html.zab-no-animations .elementor-widget[data-settings*="animation"],
html.zab-no-animations .elementor-widget[data-settings*="motion"],
html.zab-no-animations .animated,
html.zab-no-animations .elementor-invisible {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

html.zab-no-animations .elementor-widget[data-settings*="entrance_animation"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Elementor carousel/slider: stop auto-rotation */
html.zab-no-animations .swiper-wrapper {
    transition-duration: 0ms !important;
}

/* Elementor popup/modal z-index: ensure widget stays on top */
.zab-panel,
.zab-toggle-btn-wrap {
    z-index: var(--zab-z-index, 999999);
}

/* Link highlighting: Elementor-specific button and link widgets */
html.zab-links-underline .elementor-widget a[href] {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

html.zab-links-color .elementor-widget a[href] {
    color: #0066cc !important;
}

html.zab-links-border .elementor-button,
html.zab-links-border .elementor-widget [role="button"] {
    outline: 2px solid currentColor !important;
    outline-offset: 2px;
}

/* Elementor Header/Footer builder: ensure skip links work */
.zab-skip-links {
    z-index: 100000;
}

/* Elementor responsive breakpoints */
@media (max-width: 1024px) {
    .zab-toggle-btn-wrap {
        z-index: calc(var(--zab-z-index, 999999) + 1);
    }

    /* Elementor stacked columns: ensure contrast override persists */
    [class*='zab-high-contrast'] .elementor-column,
    [class*='zab-dark-mode'] .elementor-column,
    [class*='zab-custom-colors'] .elementor-column {
        background-color: var(--zab-bg) !important;
    }
}

@media (max-width: 767px) {
    /* Elementor mobile menu: ensure overlay works with panel */
    [class*='zab-high-contrast'] .elementor-menu-toggle,
    [class*='zab-dark-mode'] .elementor-menu-toggle {
        color: var(--zab-text) !important;
        border-color: var(--zab-border) !important;
    }

    /* Elementor mobile nav dropdown */
    [class*='zab-high-contrast'] .elementor-nav-menu--dropdown-mobile,
    [class*='zab-dark-mode'] .elementor-nav-menu--dropdown-mobile {
        background-color: var(--zab-bg) !important;
    }
}

/* Elementor Popup: don't apply contrast to our own panel */
.zab-panel,
.zab-panel *,
.zab-toggle-btn-wrap,
.zab-toggle {
    --zab-bg: initial;
    --zab-text: initial;
    --zab-link: initial;
    --zab-border: initial;
}

[class*='zab-high-contrast'] .zab-panel,
[class*='zab-dark-mode'] .zab-panel,
[class*='zab-low-vision'] .zab-panel,
[class*='zab-custom-colors'] .zab-panel {
    background: var(--zab-widget-bg) !important;
    color: var(--zab-widget-text) !important;
}

[class*='zab-high-contrast'] .zab-panel *,
[class*='zab-dark-mode'] .zab-panel *,
[class*='zab-low-vision'] .zab-panel *,
[class*='zab-custom-colors'] .zab-panel * {
    color: inherit !important;
    background-color: transparent !important;
    border-color: var(--zab-widget-border) !important;
}

[class*='zab-high-contrast'] .zab-btn[aria-pressed="true"],
[class*='zab-dark-mode'] .zab-btn[aria-pressed="true"],
[class*='zab-custom-colors'] .zab-btn[aria-pressed="true"] {
    background: var(--zab-widget-accent) !important;
    color: #fff !important;
    border-color: var(--zab-widget-accent) !important;
}

/* Monochrome: exclude our own panel */
html.zab-monochrome .zab-panel,
html.zab-monochrome .zab-toggle {
    filter: none;
}

/* Invert: exclude our own panel */
html.zab-invert .zab-panel,
html.zab-invert .zab-toggle {
    filter: invert(1) hue-rotate(180deg);
}

/* --------------------------------------------------------------------------
   Print – hide widget
   -------------------------------------------------------------------------- */
@media print {
    .zab-toggle-btn-wrap,
    .zab-panel,
    .zab-skip-links,
    .zab-reading-ruler,
    .zab-reading-mask-top,
    .zab-reading-mask-bottom,
    .zab-reading-highlight,
    .zab-reading-magnifier {
        display: none !important;
    }
}