/* ==========================================================================
   a11y by ShaferTech — accessibility widget
   Themed for Bay Vista PM (monochrome charcoal / white palette).
   Self-contained: depends only on the site tokens --c1..--c5, --serif, --sans
   (declared in each page's :root) plus the locals defined below.
   ========================================================================== */
:root {
  --a11y-t: 0.3s;
  --a11y-tf: 0.15s;
  --a11y-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --a11y-line: 1.6;
  --a11y-letter: normal;
  --a11y-tint: #edeef0;   /* light neutral surface used across the site */
  --a11y-tint2: #e2e4e7;  /* slightly deeper neutral for active icon chips */
}

/* Root text scaling driven by the widget (mirrors the site's 16px base) */
html { font-size: calc(100% * var(--a11y-scale, 1)); }
body { font-size: 1rem; }

/* ---------- Floating launch button ---------- */
.a11y-fab {
  position: fixed;
  right: clamp(0.85rem, 2vw, 1.5rem);
  bottom: clamp(0.85rem, 2vw, 1.5rem);
  z-index: 9995;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(248, 249, 250, 0.85);
  background: var(--c5);
  color: var(--c1);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--a11y-t) var(--a11y-ease), box-shadow var(--a11y-t) var(--a11y-ease), background var(--a11y-t) var(--a11y-ease);
}
.a11y-fab:hover { transform: scale(1.06); background: var(--c4); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42); }
.a11y-fab:active { transform: scale(0.98); }
.a11y-fab svg { width: 30px; height: 30px; }

/* ---------- Backdrop ---------- */
.a11y-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9996;
  background: rgba(33, 37, 41, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--a11y-t) var(--a11y-ease), visibility var(--a11y-t);
}
.a11y-backdrop.open { opacity: 1; visibility: visible; }

/* ---------- Panel ---------- */
.a11y-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 9997;
  width: min(420px, 100vw);
  background: #fff;
  color: var(--c5);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--a11y-t) var(--a11y-ease);
  font-family: var(--sans);
}
.a11y-panel.open { transform: translateX(0); }
.a11y-panel * { letter-spacing: normal; }

.a11y-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(150deg, var(--c4), var(--c5));
  color: #fff;
}
.a11y-head .a11y-mark {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.12);
  display: grid; place-items: center;
}
.a11y-head .a11y-mark svg { width: 24px; height: 24px; color: var(--c1); }
.a11y-head h2 { color: #fff; font-family: var(--serif); font-size: 1.12rem; margin: 0; line-height: 1.1; letter-spacing: -0.01em; }
.a11y-head p { color: rgba(248, 249, 250, 0.6); font-size: 0.78rem; margin: 2px 0 0; }
.a11y-close {
  margin-left: auto;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
}
.a11y-close:hover { background: rgba(255, 255, 255, 0.18); }
.a11y-close svg { width: 22px; height: 22px; }

.a11y-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.25rem 1.5rem; }
.a11y-body::-webkit-scrollbar { width: 10px; }
.a11y-body::-webkit-scrollbar-thumb { background: var(--c2); border-radius: 10px; border: 3px solid #fff; }

.a11y-group { margin-bottom: 1.4rem; }
.a11y-group > h3 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c3);
  margin-bottom: 0.7rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.a11y-group > h3::after { content: ""; flex: 1; height: 1px; background: var(--c2); }

/* ---------- Profile buttons ---------- */
.a11y-profiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
.a11y-profile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  padding: 0.7rem 0.8rem;
  border-radius: 4px;
  border: 1.5px solid var(--c2);
  background: #fff;
  text-align: left;
  color: var(--c4);
  cursor: pointer;
  transition: border-color var(--a11y-tf) var(--a11y-ease), background var(--a11y-tf) var(--a11y-ease), transform var(--a11y-tf) var(--a11y-ease);
}
.a11y-profile:hover { border-color: var(--c4); transform: translateY(-1px); }
.a11y-profile .pic { width: 30px; height: 30px; border-radius: 6px; background: var(--a11y-tint); color: var(--c4); display: grid; place-items: center; }
.a11y-profile .pic svg { width: 18px; height: 18px; }
.a11y-profile .pname { font-weight: 700; font-size: 0.86rem; color: var(--c5); font-family: var(--serif); letter-spacing: -0.01em; }
.a11y-profile[aria-pressed="true"] { border-color: var(--c5); background: var(--a11y-tint); box-shadow: inset 0 0 0 1px var(--c5); }
.a11y-profile[aria-pressed="true"] .pic { background: var(--c5); color: var(--c1); }

