/* ═══════════════════════════════════════════════════════════
   MNL — Pride Month design override
   
   Usage: in mnl.html, replace:
     <link rel="stylesheet" href="mnl.css">
   with:
     <link rel="stylesheet" href="mnl-pride.css">
═══════════════════════════════════════════════════════════ */

/* Import base styles */
@import url('mnl.css');

/* ────────────────────────────────────────────────────────
   COLOUR PALETTE
──────────────────────────────────────────────────────── */
:root {
  --c:  #ff69b4;
  --p:  #ff8c00;
  --bg: #04040f;
}

/* ────────────────────────────────────────────────────────
   RAINBOW TOP STRIPE
──────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 999; pointer-events: none;
  background: linear-gradient(90deg,
    #ff0018 0%, #ff8800 17%, #ffee00 33%,
    #00cc00 50%, #0088ff 67%, #8800cc 83%, #ff0018 100%);
}

/* ────────────────────────────────────────────────────────
   RAINBOW ANIMATED LOGO
──────────────────────────────────────────────────────── */
.logo-name {
  background: linear-gradient(90deg,
    #ff0018, #ff8800, #ffee00,
    #00cc00, #0088ff, #cc00ff, #ff0018);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: glitch 11s infinite, pride-rainbow 4s linear infinite;
}
@keyframes pride-rainbow {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* ────────────────────────────────────────────────────────
   GLASS PANELS
──────────────────────────────────────────────────────── */
.glass {
  border-color: rgba(91,206,250,.18);
  box-shadow: 0 0 60px rgba(91,206,250,.04),
              inset 0 1px 0 rgba(255,255,255,.04);
}
.panel-label { color: #5bcefa; }
.panel-label::after {
  background: linear-gradient(90deg,
    rgba(91,206,250,.25), rgba(245,169,184,.2), transparent);
}

/* ────────────────────────────────────────────────────────
   EVENT ELEMENTS — trans flag
──────────────────────────────────────────────────────── */
.event-title  { color: #f5a9b8; text-shadow: 0 0 10px rgba(245,169,184,.3); }
.event-date   { color: #5bcefa; }
.event-btn {
  color: rgba(245,169,184,.75);
  border-color: rgba(91,206,250,.2);
}
.event-btn:hover {
  color: #fff; border-color: rgba(91,206,250,.5);
  box-shadow: 0 0 14px rgba(91,206,250,.12);
}

/* ────────────────────────────────────────────────────────
   LINEUP
──────────────────────────────────────────────────────── */
.lineup-time { color: #5bcefa; }
.lineup-artist { color: #f5a9b8; }
.tz-btn { color: rgba(91,206,250,.55); border-color: rgba(91,206,250,.15); }
.tz-btn.active {
  background: rgba(91,206,250,.12); border-color: rgba(91,206,250,.45); color: #5bcefa;
}

/* ────────────────────────────────────────────────────────
   PAST EVENTS
──────────────────────────────────────────────────────── */
.past-item.expanded,
.past-item:hover { border-color: rgba(245,169,184,.25); }
.past-chevron { color: rgba(245,169,184,.45); }
.past-item.expanded .past-chevron { color: #f5a9b8; transform: rotate(90deg); }
.past-lineup-time { color: rgba(91,206,250,.65); }

/* ────────────────────────────────────────────────────────
   BIO
──────────────────────────────────────────────────────── */
.bio p::before, .bio p::after { color: #ff69b4; opacity: .45; }

/* ────────────────────────────────────────────────────────
   LINKS
──────────────────────────────────────────────────────── */
.mnl-link {
  color: rgba(245,169,184,.65);
  border-color: rgba(91,206,250,.12);
}
.mnl-link:hover {
  color: #fff; border-color: rgba(91,206,250,.4);
  box-shadow: 0 0 14px rgba(91,206,250,.1);
}

/* ────────────────────────────────────────────────────────
   STATS GRID
──────────────────────────────────────────────────────── */
.stat-cell {
  border-color: rgba(91,206,250,.15);
  background: rgba(91,206,250,.04);
}
.stat-num { color: #f5a9b8; text-shadow: 0 0 10px rgba(245,169,184,.3); }
.stat-lbl { color: rgba(91,206,250,.6); }

/* ────────────────────────────────────────────────────────
   BACK LINK
──────────────────────────────────────────────────────── */
.back-link { color: rgba(255,105,180,.45); }
.back-link:hover { color: #ff69b4; }