/* Accessibility — the "skip to content" link and the personal adjustments of
   the accessibility menu (a11y.js). The site itself is built to Israeli
   Standard 5568 / WCAG 2.1 AA; these only add on top. Loaded on every page. */

.sr-only, .a11y-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; inset-inline-start: 8px; z-index: 1000; transform: translateY(-200%);
  background: #0a4f9e; color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { transform: none; outline: 3px solid #ffbf00; }
main:focus { outline: none; }

/* ---- the menu ---- */
.a11y-root { position: relative; z-index: 450; }
.a11y-fab {
  position: fixed; inset-inline-end: 12px; bottom: calc(92px + var(--bottom-nav, 0px) + env(safe-area-inset-bottom));
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; padding: 0;
  background: #0a4f9e; color: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3); z-index: 450;
}
.a11y-fab:hover { background: #083c79; }
.a11y-panel {
  position: fixed; inset-inline-end: 12px; bottom: calc(150px + var(--bottom-nav, 0px) + env(safe-area-inset-bottom));
  width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 170px - var(--bottom-nav, 0px)); overflow: auto;
  background: var(--card, #fff); color: var(--ink, #000); border: 2px solid var(--ink, #000); border-radius: 18px; padding: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3); z-index: 460; font-size: 15px; font-family: var(--font-body, Arial, sans-serif);
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.a11y-head h2 { margin: 0; font-size: 20px; }
.a11y-panel button { font: inherit; color: inherit; }
.a11y-x { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--field-border, #666); background: var(--card, #fff); cursor: pointer; font-size: 18px; }
.a11y-size { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.a11y-size .lbl { flex: 1; font-weight: 700; }
.a11y-size button { min-width: 48px; height: 44px; border-radius: 12px; border: 1.5px solid var(--field-border, #666); background: var(--card, #fff); font-weight: 800; font-size: 17px; cursor: pointer; }
.a11y-size button:disabled { opacity: .45; cursor: default; }
.a11y-size-val { min-width: 48px; text-align: center; font-weight: 700; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px; padding: 8px;
  border: 1.5px solid var(--field-border, #666); border-radius: 14px; background: var(--card, #fff); cursor: pointer; font-weight: 600; text-align: center; line-height: 1.25;
}
.a11y-opt .ic { font-size: 22px; font-weight: 800; }
.a11y-opt[aria-pressed="true"] { background: #0a4f9e; border-color: #0a4f9e; color: #fff; }
.a11y-opt[aria-pressed="true"]::after { content: '✓ פעיל'; font-size: 12px; }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.a11y-reset { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--field-border, #666); background: var(--card, #fff); font-weight: 700; cursor: pointer; }
.a11y-foot a { font-weight: 700; padding: 10px 0; color: var(--link, #0000c8); }
@media print { .a11y-root, .skip-link { display: none !important; } }

/* ---- bigger view ---- */
html.a11y-zoom body { zoom: var(--a11y-zoom, 1); }

/* ---- high contrast: black on white ---- */
html:root.a11y-contrast {
  --ink: #000; --muted: #1a1a1a; --link: #0000c8; --primary: #000; --primary-2: #000; --turq: #000;
  --accent: #000; --accent-2: #000; --coral: #000; --accent-soft: #fff; --primary-soft: #fff;
  --bg: #fff; --bg-2: #fff; --card: #fff; --field: #fff; --glass: #fff; --soft: #f0f0f0;
  --line: #000; --line-strong: #000; --field-border: #000; --focus: #c00000;
  --danger: #a00000; --danger-soft: #fff; --ok: #005a1e; --ok-soft: #fff; --ok-bg: #005a1e;
  --warn-ink: #000; --info: #00008b; --info-soft: #fff; --on-primary: #fff; --on-accent: #fff;
  --grad-primary: #000; --grad-accent: #000; --grad-sea: #000; color-scheme: light;
}
/* ---- inverted: yellow and white on black ---- */
html:root.a11y-invert {
  --ink: #fff; --muted: #fff; --link: #ffff00; --primary: #ffff00; --primary-2: #ffff00; --turq: #ffff00;
  --accent: #ffff00; --accent-2: #ffff00; --coral: #ffff00; --accent-soft: #000; --primary-soft: #000;
  --bg: #000; --bg-2: #000; --card: #000; --field: #000; --glass: #000; --soft: #111;
  --line: #fff; --line-strong: #fff; --field-border: #fff; --focus: #00ffff;
  --danger: #ff8080; --danger-soft: #000; --ok: #7fff7f; --ok-soft: #000; --ok-bg: #000;
  --warn-ink: #ffff00; --info: #7fdfff; --info-soft: #000; --on-primary: #000; --on-accent: #000;
  --grad-primary: #ffff00; --grad-accent: #ffff00; --grad-sea: #ffff00; color-scheme: dark;
}
html.a11y-contrast body, html.a11y-invert body { background: var(--bg) !important; color: var(--ink) !important; }
html.a11y-contrast body *, html.a11y-invert body * { background-image: none !important; text-shadow: none !important; box-shadow: none !important; }
html.a11y-contrast .card, html.a11y-invert .card, html.a11y-contrast .btn, html.a11y-invert .btn { border: 2px solid var(--ink) !important; }
html.a11y-invert .btn:not(.ghost), html.a11y-invert .toast, html.a11y-invert .icard .freeship { color: #000 !important; background: #ffff00 !important; }
html.a11y-invert .btn.ghost { color: #ffff00 !important; background: #000 !important; }
/* A shop's own colours give way to the contrast modes. */
html.a11y-contrast .shop-themed, html.a11y-invert .shop-themed { background: var(--bg) !important; }

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

/* ---- links ---- */
html.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; outline: 2px dashed currentColor; outline-offset: 2px; }

/* ---- headings ---- */
html.a11y-headings :is(h1, h2, h3, h4) { outline: 2px solid var(--focus, #0a4f9e); outline-offset: 3px; border-radius: 4px; }

/* ---- readable font ---- */
html.a11y-font body, html.a11y-font body * { font-family: Arial, 'Segoe UI', Tahoma, sans-serif !important; }
html.a11y-font :is(h1, h2, h3, .brand) { font-weight: 700 !important; }

/* ---- text spacing (the WCAG 1.4.12 values) ---- */
html.a11y-spacing body *:not(.a11y-root *) { line-height: 1.8 !important; letter-spacing: .12em !important; word-spacing: .16em !important; }
html.a11y-spacing main p { margin-bottom: 2em !important; }

/* ---- no motion ---- */
html.a11y-still { scroll-behavior: auto !important; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; }
html.a11y-still ::view-transition-group(*), html.a11y-still ::view-transition-old(*), html.a11y-still ::view-transition-new(*) { animation: none !important; }

/* ---- big cursor ---- */
html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M4 2 L4 36 L13 27 L19 41 L25 38 L19 25 L32 25 Z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* ---- strong keyboard focus ---- */
html.a11y-focus *:focus { outline: 4px solid #ffbf00 !important; outline-offset: 2px !important; box-shadow: 0 0 0 8px #000 !important; }