/* =============================================================
   KasieFM - Main Stylesheet
   Shared styles across all pages
   ============================================================= */

/* ---------- Font Imports ---------- */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

/* ---------- Material Symbols ---------- */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/* ---------- CSS Custom Properties (Design Tokens) ---------- */
:root {
  /* Surface colours */
  --color-background: #111415;
  --color-surface: #111415;
  --color-surface-dim: #111415;
  --color-surface-bright: #373a3b;
  --color-surface-container-lowest: #0c0f10;
  --color-surface-container-low: #191c1d;
  --color-surface-container: #1d2021;
  --color-surface-container-high: #282a2b;
  --color-surface-container-highest: #323536;
  --color-surface-variant: #323536;
  --color-surface-tint: #b6c4ff;

  /* On-surface colours */
  --color-on-surface: #e1e3e4;
  --color-on-surface-variant: #c3c5d9;
  --color-on-background: #e1e3e4;

  /* Primary */
  --color-primary: #b6c4ff;
  --color-primary-container: #0055ff;
  --color-primary-fixed: #dce1ff;
  --color-primary-fixed-dim: #b6c4ff;
  --color-on-primary: #002780;
  --color-on-primary-container: #e3e6ff;
  --color-on-primary-fixed: #001551;
  --color-on-primary-fixed-variant: #0039b3;
  --color-inverse-primary: #004dea;

  /* Secondary */
  --color-secondary: #ffb781;
  --color-secondary-container: #ff8a0d;
  --color-secondary-fixed: #ffdcc4;
  --color-secondary-fixed-dim: #ffb781;
  --color-on-secondary: #4e2600;
  --color-on-secondary-container: #623000;
  --color-on-secondary-fixed: #2f1400;
  --color-on-secondary-fixed-variant: #6f3800;

  /* Tertiary */
  --color-tertiary: #c8c6c5;
  --color-tertiary-container: #686767;
  --color-tertiary-fixed: #e5e2e1;
  --color-tertiary-fixed-dim: #c8c6c5;
  --color-on-tertiary: #313030;
  --color-on-tertiary-container: #eae6e6;
  --color-on-tertiary-fixed: #1c1b1b;
  --color-on-tertiary-fixed-variant: #474646;

  /* Error */
  --color-error: #ffb4ab;
  --color-error-container: #93000a;
  --color-on-error: #690005;
  --color-on-error-container: #ffdad6;

  /* Outline */
  --color-outline: #8d90a2;
  --color-outline-variant: #434656;

  /* Inverse */
  --color-inverse-surface: #e1e3e4;
  --color-inverse-on-surface: #2e3132;

  /* Brand extras */
  --color-sunrise-orange: #ff8a0d;
  --color-urban-yellow: #ffeb3b;

  /* Typography scale */
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-headline: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-label: "JetBrains Mono", monospace;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-gutter: 24px;
  --space-margin-desktop: 48px;
  --space-margin-mobile: 16px;
}

