/* Accessibility button and menu (a11y.js), shared by every public page.
   Everything here is scoped to .rdm-a11y or to the data-a11y-* attributes
   on <html>, so it does not touch a page that leaves it out.
   Colours are the site's own: forest #2D5520 / #223F18, sheet #EDEBDD. */

.rdm-a11y {
  --a11y-forest: #2D5520;
  --a11y-deep: #223F18;
  --a11y-ink: #1E2A1B;
  --a11y-sheet: #EDEBDD;
  --a11y-line: #5E7354;
  position: fixed;
  z-index: 2147483000;
  top: calc(100vh - 68px);
  left: 16px;
  font-family: 'Assistant Variable', 'Assistant', system-ui, sans-serif;
  direction: rtl;
  line-height: 1.4;
  /* not affected by the text size option: the menu stays where the hand expects it */
  zoom: 1;
}
.rdm-a11y[data-side="left"] { left: 16px; right: auto; }
.rdm-a11y[data-side="right"] { right: 16px; left: auto; }

.rdm-a11y *,
.rdm-a11y *::before,
.rdm-a11y *::after { box-sizing: border-box; margin: 0; }

.rdm-a11y-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- The round button ---------- */
.rdm-a11y-fab {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--a11y-sheet);
  background: var(--a11y-deep);
  color: #fff;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 0 #152A0E, -4px 8px 16px rgba(46, 44, 24, 0.28);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.rdm-a11y-fab:hover { background: var(--a11y-forest); }
.rdm-a11y-fab:focus-visible {
  outline: 3px solid var(--a11y-deep);
  outline-offset: 3px;
}
.rdm-a11y-fab[aria-expanded="true"] { background: var(--a11y-forest); }
.rdm-a11y.is-dragging .rdm-a11y-fab {
  cursor: grabbing;
  transform: scale(1.06);
  box-shadow: 0 2px 0 #152A0E, -8px 16px 26px rgba(46, 44, 24, 0.34);
}
.rdm-a11y.is-dragging { transition: none; }
.rdm-a11y-fab svg { display: block; pointer-events: none; }

/* ---------- The menu ---------- */
.rdm-a11y-panel {
  position: absolute;
  width: min(292px, calc(100vw - 32px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 12px;
  background: var(--a11y-sheet);
  color: var(--a11y-ink);
  border: 1px solid var(--a11y-line);
  border-radius: 14px;
  box-shadow: 0 4px 0 #C5C1A5, -10px 20px 40px rgba(46, 44, 24, 0.26);
  text-align: start;
}
.rdm-a11y-panel[hidden] { display: none; }
.rdm-a11y[data-side="left"] .rdm-a11y-panel { left: 0; }
.rdm-a11y[data-side="right"] .rdm-a11y-panel { right: 0; }
.rdm-a11y[data-up="true"] .rdm-a11y-panel { bottom: calc(100% + 10px); }
.rdm-a11y[data-up="false"] .rdm-a11y-panel { top: calc(100% + 10px); }

.rdm-a11y-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(45, 85, 32, 0.3);
}
.rdm-a11y-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--a11y-deep);
  letter-spacing: 0;
}
.rdm-a11y-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--a11y-deep);
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.rdm-a11y-close:hover { background: rgba(45, 85, 32, 0.1); }

.rdm-a11y-list { list-style: none; padding: 0; display: grid; gap: 2px; }

.rdm-a11y-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--a11y-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.rdm-a11y-opt:hover { background: rgba(45, 85, 32, 0.08); }

/* A switch that reads as on or off without relying on colour: the knob moves. */
.rdm-a11y-mark {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  border: 2px solid var(--a11y-line);
  background: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.rdm-a11y-mark::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--a11y-line);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.rdm-a11y-opt[aria-pressed="true"] .rdm-a11y-mark { background: var(--a11y-forest); border-color: var(--a11y-forest); }
.rdm-a11y-opt[aria-pressed="true"] .rdm-a11y-mark::after { transform: translateX(-16px); background: #fff; }
.rdm-a11y-label { flex: 1; }

.rdm-a11y-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 4px 8px;
}
.rdm-a11y-text-label { font-size: 16px; font-weight: 600; }
.rdm-a11y-steps { display: inline-flex; align-items: center; gap: 6px; }
.rdm-a11y-step {
  min-width: 44px;
  height: 36px;
  padding: 0 8px;
  border: 1.5px solid var(--a11y-line);
  border-radius: 8px;
  background: #fff;
  color: var(--a11y-deep);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.rdm-a11y-step:hover:not(:disabled) { border-color: var(--a11y-forest); background: #F7F6EE; }
.rdm-a11y-step:disabled { opacity: 0.45; cursor: default; }
.rdm-a11y-level {
  min-width: 3.4em;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rdm-a11y-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(45, 85, 32, 0.3);
}
.rdm-a11y-link {
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--a11y-deep);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rdm-a11y-link:hover { color: var(--a11y-forest); }

.rdm-a11y-panel :focus-visible {
  outline: 3px solid var(--a11y-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

/* The page's own motion switch turns these off too. */
html[data-motion="off"] .rdm-a11y *,
html[data-motion="off"] .rdm-a11y { transition: none !important; animation: none !important; }

/* ------------------------------------------------------------------
   What the options do to the page
------------------------------------------------------------------ */

/* Larger text. The pages size text in px and clamp(), so the whole page
   content is scaled, the way browser zoom does it, and it reflows to the
   width of the screen. The button and its menu stay at their own size. */
html[data-a11y-text="1"] body > :not(.rdm-a11y) { zoom: 1.15; }
html[data-a11y-text="2"] body > :not(.rdm-a11y) { zoom: 1.3; }

/* Higher contrast: secondary greys become the main ink, rules and control
   borders darken, text on the forest green becomes white. These are the
   tokens of the home page, the Vero page and the legal pages. */
html[data-a11y-contrast] {
  --ink: #0B1209;
  --ink-soft: #0B1209;
  --muted: #0B1209;
  --hint: #16210F;
  --green: #16210F;
  --green-deep: #0B1209;
  --forest: #1F3D15;
  --forest-deep: #16300F;
  --light-sage: #FFFFFF;
  --on-forest: #FFFFFF;
  --rule: rgba(11, 18, 9, 0.7);
  --rule-soft: rgba(11, 18, 9, 0.45);
  --line: #5E7354;
  --ui-line: #0B1209;
}

/* Underlined links. */
html[data-a11y-links] a:not(.rdm-a11y a) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

@media print {
  .rdm-a11y { display: none !important; }
}