/* TASHNAZ — accessibility menu: the floating button, its panel, and every
   preference it can switch on (classes on <html>, set by assets/js/a11y.js).
   Shared by the main page and the legal pages. */

/* ---------- the button and panel ---------- */
.a11y { --a-bg: #12131a; --a-fg: #ede7dc; --a-line: rgb(237 231 220 / 0.16); --a-accent: #ff8a3d; font-family: "Archivo", "IBM Plex Sans Hebrew", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.3; }
.a11y svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.a11y__fab {
  position: fixed; z-index: 1250;
  inset-inline-start: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 2px solid #0c0d11; border-radius: 50%;
  background: #ede7dc; color: #0c0d11; cursor: pointer;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.45);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.a11y__fab svg { width: 28px; height: 28px; stroke-width: 2; }
.a11y__fab:hover { background: #fff; transform: scale(1.06); }
.a11y__fab[aria-expanded="true"] { background: #ff8a3d; }
.a11y :focus-visible { outline: 3px solid #ff8a3d; outline-offset: 3px; }
.a11y__fab:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px #ff8a3d; }

.a11y__panel {
  position: fixed; z-index: 1250;
  inset-inline-start: max(16px, env(safe-area-inset-left)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px);
  width: min(23rem, calc(100vw - 32px)); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain;
  padding: 16px; border: 1px solid var(--a-line); border-radius: 22px;
  background: var(--a-bg); color: var(--a-fg);
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.6);
  font-size: 1rem; letter-spacing: normal; word-spacing: normal; text-align: start;
}
.a11y__panel[hidden] { display: none; }
.a11y__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.a11y__title { margin: 0; font-size: 1.125rem; font-weight: 700; }
.a11y__close {
  width: 40px; height: 40px; border: 1px solid var(--a-line); border-radius: 50%;
  background: transparent; color: var(--a-fg); font: 400 1.5rem/1 system-ui, sans-serif; cursor: pointer;
}
.a11y__close:hover { background: rgb(237 231 220 / 0.1); }

.a11y__size {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px;
  padding: 8px 8px 8px 14px; margin-bottom: 10px; border: 1px solid var(--a-line); border-radius: 16px;
}
[dir="rtl"] .a11y__size { padding: 8px 14px 8px 8px; }
.a11y__step {
  min-width: 48px; height: 44px; padding: 0 10px; border: 1px solid var(--a-line); border-radius: 12px;
  background: rgb(237 231 220 / 0.06); color: var(--a-fg); font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.a11y__step:hover:not(:disabled) { background: rgb(237 231 220 / 0.14); }
.a11y__step:disabled { opacity: 0.4; cursor: default; }
.a11y__val { min-width: 4ch; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y__opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 76px; padding: 12px;
  border: 1px solid var(--a-line); border-radius: 16px;
  background: rgb(237 231 220 / 0.04); color: var(--a-fg);
  font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; text-align: start; cursor: pointer;
}
.a11y__opt:hover { background: rgb(237 231 220 / 0.1); }
.a11y__opt[aria-pressed="true"] { border-color: var(--a-accent); background: rgb(255 138 61 / 0.18); box-shadow: inset 0 0 0 1px var(--a-accent); }
.a11y__opt[aria-pressed="true"] svg { color: var(--a-accent); }

.a11y__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.a11y__reset {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--a-line); border-radius: 999px;
  background: transparent; color: var(--a-fg); font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1; cursor: pointer;
}
.a11y__reset:hover { background: rgb(237 231 220 / 0.1); }
.a11y__foot a { color: var(--a-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.a11y__foot a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) { .a11y__fab { transition: none; } }
@media (forced-colors: active) {
  .a11y__fab, .a11y__opt, .a11y__step, .a11y__reset, .a11y__close { border: 1px solid ButtonText; }
  .a11y__opt[aria-pressed="true"] { outline: 3px solid Highlight; }
}
@media print { .a11y { display: none; } }

/* ---------- text size (everything is sized in rem) ---------- */
html.a11y-size-1 { font-size: 112.5%; }
html.a11y-size-2 { font-size: 125%; }
html.a11y-size-3 { font-size: 150%; }

/* ---------- high contrast: black, white and yellow, decoration off ---------- */
html.a11y-contrast, html.a11y-contrast body { background: #000 !important; }
html.a11y-contrast body :not(svg, svg *, img, canvas, .a11y, .a11y *, :is(.pm-game, .device, .duck, .cat, .phone) *) {
  background-color: transparent !important; background-image: none !important;
  color: #fff !important; text-shadow: none !important; box-shadow: none !important;
}
html.a11y-contrast body :is(header, footer, nav, dialog, .mobile-menu, .toast, .sheet__inner):not(.a11y *) { background-color: #000 !important; }
html.a11y-contrast body :is(a, a *):not(.a11y *) { color: #ffe14d !important; }
html.a11y-contrast body a:not(.a11y *) { text-decoration: underline !important; }
html.a11y-contrast body :is(button, .btn, input, textarea, select):not(.a11y *, .pm-game *, .device *, .duck, .cat) { border: 2px solid #fff !important; background-color: #000 !important; }
html.a11y-contrast body :is(p, li, dd, dt, span, small, blockquote, label) { opacity: 1 !important; }
html.a11y-contrast :is(.sky, .stars, .ridges, .fireflies, .hero-sun, .nebula, .flow, .grain, .chapter__bgword, .contact__sky, .contact__sun, .cc-visual__neon, .ku-visual__orbit, .pm-float, .flashlight, .retro-fx) { display: none !important; }
html.a11y-contrast .hero__word { color: #fff !important; }

/* ---------- grayscale (the menu itself keeps its colour) ---------- */
html.a11y-gray :is(main, .site-header, .site-footer, .mobile-menu, header.top, footer, dialog, .toasts) { filter: grayscale(1); }

/* ---------- highlight links ---------- */
html.a11y-links :is(a, [role="link"]):not(.a11y *) {
  text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px;
  outline: 2px dashed #ffe14d; outline-offset: 2px;
}

/* ---------- readable font ---------- */
html.a11y-font body :not(svg, svg *, .a11y *) { font-family: Arial, Helvetica, "IBM Plex Sans Hebrew", sans-serif !important; font-style: normal !important; }

/* ---------- text spacing (WCAG 1.4.12 values) ---------- */
html.a11y-spacing body :not(svg, svg *, .a11y, .a11y *, :is(.pm-game, .device) *) {
  line-height: 1.8 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important;
}
html.a11y-spacing body p { margin-bottom: 2em !important; }

/* ---------- stop animations ---------- */
html.a11y-still { scroll-behavior: auto !important; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: 0.01ms !important; transition-delay: 0s !important;
}

/* ---------- large cursor ---------- */
html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l13 8-5.8 1.4L15.5 20l-2.6 1.2-3.3-7.4L5 18z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 10 6, auto !important;
}
html.a11y-cursor :is(a, button, [role="button"], [role="switch"], [role="slider"], label, summary) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l13 8-5.8 1.4L15.5 20l-2.6 1.2-3.3-7.4L5 18z' fill='%23ffe14d' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 10 6, pointer !important;
}

/* ---------- strong focus ---------- */
html.a11y-focus :focus, html.a11y-focus :focus-visible {
  outline: 4px solid #ffe14d !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px #000 !important;
}