/* ---------- Base Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ---------- Themed Scrollbars (site-wide) ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-outline-variant) var(--color-surface-container-low);
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: var(--color-surface-container-low);
}
*::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-container);
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Typography Utilities ---------- */
.font-display {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.font-headline-lg {
  font-family: var(--font-headline);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.font-headline-lg-mobile {
  font-family: var(--font-headline);
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
}
.font-headline-md {
  font-family: var(--font-headline);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
.font-body-lg {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}
.font-body-md {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.font-callout {
  font-family: var(--font-headline);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.font-label-caps {
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

/* ---------- Glassmorphism ---------- */
.glass-panel {
  background: rgba(17, 20, 21, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-card {
  background: rgba(30, 30, 30, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(42, 42, 42, 1);
}

/* ---------- Top Utility Bar ---------- */
.top-utility-bar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 60;
  background-color: var(--color-surface-container-high);
  border-bottom: 1px solid rgba(67, 70, 86, 0.3);
  padding: 8px var(--space-margin-desktop);
}

.top-utility-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-utility-bar__left,
.top-utility-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.top-utility-bar__phone {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12px;
  color: var(--color-on-surface-variant);
}

.top-utility-bar__now-playing {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  border-left: 1px solid rgba(67, 70, 86, 0.3);
  padding-left: var(--space-md);
}

@media (min-width: 768px) {
  .top-utility-bar__now-playing {
    display: flex;
  }
}

.now-playing-badge {
  background: rgba(182, 196, 255, 0.1);
  color: var(--color-primary);
  padding: 2px var(--space-xs);
  border-radius: 4px;
  font-size: 10px;
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.top-utility-bar__weather {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 12px;
  color: var(--color-on-surface-variant);
  border-right: 1px solid rgba(67, 70, 86, 0.3);
  padding-right: var(--space-lg);
}

.top-utility-bar__socials {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.top-utility-bar__socials a {
  color: var(--color-on-surface-variant);
  transition: color 0.2s;
}

.top-utility-bar__socials a:hover {
  color: var(--color-primary);
}

/* Shared by both the top-bar and footer social links — one place to size
   the Facebook/X/Instagram brand marks instead of a repeated inline
   font-size on every icon, on every page. The SVGs use fill="currentColor"
   so they pick up the same hover-color transition the surrounding <a>
   already declares (here, and in .site-footer__socials below). */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ---------- Main Navigation ---------- */
.main-nav {
  background-color: var(--color-surface-container-highest);
  border-bottom: 1px solid var(--color-outline-variant);
  position: sticky;
  top: 40px;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.main-nav__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px var(--space-margin-desktop);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.main-nav__logo {
  height: 48px;
  width: 48px;
  object-fit: contain;
}

.main-nav__site-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  color: var(--color-secondary);
}

.main-nav__links {
  display: none;
  gap: 24px;
  font-size: 16px;
  margin-left: 32px;
}

@media (min-width: 768px) {
  .main-nav__links {
    display: flex;
  }
}

.main-nav__links a {
  color: var(--color-on-surface-variant);
  transition: color 0.2s;
}

.main-nav__links a:hover {
  color: var(--color-primary);
}
.main-nav__links a.active {
  color: var(--color-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 4px;
}

.main-nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-listen-live {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Same yellow as .btn-tune-in (home.css) — the two are the station's one
     "start listening" action and read as a pair. */
  background-color: var(--color-urban-yellow);
  color: var(--color-on-secondary-fixed);
  font-weight: 700;
  padding: 8px 24px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
  font-family: var(--font-body);
  font-size: 14px;
}

.btn-listen-live:hover {
  transform: scale(1.05);
}
.btn-listen-live:active {
  transform: scale(0.95);
}
.btn-listen-live--playing {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  animation: listen-live-pulse 2s ease-in-out infinite;
}
@keyframes listen-live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(182, 196, 255, 0.55);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(182, 196, 255, 0);
  }
}

/* --- Listen Live waveform visualiser --- */
.listen-live-waveform {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-listen-live--playing .listen-live-waveform {
  opacity: 1;
}
.listen-live-waveform__bar {
  width: 3px;
  height: 14px;
  background-color: currentColor;
  border-radius: 2px;
  transform: scaleY(0.2);
  transform-origin: bottom;
}
.btn-listen-live--playing .listen-live-waveform__bar:nth-child(1) {
  animation: listen-waveform 0.7s ease-in-out infinite alternate;
  animation-delay: 0ms;
}
.btn-listen-live--playing .listen-live-waveform__bar:nth-child(2) {
  animation: listen-waveform 0.9s ease-in-out infinite alternate;
  animation-delay: 180ms;
}
.btn-listen-live--playing .listen-live-waveform__bar:nth-child(3) {
  animation: listen-waveform 0.6s ease-in-out infinite alternate;
  animation-delay: 90ms;
}
.btn-listen-live--playing .listen-live-waveform__bar:nth-child(4) {
  animation: listen-waveform 0.8s ease-in-out infinite alternate;
  animation-delay: 270ms;
}
@keyframes listen-waveform {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}

/* ---------- Search Bar (nav) ---------- */
.nav-search {
  display: none;
  align-items: center;
  background-color: var(--color-surface-container-low);
  border-radius: 9999px;
  padding: 6px 16px;
  border: 1px solid var(--color-outline-variant);
  gap: 8px;
}

@media (min-width: 1024px) {
  .nav-search {
    display: flex;
  }
}

.nav-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-on-surface);
  font-size: 14px;
  width: 160px;
}

.nav-search input::placeholder {
  color: var(--color-on-surface-variant);
}

/* ---------- Persistent Audio Player ---------- */
.audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(67, 70, 86, 0.3);
  height: 80px;
  display: none;
  align-items: center;
  padding: 0 var(--space-margin-desktop);
}
.audio-player--visible {
  display: flex;
  animation: playerSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes playerSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.audio-player__inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gutter);
}

.audio-player__track {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 200px;
}

.audio-player__art {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(67, 70, 86, 0.3);
  flex-shrink: 0;
}

.audio-player__track-info p {
  margin: 0;
}
.audio-player__track-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-on-surface);
}
.audio-player__track-show {
  font-size: 12px;
  color: var(--color-primary);
}

.audio-player__controls {
  flex: 1;
  max-width: 448px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.audio-player__buttons {
  display: flex;
  align-items: center;
  gap: 24px;
}

.audio-player__btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface-variant);
  padding: 0;
  transition: color 0.2s;
  display: flex;
}

.audio-player__btn-icon:hover {
  color: white;
}

.audio-player__btn-play {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-fixed);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.audio-player__btn-play:hover {
  transform: scale(1.1);
}
.audio-player__btn-play:active {
  transform: scale(0.95);
}

.audio-player__progress {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-player__progress-bar {
  flex: 1;
  height: 4px;
  background-color: var(--color-surface-container-highest);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.audio-player__progress-fill {
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  border-radius: 9999px;
  box-shadow: 0 0 8px rgba(182, 196, 255, 0.6);
}

.audio-player__time {
  font-family: var(--font-label);
  font-size: 10px;
  color: var(--color-on-surface-variant);
}

.audio-player__volume {
  display: none;
  align-items: center;
  gap: 8px;
}

@media (min-width: 640px) {
  .audio-player__volume {
    display: flex;
  }
}

.audio-player__volume-bar {
  width: 96px;
  height: 4px;
  background-color: var(--color-surface-container-highest);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.audio-player__volume-fill {
  position: absolute;
  inset: 0;
  background-color: white;
  border-radius: 9999px;
}

/* ---------- Sidebar Widgets ---------- */
.widget {
  background-color: var(--color-surface-container-high);
  border-radius: 12px;
  padding: var(--space-md);
  border: 1px solid rgba(67, 70, 86, 0.2);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.widget__title {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

/* ---------- Schedule Row ---------- */
.schedule-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-surface-container);
  border-radius: 12px;
  border: 1px solid var(--color-outline-variant);
  cursor: pointer;
  transition: border-color 0.2s;
}

.schedule-row:hover {
  border-color: rgba(182, 196, 255, 0.5);
}

.schedule-row__time {
  min-width: 80px;
}

.schedule-row__time-number {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.schedule-row__time-ampm {
  font-size: 11px;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.schedule-row__info {
  flex: 1;
}
.schedule-row__show-name {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-secondary);
  transition: color 0.2s;
}
.schedule-row:hover .schedule-row__show-name {
  color: var(--color-primary);
}
.schedule-row__host {
  color: var(--color-on-surface-variant);
  font-size: 16px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 9999px;
  padding: var(--space-md) var(--space-lg);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn-secondary {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-fixed);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ---------- Breaking News Ticker ---------- */
.breaking-news-ticker {
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
  overflow: hidden;
  padding: 8px 0;
  border-top: 1px solid var(--color-outline-variant);
  border-bottom: 1px solid var(--color-outline-variant);
}

.breaking-news-ticker__scroll {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  gap: 48px;
}

.breaking-news-ticker__item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.breaking-news-ticker__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: var(--color-error);
  animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex-shrink: 0;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ---------- Scrolling sponsors text ---------- */
.scrolling-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ---------- Audio Wave Animation ---------- */
.audio-wave span {
  display: inline-block;
  width: 3px;
  background: var(--color-primary);
  margin: 0 1px;
  animation: wave 1s ease-in-out infinite;
}

@keyframes wave {
  0%,
  100% {
    height: 4px;
  }
  50% {
    height: 16px;
  }
}

/* ---------- Waveform Visualizer Bars ---------- */
.waveform-bar {
  width: 4px;
  background-color: var(--color-primary);
  border-radius: 9999px;
  animation: bounce-bar 1s infinite;
}

@keyframes bounce-bar {
  0%,
  100% {
    transform: scaleY(0.4);
  }
  50% {
    transform: scaleY(1);
  }
}

/* ---------- Pulse Animation (live dot) ---------- */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--color-surface-container-lowest);
  border-top: 1px solid rgba(67, 70, 86, 0.5);
  padding: var(--space-xl) var(--space-margin-desktop);
}

.site-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-gutter);
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

.site-footer__brand-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 8px;
}

.site-footer__tagline {
  color: var(--color-on-surface-variant);
  font-size: 16px;
  line-height: 24px;
  max-width: 320px;
  margin-bottom: var(--space-sm);
}

.site-footer__col-title {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-on-surface);
  margin-bottom: var(--space-md);
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__col ul a {
  color: var(--color-on-surface-variant);
  transition: color 0.2s;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-footer__col ul a:hover {
  color: var(--color-secondary);
}

.site-footer__socials {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.site-footer__socials a {
  color: var(--color-on-surface-variant);
  transition: color 0.2s;
}
.site-footer__socials a:hover {
  color: var(--color-primary);
}

.site-footer__bottom {
  max-width: 1280px;
  margin: var(--space-xl) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(67, 70, 86, 0.1);
  text-align: center;
  font-size: 14px;
  color: var(--color-on-surface-variant);
}

/* ---------- Contact / Complaint Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  background: rgba(17, 20, 21, 0.8);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-overlay.is-open {
  display: flex;
}

.modal {
  background-color: var(--color-surface-container-highest);
  border-radius: 12px;
  border: 1px solid rgba(67, 70, 86, 0.3);
  width: 100%;
  max-width: 448px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  display: none;
}

.modal.is-open {
  display: block;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-outline-variant);
}

.modal__title {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: color 0.2s;
  display: flex;
}

.modal__close:hover {
  color: white;
}

.modal__body {
  padding: var(--space-md);
}

.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: 4px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  background-color: rgba(50, 53, 54, 0.3);
  border: 1px solid rgba(67, 70, 86, 0.2);
  border-radius: 8px;
  padding: 12px;
  color: white;
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--color-primary);
}

.form-textarea {
  height: 128px;
  resize: vertical;
}

.btn-form-submit {
  width: 100%;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 600;
  padding: 10px 0;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: filter 0.2s;
}

.btn-form-submit:hover {
  filter: brightness(1.1);
}

/* ---------- Utility: Visually Hidden ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Utility: Truncate ---------- */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Responsive body padding (accounts for sticky bars) ---------- */
body {
  padding-top: 40px;
}
body.audio-player-active {
  padding-bottom: 80px;
}

/* ─────────────────────────────────────────────
   MISSING UTILITY CLASSES (patched)
   ───────────────────────────────────────────── */

/* Now-playing label in top bar */
.now-playing-show {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-on-surface);
}

/* Newsletter form in footer */
.newsletter-form {
  display: flex;
  gap: 8px;
}

/* Poll container widget */
.poll-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Community Poll — shared across all pages */
.poll-option {
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--color-outline-variant);
  background: none;
  color: var(--color-on-surface);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  transition: border-color 0.2s;
  font-family: var(--font-body);
}

.poll-option:last-of-type {
  margin-bottom: 0;
}

.poll-option__vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.poll-option:hover {
  border-color: var(--color-primary);
}
.poll-option:hover .poll-option__vote {
  opacity: 1;
}

.poll-option--voted {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-color: var(--color-primary);
  color: var(--color-on-surface);
}
.poll-option--voted .poll-option__vote {
  opacity: 1;
  color: var(--color-primary);
  font-weight: 600;
}

/* Results are public for this poll (poll.live_results_public — the API omits
   every option's vote_count entirely when it is false, see common.js §10):
   show the count permanently instead of only as a hover-revealed "Vote" CTA. */
.poll-container--results .poll-option__vote {
  opacity: 1;
  color: var(--color-on-surface-variant);
  font-weight: 500;
}
.poll-container--results .poll-option--voted .poll-option__vote {
  color: var(--color-primary);
  font-weight: 600;
}

/* Action links — "Show Your Talent" sidebar CTA, shared across all pages */
.action-links { display: flex; flex-direction: column; gap: var(--space-xs); }

.action-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  border-radius: 8px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.action-link--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.action-link--surface {
  background-color: var(--color-surface-container-low);
  border: 1px solid rgba(67, 70, 86, 0.10);
  color: var(--color-on-surface);
}

.action-link--surface:hover { background-color: var(--color-surface-container-high); }

/* Pagination — shared across news, shows, events, team */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 32px 0;
}

.page-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  cursor: pointer;
  font-weight: 700;
  transition: background 0.2s;
}

.page-btn:hover {
  background-color: var(--color-surface-variant);
}
.page-btn.active {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.page-ellipsis {
  color: var(--color-on-surface-variant);
  padding: 0 4px;
}

.poll-vote-count {
  text-align: center;
  font-family: var(--font-label);
  font-size: 10px;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  margin-top: 16px;
}

/* Sidebar: Upcoming Shows — shared across all pages */
.upcoming-show-item {
  display: flex;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(40, 42, 43, 0.5);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  margin-bottom: 16px;
}

.upcoming-show-item:last-child {
  margin-bottom: 0;
}
.upcoming-show-item:hover {
  background-color: var(--color-surface-container-highest);
}

.upcoming-show-item__hour {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 24px;
  flex-shrink: 0;
}

.upcoming-show-item__hour--orange {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}
.upcoming-show-item__hour--blue {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.upcoming-show-item__name {
  font-family: var(--font-headline);
  font-size: 14px;
  color: var(--color-on-surface);
  transition: color 0.2s;
}
.upcoming-show-item:hover .upcoming-show-item__name {
  color: var(--color-secondary);
}
.upcoming-show-item__host {
  font-size: 12px;
  color: var(--color-on-surface-variant);
  margin-top: 4px;
}
.upcoming-show-item__time {
  font-family: var(--font-label);
  font-size: 10px;
  margin-top: 8px;
}
.upcoming-show-item__time--orange {
  color: var(--color-secondary);
}
.upcoming-show-item__time--blue {
  color: var(--color-primary);
}

/* Sidebar: Upcoming Events — shared across all pages */
.events-list { display: flex; flex-direction: column; gap: var(--space-md); }

.event-item { display: flex; gap: var(--space-sm); text-decoration: none; color: inherit; cursor: pointer; }

.event-item__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xs);
  border-radius: 8px;
  min-width: 40px;
  font-size: 10px;
  font-weight: 700;
}

.event-item__date--orange { background: rgba(255, 138, 13, 0.10); color: var(--color-sunrise-orange); }
.event-item__date--blue   { background: rgba(182, 196, 255, 0.10); color: var(--color-primary); }
.event-item__date--yellow { background: rgba(255, 235, 59, 0.10); color: var(--color-urban-yellow); }

.event-item__date .day { font-size: 18px; font-weight: 700; line-height: 1; }

.event-item__name { font-family: var(--font-headline); font-size: 14px; color: white; margin: 0; }
.event-item__venue { font-size: 12px; color: var(--color-on-surface-variant); margin: 2px 0 0; }

/* Article card footer row */
.article-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-outline-variant);
}

