/* ============================================================
accessibility.css — תפריט נגישות (IS 5568 / WCAG 2.1 AA)
============================================================ */
/* כפתור צף */
.a11y-toggle {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 150;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--color-primary, #0F3A8A);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
transition: transform var(--transition-base, 250ms), box-shadow var(--transition-base, 250ms);
}
.a11y-toggle:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.a11y-toggle:focus-visible { outline: 3px solid var(--color-accent, #06B6D4); outline-offset: 3px; }
/* פאנל */
.a11y-panel {
position: fixed;
bottom: 100px;
left: 24px;
z-index: 151;
width: 320px; max-width: calc(100vw - 48px);
max-height: calc(100vh - 140px);
background: #fff;
color: #111827;
border-radius: 16px;
box-shadow: 0 20px 48px rgba(0,0,0,0.25);
display: flex; flex-direction: column;
overflow: hidden;
border: 1px solid #E5E7EB;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
background: var(--color-primary, #0F3A8A);
color: #fff;
}
.a11y-panel-header h2 { margin: 0; font-size: 1.125rem; font-weight: 700; color: #fff; }
.a11y-panel-close {
width: 32px; height: 32px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
transition: background 150ms;
}
.a11y-panel-close:hover { background: rgba(255,255,255,0.15); }
.a11y-panel-body { padding: 16px; overflow-y: auto; }
.a11y-group { border: 0; padding: 0; margin: 0 0 16px; }
.a11y-group legend { font-size: 0.875rem; font-weight: 700; color: #4B5563; margin-bottom: 8px; padding: 0; }
.a11y-group { display: flex; flex-wrap: wrap; gap: 6px; }
.a11y-group legend { flex: 0 0 100%; }
.a11y-group button {
padding: 8px 14px;
border-radius: 8px;
background: #F3F4F6;
color: #111827;
font-size: 0.875rem; font-weight: 600;
transition: all 150ms;
border: 1px solid #E5E7EB;
}
.a11y-group button:hover { background: #E5E7EB; }
.a11y-group button[aria-pressed="true"] {
background: var(--color-primary, #0F3A8A);
color: #fff;
border-color: var(--color-primary, #0F3A8A);
}
.a11y-toggles button { width: 100%; text-align: right; }
.a11y-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #E5E7EB; }
.a11y-reset {
padding: 10px;
border-radius: 8px;
background: #FEF2F2;
color: #991B1B;
font-weight: 600; font-size: 0.875rem;
transition: background 150ms;
}
.a11y-reset:hover { background: #FEE2E2; }
.a11y-statement-link {
text-align: center;
padding: 10px;
color: var(--color-primary, #0F3A8A);
font-weight: 600; font-size: 0.875rem;
text-decoration: underline;
}
/* mobile positioning */
@media (max-width: 480px) {
.a11y-toggle { bottom: 16px; left: 16px; width: 48px; height: 48px; }
.a11y-panel { bottom: 80px; left: 16px; width: calc(100vw - 32px); max-height: calc(100vh - 120px); }
}
/* ============================================================
A11Y MODES — applied as classes on
============================================================ */
/* Font sizes */
html.a11y-font-large { font-size: 112.5%; }
html.a11y-font-xl { font-size: 125%; }
html.a11y-font-xxl { font-size: 140%; }
html.a11y-font-small { font-size: 87.5%; }
/* Line spacing */
html.a11y-line-spaced p,
html.a11y-line-spaced li,
html.a11y-line-spaced .section-subtitle,
html.a11y-line-spaced .testimonial-text { line-height: 2.0 !important; letter-spacing: 0.01em; }
/* High contrast — black/yellow */
html.a11y-high-contrast { background: #000 !important; color: #FFFF00 !important; }
html.a11y-high-contrast body { background: #000 !important; color: #FFFF00 !important; }
html.a11y-high-contrast *,
html.a11y-high-contrast h1, html.a11y-high-contrast h2, html.a11y-high-contrast h3,
html.a11y-high-contrast h4, html.a11y-high-contrast p, html.a11y-high-contrast span,
html.a11y-high-contrast li, html.a11y-high-contrast strong, html.a11y-high-contrast em {
background: #000 !important;
color: #FFFF00 !important;
border-color: #FFFF00 !important;
box-shadow: none !important;
text-shadow: none !important;
}
html.a11y-high-contrast a, html.a11y-high-contrast button { color: #00FFFF !important; }
html.a11y-high-contrast .btn { background: #FFFF00 !important; color: #000 !important; border: 2px solid #FFFF00 !important; }
html.a11y-high-contrast .btn-whatsapp { background: #00FF00 !important; color: #000 !important; }
html.a11y-high-contrast img,
html.a11y-high-contrast svg,
html.a11y-high-contrast .hero-bg { filter: grayscale(1) contrast(1.3); }
/* Invert colors */
html.a11y-invert { filter: invert(1) hue-rotate(180deg); }
html.a11y-invert .a11y-panel,
html.a11y-invert .a11y-toggle { filter: invert(1) hue-rotate(180deg); }
/* Grayscale */
html.a11y-grayscale body { filter: grayscale(1); }
/* Readable font */
html.a11y-readable-font,
html.a11y-readable-font * { font-family: Arial, Tahoma, 'Open Sans', sans-serif !important; letter-spacing: 0.01em; }
/* Highlight links */
html.a11y-highlight-links a:not(.btn) {
text-decoration: underline !important;
background: #FEF3C7 !important;
color: #78350F !important;
padding: 2px 4px;
border-radius: 3px;
}
/* Pause animations */
html.a11y-pause-animations *,
html.a11y-pause-animations *::before,
html.a11y-pause-animations *::after {
animation: none !important;
transition: none !important;
}
html.a11y-pause-animations .reveal { opacity: 1 !important; transform: none !important; }
/* Big cursor */
html.a11y-big-cursor, html.a11y-big-cursor * {
cursor: url("data:image/svg+xml;utf8,") 0 0, auto !important;
}
html.a11y-big-cursor a, html.a11y-big-cursor button {
cursor: url("data:image/svg+xml;utf8,") 16 16, pointer !important;
}