/*
Theme Name: ACS Media Group
Theme URI: https://acsmediagroup.com
Author: ACS Media Group
Author URI: https://acsmediagroup.com
Description: Modern streaming radio theme for Relay For Life of Second Life and the American Cancer Society. Dark glassmorphism design with live player, DJ profiles, event management, and YouTube media wall.
Version: 4.2
License: GPL v2 or later
Text Domain: relaywave-radio
*/

/* =========================================================
   ROOT VARIABLES — Matched to live site palette
========================================================= */
:root {
  --primary:    #a855f7;
  --secondary:  #ec4899;
  --accent:     #22c55e;
  --accent-alt: #38bdf8;

  --bg:          #07070a;
  --surface:     #111118;
  --surface-alt: #181820;
  --surface-hi:  #1f1f2e;

  --text:    #ffffff;
  --muted:   #a1a1aa;
  --dimmed:  #52525b;

  --border:    rgba(255,255,255,.08);
  --border-hi: rgba(168,85,247,.25);

  --radius:    24px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-glow: 0 0 40px rgba(168,85,247,.2);
  --shadow-pink:  0 0 40px rgba(236,72,153,.15);

  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
  --gradient-subtle: linear-gradient(135deg, rgba(168,85,247,.15), rgba(236,72,153,.1));

  --transition: .3s ease;
  --transition-slow: .5s ease;

  --container: min(1400px, 92%);
  --header-h: 72px;
}

/* =========================================================
   THEME TOGGLE BUTTON
========================================================= */
body { transition: background 0.35s ease, color 0.35s ease; }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(168,85,247,.1);
}


  --radius:    24px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-glow: 0 0 40px rgba(168,85,247,.2);
  --shadow-pink:  0 0 40px rgba(236,72,153,.15);

  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
  --gradient-subtle: linear-gradient(135deg, rgba(168,85,247,.15), rgba(236,72,153,.1));

  --transition: .3s ease;
  --transition-slow: .5s ease;

  --container: min(1400px, 92%);
  --header-h: 72px;
}

/* =========================================================
   RESET
========================================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

body {
  background:
    radial-gradient(circle at 20% 0%, rgba(168,85,247,.18), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(236,72,153,.12), transparent 40%),
    linear-gradient(180deg, #050507, #0d0d12);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width:100%; height:auto; display:block; }
a   { color:inherit; text-decoration:none; transition:color var(--transition); }
ul  { list-style:none; }
button { font-family:inherit; cursor:pointer; }

/* =========================================================
   TYPOGRAPHY
========================================================= */
h1,h2,h3,h4 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  line-height: 1.1;
  font-weight: 800;
}
h1 { font-size: clamp(2.8rem,6vw,5.5rem); }
h2 { font-size: clamp(2rem,4vw,3.2rem); }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.1rem; }

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =========================================================
   LAYOUT
========================================================= */
.container { width:var(--container); margin-inline:auto; }
section    { padding: 5rem 0; }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.section-heading.centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-heading h2 { margin:.5rem 0 .75rem; }
.section-heading p  { color:var(--muted); max-width:600px; }

.section-label {
  display: inline-block;
  color: var(--primary);
  font-size: .75rem;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
}

/* =========================================================
   GLASSMORPHISM
========================================================= */
.glass-card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  backdrop-filter: blur(24px) saturate(150%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.glass-card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow), var(--shadow-glow);
}

.glass-nav {
  background: rgba(7,7,10,.75);
  backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid var(--border);
}

/* =========================================================
   BUTTONS
========================================================= */
.primary-button,
.secondary-button,
.listen-live-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .95rem;
  transition: all var(--transition);
  border: none;
  line-height: 1;
  white-space: nowrap;
}

.primary-button,
.listen-live-button {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 8px 24px rgba(168,85,247,.3);
}
.primary-button:hover,
.listen-live-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(168,85,247,.45);
  color: #fff;
}

.secondary-button {
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.secondary-button:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
}