/* =================================================================
   RESPONSIVE — Mobile Nav + Global Overrides
   ================================================================= */

/* ── Hamburger button (visible < 768px) ──────────────────────── */
.main-nav__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-on-surface);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
}
.main-nav__hamburger:hover {
  background: var(--color-surface-container-highest);
}
@media (min-width: 768px) {
  .main-nav__hamburger {
    display: none;
  }
}

/* ── Mobile nav overlay ──────────────────────────────────────── */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
}
.mobile-nav-overlay.is-open {
  display: block;
}

.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mobile-nav-drawer {
  position: absolute;
  top: 2rem;
  right: 0;
  width: min(300px, 85vw);
  height: 100%;
  background: var(--color-surface-container);
  border-left: 1px solid var(--color-outline-variant);
  display: flex;
  flex-direction: column;
  padding-top: 72px;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}
.mobile-nav-overlay.is-open .mobile-nav-drawer {
  transform: translateX(0);
}

.mobile-nav-drawer__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-outline-variant);
}
.mobile-nav-drawer__brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-secondary);
}
.mobile-nav-drawer__close {
  background: none;
  border: none;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  display: flex;
  padding: 4px;
  border-radius: 8px;
  transition:
    color 0.2s,
    background 0.2s;
}
.mobile-nav-drawer__close:hover {
  color: white;
  background: var(--color-surface-container-highest);
}

