/* ===================================================================
   AGEWELL ALLIANCE — ACCESSIBILITY
   Skip link, sr-only, universal :focus-visible ring, touch-target
   minimums (44px on nav/footer links), form error/success states,
   the floating accessibility toolbar (toggles for text size, contrast,
   dyslexia font, line spacing, large cursor, highlight links, language),
   Google Translate widget chrome hiding, and the OpenDyslexic webfont
   served via @fontsource/opendyslexic on jsDelivr.

   Load order: LAST. a11y rules must win against any component or page
   override at equal specificity. Touch-target overrides on .nav a /
   .footer-col a depend on this position to take effect.
   =================================================================== */

/* ===== ACCESSIBILITY PRIMITIVES (skip-link, sr-only, focus rings, touch targets, form states) ===== */
/* ===== ACCESSIBILITY ===== */

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to content link */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 100000;
  background: var(--gold);
  color: var(--navy);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* Universal focus-visible */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Form-specific focus (keep enhanced ring) */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* Buttons keep their styles */
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Nav links focus */
.nav a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Accordion header focus */
.accordion-header:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Touch target minimum sizing */
.footer-col a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.footer-legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* Form validation error states */
.form-error {
  font-size: 0.8rem;
  color: var(--red);
  margin-top: 0.3rem;
  display: none;
}
.form-group.has-error .form-error {
  display: block;
}
.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Form success state */
.form-success {
  background: var(--green-glow);
  border: 1px solid rgba(26, 122, 76, 0.2);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  color: var(--green);
  font-weight: 600;
}


/* ===== ACCESSIBILITY TOOLBAR ===== */
/* ===== ACCESSIBILITY TOOLBAR ===== */
/* Gold-on-navy. Pops against any hero background, including dark photos.
   Pulse ring fades after 8s so the FAB doesn't strobe forever. */
.a11y-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid #fff;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45), 0 0 0 4px rgba(10,22,40,0.35);
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease, background 0.2s ease;
}
.a11y-fab::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0;
  animation: a11yFabPulse 2.4s ease-out 0s 3;
  pointer-events: none;
}
@keyframes a11yFabPulse {
  0%   { transform: scale(0.92); opacity: 0.85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.4);  opacity: 0; }
}
.a11y-fab svg { width: 30px; height: 30px; }
.a11y-fab:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(0,0,0,0.55); }
.a11y-fab:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.a11y-fab[aria-expanded="true"] { background: var(--navy); color: var(--gold); border-color: var(--gold); }
.a11y-fab[aria-expanded="true"]::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .a11y-fab::after { animation: none; }
}

.a11y-panel {
  position: fixed;
  bottom: 96px;
  right: 28px;
  z-index: 9998;
  width: 340px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  background: var(--navy);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  padding: 0;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-spring);
}
.a11y-panel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.a11y-panel-header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.a11y-panel-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}
.a11y-panel-reset {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  background: none;
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.a11y-panel-reset:hover { background: rgba(201,168,76,0.12); }
.a11y-panel-body { padding: 1rem 1.5rem 1.5rem; }
.a11y-group { margin-bottom: 1.25rem; }
.a11y-group:last-child { margin-bottom: 0; }
.a11y-group-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
  display: block;
}
.a11y-slider-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.a11y-slider-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  min-width: 42px;
  text-align: center;
}
.a11y-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  outline: none;
}
.a11y-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid var(--navy);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.a11y-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid var(--navy);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.a11y-slider:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.a11y-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.a11y-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  font-weight: 500;
}
.a11y-toggle:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
.a11y-toggle.active {
  background: rgba(26,122,76,0.15);
  border-color: var(--green);
  color: var(--green-light);
}
.a11y-toggle svg { flex-shrink: 0; }
.a11y-lang-select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23c9a84c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}
.a11y-lang-select:focus-visible { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 1px; }
.a11y-lang-select option { background: var(--navy); color: var(--white); }
.a11y-lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: rgba(26,122,76,0.15);
  color: var(--green-light);
}

/* Font size classes applied to html */
html.a11y-font-sm { font-size: 14px; }
html.a11y-font-md { font-size: 16px; }
html.a11y-font-lg { font-size: 18px; }
html.a11y-font-xl { font-size: 20px; }
html.a11y-font-xxl { font-size: 22px; }
html.a11y-font-xxxl { font-size: 24px; }
/* High contrast */
html.a11y-high-contrast { filter: contrast(1.35); }
html.a11y-high-contrast .a11y-panel,
html.a11y-high-contrast .a11y-fab,
html.a11y-high-contrast .hero-tablet { filter: contrast(0.74); }
/* Dyslexia font */
html.a11y-dyslexia * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', cursive, sans-serif !important;
  letter-spacing: 0.05em !important;
}
html.a11y-dyslexia .a11y-panel *,
html.a11y-dyslexia .a11y-fab,
html.a11y-dyslexia .hero-tablet-screen * { font-family: var(--font-body) !important; letter-spacing: normal !important; }
/* Line spacing */
html.a11y-spacing-wide * { line-height: 2 !important; }
html.a11y-spacing-wide .a11y-panel *,
html.a11y-spacing-wide .a11y-fab,
html.a11y-spacing-wide .hero-tablet-screen * { line-height: normal !important; }
/* Large cursor */
html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2L5 26L11 20L17 30L21 28L15 18L23 18Z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 5 2, auto !important; }
html.a11y-big-cursor .a11y-panel, html.a11y-big-cursor .a11y-panel *,
html.a11y-big-cursor .hero-tablet-screen, html.a11y-big-cursor .hero-tablet-screen * { cursor: auto !important; }
/* Highlight links */
html.a11y-highlight-links a:not(.a11y-fab):not(.a11y-panel a):not(.a11y-panel-reset):not(.hero-tablet-screen a) {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px !important;
  text-decoration: underline !important;
}

/* Responsive */
@media (max-width: 480px) {
  .a11y-panel { right: 12px; left: 12px; width: auto; bottom: 88px; }
  .a11y-fab { bottom: 20px; right: 20px; width: 56px; height: 56px; }
  .a11y-fab svg { width: 26px; height: 26px; }
  .a11y-toggles { grid-template-columns: 1fr; }
}


/* ===== TRANSLATE WIDGET HIDE + OPENDYSLEXIC FONT-FACE ===== */
#google_translate_element { position: absolute !important; left: -9999px !important; top: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; visibility: hidden !important; }
.skiptranslate, .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate { display: none !important; visibility: hidden !important; height: 0 !important; }
body { top: 0 !important; }
.goog-te-gadget { font-size: 0 !important; }
.goog-te-gadget > span > a { display: none !important; }
.goog-te-gadget .goog-te-combo { margin: 0 !important; }
.goog-tooltip, .goog-tooltip *, .goog-text-highlight { background: transparent !important; box-shadow: none !important; border: none !important; }

/* ===================================================================
   OPENDYSLEXIC WEBFONT — for the "Dyslexia Font" accessibility toggle.
   Served via the @fontsource/opendyslexic package on jsDelivr CDN
   (verified URLs, version-pinned). font-display:swap so non-dyslexic
   users never wait on the font; only fetched when the toggle is on
   and the browser sees the OpenDyslexic family applied to live text.
   =================================================================== */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.2.5/files/opendyslexic-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.2.5/files/opendyslexic-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}