/* =========================================================
   HEADER
========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  height: var(--header-h);
  transition: background var(--transition);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1.5rem;
}

.site-branding { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.site-branding img { max-height:48px; }
.brand-text h1  { font-size:1.1rem; font-weight:800; margin:0; }
.brand-text span{ color:var(--muted); font-size:.8rem; display:block; }

.main-navigation ul {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.main-navigation a {
  padding: .5rem 1rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: .9rem;
  color: var(--muted);
  transition: all var(--transition);
}
.main-navigation a:hover,
.main-navigation .current-menu-item a {
  color: var(--text);
  background: rgba(255,255,255,.07);
}

.header-actions { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }

.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.7); }
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: .5rem;
}
.mobile-toggle span {
  display:block; width:24px; height:2px;
  background:var(--text); border-radius:2px;
  transition:all var(--transition);
}

/* Mobile Nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h); left:0; right:0; bottom:0;
  background: rgba(7,7,10,.98);
  backdrop-filter: blur(20px);
  z-index: 9998;
  overflow-y: auto;
}
.mobile-nav.open { display:block; }
.mobile-nav-inner {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mobile-nav ul { flex-direction:column; display:flex; gap:.5rem; }
.mobile-nav a  { display:block; padding:1rem; border-radius:var(--radius-sm); font-size:1.2rem; font-weight:700; }
.mobile-nav a:hover { background:rgba(255,255,255,.07); color:var(--primary); }
.mobile-nav-cta { margin-top:2rem; }

.relaywave-homepage {
  width: 100%;
  overflow-x: hidden;
}


.hero-section {
  min-height: 92vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 6rem 0 4rem;
}

.hero-bg-video { position:absolute; inset:0; z-index:0; }

.hero-particles {
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(168,85,247,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, rgba(236,72,153,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 80%, rgba(34,197,94,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 60%, rgba(56,189,248,.4) 0%, transparent 100%);
}

.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(168,85,247,.2), transparent 60%),
    linear-gradient(180deg, transparent 40%, var(--bg) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

.hero-badge-group {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.3);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 1px;
  color: #22c55e;
}

.relay-badge {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(168,85,247,.25);
  font-weight: 600;
  font-size: .82rem;
  color: var(--primary);
}

.hero-headline {
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: .95;
  margin-bottom: 1.5rem;
  letter-spacing: -.02em;
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 3rem;
}
.hero-listen-btn { font-size:1.05rem; padding:1rem 2rem; }

/* Countdown */
.relay-countdown {
  display: inline-flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem 2rem;
  margin-bottom: 3rem;
}
.countdown-label {
  font-size: .75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 700;
}
.countdown-units {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.countdown-unit { text-align:center; }
.countdown-num {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  line-height: 1;
}
.countdown-unit-label { font-size: .65rem; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }
.countdown-sep { font-size:1.5rem; font-weight:800; color:var(--primary); margin-top:-8px; }

/* Stats */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.hero-stat { text-align:center; }
.stat-num {
  display:block;
  font-size: 2rem;
  font-weight: 800;
  background: var(--gradient);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1;
}
.stat-label { font-size:.75rem; color:var(--muted); letter-spacing:1px; text-transform:uppercase; margin-top:.25rem; }
.hero-stat-divider { width:1px; height:40px; background:var(--border); }


}

/* =========================================================
   NOW PLAYING
========================================================= */
.now-playing-section { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.now-playing-card { overflow:hidden; }

.now-playing-wrapper {
  display: grid;
  grid-template-columns: 140px 1fr auto auto;
  align-items: center;
  gap: 2rem;
  padding: 2rem 2.5rem;
}

.np-album-art {
  position:relative; flex-shrink:0;
  width:140px; height:140px;
}
.np-album-art img {
  width:100%; height:100%;
  object-fit:cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.np-album-glow {
  position:absolute; inset:-10px;
  background: radial-gradient(circle, rgba(168,85,247,.3), transparent 70%);
  border-radius:50%; z-index:-1;
  animation: glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%,100% { opacity:.5; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.1); }
}

.np-info { min-width:0; }
.np-info .section-label { margin-bottom:.5rem; }
.np-info h2 { font-size:1.8rem; margin:.25rem 0; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-artist  { color:var(--muted); margin-bottom:.75rem; }

.equalizer { display:flex; align-items:flex-end; gap:4px; height:40px; }
.equalizer span {
  width:6px; border-radius:var(--radius-pill);
  background: var(--gradient);
  animation: eq 1s infinite ease-in-out alternate;
}
.equalizer span:nth-child(1){height:14px;animation-delay:.0s}
.equalizer span:nth-child(2){height:28px;animation-delay:.1s}
.equalizer span:nth-child(3){height:20px;animation-delay:.2s}
.equalizer span:nth-child(4){height:34px;animation-delay:.3s}
.equalizer span:nth-child(5){height:16px;animation-delay:.4s}
@keyframes eq { from{transform:scaleY(.3)} to{transform:scaleY(1)} }
.equalizer.paused span { animation-play-state:paused; }

.np-controls { display:flex; flex-direction:column; align-items:center; gap:1rem; flex-shrink:0; }

.play-button {
  width:72px; height:72px;
  border:none;
  border-radius:50%;
  background: var(--gradient);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(168,85,247,.4);
  transition: all var(--transition);
  flex-shrink:0;
}
.play-button:hover { transform:scale(1.08); box-shadow:0 12px 32px rgba(168,85,247,.6); }

.volume-control { display:flex; align-items:center; gap:.5rem; color:var(--muted); }
.volume-control input[type="range"] {
  -webkit-appearance:none; width:80px; height:3px;
  background:rgba(255,255,255,.15); border-radius:var(--radius-pill); outline:none;
}
.volume-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--primary); cursor:pointer;
}

