/* ================================================================
   ACCESSIBILITY PREFERENCES PANEL
   Real user controls. Makes no compliance claims and does not
   attempt to auto-remediate anything.
   ================================================================ */

/* ---- Trigger button ---- */
.a11y-btn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1900;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(243, 238, 227, .25);
  background: var(--pine);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(44, 58, 46, .28);
  transition: transform .2s var(--ease), background .2s var(--ease);
}

.a11y-btn:hover {
  background: var(--pine-2);
  transform: translateY(-2px);
}

.a11y-btn svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* ---- Panel ---- */
.a11y-panel {
  position: fixed;
  left: 20px;
  bottom: 84px;
  z-index: 1901;
  width: 310px;
  max-width: calc(100vw - 40px);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(44, 58, 46, .26);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.98);
  transform-origin: bottom left;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}

.a11y-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.a11y-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.a11y-panel h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  margin: 0;
  color: var(--pine);
}

.a11y-panel__note {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 16px;
}

.a11y-close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
}

.a11y-close:hover { color: var(--pine); }

/* ---- Groups ---- */
.a11y-group { margin-bottom: 18px; }
.a11y-group:last-of-type { margin-bottom: 12px; }

.a11y-group__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--honey-text);
  margin-bottom: 8px;
}

/* ---- Segmented text-size control ---- */
.a11y-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.a11y-seg button {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}

.a11y-seg button:hover { border-color: var(--honey-text); }

.a11y-seg button[aria-pressed="true"] {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--paper);
}

/* ---- Toggle rows ---- */
.a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 13px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.a11y-toggle:hover { color: var(--honey-text); }

.a11y-switch {
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(44, 58, 46, .22);
  position: relative;
  transition: background .2s var(--ease);
}

.a11y-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s var(--ease);
}

.a11y-toggle[aria-pressed="true"] .a11y-switch { background: var(--honey-text); }
.a11y-toggle[aria-pressed="true"] .a11y-switch::after { transform: translateX(18px); }

/* ---- Reset ---- */
.a11y-reset {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  padding: 9px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-top-width: 1px;
}

.a11y-reset:hover { color: var(--pine); border-color: var(--honey-text); }

/* ================================================================
   PREFERENCE EFFECTS
   ================================================================ */

/* Text size — the site mixes px and rem, so scale the whole root
   proportionally rather than only moving rem values. */
html[data-a11y-text="large"]  body { zoom: 1.12; }
html[data-a11y-text="larger"] body { zoom: 1.25; }

/* Keep the panel itself at a usable size while the page scales */
html[data-a11y-text="large"]  .a11y-panel,
html[data-a11y-text="large"]  .a11y-btn  { zoom: 0.893; }
html[data-a11y-text="larger"] .a11y-panel,
html[data-a11y-text="larger"] .a11y-btn  { zoom: 0.8; }

/* Reduce motion */
html[data-a11y-motion="off"] *,
html[data-a11y-motion="off"] *::before,
html[data-a11y-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

html[data-a11y-motion="off"] .hero-image img,
html[data-a11y-motion="off"] .hero-overlay,
html[data-a11y-motion="off"] .hf,
html[data-a11y-motion="off"] .marquee-track,
html[data-a11y-motion="off"] .scroll-dot,
html[data-a11y-motion="off"] .page-banner__bg {
  animation: none !important;
}

/* Reveal-on-scroll elements start at opacity:0 — never leave them hidden */
html[data-a11y-motion="off"] .fade-up,
html[data-a11y-motion="off"] .reveal,
html[data-a11y-motion="off"] .reveal-stagger {
  opacity: 1 !important;
  transform: none !important;
}

/* High contrast — push text past AA toward AAA */
html[data-a11y-contrast="on"] {
  --muted: #3D4239;
  --clr-muted: #3D4239;
  --honey-text: #66441F;
  --line: rgba(44, 58, 46, .38);
  --clr-border: rgba(44, 58, 46, .38);
}

html[data-a11y-contrast="on"] p,
html[data-a11y-contrast="on"] li,
html[data-a11y-contrast="on"] .section-sub,
html[data-a11y-contrast="on"] .step p { color: #3D4239; }

html[data-a11y-contrast="on"] .eyebrow,
html[data-a11y-contrast="on"] .section-title em,
html[data-a11y-contrast="on"] .card-link { color: #66441F; }

html[data-a11y-contrast="on"] .service-card,
html[data-a11y-contrast="on"] .faq-item,
html[data-a11y-contrast="on"] .modality-tag { border-color: rgba(44, 58, 46, .38); }

/* Underline links — color alone shouldn't carry meaning */
html[data-a11y-underline="on"] a:not(.btn):not(.logo):not(.a11y-btn):not(.nav-cta) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html[data-a11y-underline="on"] .marquee-item {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
  .a11y-btn { left: 14px; bottom: 14px; width: 46px; height: 46px; }
  .a11y-btn svg { width: 23px; height: 23px; }
  .a11y-panel { left: 14px; bottom: 70px; width: calc(100vw - 28px); }
}

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