/*
 * Accessibility menu — shared by the relocation site and the eSIM storefront.
 *
 * The accessibility statement (clause 3.9) promises a menu offering text
 * enlargement, higher contrast, highlighted links and stopped animations. This
 * file is that promise; a11y.js builds the control and toggles these classes on
 * <html>. It is loaded by both sites so one fix serves both.
 *
 * The menu must itself meet the standard it serves: 44px targets, a visible
 * focus ring, labels read by screen readers, and nothing conveyed by colour
 * alone — every toggle states on/off in text as well as appearance.
 */

.a11y-toggle {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  z-index: 9000;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background: #14233c;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.55);
  padding: 0;
}
.a11y-toggle:hover { background: #1b2a4a; }
.a11y-toggle svg { width: 1.6rem; height: 1.6rem; display: block; }

.a11y-panel {
  position: fixed;
  inset-block-end: 4.75rem;
  inset-inline-start: 1rem;
  z-index: 9001;
  width: min(20rem, calc(100vw - 2rem));
  background: #ffffff;
  color: #1b2330;
  border: 1px solid #8a857b;
  border-radius: 0.85rem;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  padding: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}
.a11y-panel h2 { font-size: 1.05rem; margin: 0 0 0.75rem; font-weight: 700; }
.a11y-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

.a11y-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #8a857b;
  border-radius: 0.6rem;
  background: #ffffff;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.a11y-item:hover { background: #f6f4f0; }
.a11y-state { font-size: 0.85rem; font-weight: 600; color: #5c6472; white-space: nowrap; }
.a11y-item[aria-pressed="true"] { border-color: #14233c; border-width: 2px; background: #eef2f8; }
.a11y-item[aria-pressed="true"] .a11y-state { color: #14233c; }
.a11y-reset {
  margin-top: 0.6rem;
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid #8a857b;
  border-radius: 0.6rem;
  background: #ffffff;
  font: inherit;
  cursor: pointer;
}
.a11y-reset:hover { background: #f6f4f0; }
.a11y-note { margin: 0.6rem 0 0; font-size: 0.85rem; color: #5c6472; }
.a11y-note a { color: inherit; }

.a11y-toggle:focus-visible,
.a11y-item:focus-visible,
.a11y-reset:focus-visible { outline: 3px solid #14233c; outline-offset: 2px; }

/* ---------- what the toggles do ---------- */

/* Text size: rem-based layouts grow with the root, which is why the sites were
   written in rem in the first place. */
html.a11y-text-110 { font-size: 110%; }
html.a11y-text-125 { font-size: 125%; }
html.a11y-text-150 { font-size: 150%; }

/* Higher contrast: both sites paint their body text from the same three tokens,
   so raising THOSE lifts every light-background surface at once. Forcing a
   colour on elements instead was tried and reverted — it turned the footer and
   the cross-sell band, which are white on navy by design, into black on navy at
   1.2:1. A contrast mode that creates failures is worse than none, so the rule
   touches tokens, never elements. Verified with axe-core in both states. */
html.a11y-contrast {
  --ink: #000000;
  --muted: #2b3240;        /* 12.4:1 on white, was 5c6472 at 6.1:1 */
  --border: #000000;
  --border-strong: #000000;
}
html.a11y-contrast input,
html.a11y-contrast select,
html.a11y-contrast textarea { border-color: #000000; }

/* Highlighted links: underlined and outlined, so a link is never identified by
   colour alone. */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 0.2em; }
html.a11y-links main a,
html.a11y-links footer a { outline: 1px dashed currentColor; outline-offset: 2px; }

/* Stopped animation: the same switch the operating system's reduce-motion
   setting throws, offered to someone whose device does not have it set. */
html.a11y-nomotion, html.a11y-nomotion * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

@media print {
  .a11y-toggle, .a11y-panel { display: none !important; }
}