/* ============================================================
   Accessibility Preferences Toolbar
   נגישות — סרגל העדפות
   Self-contained, no dependencies. RTL-first.
   ============================================================ */

/* Floating trigger button */
.a11y-fab {
    position: fixed;
    /* 🔴 This file has no media query at all, so a flat 1.25rem put the 52px
       accessibility button on top of the fixed bottom-nav on every phone — an
       a11y control covering a navigation control. --bottom-nav-safe is 0 on
       desktop, so the desktop position is unchanged. */
    inset-block-end: calc(var(--bottom-nav-safe) + 1.25rem);
    inset-inline-start: 1.25rem;
    z-index: 9998;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #1e40af;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 0;
}

.a11y-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.a11y-fab:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}

/* Backdrop */
.a11y-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.a11y-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Panel */
.a11y-panel {
    position: fixed;
    inset-block-end: 5.5rem;
    inset-inline-start: 1.25rem;
    z-index: 9999;
    width: 320px;
    max-width: calc(100vw - 2.5rem);
    background: #ffffff;
    color: #1f2937;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    padding: 1.25rem;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    font-family: 'Heebo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

.a11y-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.a11y-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.a11y-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #1f2937;
}

.a11y-panel-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.a11y-panel-close:hover { color: #111827; background: #f3f4f6; }
.a11y-panel-close:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }

/* Option groups */
.a11y-group {
    margin-bottom: 1rem;
}

.a11y-group-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

/* Segmented button row (font-size) */
.a11y-segment {
    display: flex;
    gap: 0.25rem;
    background: #f3f4f6;
    padding: 0.25rem;
    border-radius: 8px;
}

.a11y-segment button {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    font-weight: 500;
}

.a11y-segment button[aria-pressed="true"] {
    background: #1e40af;
    color: #ffffff;
}

.a11y-segment button:hover:not([aria-pressed="true"]) {
    background: #e5e7eb;
}

.a11y-segment button:focus-visible {
    outline: 2px solid #1e40af;
    outline-offset: -2px;
}

/* Toggle switches */
.a11y-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    cursor: pointer;
}

.a11y-toggle-label {
    font-size: 0.95rem;
    color: #1f2937;
}

.a11y-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 40px;
    height: 22px;
    background: #d1d5db;
    border-radius: 22px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0;
    flex-shrink: 0;
}

.a11y-toggle input[type="checkbox"]::after {
    content: "";
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: inset-inline-start 0.2s;
}

.a11y-toggle input[type="checkbox"]:checked {
    background: #1e40af;
}

.a11y-toggle input[type="checkbox"]:checked::after {
    inset-inline-start: 20px;
}

.a11y-toggle input[type="checkbox"]:focus-visible {
    outline: 2px solid #1e40af;
    outline-offset: 2px;
}

/* Reset button */
.a11y-reset {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
}

.a11y-reset:hover { background: #e5e7eb; }
.a11y-reset:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }

.a11y-statement-link {
    display: block;
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #1e40af;
    text-decoration: none;
}

.a11y-statement-link:hover { text-decoration: underline; }

/* =====================================================
   User preferences — applied to <html data-a11y-*>
   ===================================================== */

/* Font size */
html[data-a11y-font="large"]    { font-size: 112.5%; }
html[data-a11y-font="xlarge"]   { font-size: 125%; }
html[data-a11y-font="xxlarge"]  { font-size: 137.5%; }

/* High contrast mode — dark palette, all combinations WCAG AAA (7:1+).
   Softer than pure black/yellow to avoid "shock" while still AAA-compliant. */
html[data-a11y-contrast="high"] {
    background-color: #0f172a !important;   /* slate-900 */
    color: #f1f5f9 !important;               /* slate-100 — 15.8:1 on bg */
}

html[data-a11y-contrast="high"] body,
html[data-a11y-contrast="high"] main,
html[data-a11y-contrast="high"] header,
html[data-a11y-contrast="high"] footer,
html[data-a11y-contrast="high"] section,
html[data-a11y-contrast="high"] nav,
html[data-a11y-contrast="high"] aside {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    background-image: none !important;
}

/* Cards + elevated surfaces — slightly lighter to preserve hierarchy */
html[data-a11y-contrast="high"] .card,
html[data-a11y-contrast="high"] .widget,
html[data-a11y-contrast="high"] .alert,
html[data-a11y-contrast="high"] .modal-content,
html[data-a11y-contrast="high"] .dropdown-menu,
html[data-a11y-contrast="high"] .offcanvas,
html[data-a11y-contrast="high"] table,
html[data-a11y-contrast="high"] .table {
    background-color: #1e293b !important;   /* slate-800 */
    color: #f1f5f9 !important;
    background-image: none !important;
    border-color: #475569 !important;
}

