/* Elect Data Solutions accessibility toolkit.
   Classes are set on <html> by a11y.js; the panel UI is plain CSS so it works on any page. */

:root { --a11y-scale: 100%; }
/* The hidden attribute must win over utility display classes (e.g. Tailwind .grid). */
[hidden] { display: none !important; }
html { font-size: var(--a11y-scale); }
/* At large sizes, long words and email addresses must wrap instead of forcing sideways scrolling. */
html.a11y-large body * { overflow-wrap: anywhere; min-width: 0; }
html.a11y-large h1, html.a11y-large h2, html.a11y-large h3 { hyphens: auto; }
/* On phones, display headings are capped to the viewport so words don't break mid-word;
   they stay larger than their 100% size while body text keeps scaling to 200%. */
@media (max-width: 640px) {
  html.a11y-large main h1 { font-size: 13vw !important; }
  html.a11y-large main h2 { font-size: 10vw !important; }
}
/* At 150%+ text, sticky/fixed headers would eat the viewport (WCAG 1.4.10), so let them scroll away. */
html.a11y-large [data-a11y-sticky] { position: relative !important; top: auto !important; }
/* Let header rows wrap instead of spilling sideways at large text sizes. */
html.a11y-large [data-a11y-sticky] > div, html.a11y-large [data-a11y-sticky] > div > div { flex-wrap: wrap; }
html.a11y-large [data-a11y-sticky] > .rounded-full { border-radius: 1.5rem; }

/* ---------- Color filters ---------- */
html.a11y-invert { filter: invert(1) hue-rotate(180deg); background: #fff; }
html.a11y-invert img, html.a11y-invert video, html.a11y-invert picture { filter: invert(1) hue-rotate(180deg); }
html.a11y-gray { filter: grayscale(1); }
html.a11y-invert.a11y-gray { filter: invert(1) hue-rotate(180deg) grayscale(1); }
/* Keep the toolkit itself un-inverted so it always looks the same. */
html.a11y-invert .a11y-panel, html.a11y-invert .a11y-launch { filter: invert(1) hue-rotate(180deg); }

/* ---------- High contrast ---------- */
html.a11y-contrast, html.a11y-contrast body { background: #000 !important; }
html.a11y-contrast body *:not(svg):not(svg *):not(img) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: currentColor !important;
  border-color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html.a11y-contrast body a, html.a11y-contrast body a * { color: #ffef5a !important; text-decoration: underline !important; }
html.a11y-contrast body button, html.a11y-contrast body input, html.a11y-contrast body select,
html.a11y-contrast body textarea, html.a11y-contrast body .btn { border: 2px solid #fff !important; }
html.a11y-contrast [data-decor] { display: none !important; }
/* Logos are dark artwork on transparent PNGs, so their tiles stay white. */
html.a11y-contrast body .logo-tile.logo-tile { background-color: #fff !important; }
html.a11y-contrast svg { color: currentColor; }
html.a11y-contrast :focus-visible { outline: 3px solid #ffef5a !important; outline-offset: 3px !important; }
html.a11y-contrast .a11y-switch[aria-checked="true"] .a11y-switch-track { background: #ffef5a !important; }

/* ---------- Links, font, spacing, motion ---------- */
html.a11y-links body a:not(.a11y-skip) {
  text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important;
  background-color: #ffef5a !important; color: #000 !important; -webkit-text-fill-color: #000 !important;
}
html.a11y-links body a * { color: #000 !important; -webkit-text-fill-color: #000 !important; }

html.a11y-font body, html.a11y-font body *:not(svg):not(svg *) {
  font-family: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif !important;
}

/* WCAG 1.4.12 text-spacing values */
html.a11y-spacing body *:not(svg):not(svg *) {
  line-height: 1.6 !important; letter-spacing: .12em !important; word-spacing: .16em !important;
}
html.a11y-spacing body p { margin-bottom: 2em !important; }

html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Panel UI ---------- */
.a11y-launch {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3.25rem; padding: 0 1.1rem 0 .9rem; border-radius: 999px;
  background: #0071BC; color: #fff; border: 2px solid #fff;
  font: 600 1rem/1 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.a11y-launch:hover { background: #005086; }
.a11y-launch svg { width: 1.6rem; height: 1.6rem; }
.a11y-launch:focus-visible, .a11y-panel :focus-visible { outline: 3px solid #1B1825; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
@media (max-width: 480px) { .a11y-launch-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .a11y-launch { padding: 0; width: 3.25rem; justify-content: center; } }

.a11y-panel {
  position: fixed; right: 1rem; bottom: 5rem; z-index: 91;
  width: min(23rem, calc(100vw - 2rem)); max-height: calc(100vh - 6.5rem); overflow: auto;
  background: #fff; color: #1B1825; border: 1px solid #C9D3DE; border-radius: 1.25rem;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .3);
  font: 400 1rem/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; background: #005086; color: #fff; border-radius: 1.2rem 1.2rem 0 0; position: sticky; top: 0; }
.a11y-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.a11y-head h2:focus { outline: none; }
.a11y-close { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .6); border-radius: .6rem; width: 2.5rem; height: 2.5rem; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.a11y-close:focus-visible { outline-color: #fff !important; box-shadow: none !important; }
.a11y-body { padding: 1rem 1.1rem 1.1rem; display: grid; gap: 1rem; }
.a11y-label { font-weight: 700; font-size: .95rem; margin: 0 0 .5rem; }
.a11y-size { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; }
.a11y-size button { width: 3rem; height: 3rem; border-radius: .75rem; border: 2px solid #0071BC; background: #fff; color: #0071BC; font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.a11y-size button:hover:not(:disabled) { background: #EEF5FB; }
.a11y-size button:disabled { border-color: #7B7981; color: #5E5C66; cursor: not-allowed; opacity: .6; }
.a11y-size output { text-align: center; font-weight: 700; font-size: 1.1rem; }
.a11y-switches { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.a11y-switch {
  width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem;
  padding: .7rem .8rem; border: 1px solid #C9D3DE; border-radius: .8rem; background: #fff; color: #1B1825;
  text-align: left; font: inherit; cursor: pointer;
}
.a11y-switch:hover { background: #F4F8FC; }
.a11y-switch[aria-checked="true"] { border-color: #0071BC; background: #EEF5FB; }
.a11y-switch-name { display: block; font-weight: 600; }
.a11y-switch-desc { display: block; font-size: .85rem; color: #5E5C66; }
.a11y-switch-state { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 700; color: #5E5C66; }
.a11y-switch[aria-checked="true"] .a11y-switch-state { color: #005086; }
.a11y-switch-track { position: relative; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: #7B7981; flex: none; }
.a11y-switch-track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; transition: transform .15s; }
.a11y-switch[aria-checked="true"] .a11y-switch-track { background: #0071BC; }
.a11y-switch[aria-checked="true"] .a11y-switch-track::after { transform: translateX(1.1rem); }
.a11y-reset { width: 100%; min-height: 3rem; border-radius: .8rem; border: 2px solid #1B1825; background: #fff; color: #1B1825; font: inherit; font-weight: 700; cursor: pointer; }
.a11y-reset:hover { background: #F4F8FC; }
.a11y-note { margin: 0; font-size: .85rem; color: #5E5C66; }
.a11y-note a { color: #0071BC; }