/* ==========================================================================
   Redix Digital — Accessibility menu (a11y.js)
   The launcher sits bottom-left, opposite the WhatsApp button. The colour
   modes flatten the design on purpose: a forced palette beats the glass.
   ========================================================================== */

.a11y {
  position: fixed;
  z-index: var(--z-float);
  inset-block-end: max(var(--space-5), env(safe-area-inset-bottom));
  /* the bottom left corner in both languages (WhatsApp keeps the right one) */
  left: max(var(--space-5), env(safe-area-inset-left));
}

.a11y__toggle {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 1px solid rgba(125, 240, 244, 0.45);
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(26, 36, 71, 0.94), rgba(9, 14, 33, 0.96));
  color: var(--accent-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px -8px rgba(0, 0, 0, 0.6),
    0 0 22px -6px rgba(0, 196, 204, 0.45);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.a11y__toggle:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.a11y__toggle:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 3px;
}

.a11y__toggle svg {
  inline-size: 24px;
  block-size: 24px;
}

.a11y__panel {
  position: absolute;
  inset-block-end: calc(100% + 12px);
  left: 0;
  inline-size: min(340px, calc(100vw - 2 * var(--space-5)));
  max-block-size: calc(100vh - 110px);
  overflow: auto;
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(26, 36, 71, 0.97), rgba(9, 14, 33, 0.98));
  box-shadow: var(--elev-3);
}

.a11y__panel[hidden] {
  display: none;
}

.a11y__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.a11y__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text-hi);
}

.a11y__close {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-mid);
  cursor: pointer;
}

.a11y__close svg {
  inline-size: 20px;
  block-size: 20px;
}

.a11y__close:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

.a11y__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.a11y__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-hi);
  font: 600 var(--fs-sm) / 1.3 var(--font-body);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.a11y__btn:hover {
  border-color: rgba(125, 240, 244, 0.4);
}

.a11y__btn:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

.a11y__btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(0, 196, 204, 0.14);
}

.a11y__btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.a11y__btn--wide {
  grid-column: 1 / -1;
  justify-content: center;
}

.a11y__check {
  display: grid;
  margin-inline-start: auto;
  color: var(--accent);
  opacity: 0;
}

.a11y__check svg {
  inline-size: 16px;
  block-size: 16px;
}

.a11y__btn[aria-pressed="true"] .a11y__check {
  opacity: 1;
}

.a11y__status {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.a11y__statement {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  font-size: var(--fs-sm);
  color: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.js) .a11y__toggle,
  html:not(.js) .a11y__btn {
    transition: none;
  }
}

/* ==========================================================================
   The adjustments
   ========================================================================== */

/* The root is exempt from the containing-block rule, so fixed parts stay put */
html.a11y-gray {
  filter: grayscale(100%);
}

html.a11y-contrast body,
html.a11y-contrast body *:not(img):not(svg):not(svg *):not(canvas):not(video) {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html.a11y-contrast a,
html.a11y-contrast a * {
  color: #ff0 !important;
}

html.a11y-negative body,
html.a11y-negative body *:not(img):not(svg):not(svg *):not(canvas):not(video) {
  background: #000 !important;
  color: #ff0 !important;
  border-color: #ff0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html.a11y-light body,
html.a11y-light body *:not(img):not(svg):not(svg *):not(canvas):not(video) {
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html.a11y-light a,
html.a11y-light a * {
  color: #0b3d91 !important;
}

/* The logo and the client marks are white artwork: invert them on white
   (the hue turn keeps the cyan a cyan) */
html.a11y-light img[src*="logo-redix"],
html.a11y-light .client__logo {
  filter: invert(1) hue-rotate(180deg);
}

/* Glows and gradients drawn by pseudo-elements, and purely decorative layers,
   would otherwise keep glowing through a forced palette */
html:is(.a11y-contrast, .a11y-negative, .a11y-light) *::before,
html:is(.a11y-contrast, .a11y-negative, .a11y-light) *::after {
  background-image: none !important;
  box-shadow: none !important;
}

html:is(.a11y-contrast, .a11y-negative, .a11y-light) :is(.grain, .aurora, .cursor, .cursor-trail, .glass-scene__stage, .dust, .pf-tab__shot, .voices__wave, .voice__wave) {
  display: none !important;
}

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

html.a11y-font body,
html.a11y-font body * {
  font-family: Arial, "Arial Hebrew", Helvetica, sans-serif !important;
  letter-spacing: normal !important;
}