html[data-a11y-contrast="high"] .card-header,
html[data-a11y-contrast="high"] .table thead th {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    background-image: none !important;
    border-color: #475569 !important;
}

/* Text — all variants read as white */
html[data-a11y-contrast="high"] h1,
html[data-a11y-contrast="high"] h2,
html[data-a11y-contrast="high"] h3,
html[data-a11y-contrast="high"] h4,
html[data-a11y-contrast="high"] h5,
html[data-a11y-contrast="high"] h6,
html[data-a11y-contrast="high"] .text-muted,
html[data-a11y-contrast="high"] .text-white,
html[data-a11y-contrast="high"] .text-primary,
html[data-a11y-contrast="high"] .text-success,
html[data-a11y-contrast="high"] .text-danger,
html[data-a11y-contrast="high"] .text-info,
html[data-a11y-contrast="high"] .text-warning {
    color: #f1f5f9 !important;
    text-shadow: none !important;
}

/* Links — blue-300 passes 9.5:1 on slate-900 */
html[data-a11y-contrast="high"] a:not(.btn):not(.a11y-fab) {
    color: #93c5fd !important;
    text-decoration: underline !important;
}

html[data-a11y-contrast="high"] a:not(.btn):not(.a11y-fab):hover {
    color: #dbeafe !important;
}

/* Primary buttons — blue-500 solid, keeps brand cue + WCAG AA */
html[data-a11y-contrast="high"] .btn-primary,
html[data-a11y-contrast="high"] .btn-success,
html[data-a11y-contrast="high"] .btn-danger,
html[data-a11y-contrast="high"] .btn-warning,
html[data-a11y-contrast="high"] .btn-info {
    background: #3b82f6 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #60a5fa !important;
}

html[data-a11y-contrast="high"] .btn-outline-primary,
html[data-a11y-contrast="high"] .btn-outline-secondary,
html[data-a11y-contrast="high"] .btn-outline-light,
html[data-a11y-contrast="high"] .btn-secondary,
html[data-a11y-contrast="high"] .btn-light {
    background: transparent !important;
    background-image: none !important;
    color: #f1f5f9 !important;
    border: 1px solid #94a3b8 !important;
}

html[data-a11y-contrast="high"] .btn:hover {
    filter: brightness(1.15);
}

/* Form controls */
html[data-a11y-contrast="high"] input,
html[data-a11y-contrast="high"] textarea,
html[data-a11y-contrast="high"] select,
html[data-a11y-contrast="high"] .form-control,
html[data-a11y-contrast="high"] .form-select {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #94a3b8 !important;
}

html[data-a11y-contrast="high"] input::placeholder,
html[data-a11y-contrast="high"] textarea::placeholder {
    color: #cbd5e1 !important;
}

/* Badges / pills — readable on dark */
html[data-a11y-contrast="high"] .badge {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #94a3b8 !important;
    background-image: none !important;
}

/* Focus ring — visible amber on dark */
html[data-a11y-contrast="high"] *:focus-visible {
    outline: 3px solid #fbbf24 !important;
    outline-offset: 2px !important;
}

/* The toolbar itself — preserve its own light surface so controls are clear */
html[data-a11y-contrast="high"] .a11y-panel {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #94a3b8;
}

html[data-a11y-contrast="high"] .a11y-panel-title,
html[data-a11y-contrast="high"] .a11y-toggle-label,
html[data-a11y-contrast="high"] .a11y-group-label {
    color: #f1f5f9 !important;
}

html[data-a11y-contrast="high"] .a11y-segment {
    background-color: #0f172a !important;
}

html[data-a11y-contrast="high"] .a11y-segment button {
    color: #f1f5f9 !important;
}

html[data-a11y-contrast="high"] .a11y-segment button[aria-pressed="true"] {
    background-color: #3b82f6 !important;
}

html[data-a11y-contrast="high"] .a11y-reset {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

/* Highlight links */
html[data-a11y-links="highlight"] a:not(.btn):not(.a11y-fab):not(.a11y-statement-link) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    text-decoration: underline !important;
    font-weight: 700;
}

/* Reduce motion */
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* When panel is hidden from first render (no-flash) */
.a11y-panel[hidden] { display: none !important; }