/* ===========================================================
   Liel Leon Design — Accessibility layer
   נגישות גלובלית · WCAG 2.2 AA · ת"י 5568
   Works on every device, browser, language and platform.
   =========================================================== */

/* -----------------------------------------------------------
   1. Base accessibility primitives (always on)
   ----------------------------------------------------------- */

/* Skip link — bypass blocks (WCAG 2.4.1) */
.skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: 12px;
  z-index: 10001;
  background: #FFFFFF;
  color: #A8154E;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 0 0 14px 14px;
  border: 2px solid #A8154E;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: inset-block-start .2s ease;
}
.skip-link:focus { inset-block-start: 0; }

/* Screen-reader-only text */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible focus for every interactive element (WCAG 2.4.7 / 2.4.13) */
:focus-visible {
  outline: 3px solid #A8154E;
  outline-offset: 3px;
  border-radius: 6px;
}
/* Browsers without :focus-visible still get an outline */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, textarea:focus,
  select:focus, summary:focus, [tabindex]:focus {
    outline: 3px solid #A8154E;
    outline-offset: 3px;
  }
}
/* Focus must stay visible against dark surfaces */
.site-footer :focus-visible,
.a11y-btn:focus-visible {
  outline-color: #FFD1E4;
}

/* Focus not obscured by the sticky header (WCAG 2.4.11) */
html { scroll-padding-top: 96px; }

/* Minimum target size 24×24 (WCAG 2.5.8) */
.footer-col a { min-height: 26px; }
.lang-toggle button { min-width: 40px; min-height: 32px; }

/* Honour the operating-system reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Marquee pause control (WCAG 2.2.2 — pause, stop, hide) */
.marquee { position: relative; }
.marquee-pause {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  color: #A8154E;
  border: 1.5px solid #FFC2DC;
  box-shadow: 0 4px 14px rgba(168, 21, 78, .18);
  opacity: 0;
  transition: opacity .25s ease;
}
.marquee:hover .marquee-pause,
.marquee:focus-within .marquee-pause,
.marquee-pause:focus-visible { opacity: 1; }
.marquee-pause svg { width: 15px; height: 15px; }
.marquee.is-paused .marquee-track { animation-play-state: paused !important; }
.marquee.is-paused .marquee-pause { opacity: 1; }

/* -----------------------------------------------------------
   2. Floating launcher button
   ----------------------------------------------------------- */
.a11y-launcher {
  position: fixed;
  right: 16px;                     /* anchored to the right in HE and EN alike */
  top: 50%;
  transform: translateY(-50%);
  z-index: 9998;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #D6246A, #A8154E);
  color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(168, 21, 78, .38);
  border: 2px solid rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
.a11y-launcher:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 14px 34px rgba(168, 21, 78, .48); }
.a11y-launcher:active { transform: translateY(-50%) scale(.96); }
.a11y-launcher svg { width: 32px; height: 32px; }
.a11y-launcher[aria-expanded="true"] { box-shadow: 0 0 0 4px rgba(214, 36, 106, .28), 0 14px 34px rgba(168, 21, 78, .4); }

@media (max-width: 640px) {
  .a11y-launcher { width: 50px; height: 50px; right: 10px; }
  .a11y-launcher svg { width: 28px; height: 28px; }
}
@media print { .a11y-launcher, .a11y-panel, .marquee-pause, .a11y-guide { display: none !important; } }

/* -----------------------------------------------------------
   3. Panel
   ----------------------------------------------------------- */