.np-meta-extra { display:flex; flex-direction:column; align-items:flex-end; gap:1rem; flex-shrink:0; }
.np-station-name { display:block; font-weight:700; font-size:.95rem; }
.np-tagline      { color:var(--muted); font-size:.8rem; }
.np-donate-btn   { font-size:.85rem; padding:.7rem 1.25rem; }

/* =========================================================
   EVENTS GRID
========================================================= */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px,1fr));
  gap: 2rem;
}

.event-banner-card { overflow:hidden; }

.event-banner-image { position:relative; }
.event-banner-image img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform var(--transition-slow); }
.event-banner-card:hover .event-banner-image img { transform:scale(1.04); }

.event-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.85));
}

.event-type-badge {
  position:absolute; top:1rem; left:1rem;
  padding:.35rem .9rem;
  border-radius:var(--radius-pill);
  background:var(--gradient);
  font-size:.7rem; font-weight:700; letter-spacing:2px; color:#fff;
}

.event-banner-content { padding:1.75rem; }

.event-title { font-size:1.5rem; margin:.5rem 0 .75rem; }
.event-title a:hover { color:var(--primary); }

.event-meta { display:flex; flex-wrap:wrap; gap:1rem; color:var(--muted); font-size:.85rem; margin-bottom:.75rem; }
.event-meta-item { display:flex; align-items:center; gap:.35rem; }

.event-excerpt { color:var(--muted); font-size:.9rem; margin-bottom:1.25rem; }

.event-actions { display:flex; flex-wrap:wrap; gap:.75rem; }

/* =========================================================
   DJ GRID
========================================================= */
.dj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  gap: 2rem;
}

.dj-card { overflow:hidden; }

.dj-avatar { position:relative; }
.dj-avatar img { width:100%; aspect-ratio:1/1; object-fit:cover; filter:saturate(.7); transition:filter var(--transition); }
.dj-card:hover .dj-avatar img { filter:saturate(1); }

.live-ring {
  position:absolute; inset:20px;
  border:2px solid #22c55e; border-radius:50%;
  animation:pulse-ring 2s infinite ease-in-out;
}
@keyframes pulse-ring {
  0%,100% { opacity:.5; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.05); }
}

.dj-live-tag {
  position:absolute; top:1rem; right:1rem;
  padding:.3rem .7rem; border-radius:var(--radius-pill);
  background:var(--accent); color:#000;
  font-size:.65rem; font-weight:800; letter-spacing:2px;
}

.dj-content { padding:1.5rem; }
.dj-role    { color:var(--accent); font-size:.75rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; display:block; margin-bottom:.5rem; }
.dj-name    { font-size:1.6rem; margin-bottom:.5rem; }
.show-title { color:var(--primary); font-weight:700; margin-bottom:.25rem; }
.show-time  { color:var(--muted); font-size:.85rem; display:flex; align-items:center; gap:.35rem; margin-bottom:1rem; }
.dj-bio     { color:var(--muted); font-size:.9rem; margin-bottom:1.25rem; }

.dj-footer { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.dj-social-link {
  padding:.4rem 1rem;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  font-size:.8rem; font-weight:600;
  transition:all var(--transition);
}
.dj-social-link:hover { border-color:var(--primary); color:var(--primary); }
.dj-profile-link { margin-left:auto; font-size:.82rem; padding:.5rem 1.1rem; }

/* =========================================================
   YOUTUBE / VIDEO GRID
========================================================= */
.youtube-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  gap: 2rem;
}