.mobile-nav-drawer__links {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 2px;
}
.mobile-nav-drawer__link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--color-on-surface-variant);
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}
.mobile-nav-drawer__link:hover {
  background: var(--color-surface-container-high);
  color: var(--color-primary);
}
.mobile-nav-drawer__link.active {
  color: var(--color-primary);
  background: rgba(182, 196, 255, 0.08);
}

.mobile-nav-drawer__listen {
  margin: 8px 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Matches the header .btn-listen-live above — same action, same colour. */
  background: var(--color-urban-yellow);
  color: var(--color-on-secondary-fixed);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  justify-content: center;
  transition: transform 0.2s;
}
.mobile-nav-drawer__listen:hover {
  transform: scale(1.03);
}

/* ── Top utility bar on small screens ────────────────────────── */
@media (max-width: 639px) {
  .top-utility-bar {
    padding: 6px var(--space-margin-mobile);
  }
  .top-utility-bar__weather,
  .top-utility-bar__socials {
    display: none;
  }
}

/* ── Main nav on mobile ──────────────────────────────────────── */
@media (max-width: 767px) {
  .main-nav__inner {
    padding: 10px var(--space-margin-mobile);
    position: relative; /* anchor for absolutely-placed listen-live */
  }
  .main-nav__logo {
    height: 36px;
    width: 36px;
  }
  .main-nav__site-name {
    font-size: 22px;
  }
  .main-nav {
    top: 37px;
  } /* utility bar is 37px tall on mobile */

  /* Listen Live → absolute center, icon only */
  .btn-listen-live {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0; /* hides the text node */
    width: 40px;
    height: 40px;
    min-width: unset;
    padding: 6px;
    gap: 0;
    border-radius: 9999px;
    justify-content: center;
  }
  .btn-listen-live .material-symbols-outlined {
    font-size: 22px; /* restore icon size */
  }
  /* :hover/:active outrank the plain class above and a media query adds no
     specificity, so an un-composed scale() wiped the translateX(-50%) that
     centres this button — it jumped half its width to the right on every
     tap and back on release. Both states must restate the centring. */
  .btn-listen-live:hover {
    transform: translateX(-50%) scale(1.05);
  }
  .btn-listen-live:active {
    transform: translateX(-50%) scale(0.95);
  }
  /* A 22px icon plus ~21px of waveform does not fit the 40px circle's 28px
     content box — it squeezed the icon off-centre whenever playback started.
     The --playing pulse is the state signal at this size. */
  .btn-listen-live .listen-live-waveform {
    display: none;
  }
}

