/* ══════════════════════════════════════════════════════════
   PRIDE THEME — hizach.com seasonal theme
   Auto-activates every June via pride.js (adds html.pride-active).
   No manual toggling needed — safe to leave linked year-round.
══════════════════════════════════════════════════════════ */

html.pride-active {
  --rb: linear-gradient(90deg, #E40303, #FF8C00, #FFED00, #008026, #004DFF, #750787);
  --rb-loop: linear-gradient(90deg, #E40303, #FF8C00, #FFED00, #008026, #004DFF, #750787, #E40303);
}

@keyframes rb-flow {
  from { background-position: 0% 0%; }
  to   { background-position: 200% 0%; }
}

/* ── Nav: replace border-bottom with animated rainbow stripe ── */
html.pride-active nav {
  border-bottom-color: transparent !important;
}
html.pride-active nav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rb-loop);
  background-size: 200% 100%;
  animation: rb-flow 5s linear infinite;
  pointer-events: none;
}

/* ── Nav logo dot → rainbow ── */
html.pride-active .nl-dot {
  background: var(--rb) !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ── Nav link hover underline → rainbow ── */
html.pride-active .nav-links a::after {
  background: var(--rb) !important;
}

/* ── Primary buttons → dark bg + rainbow gradient border ── */
html.pride-active .btn-primary {
  background: transparent !important;
  color: var(--white, #f4f4f0) !important;
  border: 1.5px solid transparent !important;
  border-image: var(--rb) 1 !important;
  box-shadow: none !important;
}
html.pride-active .btn-primary:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--white, #f4f4f0) !important;
  box-shadow: none !important;
}

/* ── Featured tip / donate button ── */
html.pride-active .tip-btn.featured {
  background: transparent !important;
  color: var(--white, #f4f4f0) !important;
  border: 1.5px solid transparent !important;
  border-image: var(--rb) 1 !important;
}
html.pride-active .tip-btn.featured:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--white, #f4f4f0) !important;
}

/* ── Hero accent word → rainbow gradient text ── */
html.pride-active .hero-title .accent {
  background: var(--rb) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ── Section title .serif spans ── */
html.pride-active .section-title .serif {
  background: var(--rb) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: italic;
}

/* ── Footer pride tag ── */
html.pride-active footer .f-colophon > span:last-child::after {
  content: ' · Pride';
  background: var(--rb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}