.youtube-card { overflow:hidden; }

.youtube-thumb-wrap { position:relative; }
.youtube-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; transition:filter var(--transition); }
.youtube-card:hover .youtube-thumb { filter:brightness(.7); }

.youtube-play-btn {
  position:absolute; inset:0; margin:auto;
  width:60px; height:60px;
  border:none; border-radius:50%;
  background:var(--gradient);
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(168,85,247,.4);
  transition:all var(--transition);
  opacity:0; transform:scale(.8);
}
.youtube-card:hover .youtube-play-btn { opacity:1; transform:scale(1); }

.youtube-embed.playing { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.youtube-embed.playing iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

.youtube-content { padding:1.5rem; }
.video-label { color:var(--secondary); font-size:.75rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; display:block; margin-bottom:.5rem; }
.youtube-content h3 { margin-bottom:.5rem; font-size:1.2rem; }
.video-excerpt { color:var(--muted); font-size:.9rem; margin-bottom:1rem; }
.yt-watch-btn  { font-size:.82rem; padding:.55rem 1.1rem; }

/* =========================================================
   DONATION CTA
========================================================= */
.donation-cta-section { padding: 4rem 0 6rem; }

.donation-cta {
  text-align: center;
  padding: 5rem 3rem;
  position: relative;
  overflow: hidden;
}

.cta-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(168,85,247,.15), transparent 70%);
}

.cta-content { position:relative; z-index:1; max-width:700px; margin:0 auto; }
.cta-content h2 { font-size:clamp(2rem,4vw,3.5rem); margin:.75rem 0 1rem; }
.cta-content > p { color:var(--muted); margin-bottom:2rem; font-size:1.05rem; line-height:1.7; }

.cta-actions  { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; }
.cta-donate-btn { font-size:1.1rem; padding:1rem 2.5rem; }

.cta-tagline { color:var(--dimmed); font-size:.9rem; font-style:italic; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer {
  padding: 5rem 0 2rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.5);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-brand img { max-height:48px; margin-bottom:1rem; }
.footer-logo-text { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.4rem; font-weight:800; margin-bottom:1rem; }
.footer-brand p   { color:var(--muted); font-size:.9rem; line-height:1.7; margin-bottom:1.5rem; }

.footer-socials { display:flex; gap:.75rem; }
.social-btn {
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  color:var(--muted);
  transition:all var(--transition);
}
.social-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(168,85,247,.1); }

.footer-nav-group h4 { font-size:.8rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:1.25rem; font-weight:700; }
.footer-nav-group ul { display:flex; flex-direction:column; gap:.75rem; }
.footer-nav-group a  { color:var(--muted); font-size:.9rem; transition:color var(--transition); }
.footer-nav-group a:hover { color:var(--text); }

.footer-mission p { color:var(--muted); font-size:.9rem; line-height:1.7; }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: .85rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-tagline { font-style:italic; }

/* =========================================================
   INNER PAGES
========================================================= */
.small-hero {
  padding: calc(var(--header-h) + 4rem) 0 3rem;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(168,85,247,.15), transparent 60%);
  border-bottom: 1px solid var(--border);
}
.small-hero .section-label { margin-bottom:.75rem; }
.small-hero h1 { margin-bottom:1rem; }

.post-meta {
  display: flex; justify-content:center; gap:1.5rem;
  margin-top:.75rem; color:var(--muted); font-size:.85rem; flex-wrap:wrap;
}

.page-content, .single-post-layout, .archive-layout { padding-bottom:5rem; }

.page-card, .single-post-card { overflow:hidden; }

.page-inner, .single-post-content {
  padding: 2.5rem;
  font-size:1.05rem; line-height:1.8;
  color:rgba(255,255,255,.9);
}
.page-inner h2,.page-inner h3,.single-post-content h2,.single-post-content h3 { margin:2rem 0 .75rem; }
.page-inner p,.single-post-content p { margin-bottom:1rem; }
.page-inner a,.single-post-content a { color:var(--primary); }
.page-inner a:hover,.single-post-content a:hover { text-decoration:underline; }

.featured-image img { width:100%; aspect-ratio:16/9; object-fit:cover; }

/* Archive */
.archive-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem;
}