/* ---------- Segmented controls / fields ---------- */
.a11y-field { margin-bottom: 0.95rem; }
.a11y-field > .a11y-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 600; font-size: 0.88rem; color: var(--c5); margin-bottom: 0.45rem;
}
.a11y-field > .a11y-label .val { color: var(--c4); font-variant-numeric: tabular-nums; }
.seg { display: flex; gap: 0.35rem; background: var(--a11y-tint); padding: 0.3rem; border-radius: 4px; }
.seg button {
  flex: 1;
  padding: 0.5rem 0.4rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--c3);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background var(--a11y-tf) var(--a11y-ease), color var(--a11y-tf) var(--a11y-ease), box-shadow var(--a11y-tf) var(--a11y-ease);
}
.seg button:hover { color: var(--c5); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--c5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }

/* ---------- Text size stepper ---------- */
.a11y-stepper { display: flex; align-items: center; gap: 0.6rem; }
.a11y-stepper button {
  width: 42px; height: 42px; flex: none;
  border-radius: 4px;
  border: 1.5px solid var(--c2);
  background: #fff;
  color: var(--c5);
  font-size: 1.3rem; font-weight: 700;
  display: grid; place-items: center;
  cursor: pointer;
}
.a11y-stepper button:hover { border-color: var(--c5); background: var(--a11y-tint); }
.a11y-stepper input[type="range"] { flex: 1; accent-color: var(--c5); height: 6px; }

/* ---------- Toggle tools ---------- */
.a11y-tools { display: grid; gap: 0.45rem; }
.a11y-toggle {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  border: 1.5px solid var(--c2);
  background: #fff;
  text-align: left; width: 100%;
  color: var(--c5);
  cursor: pointer;
  transition: border-color var(--a11y-tf) var(--a11y-ease), background var(--a11y-tf) var(--a11y-ease);
}
.a11y-toggle:hover { border-color: var(--c4); }
.a11y-toggle .tic { width: 30px; height: 30px; flex: none; border-radius: 6px; background: var(--a11y-tint); color: var(--c4); display: grid; place-items: center; }
.a11y-toggle .tic svg { width: 18px; height: 18px; }
.a11y-toggle .tlabel { flex: 1; font-weight: 600; font-size: 0.88rem; }
.a11y-switch {
  width: 42px; height: 24px; flex: none;
  border-radius: 999px;
  background: var(--c2);
  position: relative;
  transition: background var(--a11y-tf) var(--a11y-ease);
}
.a11y-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--a11y-tf) var(--a11y-ease);
}
.a11y-toggle[aria-pressed="true"] { border-color: var(--c5); background: var(--a11y-tint); }
.a11y-toggle[aria-pressed="true"] .a11y-switch { background: var(--c5); }
.a11y-toggle[aria-pressed="true"] .a11y-switch::after { transform: translateX(18px); }
.a11y-toggle[aria-pressed="true"] .tic { background: var(--c5); color: var(--c1); }

/* ---------- Footer / reset ---------- */
.a11y-foot {
  border-top: 1px solid var(--c2);
  padding: 0.9rem 1.25rem;
  background: var(--a11y-tint);
}
.a11y-reset {
  width: 100%;
  padding: 0.75rem;
  border-radius: 4px;
  border: 1.5px solid var(--c2);
  background: #fff;
  color: var(--c5);
  font-family: var(--sans);
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: border-color var(--a11y-tf) var(--a11y-ease), background var(--a11y-tf) var(--a11y-ease);
}
.a11y-reset:hover { border-color: var(--c5); background: var(--a11y-tint); }
.a11y-reset svg { width: 18px; height: 18px; }
.a11y-credit {
  text-align: center;
  margin-top: 0.8rem;
  font-size: 0.76rem;
  color: var(--c3);
}
.a11y-credit strong { color: var(--c5); font-weight: 700; }
.a11y-credit a { color: var(--c4); font-weight: 600; text-decoration: none; }
.a11y-credit a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .a11y-panel { width: 100vw; }
}

/* ==========================================================================
   ACCESSIBILITY DISPLAY MODES  (toggled by the a11y widget on <html>)
   ========================================================================== */

/* Line spacing */
html.ls-relaxed { --a11y-line: 1.9; }
html.ls-loose   { --a11y-line: 2.3; }
html.ls-relaxed p, html.ls-loose p,
html.ls-relaxed li, html.ls-loose li { line-height: var(--a11y-line); }

/* Letter spacing */
html.tr-wide   { --a11y-letter: 0.06em; }
html.tr-wider  { --a11y-letter: 0.12em; }
html.tr-wide body, html.tr-wider body { letter-spacing: var(--a11y-letter); }

