/* Accessibility (נגישות) — widget UI + user preference modes.
   Loaded on every page, after the page stylesheet. */

/* ================================================================
   Accessibility (נגישות) — widget + user preference modes
   ================================================================ */

/* -- text scaling: rem/clamp values across the page follow this -- */
html{font-size:calc(100% * var(--a11y-scale, 1));}
body{font-size:calc(18px * var(--a11y-scale, 1));}

/* -- skip link -- */
.skip-link{
  position:absolute;
  inset-inline-start:0;
  top:0;
  z-index:200;
  transform:translateY(-120%);
  background:var(--ink);
  color:var(--paper);
  padding:0.8rem 1.4rem;
  font-weight:700;
  text-decoration:none;
  border-radius:0 0 3px 3px;
}
.skip-link:focus{
  transform:translateY(0);
  outline:3px solid var(--accent);
  outline-offset:-3px;
}

/* -- visible focus everywhere (keyboard navigation) -- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}
.hero a:focus-visible,
.cta-final a:focus-visible{
  outline-color:#FFDD00;
}

/* ---------- Widget shell ---------- */
.a11y-root{
  position:fixed;
  left:1rem;
  bottom:1rem;
  z-index:300;
  font-family:'Assistant', sans-serif;
}
.a11y-toggle{
  width:3.2rem;
  height:3.2rem;
  border-radius:50%;
  border:2px solid #FFFFFF;
  background:var(--accent);
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(18,42,72,0.35);
  transition:transform 0.15s ease, background 0.15s ease;
  padding:0;
}
.a11y-toggle:hover,
.a11y-toggle:focus-visible{
  transform:scale(1.06);
  background:var(--accent-soft);
}
.a11y-toggle svg{width:1.9rem; height:1.9rem;}

.a11y-panel{
  position:absolute;
  bottom:calc(100% + 0.7rem);
  left:0;
  width:min(21rem, calc(100vw - 2rem));
  max-height:min(80vh, 34rem);
  overflow-y:auto;
  background:var(--paper);
  border:1px solid var(--ink);
  border-radius:3px;
  box-shadow:0 10px 34px rgba(18,42,72,0.28);
  padding:1.1rem;
  display:none;
}
.a11y-panel[data-open="true"]{display:block;}
.a11y-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.8rem;
  border-bottom:1px solid var(--rule);
  padding-bottom:0.7rem;
  margin-bottom:0.9rem;
}
.a11y-panel-head h2{
  font-size:1.1rem;
  font-family:'Rubik', sans-serif;
  font-weight:700;
  margin:0;
}
.a11y-close{
  background:none;
  border:1px solid var(--rule);
  border-radius:2px;
  width:2rem;
  height:2rem;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  color:var(--ink);
  flex:0 0 auto;
}
.a11y-close:hover{background:var(--paper-dim);}

.a11y-group{margin-bottom:1rem;}
.a11y-group-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  text-transform:uppercase;
  margin:0 0 0.5rem;
}
.a11y-size-row{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.a11y-size-row button{
  flex:1 1 0;
  background:#FFFFFF;
  border:1px solid var(--ink);
  border-radius:2px;
  padding:0.55rem 0.4rem;
  font-family:'Assistant', sans-serif;
  font-size:0.95rem;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
}
.a11y-size-row button:hover{background:var(--paper-dim);}
.a11y-size-val{
  flex:0 0 3.6rem;
  text-align:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem;
  color:var(--ink-soft);
}

.a11y-opts{
  display:grid;
  gap:0.4rem;
}
.a11y-opt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.7rem;
  width:100%;
  text-align:start;
  background:#FFFFFF;
  border:1px solid var(--rule);
  border-radius:2px;
  padding:0.6rem 0.75rem;
  font-family:'Assistant', sans-serif;
  font-size:0.97rem;
  color:var(--ink);
  cursor:pointer;
}
.a11y-opt:hover{border-color:var(--ink);}
.a11y-opt .state{
  flex:0 0 auto;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:var(--ink-soft);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:0.1rem 0.4rem;
}
.a11y-opt[aria-pressed="true"]{
  background:var(--accent);
  border-color:var(--accent);
  color:#FFFFFF;
  font-weight:700;
}
.a11y-opt[aria-pressed="true"] .state{
  color:#FFFFFF;
  border-color:rgba(255,255,255,0.6);
}
.a11y-reset{
  width:100%;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:2px;
  padding:0.6rem;
  font-family:'Assistant', sans-serif;
  font-weight:700;
  font-size:0.95rem;
  cursor:pointer;
}
.a11y-statement{
  display:block;
  margin-top:0.8rem;
  font-size:0.9rem;
  text-align:center;
  color:var(--accent);
}

