/* ── Pride Month theme ──
   Loaded only when themes.pride is on (English pages only). Everything is
   scoped under .theme-pride so flipping the flag back to 0 fully removes it.
   Uses the 6-stripe Pride flag colors; works over both light and dark mode. */

.theme-pride {
  --pride-red: #E40303;
  --pride-orange: #FF8C00;
  --pride-yellow: #FFED00;
  --pride-green: #008026;
  --pride-blue: #004CFF;
  --pride-violet: #732982;
  --pride-stripe: linear-gradient(
    90deg,
    var(--pride-red) 0 16.66%,
    var(--pride-orange) 16.66% 33.33%,
    var(--pride-yellow) 33.33% 50%,
    var(--pride-green) 50% 66.66%,
    var(--pride-blue) 66.66% 83.33%,
    var(--pride-violet) 83.33% 100%
  );
  --pride-flow: linear-gradient(
    120deg,
    var(--pride-red),
    var(--pride-orange),
    var(--pride-yellow),
    var(--pride-green),
    var(--pride-blue),
    var(--pride-violet)
  );
}

/* Rainbow banner along the bottom edge of the fixed nav — visible site-wide. */
.theme-pride .nav-blur {
  border-bottom-color: transparent;
}
.theme-pride .nav-blur::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 4px;
  background: var(--pride-stripe);
  pointer-events: none;
}

/* Hero headlines / accents that already use .gradient-text go rainbow. */
.theme-pride .gradient-text {
  background: var(--pride-flow);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Matching thin rainbow line above the footer to bookend the page. */
.theme-pride .site-footer {
  border-top-color: transparent;
}
.theme-pride .site-footer::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--pride-stripe);
  opacity: 0.9;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* No animation by default — kept intentionally calm and tasteful. */
}