/* ── Audio player on small screens ──────────────────────────── */
@media (max-width: 639px) {
  .audio-player {
    padding: 0 var(--space-margin-mobile);
    height: 60px;
  }
  .audio-player__art {
    width: 36px;
    height: 36px;
  }
  /* .audio-player__volume is display:none below 640px, leaving
     .audio-player__inner's space-between with only two flex
     participants (track, controls) — that pushes controls, and the
     play button inside it, off toward the right edge instead of the
     true center. Taking track out of flow lets controls be the only
     flex participant, so justify-content: center lands it dead
     center regardless of track's width. */
  .audio-player__inner {
    position: relative;
    justify-content: center;
  }
  .audio-player__track {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    min-width: 0;
    max-width: calc(50% - 60px);
    flex: 1;
    gap: 10px;
  }
  .audio-player__track-name {
    font-size: 12px;
  }
  .audio-player__track-show {
    display: none;
  }
  .audio-player__buttons {
    gap: 12px;
  }
  .audio-player__btn-play {
    width: 36px;
    height: 36px;
  }
  /* Hide shuffle & repeat on smallest screens */
  .audio-player__btn-icon:first-child,
  .audio-player__btn-icon:last-child {
    display: none;
  }
  body.audio-player-active {
    padding-bottom: 60px;
  }
}