/* ---------- Mode: high contrast ---------- */
html.a11y-contrast{
  --paper:#000000;
  --paper-dim:#000000;
  --ink:#FFFFFF;
  --ink-soft:#FFFFFF;
  --navy:#000000;
  --navy-deep:#000000;
  --line:#FFFFFF;
  --line-dim:#FFFFFF;
  --rule:#FFFFFF;
  --accent:#FFDD00;
  --accent-soft:#FFDD00;
}
html.a11y-contrast body,
html.a11y-contrast section,
html.a11y-contrast .sheet,
html.a11y-contrast .sheets,
html.a11y-contrast .hero,
html.a11y-contrast .cta-final,
html.a11y-contrast .section-alt,
html.a11y-contrast .format-card,
html.a11y-contrast .contact-card,
html.a11y-contrast header.site,
html.a11y-contrast footer{
  background:#000000 !important;
  color:#FFFFFF !important;
}
html.a11y-contrast h1,
html.a11y-contrast h2,
html.a11y-contrast h3,
html.a11y-contrast p,
html.a11y-contrast li,
html.a11y-contrast span,
html.a11y-contrast em,
html.a11y-contrast strong,
html.a11y-contrast b,
html.a11y-contrast div{
  color:#FFFFFF !important;
}
html.a11y-contrast a:not(.btn-primary):not(.a11y-statement){color:#FFDD00 !important;}
html.a11y-contrast .btn-primary{
  background:#FFDD00 !important;
  color:#000000 !important;
  border:2px solid #FFDD00 !important;
}
html.a11y-contrast .header-cta{
  color:#FFDD00 !important;
  border-color:#FFDD00 !important;
}
html.a11y-contrast .header-cta:hover,
html.a11y-contrast .header-cta:focus-visible{
  background:#FFDD00 !important;
  color:#000000 !important;
}
html.a11y-contrast .hero-grid{opacity:0.12 !important;}
html.a11y-contrast .contact-card,
html.a11y-contrast .format-card,
html.a11y-contrast .negatives li{border-color:#FFFFFF !important;}
html.a11y-contrast img{border:1px solid #FFFFFF;}

/* widget keeps its own readable palette in contrast mode */
html.a11y-contrast .a11y-panel{background:#000000 !important; border-color:#FFFFFF !important;}
html.a11y-contrast .a11y-opt,
html.a11y-contrast .a11y-size-row button{
  background:#000000 !important;
  color:#FFFFFF !important;
  border-color:#FFFFFF !important;
}
html.a11y-contrast .a11y-opt[aria-pressed="true"]{
  background:#FFDD00 !important;
  color:#000000 !important;
}
html.a11y-contrast .a11y-opt[aria-pressed="true"] .state{color:#000000 !important; border-color:#000000 !important;}
html.a11y-contrast .a11y-toggle{background:#FFDD00 !important; color:#000000 !important; border-color:#FFFFFF !important;}
html.a11y-contrast .a11y-reset{background:#FFDD00 !important; color:#000000 !important;}
html.a11y-contrast .a11y-statement{color:#FFDD00 !important;}

/* ---------- Mode: grayscale ---------- */
html.a11y-grayscale body > *:not(.a11y-root){filter:grayscale(1);}

/* ---------- Mode: highlight links ---------- */
html.a11y-links a:not(.a11y-opt):not(.a11y-statement){
  text-decoration:underline !important;
  text-underline-offset:3px;
  outline:2px dashed currentColor;
  outline-offset:3px;
}

/* ---------- Mode: readable font ---------- */
html.a11y-readfont body,
html.a11y-readfont h1,
html.a11y-readfont h2,
html.a11y-readfont h3,
html.a11y-readfont p,
html.a11y-readfont a,
html.a11y-readfont span,
html.a11y-readfont li,
html.a11y-readfont button,
html.a11y-readfont .display,
html.a11y-readfont .mono{
  font-family:Arial, Helvetica, sans-serif !important;
  letter-spacing:normal !important;
}

/* ---------- Mode: increased spacing ---------- */
html.a11y-spacing body{line-height:2 !important; letter-spacing:0.03em !important;}
html.a11y-spacing p,
html.a11y-spacing li,
html.a11y-spacing .prose{line-height:2 !important; word-spacing:0.16em !important;}
html.a11y-spacing h1,
html.a11y-spacing h2,
html.a11y-spacing h3{line-height:1.4 !important;}

/* ---------- Mode: stop animations ---------- */
html.a11y-noanim *{
  animation:none !important;
  transition:none !important;
}
html.a11y-noanim{scroll-behavior:auto !important;}
html.a11y-noanim .draw-line{stroke-dashoffset:0 !important;}

/* ---------- Mode: large cursor ---------- */
html.a11y-bigcursor,
html.a11y-bigcursor *{
  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 2 L8 38 L17 29 L23 44 L30 41 L24 26 L37 26 Z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 4 2, auto !important;
}

@media print{
  .a11y-root, .skip-link{display:none !important;}
}