/* Changing Lives 365 — color vision-friendly / high-contrast navigation option.
   Loaded by the five secondary pages. The homepage retains its custom matching
   high-contrast styles. The setting itself is shared through site-ui.js. */

/* Match the existing v5.7 header toggle without impacting default page colors. */
.site-header .vision-toggle {
  font: inherit; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; min-height: 40px; padding: 7px 9px;
  border: 1px solid #bed4c5; border-radius: 9px;
  background: #fff; color: #164d3e; font-size: .78rem;
  font-weight: 780; white-space: nowrap; line-height: 1.1;
  cursor: pointer; box-shadow: 0 2px 5px rgba(18,53,43,.04);
}
.site-header .vision-toggle:hover { background: #fff7e7; border-color: #9b6b21; }
.site-header .vision-label-mobile { display: none; }
.site-header .vision-toggle[aria-pressed="true"] { outline: 2px solid #aa6c10; outline-offset: 1px; }
.site-header .vision-toggle:focus-visible { outline: 3px solid #e9a23b; outline-offset: 3px; }
@media (max-width: 1600px) {
  html.site-enhanced .site-header .vision-toggle { min-height: 39px; padding: 6px 7px; font-size: .73rem; }
}
@media (max-width: 600px) {
  html.site-enhanced .site-header .site-controls {
    display: grid; grid-template-columns: auto auto;
    justify-items: stretch; gap: 4px;
  }
  html.site-enhanced .site-header .lang-toggle { grid-row: 1; grid-column: 1; }
  html.site-enhanced .site-header .menu-toggle { grid-row: 1; grid-column: 2; }
  html.site-enhanced .site-header .vision-toggle {
    grid-row: 2; grid-column: 1 / -1; min-height: 29px; padding: 4px 6px;
    font-size: .70rem;
  }
  .site-header .vision-label { display: none; }
  .site-header .vision-label-mobile { display: inline; }
}

/* Alternate palette emphasizes strong dark/light contrast and uses blue/gold
   instead of green/red as the main information-carrying colors. */
html.color-vision-mode {
  --forest: #193251; --forest-deep: #11243e; --leaf: #214e84;
  --mint: #e9eff7; --cream: #f6f8fc; --line: #ccd8e7;
  --sun: #f0b84f; --coral: #c77820;
  --ink: #142a43; --muted: #435a73;
}
html.color-vision-mode .site-header { background: #eef3fa; border-bottom-color: #c47a16; }
html.color-vision-mode .site-header .brand-name,
html.color-vision-mode .site-header .brand-tag,
html.color-vision-mode .site-header .nav-links a { color: #132c4b; }
html.color-vision-mode .site-header .nav-links a:hover,
html.color-vision-mode .site-header .brand:hover .brand-name,
html.color-vision-mode .site-header .brand:hover .brand-tag { color: #935100; }
html.color-vision-mode .site-header .nav-links a:focus-visible { outline-color: #c47a16; }
html.color-vision-mode.site-enhanced .site-header.menu-open .nav-links a:hover,
html.color-vision-mode.site-enhanced .site-header.menu-open .nav-links a:focus-visible {
  background: #dce7f6; color: #112b49;
}
html.color-vision-mode .site-header .lang-toggle,
html.color-vision-mode .site-header .menu-toggle,
html.color-vision-mode .site-header .vision-toggle {
  background: #fff; color: #16334f; border-color: #7c97b6;
}
html.color-vision-mode .site-header .lang-toggle:hover,
html.color-vision-mode .site-header .menu-toggle:hover,
html.color-vision-mode .site-header .vision-toggle:hover {
  background: #e9f0fb; color: #142b49; border-color: #36597e;
}
html.color-vision-mode .site-header .vision-toggle[aria-pressed="true"] { outline-color: #a96800; }

html.color-vision-mode .hero {
  background: linear-gradient(115deg, #f5f7fb 0%, #e9f0f8 62%, #dde8f6 100%);
}
html.color-vision-mode .hero h1,
html.color-vision-mode .hero h2,
html.color-vision-mode .hero .hero-copy,
html.color-vision-mode .hero .hero-note { color: #16334f; }
html.color-vision-mode .eyebrow,
html.color-vision-mode .section-kicker,
html.color-vision-mode .page-label { color: #214e84; }
html.color-vision-mode .page-label { border-color: #bbcce0; }
html.color-vision-mode .hero-card,
html.color-vision-mode .content-card,
html.color-vision-mode .info-card,
html.color-vision-mode .hours-card,
html.color-vision-mode .calendar-card,
html.color-vision-mode .event-feature,
html.color-vision-mode .organization-doc-card {
  border-color: #becfe2;
}
html.color-vision-mode .hero-card h2,
html.color-vision-mode .content-card h3,
html.color-vision-mode .feature-copy h2,
html.color-vision-mode .section-heading h2,
html.color-vision-mode .hours-card h3,
html.color-vision-mode .info-card h3 { color: #193251; }
html.color-vision-mode .hero-card p,
html.color-vision-mode .content-card p,
html.color-vision-mode .feature-copy p,
html.color-vision-mode .section-heading p,
html.color-vision-mode .form-note { color: #435a73; }
html.color-vision-mode .hero-card-link,
html.color-vision-mode .breadcrumb a { color: #214e84; }
html.color-vision-mode .icon-badge,
html.color-vision-mode .calendar-icon,
html.color-vision-mode .event-feature-icon { background: #e9eff7; }
html.color-vision-mode .button-primary { background: #1c3556; color: #fff; }
html.color-vision-mode .button-primary:hover { background: #102741; }
html.color-vision-mode .button-light,
html.color-vision-mode .button-secondary { color: #193251; background: #fff; border-color: #69839e; }
html.color-vision-mode .button-light:hover,
html.color-vision-mode .button-secondary:hover { background: #e7eef8; }
html.color-vision-mode .policy,
html.color-vision-mode .donation-impact-item,
html.color-vision-mode .status-note { background: #e9eff7; color: #16334f; }
html.color-vision-mode .donation-impact-item small,
html.color-vision-mode .donation-note { color: #405776; }
html.color-vision-mode .contact-panel { background: #1c3556; color: #fff; }
html.color-vision-mode .contact-panel h2,
html.color-vision-mode .contact-panel a { color: #fff; }
html.color-vision-mode .contact-panel p { color: #e6edf7; }
html.color-vision-mode .form-field label { color: #193251; }
html.color-vision-mode .form-field input,
html.color-vision-mode .form-field textarea { color: #142a43; background: #fff; border-color: #8ba0b8; }
html.color-vision-mode footer { background: #11243e; }

/* About: document labels use hard-coded green in the original CSS; make the
   headings and links match the new palette while keeping document scans untouched. */
html.color-vision-mode .organization-doc-card { border-top-color: #214e84; }
html.color-vision-mode .organization-doc-card h3,
html.color-vision-mode .organization-doc-link { color: #193251; }
html.color-vision-mode .organization-doc-card p,
html.color-vision-mode .organization-doc-disclaimer { color: #435a73; }
html.color-vision-mode .organization-doc-card a:has(img) { border-color: #becfe2; background: #f6f8fc; }

/* Events: preserve the externally controlled embedded Google Calendar styling. */
html.color-vision-mode .calendar-placeholder { background: #edf2fa; }
html.color-vision-mode .calendar-hint { color: #405776; }