/* ── Section title size on mobile ────────────────────────────── */
@media (max-width: 767px) {
  .section-title {
    font-size: 22px;
    line-height: 28px;
  }
}

/* ── Footer newsletter form on mobile ────────────────────────── */
@media (max-width: 639px) {
  .site-footer {
    padding: var(--space-lg) var(--space-margin-mobile);
  }
  .newsletter-form {
    flex-direction: column;
    gap: 8px;
  }
  .newsletter-form input,
  .newsletter-form button {
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* ── Modals on mobile ────────────────────────────────────────── */
@media (max-width: 767px) {
  .modal {
    max-width: calc(100vw - 32px);
  }
}

/* ═══ Loading & reveal ══════════════════════════════════════════
   .kasie-sheen         the shared animated surface
   .kasie-skel--*       structural placeholders injected into lists;
                        they mirror the real card's geometry so nothing
                        shifts when content lands
   [data-kasie-pending] an overlay for regions that keep their own
                        markup (heroes, sidebars, detail pages)
   .kasie-reveal        the entrance the real content makes          */

:root {
  --kasie-skel-base: var(--color-surface-container-high);   /* #282a2b */
  --kasie-skel-tint: rgba(255, 235, 59, 0.07);              /* urban yellow, barely there */
}

@keyframes kasie-sweep {
  from { background-position: -150% 0; }
  to   { background-position:  250% 0; }
}
@keyframes kasie-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* A warm sweep rather than a grey pulse — it reads as the station's own
   colour moving through the surface, not as a broken image. One rule
   serves both the injected skeletons and the overlay. */
.kasie-sheen,
[data-kasie-pending]::after {
  background-color: var(--kasie-skel-base);
  background-image: linear-gradient(100deg,
    transparent 18%,
    var(--kasie-skel-tint) 40%,
    rgba(255, 255, 255, 0.05) 50%,
    var(--kasie-skel-tint) 60%,
    transparent 82%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: kasie-sweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ── Structural skeletons (injected into list containers) ── */
.kasie-skel { border-radius: 12px; overflow: hidden; }
.kasie-skel__media { width: 100%; aspect-ratio: 16 / 10; }
.kasie-skel__lines { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.kasie-skel__line { display: block; height: 12px; border-radius: 6px; }
.kasie-skel__line--title { height: 20px; border-radius: 8px; }

.kasie-skel--row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.kasie-skel--row .kasie-skel__badge { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; }
.kasie-skel--row .kasie-skel__lines { flex: 1; padding: 0; gap: 8px; }

/* Staggered so a grid ripples instead of strobing in unison. */
.kasie-skel:nth-child(2) .kasie-sheen { animation-delay: 0.12s; }
.kasie-skel:nth-child(3) .kasie-sheen { animation-delay: 0.24s; }
.kasie-skel:nth-child(4) .kasie-sheen { animation-delay: 0.36s; }
.kasie-skel:nth-child(5) .kasie-sheen { animation-delay: 0.48s; }
.kasie-skel:nth-child(6) .kasie-sheen { animation-delay: 0.60s; }

/* ── Overlay for regions that keep their own markup ── */
[data-kasie-pending] { position: relative; overflow: hidden; }
[data-kasie-pending] > * { visibility: hidden; }
[data-kasie-pending]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ── The reveal ── */
.kasie-reveal { animation: kasie-reveal 0.28s ease-out both; }
.kasie-reveal:nth-child(2) { animation-delay: 0.05s; }
.kasie-reveal:nth-child(3) { animation-delay: 0.10s; }
.kasie-reveal:nth-child(4) { animation-delay: 0.15s; }
.kasie-reveal:nth-child(5) { animation-delay: 0.20s; }
.kasie-reveal:nth-child(6) { animation-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .kasie-sheen,
  [data-kasie-pending]::after,
  .kasie-reveal { animation: none; }
}