/* ==========================================================================
   רכיב נגישות — Accessibility controller
   Built to support ת"י 5568 (Israeli Standard 5568) / WCAG 2.1 AA
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Floating trigger button
   -------------------------------------------------------------------------- */
.a11y-trigger {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-start: 1.25rem;
  z-index: 1400;
  inline-size: 3.4rem;
  block-size: 3.4rem;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: #1F4E9C;           /* recognised Israeli accessibility blue */
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(20, 40, 80, .3);
  transition: transform .3s cubic-bezier(.22,.68,.36,1), box-shadow .3s ease;
  padding: 0;
}
.a11y-trigger:hover { transform: scale(1.07); box-shadow: 0 12px 32px rgba(20, 40, 80, .38); }
.a11y-trigger:focus-visible { outline: 3px solid #1F4E9C; outline-offset: 3px; }
.a11y-trigger svg { inline-size: 1.85rem; block-size: 1.85rem; }

[data-a11y-trigger-host] > .a11y-trigger {
  position: absolute;
}

@media (max-width: 560px) {
  .a11y-trigger { inline-size: 3rem; block-size: 3rem; inset-block-end: 1rem; inset-inline-start: 1rem; }
  .a11y-trigger svg { inline-size: 1.6rem; block-size: 1.6rem; }
}

/* --------------------------------------------------------------------------
   2. Panel
   -------------------------------------------------------------------------- */
.a11y-overlay {
  position: fixed;
  inset: 0;
  z-index: 1450;
  background: rgba(30, 24, 20, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.a11y-overlay.is-open { opacity: 1; visibility: visible; }

.a11y-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1500;
  inline-size: min(23rem, 100vw);
  max-block-size: 100dvh;
  overflow-y: auto;
  background: #FFFFFF;
  color: #1B1B1B;
  box-shadow: 0 0 40px rgba(20, 20, 20, .22);
  transition: transform .34s cubic-bezier(.22,.68,.36,1);
  font-family: "Assistant", "Heebo", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
/* The panel is anchored to the inline-start edge, so "hidden" means sliding
   outwards: to the right in RTL, to the left in LTR. */
html[dir="rtl"] .a11y-panel { transform: translateX(100%); }
html[dir="ltr"] .a11y-panel,
html:not([dir]) .a11y-panel { transform: translateX(-100%); }
.a11y-panel.is-open,
html[dir="rtl"] .a11y-panel.is-open,
html[dir="ltr"] .a11y-panel.is-open { transform: translateX(0); }

.a11y-panel__header {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: #1F4E9C;
  color: #FFFFFF;
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.a11y-panel__title {
  margin: 0;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
}
.a11y-panel__close {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #FFFFFF;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
  transition: background-color .25s ease;
}
.a11y-panel__close:hover { background: rgba(255, 255, 255, .3); }
.a11y-panel__close:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

.a11y-panel__body { padding: 1.1rem 1.25rem 2rem; }

.a11y-group { margin-block-end: 1.5rem; }
.a11y-group__title {
  margin: 0 0 .7rem;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #4A4A4A;
  text-transform: none;
}

.a11y-options { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.a11y-options--single { grid-template-columns: 1fr; }

.a11y-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  inline-size: 100%;
  padding: .7rem .8rem;
  background: #F4F6FA;
  border: 2px solid #DDE3EC;
  border-radius: 12px;
  color: #1B1B1B;
  font-family: inherit;
  font-size: .925rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}
.a11y-btn:hover { background: #E7EDF7; border-color: #B9C7DD; }
.a11y-btn:focus-visible { outline: 3px solid #1F4E9C; outline-offset: 2px; }
.a11y-btn svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; color: #1F4E9C; }
.a11y-btn[aria-pressed="true"] {
  background: #1F4E9C;
  border-color: #1F4E9C;
  color: #FFFFFF;
}
.a11y-btn[aria-pressed="true"] svg { color: #FFFFFF; }

.a11y-btn--reset {
  justify-content: center;
  background: #FFF1F1;
  border-color: #E4B7B7;
  color: #8E2020;
}
.a11y-btn--reset:hover { background: #FBE2E2; border-color: #C98A8A; }
.a11y-btn--reset svg { color: #8E2020; }

.a11y-scale {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.a11y-scale__btn {
  flex: none;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  border-radius: 12px;
  border: 2px solid #DDE3EC;
  background: #F4F6FA;
  color: #1F4E9C;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .22s ease, border-color .22s ease;
}
.a11y-scale__btn:hover:not(:disabled) { background: #E7EDF7; border-color: #B9C7DD; }
.a11y-scale__btn:disabled { opacity: .45; cursor: not-allowed; }
.a11y-scale__btn:focus-visible { outline: 3px solid #1F4E9C; outline-offset: 2px; }
.a11y-scale__value {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: .95rem;
  background: #F4F6FA;
  border: 2px solid #DDE3EC;
  border-radius: 12px;
  padding: .7rem .4rem;
}

.a11y-panel__footer {
  border-block-start: 1px solid #E3E3E3;
  margin-block-start: 1.25rem;
  padding-block-start: 1.1rem;
  font-size: .875rem;
  color: #4A4A4A;
}
.a11y-panel__footer a { color: #1F4E9C; font-weight: 700; }
.a11y-panel__footer p { margin: 0 0 .55rem; max-width: none; }
.a11y-panel__footer kbd {
  font-family: inherit;
  background: #EEF1F6;
  border: 1px solid #CBD4E1;
  border-radius: 5px;
  padding: .05em .4em;
  font-size: .85em;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   3. Accessibility modes applied to <html>
   -------------------------------------------------------------------------- */

/* 3.1 Readable font */
html.a11y-readable-font,
html.a11y-readable-font body {
  --font-body: Arial, "Arial Hebrew", "Helvetica Neue", sans-serif;
  --font-display: Arial, "Arial Hebrew", "Helvetica Neue", sans-serif;
}
html.a11y-readable-font * {
  font-family: Arial, "Arial Hebrew", "Helvetica Neue", sans-serif !important;
  font-weight: 500;
}
html.a11y-readable-font h1,
html.a11y-readable-font h2,
html.a11y-readable-font h3,
html.a11y-readable-font h4,
html.a11y-readable-font strong,
html.a11y-readable-font b,
html.a11y-readable-font .btn { font-weight: 700; }

/* 3.2 Highlight links */
html.a11y-highlight-links a:not(.btn):not(.brand):not(.path-card):not(.method-tile) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: .2em;
  background: #FFF3C4 !important;
  color: #1B1B1B !important;
  box-shadow: 0 0 0 2px #FFF3C4;
  border-radius: 3px;
}
html.a11y-highlight-links .btn,
html.a11y-highlight-links .path-card,
html.a11y-highlight-links .method-tile {
  outline: 3px dashed #1F4E9C !important;
  outline-offset: 3px;
}

/* 3.3 Highlight headings */
html.a11y-highlight-headings h1,
html.a11y-highlight-headings h2,
html.a11y-highlight-headings h3,
html.a11y-highlight-headings h4 {
  background: #E4F0FF !important;
  outline: 2px solid #1F4E9C;
  outline-offset: 2px;
  border-radius: 4px;
  padding-inline: .25em;
}

/* 3.4 Big cursor */
html.a11y-big-cursor,
html.a11y-big-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 4 L8 38 L16.5 30.5 L22 43 L28.5 40 L23 28 L34 28 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-big-cursor a,
html.a11y-big-cursor button,
html.a11y-big-cursor [role="button"],
html.a11y-big-cursor input,
html.a11y-big-cursor select,
html.a11y-big-cursor textarea {
  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='M18 4 a4 4 0 0 1 8 0 v16 h2 a4 4 0 0 1 4 4 v2 l6 3 a5 5 0 0 1 2.5 5 l-1.5 8 a5 5 0 0 1 -5 4 h-12 a6 6 0 0 1 -5 -3 l-7 -11 a4 4 0 0 1 6 -5 l2 2 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 14 3, pointer !important;
}

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

/* 3.6 Monochrome */
html.a11y-monochrome body { filter: grayscale(100%); }

/* 3.7 High contrast (dark) */
html.a11y-contrast-dark body {
  background: #000000 !important;
  color: #FFFFFF !important;
}
html.a11y-contrast-dark body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-trigger):not(.a11y-trigger *) {
  background-color: #000000 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #FFFF00 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Decorative glows live on pseudo-elements, which `*` does not match. */
html.a11y-contrast-dark body *::before,
html.a11y-contrast-dark body *::after {
  background-image: none !important;
  background-color: transparent !important;
  filter: none !important;
  box-shadow: none !important;
}
html.a11y-contrast-dark a:not(.btn):not(.a11y-panel a),
html.a11y-contrast-dark .link-arrow,
html.a11y-contrast-dark .nav__link,
html.a11y-contrast-dark .path-card__cta { color: #FFFF00 !important; }
html.a11y-contrast-dark .btn {
  background: #000000 !important;
  color: #FFFF00 !important;
  border: 2px solid #FFFF00 !important;
}
html.a11y-contrast-dark h1,
html.a11y-contrast-dark h2,
html.a11y-contrast-dark h3,
html.a11y-contrast-dark h4 { color: #FFFFFF !important; }
html.a11y-contrast-dark img,
html.a11y-contrast-dark svg:not(.a11y-panel svg):not(.a11y-trigger svg) { opacity: .82; }
html.a11y-contrast-dark input,
html.a11y-contrast-dark textarea,
html.a11y-contrast-dark select {
  background: #000000 !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFF00 !important;
}
html.a11y-contrast-dark ::placeholder { color: #CFCFCF !important; }

/* 3.8 High contrast (light) */
html.a11y-contrast-light body {
  background: #FFFFFF !important;
  color: #000000 !important;
}
html.a11y-contrast-light body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-trigger):not(.a11y-trigger *) {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}
html.a11y-contrast-light body *::before,
html.a11y-contrast-light body *::after {
  background-image: none !important;
  background-color: transparent !important;
  filter: none !important;
  box-shadow: none !important;
}
html.a11y-contrast-light a:not(.btn):not(.a11y-panel a) { color: #0000CC !important; text-decoration: underline !important; }
html.a11y-contrast-light .btn {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}
html.a11y-contrast-light input,
html.a11y-contrast-light textarea,
html.a11y-contrast-light select {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

/* 3.9 Body scroll lock while the panel is open */
html.a11y-panel-open, html.a11y-panel-open body { overflow: hidden; }

/* 3.10 Print */
@media print {
  .a11y-trigger, .a11y-panel, .a11y-overlay,
  .site-header, .site-footer, .skip-link { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
}