.a11y-panel {
  position: fixed;
  right: 84px;                     /* sits beside the launcher, never covers it */
  top: 50%;
  transform: translateY(-50%) scale(.96);
  z-index: 9999;
  width: min(340px, calc(100vw - 100px));
  max-height: min(86vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #FFFFFF;
  color: #3A1A28;
  border: 1px solid #FFD9E8;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(74, 34, 51, .30);
  padding: 18px;
  font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  /* no visibility transition — the panel must be focusable the instant it opens */
  transition: opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.a11y-panel.open { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }

.a11y-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #FFE5F0;
  margin-bottom: 14px;
}
.a11y-panel-head h2 {
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  color: #3A1A28;
  flex: 1;
  line-height: 1.3;
}
.a11y-panel-head .a11y-std {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: #7A4F62;
  letter-spacing: .2px;
  margin-top: 3px;
}
.a11y-close {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #FFE5F0;
  color: #A8154E;
  cursor: pointer;
  transition: background .2s ease;
}
.a11y-close:hover { background: #FFC2DC; }
.a11y-close svg { width: 17px; height: 17px; }

.a11y-group { margin-bottom: 14px; }
.a11y-group-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #7A4F62;
  margin: 0 0 8px;
}

/* text-size stepper */
.a11y-stepper {
  display: flex; align-items: center; gap: 10px;
  direction: ltr;                  /* − value + reads the same in HE and EN */
  background: #FFF6FA;
  border: 1.5px solid #FFE5F0;
  border-radius: 16px;
  padding: 8px 10px;
}
.a11y-stepper button {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1.5px solid #FFC2DC;
  color: #A8154E;
  font-size: 20px; font-weight: 800; line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.a11y-stepper button:hover { background: #FFE5F0; }
.a11y-stepper button:active { transform: scale(.94); }
.a11y-stepper button[disabled] { opacity: .4; cursor: not-allowed; }
.a11y-stepper .a11y-stepper-val {
  flex: 1; text-align: center;
  font-weight: 800; font-size: 14px; color: #3A1A28;
}
.a11y-stepper .a11y-stepper-val small { display: block; font-size: 11px; font-weight: 600; color: #7A4F62; }

/* toggle grid */
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  min-height: 76px;
  padding: 12px 8px;
  border-radius: 16px;
  background: #FFF6FA;
  border: 1.5px solid #FFE5F0;
  color: #3A1A28;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.a11y-btn:hover { background: #FFE5F0; border-color: #FFC2DC; }
.a11y-btn:active { transform: scale(.97); }
.a11y-btn svg { width: 22px; height: 22px; flex: none; color: #A8154E; }
.a11y-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, #D6246A, #A8154E);
  border-color: #A8154E;
  color: #FFFFFF;
}
.a11y-btn[aria-pressed="true"] svg { color: #FFFFFF; }

.a11y-panel-foot {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid #FFE5F0;
}
.a11y-reset {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #D6246A, #A8154E);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px; font-weight: 800;
  cursor: pointer;
  display: grid; place-items: center;
}
.a11y-statement {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #A8154E;
  text-decoration: underline;
  padding: 8px;
  min-height: 26px;
}
.a11y-hint {
  font-size: 11.5px;
  color: #7A4F62;
  text-align: center;
  line-height: 1.5;
}
.a11y-hint kbd {
  font-family: inherit; font-weight: 800;
  background: #FFE5F0; color: #A8154E;
  border-radius: 5px; padding: 1px 5px;
}

@media (max-width: 640px) {
  .a11y-panel {
    right: 8px; left: 8px;
    width: auto;
    top: auto;
    bottom: 8px;
    transform: translateY(14px);
    max-height: 82vh;
  }
  .a11y-panel.open { transform: translateY(0); }
  /* on small screens the sheet covers the launcher — hide it while open */
  .a11y-launcher[aria-expanded="true"] { opacity: 0; pointer-events: none; }
}

/* -----------------------------------------------------------
   4. User-activated accessibility modes
   ----------------------------------------------------------- */

/* 4.1 Text size — every font-size in site.css is multiplied by --a11y-fs */

/* 4.2 Text spacing (WCAG 1.4.12) */
html.a11y-spacing body,
html.a11y-spacing body :where(p, li, span, a, h1, h2, h3, h4, h5, b, small, label, button) {
  line-height: 1.9 !important;
  letter-spacing: .07em !important;
  word-spacing: .16em !important;
}
html.a11y-spacing p { margin-bottom: .8em !important; }

/* 4.3 Readable font */
html.a11y-readable body,
html.a11y-readable body * {
  font-family: Arial, "Heebo", "Segoe UI", system-ui, sans-serif !important;
  font-style: normal !important;
}
html.a11y-readable .script-en,
html.a11y-readable .kicker { letter-spacing: .3px !important; }

/* 4.4 Highlight links (WCAG 1.4.1 — colour is not the only cue) */
html.a11y-links a,
html.a11y-links button:not(.a11y-btn):not(.a11y-close):not(.a11y-reset):not(.a11y-launcher) {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  outline: 2px dashed currentColor !important;
  outline-offset: 2px !important;
}
html.a11y-links .a11y-panel a { outline-color: #A8154E !important; }

/* 4.5 Highlight headings */
html.a11y-headings :where(h1, h2, h3, h4, h5) {
  outline: 2px solid #A8154E !important;
  outline-offset: 4px !important;
  background: #FFF0F6 !important;
  border-radius: 4px;
}

/* 4.6 High contrast (dark) */
html.a11y-contrast body,
html.a11y-contrast .section,
html.a11y-contrast .section.alt,
html.a11y-contrast .hero,
html.a11y-contrast .page-hero,
html.a11y-contrast .site-header,
html.a11y-contrast .site-footer,
html.a11y-contrast .contact-card,
html.a11y-contrast .cat-card,
html.a11y-contrast .feature,
html.a11y-contrast .mini,
html.a11y-contrast .tmt,
html.a11y-contrast .faq-item,
html.a11y-contrast .showcase-media,
html.a11y-contrast .contact-method,
html.a11y-contrast .cookie-bar,
html.a11y-contrast .marquee-track .chip,
html.a11y-contrast .step .n,
html.a11y-contrast .hero-card,
html.a11y-contrast .lang-toggle,
html.a11y-contrast .field input,
html.a11y-contrast .field textarea {
  background: #000000 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
html.a11y-contrast :where(h1, h2, h3, h4, h5, p, span, b, strong, li, small, label, div, summary, button, td, th) {
  color: #FFFFFF !important;
}
html.a11y-contrast a,
html.a11y-contrast a :where(span, b) { color: #FFE81F !important; text-decoration: underline !important; }
html.a11y-contrast .btn,
html.a11y-contrast .btn-ghost,
html.a11y-contrast .cat-card.cta-card,
html.a11y-contrast .lang-toggle button.on {
  background: #FFE81F !important;
  background-image: none !important;
  color: #000000 !important;
  border: 2px solid #FFFFFF !important;
}
html.a11y-contrast .btn :where(span, b), html.a11y-contrast .cta-card :where(h3, p, span) { color: #000000 !important; }
html.a11y-contrast .btn svg, html.a11y-contrast .cta-icon { color: #000000 !important; stroke: #000000 !important; }
html.a11y-contrast :where(.cat-card, .feature, .mini, .tmt, .faq-item, .contact-method, .cookie-bar, .marquee-track .chip, .field input, .field textarea) {
  border: 2px solid #FFFFFF !important;
}
html.a11y-contrast .blob,
html.a11y-contrast .hero h1 .accent::after { display: none !important; }
html.a11y-contrast .kicker { color: #FFE81F !important; }
html.a11y-contrast img { filter: grayscale(.15) contrast(1.1); }
html.a11y-contrast :focus-visible { outline-color: #FFE81F !important; }

/* 4.7 Inverted colours */
html.a11y-invert body { filter: invert(1) hue-rotate(180deg); background: #FFFFFF; }
html.a11y-invert body img,
html.a11y-invert body video { filter: invert(1) hue-rotate(180deg); }

/* 4.8 Grayscale */
html.a11y-grayscale body { filter: grayscale(1); }
html.a11y-invert.a11y-grayscale body { filter: invert(1) grayscale(1); }

/* 4.9 Big cursor — inline SVG, no external asset, works offline */
html.a11y-bigcursor,
html.a11y-bigcursor body,
html.a11y-bigcursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 32 32'%3E%3Cpath d='M6 2l0 24 5.5-5.5 4 9 4.5-2-4-8.5 8 0z' fill='%23ffffff' stroke='%23000000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}
html.a11y-bigcursor :where(a, button, summary, [role="button"], input, textarea, label, select) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 32 32'%3E%3Cpath d='M11 4a2.4 2.4 0 014.8 0v9h1V9.5a2.4 2.4 0 014.8 0V13h1v-1.5a2.4 2.4 0 014.8 0V21a8 8 0 01-8 8h-3a8 8 0 01-8-8v-6.5a2.3 2.3 0 014.6 0V4z' fill='%23ffffff' stroke='%23000000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 10 2, pointer !important;
}

/* 4.10 Stop animations */
html.a11y-nomotion *,
html.a11y-nomotion *::before,
html.a11y-nomotion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.a11y-nomotion .reveal { opacity: 1 !important; transform: none !important; }

/* 4.11 Keyboard-navigation mode — permanent, high-visibility focus ring */
html.a11y-keyboard :where(a, button, summary, input, textarea, select, [tabindex]):focus {
  outline: 4px solid #A8154E !important;
  outline-offset: 3px !important;
  background: #FFF0F6 !important;
  border-radius: 6px;
}
html.a11y-keyboard.a11y-contrast :where(a, button, summary, input, textarea, select, [tabindex]):focus {
  outline-color: #FFE81F !important;
  background: #333300 !important;
}

/* 4.12 Reading guide */
.a11y-guide {
  position: fixed;
  inset-inline: 0;
  height: 16px;
  z-index: 9997;
  pointer-events: none;
  background: rgba(168, 21, 78, .22);
  border-top: 2px solid #A8154E;
  border-bottom: 2px solid #A8154E;
  display: none;
}
html.a11y-guide-on .a11y-guide { display: block; }

/* The widget follows high contrast instead of being washed out by it */
html.a11y-contrast .a11y-panel {
  background: #000000 !important;
  border-color: #FFE81F !important;
  color: #FFFFFF !important;
}
html.a11y-contrast .a11y-panel :where(h2, p, span, small, div) { color: #FFFFFF !important; }
html.a11y-contrast .a11y-panel .a11y-std,
html.a11y-contrast .a11y-panel .a11y-group-title,
html.a11y-contrast .a11y-panel .a11y-hint { color: #FFE81F !important; }
html.a11y-contrast .a11y-btn,
html.a11y-contrast .a11y-stepper,
html.a11y-contrast .a11y-stepper button,
html.a11y-contrast .a11y-close {
  background: #000000 !important;
  background-image: none !important;
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
}
html.a11y-contrast .a11y-btn svg,
html.a11y-contrast .a11y-stepper button,
html.a11y-contrast .a11y-close { color: #FFE81F !important; }
html.a11y-contrast .a11y-btn[aria-pressed="true"],
html.a11y-contrast .a11y-reset,
html.a11y-contrast .a11y-launcher {
  background: #FFE81F !important;
  background-image: none !important;
  border-color: #FFFFFF !important;
  color: #000000 !important;
}
html.a11y-contrast .a11y-btn[aria-pressed="true"] :where(span, svg),
html.a11y-contrast .a11y-launcher svg { color: #000000 !important; }
html.a11y-contrast .a11y-statement { color: #FFE81F !important; }
html.a11y-contrast .a11y-hint kbd { background: #FFE81F !important; color: #000000 !important; }
html.a11y-contrast .marquee-pause { background: #000000 !important; color: #FFE81F !important; border-color: #FFFFFF !important; }
html.a11y-contrast .skip-link { background: #000000 !important; color: #FFE81F !important; border-color: #FFE81F !important; }

/* The panel itself always stays legible, whatever mode is active */
html.a11y-invert .a11y-panel,
html.a11y-invert .a11y-launcher { filter: invert(1) hue-rotate(180deg); }
html.a11y-grayscale .a11y-panel,
html.a11y-grayscale .a11y-launcher { filter: none; }
.a11y-panel, .a11y-launcher { --a11y-fs: 1; }

/* Forced-colours mode (Windows High Contrast) */
@media (forced-colors: active) {
  .a11y-launcher, .a11y-btn, .a11y-reset, .a11y-close { forced-color-adjust: none; border: 1px solid ButtonText; }
  .skip-link { border: 2px solid ButtonText; }
}