/* Accessibility menu + modes (IS 5568 / WCAG 2.0 AA). Classes are set on <html> by /js/a11y.js (and an inline head script for first paint). */

/* ---------- Floating button + panel ---------- */
.a11y-ui { direction: rtl; font-family: "Heebo", system-ui, Arial, sans-serif; }
/* Trigger: in the header bar, left of «בואו נדבר» (Figma 26:2 nav, node 57:3: 46x49, r27, gradient, 2px white stroke) */
.a11y-fab { flex: none; position: relative; width: 46px; height: 49px; border-radius: 27px; display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff;
  border: 2px solid rgba(255,255,255,0.85); background: linear-gradient(145deg, #3D7EFF, #0A2AA8);
  box-shadow: 0 10px 28px rgba(10,42,168,0.55), 0 0 0 4px rgba(169,196,255,0.0);
  transition: transform .2s var(--ease, ease), background-color .2s, box-shadow .2s var(--ease, ease); }
.a11y-fab svg { width: 39px; height: 40px; }
.a11y-fab:hover { background: linear-gradient(145deg, #5A92FF, #1636C2); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(10,42,168,0.6), 0 0 0 4px rgba(169,196,255,0.25); }
.a11y-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 27px; }
.a11y-fab[aria-expanded="true"] { box-shadow: 0 0 0 4px #A9C4FF, 0 10px 28px rgba(10,42,168,0.55); }
.a11y-fab-float { position: fixed; z-index: 70; left: 16px; top: 16px; }
.a11y-stop .a11y-fab:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .a11y-fab:hover { transform: none; } }

.a11y-panel { position: fixed; z-index: 71; left: 12px; top: calc(var(--nav-h, 80px) + 10px); width: 360px; max-height: calc(100vh - var(--nav-h, 80px) - 22px); max-height: calc(100dvh - var(--nav-h, 80px) - 22px); overflow: auto;
  padding: 20px; border-radius: 24px; color: #F4F7FF; background: rgba(9,12,24,0.94); border: 1px solid rgba(169,196,255,0.28);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.a11y-head h2 { font-size: 20px; font-weight: 700; line-height: 1.3; color: #fff; outline: none !important; background: none !important; }
.a11y-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); }
.a11y-close:hover { background: rgba(255,255,255,0.16); }
.a11y-size { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); font-size: 15px; font-weight: 600; }
.a11y-stepper { display: flex; align-items: center; gap: 6px; }
.a11y-stepper button { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(61,126,255,0.22); border: 1px solid rgba(169,196,255,0.4); }
.a11y-stepper button:hover:not(:disabled) { background: rgba(61,126,255,0.4); }
.a11y-stepper button:disabled { opacity: .4; cursor: not-allowed; }
.a11y-stepper output { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.a11y-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 8px; border-radius: 16px; cursor: pointer;
  color: #E6ECFA; font-size: 14.5px; font-weight: 500; line-height: 1.3; text-align: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); }
.a11y-opt:hover { background: rgba(255,255,255,0.1); }
.a11y-opt[aria-pressed="true"] { background: #2F6BFF; border-color: #A9C4FF; color: #fff; box-shadow: inset 0 0 0 1px #A9C4FF; }
.a11y-opt[aria-pressed="true"]::after { content: "פעיל"; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #fff; color: #0A2AA8; }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
.a11y-reset { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; cursor: pointer; color: #fff; font-size: 14.5px; font-weight: 600; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); }
.a11y-reset:hover { background: rgba(255,255,255,0.16); }
.a11y-statement { color: #A9C4FF; font-size: 14.5px; font-weight: 500; text-underline-offset: 3px; }
.a11y-statement:hover { color: #fff; }
.a11y-ui :focus-visible { outline: 3px solid #A9C4FF; outline-offset: 2px; }
@media (max-width: 600px) {
  .a11y-panel { left: 8px; right: 8px; top: auto; bottom: 8px; transform: none; width: auto; max-height: calc(100dvh - 16px); border-radius: 22px; padding: 16px; }
  .a11y-opt { min-height: 74px; }
}

/* ---------- Cookie banner ---------- */
.ck { position: fixed; z-index: 65; right: 20px; bottom: 20px; width: min(540px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto;
  padding: 20px 22px; border-radius: 24px; color: #F4F7FF; background: rgba(9,12,24,0.95); border: 1px solid rgba(169,196,255,0.28);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); direction: rtl; font-family: "Heebo", system-ui, Arial, sans-serif; }
.ck[hidden] { display: none; }
.ck h2 { font-size: 19px; font-weight: 700; margin-bottom: 8px; outline: none; }
.ck p { font-size: 15px; line-height: 1.7; color: #C9D3EA; }
.ck a { color: #A9C4FF; text-underline-offset: 3px; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ck-actions .btn { flex: 1 1 0; min-width: 120px; }
.ck-main.ck-compact p { display: none; }
.ck-main.ck-compact .ck-actions { display: none; }
.ck-settings { margin-top: 6px; }
.ck-cats { display: flex; flex-direction: column; gap: 8px; list-style: none; }
.ck-cat { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.ck-cat label { font-size: 15.5px; font-weight: 600; color: #fff; }
.ck-cat p { font-size: 13.5px; line-height: 1.55; margin-top: 2px; }
.ck-switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 48px; height: 28px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.45); transition: background-color .2s; }
.ck-switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.ck-switch:checked { background: #2F6BFF; border-color: #A9C4FF; }
.ck-switch:checked::after { transform: translateX(-20px); }
.ck-switch:disabled { cursor: not-allowed; opacity: .75; }
.ck :focus-visible { outline: 3px solid #A9C4FF; outline-offset: 2px; }
@media (max-width: 600px) { .ck { right: 8px; left: 8px; bottom: 8px; width: auto; padding: 16px; border-radius: 20px; } .ck-actions .btn { min-width: 0; } }

/* ---------- Modes ---------- */
/* Readable font: plain sans-serif, more spacing */
.a11y-readable body, .a11y-readable .page *, .a11y-readable .ck *, .a11y-readable .a11y-ui * { font-family: Arial, "Liberation Sans", "Arimo", Helvetica, sans-serif !important; letter-spacing: 0.03em !important; word-spacing: 0.12em !important; }
.a11y-readable .page :is(p, li, dd, dt, label, address, td, th, .cintro, .sec-desc, .hero-sub) { line-height: 1.9 !important; }
.a11y-readable .page :is(h1, h2, h3) { line-height: 1.35 !important; }

/* Text size: scale page content (the menu itself stays put) */
.a11y-text .page { zoom: var(--a11y-zoom, 1); }

/* Stop animations: CSS animations/transitions, background drift, smooth scroll (3D loop is stopped in hero3d.js) */
.a11y-stop, .a11y-stop * { scroll-behavior: auto !important; }
.a11y-stop *, .a11y-stop *::before, .a11y-stop *::after { animation: none !important; transition: none !important; }
.a11y-stop .par { transform: none !important; opacity: 1 !important; }

/* High contrast */
.a11y-contrast, .a11y-contrast body { background: #000 !important; }
.a11y-contrast .bg, .a11y-contrast .guides, .a11y-contrast .laptop-glow { display: none !important; }
.a11y-contrast .page { color: #fff; }
.a11y-contrast .page :is(p, li, span, dd, dt, label, address, small, td, th, h1, h2, h3, h4, .blue) { color: #fff !important; }
.a11y-contrast .page a:not(.btn) { color: #FFE45C !important; text-decoration: underline !important; }
.a11y-contrast .page a:not(.btn) * { color: #FFE45C !important; }
.a11y-contrast .page :is(.glass, .pill, .tag, .pcard, .step, .stat, .form, .field, .nav, .footer, .btn-glass, .legal-card, .mobile-menu, .motion-toggle, .crow) {
  background: #000 !important; border-color: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
.a11y-contrast .page .btn-white { background: #FFE45C !important; color: #000 !important; border: 2px solid #FFE45C !important; }
.a11y-contrast .page .btn-white * { color: #000 !important; }
.a11y-contrast .page .field::placeholder { color: #ddd !important; }
.a11y-contrast mark.ph { background: #FFE45C !important; color: #000 !important; }
.a11y-contrast :focus-visible { outline: 3px solid #FFE45C !important; outline-offset: 3px !important; }

/* Light background mode: a real light colour theme (variables + overrides), NO filters anywhere.
   Media (Anita's avatar, project covers, the 3D laptop canvas, the logo, the hero glass "artwork" cards) are never filtered,
   so they keep their exact original colours, and every text colour below is what axe and users actually see. */
html.a11y-light { --white: #0B0E1A; --text-body: #26314B; --text-muted: #404B66; --text-nav: #1C2640; --blue-light: #1D3FB8;
  --line: rgba(11,14,26,0.12); --glass: rgba(255,255,255,0.86); --glass-border: rgba(11,14,26,0.16); }
.a11y-light, .a11y-light body { background: #F2F5FC !important; }
.a11y-light .bg, .a11y-light .guides { display: none !important; }
.a11y-light .laptop-glow { opacity: .5; }
.a11y-light .page { color: #0B0E1A; }
.a11y-light .page :is(p, li, span, dd, dt, label, address, small, td, th, a, button, legend, div.type-cap, .hex):not(.fcard *, .btn-white, .btn-white *, .num, .nav-a11y, .nav-a11y *, mark) { color: #26314B !important; }
.a11y-light .page :is(h1, h1 span:not(.blue), h2, h3, h4, strong, .h2, .ptitle, .step-name, .footer-brand, .logo, .logo span, .n):not(.fcard *) { color: #0B0E1A !important; }
html.a11y-light .page :is(.blue, .hero-h1 .blue, h1 span.blue, .subhead, .about-hello, .contact-hello, .legal a, .footer-legal a, .linklike):not(.fcard *) { color: #1D3FB8 !important; }
/* surfaces */
.a11y-light .page :is(.nav, .mobile-menu) { background: rgba(242,245,252,0.94) !important; border-color: rgba(11,14,26,0.12) !important; }
.a11y-light .page :is(.glass, .pill, .tag, .pcard, .step, .form, .field, .footer, .btn-glass, .legal-card, .motion-toggle, .crow, .menu-btn, .nav-link.active):not(.fcard *, .fcard) {
  background: #fff !important; border-color: rgba(11,14,26,0.16) !important; box-shadow: 0 6px 20px rgba(11,14,26,0.06) !important; }
.a11y-light .page .field { background: #F7F9FE !important; }
.a11y-light .page .field::placeholder { color: #5A6480 !important; }
.a11y-light .page .ico { color: #1D3FB8 !important; background: rgba(61,126,255,0.10) !important; border-color: rgba(29,63,184,0.3) !important; }
.a11y-light .page .menu-btn span { background: #0B0E1A !important; }
.a11y-light .page .btn-white { background: #0B0E1A !important; color: #fff !important; box-shadow: 0 8px 22px rgba(11,14,26,0.18) !important; }
.a11y-light .page .btn-white * { color: #fff !important; }
.a11y-light .page .steps::before, .a11y-light .page .divider { border-color: rgba(11,14,26,0.18) !important; }
.a11y-light .page :is(.chips .tag:hover, .chips .tag:focus-visible, .step:hover, .step:focus-within, .nav-link:hover, a.crow:hover) {
  border-color: rgba(29,63,184,0.55) !important; box-shadow: 0 0 0 3px rgba(61,126,255,0.14), 0 12px 28px rgba(29,63,184,0.16) !important; }
.a11y-light .page .chips .tag:hover, .a11y-light .page .chips .tag:focus-visible { color: #0B0E1A !important; }
/* hero text can overlap the dark laptop artwork: light halo keeps it readable there */
.a11y-light .page .hero-copy :is(h1, h1 span, p, .n, .t) { text-shadow: 0 0 3px #F2F5FC, 0 0 10px #F2F5FC, 0 0 18px rgba(242,245,252,0.9); }
.a11y-light .page :is(.glass, .pcard, .step, .stat, .form, .nav, .legal-card) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* the avatar, covers, canvas and logo never take a mode filter (light / contrast / any future greyscale) */
html:is(.a11y-light, .a11y-contrast) .page :is(.avatar, .avatar picture, .avatar img, .cover, .cover img, #laptop-canvas, .logo-mark) { filter: none !important; mix-blend-mode: normal !important; }

/* Highlight links */
.a11y-links :is(.page, .ck) a, .a11y-links :is(.page, .ck) .linklike { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important;
  outline: 2px dashed #FFE45C !important; outline-offset: 3px; }
.a11y-links :is(.page, .ck) a:not(.btn) { background-color: rgba(255,228,92,0.12) !important; }

/* Highlight headings */
.a11y-headings .page :is(h1, h2, h3, h4) { outline: 2px solid #A9C4FF !important; outline-offset: 6px; background: rgba(61,126,255,0.14) !important; border-radius: 6px; box-shadow: inset 4px 0 0 #A9C4FF; }

/* Big cursor */
.a11y-cursor, .a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l30 16-13 3.5L18 40z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important; }
.a11y-cursor :is(a, button, label, input[type="checkbox"], [role="switch"], summary), .a11y-cursor :is(a, button, label) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l30 16-13 3.5L18 40z' fill='%233D7EFF' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, pointer !important; }

@media (prefers-reduced-motion: reduce) { .a11y-ui *, .ck * { transition: none !important; } }
.a11y-light mark.ph { background: #FFE45C !important; color: #000 !important; border-color: #8a6d00 !important; }
/* hero glass cards are part of the laptop artwork: keep their original dark palette */
.a11y-light .fcard { --white: #F4F7FF; --text-body: #C9D3EA; --text-muted: #A9B4CC; --text-nav: #DCE4F5; --blue-light: #A9C4FF; --line: rgba(255,255,255,0.08); --glass: rgba(20,24,38,0.62); --glass-border: rgba(255,255,255,0.13); color: #F4F7FF; }