/* Changing Lives 365 — v5.15: classic six-color Pride accents.
   Shared by all six HTML pages. The colors are decorative: text and controls
   retain accessible dark-green / white contrast. The existing high-contrast
   color-vision mode intentionally remains navy/gold, free of rainbow accents. */
:root {
  --pride-red: #e50000;
  --pride-orange: #ff8d00;
  --pride-yellow: #ffee00;
  --pride-green: #028121;
  --pride-blue: #004cff;
  --pride-violet: #770088;
  --pride-spectrum: linear-gradient(90deg,
    var(--pride-red) 0 16.666%, var(--pride-orange) 16.666% 33.333%,
    var(--pride-yellow) 33.333% 50%, var(--pride-green) 50% 66.666%,
    var(--pride-blue) 66.666% 83.333%, var(--pride-violet) 83.333% 100%);
}

/* Keep the sage navigation and recognizable orange hover effect; add Pride color. */
html:not(.color-vision-mode) .site-header {
  border-bottom: 4px solid transparent;
  border-image: var(--pride-spectrum) 1;
}

/* A restrained rainbow glow on top of the existing sage/cream backgrounds.
   Never color the words themselves; reading surfaces remain calm. */
html:not(.color-vision-mode) .hero {
  background:
    radial-gradient(ellipse at 5% 5%, rgba(229,0,0,.075), transparent 38%),
    radial-gradient(ellipse at 33% 3%, rgba(255,141,0,.085), transparent 34%),
    radial-gradient(ellipse at 66% 2%, rgba(255,238,0,.09), transparent 34%),
    radial-gradient(ellipse at 95% 38%, rgba(2,129,33,.065), transparent 40%),
    radial-gradient(ellipse at 70% 95%, rgba(0,76,255,.07), transparent 44%),
    radial-gradient(ellipse at 12% 97%, rgba(119,0,136,.065), transparent 37%),
    linear-gradient(115deg, #f6faf5, #eaf2eb 54%, #f8f5ed);
}

/* The prominent homepage mission card and secondary-page mission cards get
   one short rainbow band, without changing their white content area. */
html:not(.color-vision-mode) .hero-card {
  position: relative;
  overflow: hidden;
}
html:not(.color-vision-mode) .hero .hero-card {
  border-top-color: transparent;
}
html:not(.color-vision-mode) .hero-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--pride-spectrum);
  pointer-events: none;
}

/* Color on dividing lines and heading ornaments, not on paragraph text. */
html:not(.color-vision-mode) .hero-copy {
  border-left: 4px solid transparent;
  border-image: var(--pride-spectrum) 1;
}
html:not(.color-vision-mode) .hero-intro .eyebrow::before {
  background: var(--pride-spectrum);
}
html:not(.color-vision-mode) .section-heading::after {
  content: "";
  display: block;
  width: 114px;
  height: 5px;
  margin: 22px auto 0;
  border-radius: 999px;
  background: var(--pride-spectrum);
}
html:not(.color-vision-mode) .section-kicker,
html:not(.color-vision-mode) .eyebrow,
html:not(.color-vision-mode) .page-label {
  color: #165243; /* deep green, readable on pale backgrounds */
}

/* Small colored details across the six pages; their cards and main labels
   remain high contrast, including dark-green portal/sponsor cards. */
html:not(.color-vision-mode) :is(
  .program-card, .portal-card, .sponsor-card, .content-card, .event-feature,
  .organization-doc-card, .hours-card, .info-card, .hero-hours
) {
  position: relative;
  overflow: hidden;
}
html:not(.color-vision-mode) :is(
  .program-card, .portal-card, .sponsor-card, .content-card, .event-feature,
  .organization-doc-card, .hours-card, .info-card, .hero-hours
)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--pride-spectrum);
  pointer-events: none;
}

/* Friendly soft-color icon tiles; icons/emoji remain recognizable. */
html:not(.color-vision-mode) .mission-point:nth-child(1) .mission-icon,
html:not(.color-vision-mode) .program-card:nth-child(1) .program-icon { background: #fce8e6; }
html:not(.color-vision-mode) .mission-point:nth-child(2) .mission-icon,
html:not(.color-vision-mode) .program-card:nth-child(2) .program-icon { background: #fff0d6; }
html:not(.color-vision-mode) .mission-point:nth-child(3) .mission-icon,
html:not(.color-vision-mode) .program-card:nth-child(3) .program-icon { background: #e3f4e6; }
html:not(.color-vision-mode) .program-card:nth-child(4) .program-icon { background: #e8ebff; }

/* Preserve strong dark-green CTAs but add an expressive Pride accent below. */
html:not(.color-vision-mode) .hero .button-primary {
  box-shadow: 0 4px 0 #e9a23b;
}
html:not(.color-vision-mode) .sponsor-cta,
html:not(.color-vision-mode) #hub .hub-tip {
  border-top: 4px solid transparent;
  border-image: var(--pride-spectrum) 1;
}

/* A slim rainbow signature above the footer on all pages. */
html:not(.color-vision-mode) footer {
  border-top: 5px solid transparent;
  border-image: var(--pride-spectrum) 1;
}

/* Focus remains visibly outlined independent of hue. */
html:not(.color-vision-mode) a:focus-visible,
html:not(.color-vision-mode) button:focus-visible {
  outline: 3px solid #8b5100;
  outline-offset: 3px;
}

/* On phones, retain the same decorative bands without stealing layout room. */
@media (max-width: 600px) {
  html:not(.color-vision-mode) .section-heading::after { width: 94px; margin-top: 17px; }
  html:not(.color-vision-mode) .hero-card::before { height: 4px; }
}

@media print {
  html:not(.color-vision-mode) .hero { background: #fff; }
  html:not(.color-vision-mode) .hero-card::before,
  html:not(.color-vision-mode) .section-heading::after { display: none; }
}