/* Pride Month Theme */
:root {
  --pride-red: #ff0000;
  --pride-orange: #ff7f00;
  --pride-yellow: #ffff00;
  --pride-green: #00ff00;
  --pride-blue: #0000ff;
  --pride-indigo: #4b0082;
  --pride-violet: #9400d3;
}

/* Pride Month Banner */
.pride-banner {
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--pride-red) 0%,
    var(--pride-orange) 14.28%,
    var(--pride-yellow) 28.56%,
    var(--pride-green) 42.84%,
    var(--pride-blue) 57.12%,
    var(--pride-indigo) 71.4%,
    var(--pride-violet) 100%
  );
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
}

/* Pride Month Message Banner */
.pride-banner::after {
  content: '🏳️‍🌈 Happy Pride Month! 🏳️‍🌈';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  letter-spacing: 0.5px;
}

body[data-pride-mode='active'] .pride-banner {
  display: block;
}

body[data-pride-mode='active'] .pride-banner::after {
  animation: pridePulse 2s ease-in-out 4s forwards;
}

@keyframes pridePulse {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
}

/* Rainbow Navigation Icons - Each nav item gets a different color */
body[data-pride-mode='active'] .nav-btn:nth-child(1) .nav-icon svg {
  fill: var(--pride-red);
}

body[data-pride-mode='active'] .nav-btn:nth-child(2) .nav-icon svg {
  fill: var(--pride-orange);
}

body[data-pride-mode='active'] .nav-btn:nth-child(3) .nav-icon svg {
  fill: var(--pride-yellow);
}

body[data-pride-mode='active'] .nav-btn:nth-child(4) .nav-icon svg {
  fill: var(--pride-green);
}

body[data-pride-mode='active'] .nav-btn:nth-child(5) .nav-icon svg {
  fill: var(--pride-blue);
}

body[data-pride-mode='active'] .nav-btn:nth-child(6) .nav-icon svg {
  fill: var(--pride-indigo);
}

body[data-pride-mode='active'] .nav-btn:nth-child(7) .nav-icon svg {
  fill: var(--pride-violet);
}

/* Rainbow brand logo border */
body[data-pride-mode='active'] .brand-logo {
  border-color: var(--pride-red);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

/* Rainbow accent buttons */
body[data-pride-mode='active'] .btn-primary,
body[data-pride-mode='active'] button[type='submit'] {
  background: linear-gradient(135deg, var(--pride-red), var(--pride-violet)) !important;
  border-color: var(--pride-red) !important;
}

/* Rainbow highlights on active nav items */
body[data-pride-mode='active'] .nav-btn.active {
  border-color: var(--pride-red) !important;
  background: rgba(255, 0, 0, 0.1) !important;
}

/* Rainbow post borders */
body[data-pride-mode='active'] .feed-item,
body[data-pride-mode='active'] .post-card {
  border-color: rgba(255, 0, 0, 0.3) !important;
}

/* Hover effects with pride colors */
body[data-pride-mode='active'] button:hover:not(:disabled),
body[data-pride-mode='active'] a:hover {
  color: var(--pride-red) !important;
}

/* Rainbow text highlights */
body[data-pride-mode='active'] strong,
body[data-pride-mode='active'] .badge-founder {
  color: var(--pride-orange);
}

/* Rainbow upgrade badge */
body[data-pride-mode='active'] .badge-plus {
  background: linear-gradient(135deg, var(--pride-blue), var(--pride-violet)) !important;
  color: white !important;
}