/* a11y.css -- RDDW-170: the accessibility menu (js/a11y.js) and the display choices it switches.

   Two halves. The first is what each choice does to the page, keyed on a class on <html> that
   js/a11y.js sets before the first paint. The second is the button and the panel, in the
   night-city palette, scoped to #rdd-a11y so no page style reaches into it. No choice ever
   applies to the menu itself: whatever the page looks like, the menu stays readable, so the
   way back is always visible. */

/* ------------------------------------------------------------------ the choices */

/* High contrast: black ground, white text, yellow underlined links, no gradients, glows or
   images behind text. Photos, drawings and the city keep their own colours. */
html.a11y-contrast body,
html.a11y-contrast body *:not(#rdd-a11y):not(#rdd-a11y *):not(svg):not(svg *):not(img):not(video):not(picture):not(source) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.a11y-contrast body *:not(#rdd-a11y *)::before,
html.a11y-contrast body *:not(#rdd-a11y *)::after { background-image: none !important; box-shadow: none !important; text-shadow: none !important; }
html.a11y-contrast a:not(#rdd-a11y *),
html.a11y-contrast a:not(#rdd-a11y *) *:not(svg):not(svg *) {
  color: #ffe14a !important;
  -webkit-text-fill-color: #ffe14a !important;
  text-decoration: underline !important;
}
html.a11y-contrast button:not(#rdd-a11y *),
html.a11y-contrast input:not(#rdd-a11y *),
html.a11y-contrast select:not(#rdd-a11y *),
html.a11y-contrast textarea:not(#rdd-a11y *) { border: 2px solid #fff !important; }
/* the chosen option of a switch (Android / iPhone) keeps a visible mark when backgrounds go black */
html.a11y-contrast input:checked + *:not(#rdd-a11y *) { outline: 3px solid #ffe14a !important; outline-offset: -3px !important; color: #ffe14a !important; -webkit-text-fill-color: #ffe14a !important; }
html.a11y-contrast :not(#rdd-a11y *)::placeholder { color: #cfcfcf !important; -webkit-text-fill-color: #cfcfcf !important; opacity: 1 !important; }

/* Monochrome: the page in greys, the menu in colour. */
html.a11y-mono body > *:not(#rdd-a11y) { filter: grayscale(1) !important; }

/* Highlighted links: every link underlined and framed. */
html.a11y-links a:not(#rdd-a11y *) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px dashed #ffd84a !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* A readable font: one plain sans-serif with Hebrew letters, no display faces, no tracking. */
html.a11y-font body *:not(#rdd-a11y):not(#rdd-a11y *):not(svg *) {
  font-family: Arial, 'Helvetica Neue', Helvetica, 'Rubik', sans-serif !important;
  letter-spacing: normal !important;
}

/* Text spacing, past what WCAG 1.4.12 asks a page to survive. */
html.a11y-spacing body *:not(#rdd-a11y):not(#rdd-a11y *):not(svg *) {
  line-height: 1.75 !important;
  letter-spacing: .06em !important;
  word-spacing: .16em !important;
}

/* A big cursor: a 40px arrow, black with a white edge, over everything. */
html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3l27 14.5-11.5 3L16 33z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

/* A strong focus ring wherever the keyboard is. */
html.a11y-focus *:focus {
  outline: 3px solid #ffd84a !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px rgba(0, 0, 0, .85) !important;
}

/* ------------------------------------------------------------------- the menu */
#rdd-a11y {
  --a11y-bg: #1D1D3A;
  --a11y-bg2: #25254A;
  --a11y-sunk: #101026;
  --a11y-line: #34345E;
  --a11y-text: #F1ECE2;
  --a11y-soft: #BDB7AD;
  --a11y-gold: #FFD84A;
  --a11y-blue: #4B93DE;
  position: fixed;
  z-index: 2147483000;
  inset-inline-start: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--a11y-lift, 0px));
  font-family: 'DM Sans', 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  color: var(--a11y-text);
  -webkit-text-fill-color: currentColor;
  transition: bottom .2s ease;
}
#rdd-a11y[lang="he"] { font-family: 'Rubik', 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
#rdd-a11y *, #rdd-a11y *::before, #rdd-a11y *::after { box-sizing: border-box; }
#rdd-a11y svg { display: block; width: 100%; height: 100%; }
#rdd-a11y button, #rdd-a11y a {
  font: inherit;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
#rdd-a11y button { -webkit-appearance: none; appearance: none; background: none; border: 0; cursor: pointer; }
#rdd-a11y :focus { outline: none; }
#rdd-a11y :focus-visible { outline: 3px solid var(--a11y-gold); outline-offset: 2px; }

/* the button */
#rdd-a11y .a11y-fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 12px;
  border-radius: 50%;
  background: linear-gradient(150deg, #5BA3EC 0%, #3474C8 100%);
  color: #fff;
  box-shadow: 0 3px 0 #23528F, 0 10px 24px rgba(0, 0, 0, .38);
  transition: transform .18s ease, box-shadow .18s ease;
}
#rdd-a11y .a11y-fab:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #23528F, 0 14px 28px rgba(0, 0, 0, .42); }
#rdd-a11y .a11y-fab:active { transform: translateY(1px); box-shadow: 0 1px 0 #23528F, 0 6px 14px rgba(0, 0, 0, .35); }
#rdd-a11y .a11y-fab:focus-visible { outline: 3px solid var(--a11y-gold); outline-offset: 3px; }
/* a gold dot while any choice is on, so it is clear the page is not as it was drawn */
#rdd-a11y .a11y-fab.a11y-on::after {
  content: '';
  position: absolute;
  top: 1px;
  inset-inline-end: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--a11y-gold);
  border: 2.5px solid #1D1D3A;
}

/* the panel */
#rdd-a11y .a11y-panel {
  position: absolute;
  bottom: 66px;
  inset-inline-start: 0;
  width: min(372px, calc(100vw - 32px));
  max-height: min(76vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border-radius: 24px;
  background: var(--a11y-bg);
  border: 1px solid var(--a11y-line);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 22px 50px rgba(0, 0, 0, .5);
  transform-origin: bottom left;
  animation: a11y-in .2s ease-out;
}
#rdd-a11y[dir="rtl"] .a11y-panel { transform-origin: bottom right; }
#rdd-a11y .a11y-panel[hidden] { display: none; }
@keyframes a11y-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #rdd-a11y .a11y-panel { animation: none; } #rdd-a11y .a11y-fab, #rdd-a11y { transition: none; } }
html.motion-off #rdd-a11y .a11y-panel { animation: none; }
html.motion-off #rdd-a11y .a11y-fab, html.motion-off #rdd-a11y { transition: none; }

#rdd-a11y .a11y-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
#rdd-a11y .a11y-badge { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: linear-gradient(150deg, #5BA3EC, #3474C8); color: #fff; }
#rdd-a11y .a11y-title { flex: 1; margin: 0; padding: 0; font: inherit; font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--a11y-text); text-transform: none; letter-spacing: .01em; }
#rdd-a11y .a11y-x { flex: none; width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--a11y-bg2); color: var(--a11y-soft); transition: background .15s, color .15s; }
#rdd-a11y .a11y-x:hover { background: var(--a11y-line); color: var(--a11y-text); }

#rdd-a11y .a11y-size { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; margin: 0 0 10px; border-radius: 16px; background: var(--a11y-sunk); }
#rdd-a11y[dir="rtl"] .a11y-size { padding: 10px 14px 10px 10px; }
#rdd-a11y .a11y-size-l { font-weight: 700; font-size: 14.5px; }
#rdd-a11y .a11y-stepper { display: flex; align-items: center; gap: 6px; }
#rdd-a11y .a11y-step { width: 38px; height: 38px; padding: 10px; border-radius: 12px; background: var(--a11y-bg2); color: var(--a11y-text); transition: background .15s; }
#rdd-a11y .a11y-step:hover:not(:disabled) { background: var(--a11y-line); }
#rdd-a11y .a11y-step:disabled { opacity: .35; cursor: default; }
#rdd-a11y .a11y-size-v { min-width: 52px; text-align: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--a11y-gold); }

#rdd-a11y .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#rdd-a11y .a11y-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 78px;
  padding: 12px;
  border-radius: 16px;
  background: var(--a11y-bg2);
  border: 1.5px solid transparent;
  text-align: start;
  transition: background .15s, border-color .15s;
}
#rdd-a11y .a11y-tile:hover { background: #2C2C56; }
#rdd-a11y .a11y-ti { width: 24px; height: 24px; color: var(--a11y-blue); }
#rdd-a11y .a11y-tl { font-size: 14px; font-weight: 700; line-height: 1.25; }
#rdd-a11y .a11y-tile[aria-pressed="true"] { background: rgba(255, 216, 74, .12); border-color: var(--a11y-gold); }
#rdd-a11y .a11y-tile[aria-pressed="true"] .a11y-ti { color: var(--a11y-gold); }
#rdd-a11y .a11y-check { position: absolute; top: 10px; inset-inline-end: 10px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--a11y-line); }
#rdd-a11y .a11y-tile[aria-pressed="true"] .a11y-check {
  border-color: var(--a11y-gold);
  background: var(--a11y-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%231D1D3A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}

#rdd-a11y .a11y-foot { display: flex; gap: 8px; margin: 12px 0 0; }
#rdd-a11y .a11y-reset, #rdd-a11y .a11y-doc {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}
#rdd-a11y .a11y-reset { background: var(--a11y-bg2); color: var(--a11y-text); }
#rdd-a11y .a11y-reset:hover { background: var(--a11y-line); }
#rdd-a11y .a11y-doc { background: transparent; color: var(--a11y-gold); border: 1.5px solid rgba(255, 216, 74, .45); }
#rdd-a11y .a11y-doc:hover { background: rgba(255, 216, 74, .1); }
#rdd-a11y .a11y-reset svg, #rdd-a11y .a11y-doc svg { flex: none; width: 18px; height: 18px; }
#rdd-a11y .a11y-note { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--a11y-soft); }

@media (max-width: 420px) {
  #rdd-a11y { inset-inline-start: 12px; }
  #rdd-a11y .a11y-fab { width: 50px; height: 50px; padding: 11px; }
  #rdd-a11y .a11y-panel { width: calc(100vw - 24px); bottom: 62px; }
}
@media print { #rdd-a11y { display: none !important; } }