/* Color & contrast filters — applied to page content, never to the widget */
html.cc-mono   body > *:not(.a11y-fab):not(.a11y-panel):not(.a11y-backdrop):not(.reading-guide) { filter: grayscale(1); }
html.cc-muted  body > *:not(.a11y-fab):not(.a11y-panel):not(.a11y-backdrop):not(.reading-guide) { filter: saturate(0.55); }
html.cc-vivid  body > *:not(.a11y-fab):not(.a11y-panel):not(.a11y-backdrop):not(.reading-guide) { filter: saturate(1.55) contrast(1.04); }

/* High contrast theme: collapse the grayscale palette to pure black & white */
html.cc-contrast {
  --c1: #ffffff;
  --c2: #000000;
  --c3: #141414;
  --c4: #000000;
  --c5: #000000;
}
/* Light surfaces -> white with black text */
html.cc-contrast :is(.audience-nav, .audience-tile, .portfolio, .services-overview,
  .testimonials, .testimonial-card, .story-section, .bvc-section, .service-item,
  .diff-card) { background: #fff !important; }
html.cc-contrast :is(.audience-nav, .portfolio, .services-overview, .testimonials,
  .story-section, .bvc-section) :is(h1, h2, h3, h4, h5, h6, p, span, a, div, li, label, em, blockquote, figcaption) {
  color: #000 !important;
}
/* Dark surfaces -> black with white text (overrides the low-opacity whites) */
html.cc-contrast :is(nav, .hero, .hero-card, .credentials-strip, .diff-section,
  .about-teaser, .cta-section, .team-section, .bvc-callout, .page-hero,
  .portal-routes, .portal-app, footer) { background: #000 !important; }
html.cc-contrast :is(nav, .hero, .hero-card, .credentials-strip, .diff-section,
  .about-teaser, .cta-section, .team-section, .bvc-callout, .page-hero,
  .portal-routes, .portal-app, footer) :is(h1, h2, h3, h4, h5, h6, p, span, a, div, li, label, em, blockquote) {
  color: #fff !important;
}
html.cc-contrast a { text-decoration: underline; }
html.cc-contrast :is(.card, .testimonial-card, .diff-card, .service-item, .audience-tile, .nav-toggle span) {
  border-color: #000 !important; box-shadow: none !important;
}
/* Keep the photo-backed hero readable: hide the decorative photo behind cards */
html.cc-contrast .hero-bg { opacity: 0; }

/* ---------- Tools ---------- */
html.tool-links a:not(.btn-primary):not(.btn-outline):not(.nav-cta):not(.cf-submit) {
  text-decoration: underline !important;
  text-underline-offset: 2px;
  background: rgba(33, 37, 41, 0.12);
  box-shadow: 0 0 0 2px rgba(33, 37, 41, 0.28);
  border-radius: 3px;
}
html.tool-headings :is(h1, h2, h3, h4, h5, h6) {
  outline: 2px dashed var(--c4);
  outline-offset: 3px;
  background: rgba(33, 37, 41, 0.06);
}
html.tool-legible, html.tool-legible body,
html.tool-legible :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Atkinson Hyperlegible", Verdana, Tahoma, system-ui, sans-serif !important;
}
html.tool-dyslexia, html.tool-dyslexia body,
html.tool-dyslexia :is(h1, h2, h3, h4, h5, h6) {
  font-family: "OpenDyslexic", "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important;
  --a11y-letter: 0.04em;
  word-spacing: 0.1em;
}
html.tool-cursor, html.tool-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 L8 38 L17 30 L23 44 L30 41 L24 27 L36 27 Z' fill='%23f8f9fa' stroke='%23212529' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}
html.tool-leftalign :is(p, h1, h2, h3, h4, h5, h6, li, td, th, .section-label, .kicker) {
  text-align: left !important;
}
html.tool-hideimg img,
html.tool-hideimg .hero-bg,
html.tool-hideimg [data-deco] { visibility: hidden !important; }

/* ---------- Reading guide ---------- */
.reading-guide {
  position: fixed;
  left: 0; right: 0;
  height: 2.6rem;
  z-index: 9990;
  pointer-events: none;
  background: rgba(33, 37, 41, 0.10);
  border-top: 2px solid var(--c5);
  border-bottom: 2px solid var(--c5);
  display: none;
  transform: translateY(-50%);
}
html.tool-guide .reading-guide { display: block; }

/* ---------- Reduced motion (system pref OR "Pause animations" tool) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up { opacity: 1 !important; transform: none !important; }
}
html.tool-noanim *, html.tool-noanim *::before, html.tool-noanim *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.tool-noanim .fade-up { opacity: 1 !important; transform: none !important; }

@media print {
  nav, .a11y-fab, .a11y-panel, .a11y-backdrop, .reading-guide, .footer-bottom { display: none !important; }
}