.archive-card { overflow:hidden; display:flex; flex-direction:column; }
.archive-image img { width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform var(--transition-slow); }
.archive-card:hover .archive-image img { transform:scale(1.04); }
.archive-content { padding:1.5rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.archive-title { font-size:1.4rem; }
.archive-title a:hover { color:var(--primary); }
.archive-date { color:var(--muted); font-size:.85rem; }
.archive-excerpt { color:var(--muted); font-size:.9rem; flex:1; }

/* Pagination */
.pagination-wrapper { margin-top:4rem; display:flex; justify-content:center; }
.pagination .nav-links { display:flex; gap:.75rem; }
.pagination .page-numbers {
  padding:.75rem 1.1rem;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  font-weight:600; color:var(--muted);
  transition:all var(--transition);
}
.pagination .page-numbers:hover { border-color:var(--primary); color:var(--text); }
.pagination .current { background:var(--gradient); border:none; color:#fff; }

.no-posts { padding:3rem; text-align:center; color:var(--muted); }
.empty-state { padding:2.5rem; text-align:center; color:var(--muted); }

/* =========================================================
   WIDGETS
========================================================= */
.widget-title { font-size:.8rem; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }

/* =========================================================
   WP NATIVE
========================================================= */
.alignleft  { float:left; margin-right:1.5rem; }
.alignright { float:right; margin-left:1.5rem; }
.aligncenter{ display:block; margin-inline:auto; }
.wp-caption-text { font-size:.8rem; color:var(--muted); text-align:center; margin-top:.5rem; }
.screen-reader-text { border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px; }

.wp-block-quote {
  border-left:4px solid var(--primary);
  padding:.5rem 0 .5rem 1.5rem;
  color:var(--muted); font-style:italic; margin:2rem 0;
}
.wp-block-separator { border:none; border-top:1px solid var(--border); margin:2rem 0; }

/* =========================================================
   ANIMATIONS & UTILITIES
========================================================= */
@keyframes pulse {
  0%,100% { opacity:.5; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.04); }
}

.fade-in { animation:fadeIn .6s ease both; }
@keyframes fadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:1100px){
  .footer-top { grid-template-columns:1fr 1fr; }
  .now-playing-wrapper { grid-template-columns:120px 1fr auto; }
  .np-meta-extra { grid-column:1/-1; flex-direction:row; justify-content:space-between; }
}

@media(max-width:900px){
  .main-navigation, .header-actions .secondary-button { display:none; }
  .mobile-toggle { display:flex; }
  .header-actions { gap:.5rem; }
}

@media(max-width:700px){
  :root { --header-h:60px; }
  section { padding:3.5rem 0; }
  .hero-section { padding:5rem 0 3rem; min-height:auto; }
  .now-playing-wrapper { grid-template-columns:80px 1fr; grid-template-rows:auto auto; padding:1.5rem; gap:1rem; }
  .np-controls { grid-column:1/-1; flex-direction:row; justify-content:center; }
  .np-meta-extra { grid-column:1/-1; flex-direction:column; align-items:center; }
  .footer-top { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .hero-stats { gap:1.5rem; }
  .donation-cta { padding:3rem 1.5rem; }
}

@media(max-width:480px){
  .event-grid, .dj-grid, .youtube-grid, .archive-grid {
    grid-template-columns:1fr;
  }
  .hero-actions { flex-direction:column; }
  .cta-actions  { flex-direction:column; align-items:center; }
}

/* =========================================================
   NOW PLAYING — IFRAME MODE
========================================================= */
.now-playing-iframe-mode {
  display: block;
  padding: 0;
}

.np-iframe-wrap {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  /* Ensure the iframe fills the card cleanly */
  line-height: 0;
}

.np-iframe-wrap iframe {
  width: 100%;
  display: block;
  border: none;
  border-radius: var(--radius);
  /* Height will come from the iframe's own height attribute;
     if the iframe has no height, provide a sensible fallback */
  min-height: 120px;
}

/* =========================================================
   NOW PLAYING — IFRAME MODE (home page)
========================================================= */
.now-playing-section--iframe {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 0;
}

.now-playing-section--iframe iframe {
  max-width: 100%;
  border: none !important;
}

/* Countdown SLT label */
.countdown-slt {
  display: block;
  font-size: .7rem;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 400;
}

/* hero-sub as div (supports HTML content) */
div.hero-sub {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
div.hero-sub a { color: var(--primary); }
div.hero-sub strong { color: var(--text); font-weight: 700; }