/* --- NAVBAR & MODALS ONLY --- */
    @media (max-width: 750px) {
  .navbar { display: none !important; }
  #burgerMenuBtn { display: block !important; }
}
@media (min-width: 751px) {
  #burgerMenuBtn, #burgerDropdown { display: none !important; }
}
.menu-link {
  display: block;
  background: #fed351;   /* <-- This line adds the yellow background */
  color: #191c29;
  font-size: 1.07em;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  margin-bottom: 0;
  box-shadow: 0 2px 10px #0001;
  transition: background 0.2s, color 0.2s;
}
.menu-link:active,
.menu-link:hover {
  background: #ffe67c;
  color: #191c29;
}

.navbar {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      background: #222;
      z-index: 1001;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      padding: 9px 0 8px 0;
      box-shadow: 0 2px 12px #111a;
    }
    .navbar a {
      color: #222;
      background: #fed351;
      padding: 8px 18px;
      border-radius: 16px;
      font-weight: bold;
      text-decoration: none;
      font-size: 16px;
      margin: 0 2px;
      transition: background 0.2s, color 0.2s;
      border: none;
      cursor: pointer;
      outline: none;
      display: inline-block;
    }
    .navbar a:hover, .navbar a:focus {
      background: #00818a;
      color: #fff;
    }
    @media (max-width: 750px) {
      .navbar {
        flex-direction: column;
        gap: 2px;
        padding: 5px 0 5px 0;
      }
      .navbar a {
        margin: 2px 0;
        font-size: 15px;
        padding: 8px 12px;
        border-radius: 10px;
      }
    }
    .modal {
      display: none;
      position: fixed;
      z-index: 2000;
      left: 0; top: 0;
      width: 100vw; height: 100vh;
      overflow: auto;
      background: rgba(0,0,0,0.78);
      transition: background 0.2s;
    }
    .modal-content {
      background: #fff;
      color: #222;
      margin: 8% auto;
      padding: 30px 20px 20px 20px;
      border-radius: 16px;
      width: 94vw;
      max-width: 920px;
      min-height: 80px;
      box-shadow: 0 0 34px #00818a99;
      position: relative;
      text-align: left;
      animation: modalpop 0.2s;
    }
    @keyframes modalpop {
      0% { transform: scale(0.85); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }
    .close {
      position: absolute;
      right: 16px; top: 14px;
      font-size: 32px;
      font-weight: bold;
      color: #00818a;
      cursor: pointer;
      transition: color 0.2s;
    }
    .close:hover { color: #ff4d4d; }
    .modal-content h2 {
      margin-top: 0;
      color: #00818a;
      font-size: 1.25em;
      margin-bottom: 6px;
    }
    .modal-content p {
      margin: 0 0 5px 0;
    }
    /* --- END NAVBAR & MODALS ONLY --- */

    /* --- PLAYER AND PANEL STYLES --- */

#liveClock {
  background: #151516;
  border: 2px solid #500;
  border-radius: 14px;
  padding: 8px 16px;
  margin: 0 auto 14px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Consolas', 'Courier New', monospace;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 1px 10px #111a;
  max-width: 95vw;
  text-align: center;
}

#clockCombined {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  line-height: 1.2;
  word-spacing: 0.1em;
}

#clockTime {
  color: #e53935;
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#clockDate {
  font-size: 1.05em;
  color: #fed351;
  font-family: 'Montserrat', sans-serif;
  text-shadow: 0 1px 2px #111;
}

/* ✅ MOBILE TWEAKS */
@media (max-width: 480px) {
  #clockTime {
    font-size: 1.2em;
  }

  #clockDate {
    font-size: 0.95em;
  }

  #clockCombined {
    gap: 10px;
  }

  #liveClock {
    padding: 6px 12px;
  }
}
body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #00818a, #7e1974);
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* display: flex; justify-content: center;  <== REMOVE THIS LINE */
}
.header-spacer {
  height: 92px;
}
@media (max-width: 750px) {
  .header-spacer { height: 8px; }
}

    @media (max-width: 750px) {
      body {
        padding: 0 !important;
      }
    }
    .strip-container {
      display: flex;
      flex-direction: row;
      width: 100%;
      max-width: 1100px;
      min-height: 280px;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
      background-color: #111;
      position: relative;
      z-index: 1;
    }
    .left-panel, .right-panel {
      width: 50%;
      padding: 20px 30px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .left-panel {
      background: #111;
      align-items: center;
      text-align: center;
      border-right: 1px solid #333;
      justify-content: flex-start;
      padding-top: 30px;
    }
    .right-panel {
  background: #222;
  border-left: 1px solid #333;
}

/* And let wheel / swipe bubble out when you hit the end */
.right-panel { overscroll-behavior: contain; }
    #player-box {
      max-width: 420px;
      width: 100%;
    }
    button {
      background-color: #fed351;
      color: #111;
      border-radius: 8px;
      padding: 12px 24px;
      font-weight: 600;
      font-size: 18px;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      user-select: none;
    }
    button:hover,
    button:focus {
      background-color: #e5c73f;
      box-shadow: 0 0 10px #fed351cc;
      outline: none;
    }
    #mute-toggle {
      font-size: 16px;
      padding: 6px 12px;
      vertical-align: middle;
      margin-left: 10px;
    }
    #volume-container {
      margin-top: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    #volume-container label {
      font-size: 16px;
      margin: 0;
      user-select: none;
    }
    #volume-slider {
      width: 180px;
      cursor: pointer;
    }
    #volume-display {
      font-size: 16px;
      color: #ccc;
      min-width: 40px;
      text-align: left;
      user-select: none;
    }
    #onAirNow {
      margin-top: 10px;
      margin-bottom: 10px;
      text-align: center;
      padding-right: 0;
      max-width: 95%;
      margin-left: auto;
      margin-right: auto;
    }
    .pulsing-label {
      color: #ff4d4d;
      font-weight: 700;
    }

    @media (max-width: 768px) {
      button#play-toggle {
        font-size: 16px;
        padding: 12px 16px;
        width: 100%;
        margin-top: 10px;
      }
      #volume-container {
        display: none !important;
      }
      #volume-slider {
        width: 100%;
      }
      #volume-display, #mute-toggle {
        align-self: flex-end;
      }
      #nowPlaying {
        margin-top: 18px;
      }
      .artwork-container img {
        width: 100%;
        height: auto;
        border-radius: 10px;
      }
    }
    #now-playing-card {
      margin-top: 25px;
      background: #1a1a1a;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 15px rgba(0, 131, 138, 0.7);
      max-width: 420px;
      text-align: left;
      font-size: 17px;
      line-height: 1.7;
      color: white;
    }
    #artwork {
      margin-top: 25px;
      border-radius: 8px;
      width: 280px;
      height: 280px;
      object-fit: cover;
      border: 2px solid #fed351;
      box-shadow: 0 0 15px #fed351aa;
      user-select: none;
      opacity: 0;
      filter: blur(10px) brightness(0.8);
      transition: opacity 0.4s ease-in-out, filter 0.4s ease-in-out;
    }
    #artwork.loaded {
      opacity: 1;
      filter: blur(0) brightness(1);
    }
    #artwork.fallback {
      filter: blur(5px) brightness(0.8);
      opacity: 0.7;
      box-shadow: 0 0 10px rgba(254, 211, 81, 0.4);
    }
    .recent-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #fed351;
      user-select: none;
    }
    ul#recent-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul#recent-list li {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid #444;
      transition: background 0.2s ease;
    }
    ul#recent-list li:hover {
      background: rgba(255, 255, 255, 0.05);
    }
    ul#recent-list img {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      object-fit: cover;
      border: 1px solid #fed351;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
      user-select: none;
      opacity: 0;
      transition: opacity 0.4s ease-in-out;
    }
    ul#recent-list img.loaded {
      opacity: 1;
    }
    ul#recent-list span.time {
      color: #fed351;
      font-weight: 600;
      width: 50px;
      text-align: right;
      flex-shrink: 0;
      user-select: none;
    }
    ul#recent-list span.info {
      flex: 1;
      color: white;
      font-size: 16px;
      user-select: none;
    }
    .refresh-indicator {
      display: inline-block;
      margin-left: 8px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fed351;
      animation: pulse 1.2s infinite;
      vertical-align: middle;
    }
    .strip-container { position: relative; z-index: 1; }
    .player-wrapper {
  position: relative;
}

.logo-overhang {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  max-width: 320px;
  z-index: 3000;
  opacity: 0.98;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.32));
  /* New: Only overhang a bit on big screens */
  transform: translate(-24%, -32%);
  transition: width 0.2s, transform 0.2s;
}

/* Medium screens: pull the logo in a bit */
@media (max-width: 1000px) {
  .logo-overhang {
    width: 140px;
    transform: translate(-10%, -22%);
  }
}

/* Mobile screens: shrink and drop overhang */
@media (max-width: 600px) {
  .logo-overhang {
    width: 130px;
    transform: translate(0, 0);
    left: 4px;
    top: 2px;
  }
}

    .live-indicator {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: bold;
      color: #ff4d4d;
      font-size: 0.95em;
      margin-left: 10px;
      user-select: none;
    }
    .live-indicator .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ff4d4d;
      animation: pulse 1.2s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 0.2; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.4); }
    }
    @media (max-width: 768px) {
      .strip-container { flex-direction: column; }
      .left-panel, .right-panel { width: 100%; padding: 20px; }
      #artwork { width: 100%; max-width: 280px; height: auto; }
      #onAirNow { text-align: center; }
    }
    #onAirNow { margin-top: 10px; margin-bottom: 10px; text-align: center; padding-right: 16px; max-width: 95%; margin-left: auto; margin-right: 0; }
    #onAirNow br { display: none; }
    #play-toggle { margin-bottom: 12px; }
    #onAirNow span { display: block; line-height: 1.2; }
    .show-title { font-weight: 600; }
    .show-presenter {
  font-weight: 400;
  font-size: 0.95em;
  opacity: 0.9;
  font-style: italic;
  padding-bottom: 6px !important;
  padding-right: 4px !important;   /* extra gap from the rounded corner   */
  line-height: 1.45em !important;
  display: block;
  overflow: visible !important;
}
.show-presenter .presenter-link {
  font-style: italic;
  color: #fff;
  text-decoration: none;
}
.show-presenter .presenter-link:hover { color: #ffd866; }

    .left-panel { padding-top: 4px; }
    #player-box { margin-top: -4px; }
    #nowPlaying { margin-top: 8px; margin-bottom: 8px; }
    @media (max-width: 768px) {
      .recent-title { font-size: 16px; margin-bottom: 14px; }
      ul#recent-list li { gap: 10px; padding: 10px 0; }
      ul#recent-list img { width: 38px; height: 38px; }
      ul#recent-list span.info { font-size: 12px; }
      ul#recent-list span.time { font-size: 12px; width: 40px; }
    }
    
    /* Modal Schedule Styling */
    #modalScheduleContainer .day-card {
      background: #111;
      border: 1px solid #333;
      border-radius: 12px;
      padding: 20px;
      width: 100%;
      max-width: 860px;
      box-shadow: 0 0 20px rgba(0,0,0,0.3);
      margin-bottom: 10px;
    }
    #modalScheduleContainer .day-card h2,
    #modalScheduleContainer .day-card h3 {
      font-size: 21px;
      margin: 0 0 18px;
      color: #fed351;
      text-align: center;
    }
    #modalScheduleContainer .split-columns {
      display: flex;
      gap: 24px;
    }
    #modalScheduleContainer .column {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    #modalScheduleContainer .show-entry {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 18px;
    }
    #modalScheduleContainer .show-entry img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #fed351;
      flex-shrink: 0;
    }
    #modalScheduleContainer .show-info {
      display: flex;
      flex-direction: column;
    }
    #modalScheduleContainer .show-info time {
      font-weight: 600;
      color: #fed351;
      font-size: 14px;
    }
    #modalScheduleContainer .show-title-presenter {
      margin-top: 2px;
      margin-bottom: 2px;
    }
    #modalScheduleContainer .show-title-presenter .show-title {
      font-weight: 600;
      color: #fff;
      display: block;
      font-size: 1.04em;
      line-height: 1.2;
      margin-bottom: 2px;
    }
    #modalScheduleContainer .show-title-presenter .show-presenter {
      font-size: 0.96em;
      color: #fed351;
      font-style: italic;
      text-decoration: none;
      line-height: 1.2;
      display: inline-block;
    }
    #modalScheduleContainer .show-title-presenter .show-presenter:hover {
      color: #ffd866;
    }
    #modalScheduleContainer .show-details {
      font-size: 13px;
      color: #ccc;
      margin-top: 4px;
      line-height: 1.5;
    }
    @media (max-width: 900px) {
      #modalScheduleContainer .split-columns { flex-direction: column; gap:0; }
    }
    /* Playlist Modal Styling */
    .playlist-image {
  width: 100%;
  max-width: 600px; /* or 650px */
  border-radius: 18px;
  display: block;
  margin: 0 auto 18px auto;
}
  /* --- IMPROVED RESPONSIVE CSS FOR MOBILE (≤ 768px) --- */
@media (max-width: 768px) {

  body {
    padding: 12px 2vw 8vw 2vw !important;
  }

  .strip-container {
    flex-direction: column !important;
    border-radius: 10px !important;
    max-width: 100vw !important;
    min-height: 0 !important;
    box-shadow: 0 0 14px rgba(0,0,0,0.22) !important;
  }

  .left-panel, .right-panel {
    width: 100% !important;
    padding: 10px 4px 12px 4px !important;
    border: none !important;
    min-height: unset !important;
  }

  .left-panel {
    padding-top: 8px !important;
    align-items: stretch !important;
  }

  #player-box, #now-playing-card {
    max-width: 98vw !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-shadow: none !important;
  }

/* Fix mobile font styling */
.presenter-line {
  font-size: 0.96em;
  color: #fed351;
  font-style: italic;
  display: inline-block;
  margin-top: 0.5px;
  line-height: 1.4;
  padding-bottom: 3px;
}

.show-title-presenter .show-title {
  font-weight: 600;
  color: #fff;
  font-style: normal; /* ✅ Ensure show title is NOT italic */
  font-size: 1.04em;
  display: block;
  line-height: 1.2;
  margin-bottom: 2px;
}

  #now-playing-card {
    font-size: 15px !important;
    padding: 10px 4px !important;
    border-radius: 7px !important;
    margin-top: 12px !important;
  }

  #artwork {
    width: 94vw !important;
    max-width: 140px !important;
    height: auto !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    border-radius: 7px !important;
  }

  
  .recent-title {
    font-size: 13px !important;
    margin-bottom: 5px !important;
    padding-top: 3px !important;
  }

  ul#recent-list li {
    gap: 6px !important;
    padding: 8px 0 !important;
  }

  ul#recent-list img {
    width: 26px !important;
    height: 26px !important;
    border-radius: 4px !important;
  }

  ul#recent-list span.info, ul#recent-list span.time {
    font-size: 11px !important;
  }

  button, #mute-toggle {
    font-size: 14px !important;
    padding: 8px 14px !important;
    border-radius: 7px !important;
  }

  #volume-container label, #volume-display {
    font-size: 11px !important;
  }

  #volume-slider {
    width: 84px !important;
  }

  /* ON AIR NOW & SHOW */
  #onAirNow {
    font-size: 15px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    padding-right: 0 !important;
    max-width: 100vw !important;
  }
  .show-title { font-size: 0.9em !important; }
  .show-presenter { font-size: 0.8em !important; }

 
  .close {
    font-size: 24px !important;
    top: 8px !important;
    right: 8px !important;
  }

  .playlist-image {
    max-width: 97vw !important;
    border-radius: 9px !important;
    margin-bottom: 10px !important;
  }

 
  /* Right column separators — similar feel to the left */
.side-banner-panel > :is(.side-social, .side-listen, #rnh-news-hub, #ayrshire-college)
  + :is(.side-social, .side-listen, #rnh-news-hub, #ayrshire-college){
  margin-top:12px;              /* space before the next section */
  padding-top:12px;             /* space after the rule */
  border-top:1px solid #2b2b2b; /* the line */
  box-shadow:0 -1px 0 rgba(255,255,255,.05) inset; /* subtle highlight */
}

/* MOBILE TWEAKS */

@media (max-width: 768px) {
  .right-panel {
    overscroll-behavior: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
@media (max-width: 768px) {
  .strip-container {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .left-panel,
  .right-panel {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .recently-played-container {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  ul#recent-list {
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }
}

/* === FINAL MOBILE SMOOTH-SCROLL TWEAKS === */
@media (max-width: 768px) {
  /* Let right column release momentum smoothly */
  .right-panel {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Let recent list claim only vertical drags */
  ul#recent-list {
    touch-action: pan-y !important;
  }
}

@media (max-width: 768px) {
  .right-panel {
    overscroll-behavior: auto !important;   /* let scroll bubble out */
    overflow-y: auto !important;            /* its own scroll, momentum OK */
    -webkit-overflow-scrolling: touch !important;
  }
}
.logo-hide {
  display: none !important;
}
@media (max-width: 750px) {
  #burgerMenuBtn {
    position: fixed;
    top: 20px;
    left: 8px;
    width: 32px;          /* Smaller width */
    height: 32px;         /* Smaller height */
    background: #fed351;
    border-radius: 7px;
    z-index: 2001;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px #0002;
    padding: 0;
    transition: box-shadow 0.18s;
  }
  #burgerMenuBtn .burger-bar {
    display: block;
    width: 17px;         /* Shorter lines */
    height: 2.7px;       /* Thinner lines */
    background: #191c29;
    border-radius: 2px;
    margin: 2.8px 0;
    transition: all 0.2s;
  }
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100vw;
}

/* Ensure the modal itself doesn't scroll the background */
.modal {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

/* Modal content scrolls inside, not the page */
.modal-content {
  max-height: 85vh;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 750px) {
  #burgerDropdown {
    top: 56px !important;
    height: calc(100vh - 56px) !important;
  }
}
@media (max-width: 768px) {
  .modal-content {
    width: 96vw !important;
    max-width: 96vw !important;
    margin: 0 auto !important;
    border-radius: 7px !important;
    /* Your other styles here, such as: */
    margin-top: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 12px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: #fff !important;
    font-size: 15px !important;
    scrollbar-width: thin;
    scrollbar-color: #fed351 #ececec;
  }
  .modal-content::-webkit-scrollbar {
    width: 14px;
    background: #ececec;
    border-radius: 10px;
  }
  .modal-content::-webkit-scrollbar-thumb {
    background: #fed351;
    border-radius: 10px;
    border: 3px solid #ececec;
  }
  .modal-content::-webkit-scrollbar-thumb:active {
    background: #ffe67c;
  }
  .modal-content::-webkit-scrollbar-track {
    background: #ececec;
    border-radius: 10px;
  }
/* Make 3-column layout */
.strip-container.three-panel {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px; /* Optional spacing between panels */
}

.strip-container.three-panel {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1200px; /* or adjust to your preference */
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  gap: 12px;
}

/* Banner image */
.side-banner-img {
  width: 160px;
  height: auto;
  max-height: 1000px;
  object-fit: contain;
}

/* Responsive stacking on mobile */
@media (max-width: 768px) {
  .strip-container.three-panel {
    flex-direction: column;
  }

  .side-banner-panel {
    width: 100%;
    padding: 20px 0;
    justify-content: center;
  }

  .side-banner-img {
    width: 100%;
    max-width: 240px;
    height: auto;
  }
}

@media (max-width: 768px) {
  .modal,
  .modal-content {
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    left: 0 !important;
    right: 0 !important;
  }
  #modalScheduleContainer,
  #modalScheduleContainer .day-card,
  #modalScheduleContainer .split-columns,
  #modalScheduleContainer .column,
  #modalScheduleContainer .show-entry {
      position: relative;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #modalScheduleContainer .split-columns,
  #modalScheduleContainer .column,
  #modalScheduleContainer .show-entry {
      position: relative;
    flex-wrap: wrap !important;
  }
#modalScheduleContainer .show-entry img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
  }
}
.show-time {
  font-weight: 600;
  font-size: 0.9em;
  color: #222;
  margin-bottom: 4px;
  display: block;
}

@media (max-width: 768px) {
  .modal {
    top: 56px !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
  }
  .modal-content {
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
  }
}

/* === Play Essential Radio button styling === */
#play-toggle {
  background-color: #fed351 !important; /* Essential yellow */
  color: #111 !important;               /* Dark text for contrast */
  border: 2px solid #e6c13c !important;  /* Slightly darker yellow border */
  font-weight: bold;
  font-size: 20px;                       /* Larger text size */
  padding: 16px 28px;                    /* Bigger click/tap area */
  border-radius: 10px;                   /* Slightly rounder corners */
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  transition: background-color 0.2s, transform 0.2s;
}

#play-toggle:hover,
#play-toggle:focus {
  background-color: #ffe67c !important;  /* Lighter yellow on hover */
  transform: scale(1.05);                /* Slight zoom on hover */
}

/* === Mobile adjustments === */
@media (max-width: 768px) {
  #play-toggle {
    font-size: 18px !important;
    padding: 14px 24px !important;
    width: 100%;                         /* Full width on mobile */
    margin-top: 12px !important;
  }
}

/* Keep desktop navbar clickable even when a base modal is open */
  .navbar { z-index: 3001 !important; }

  /* Ensure the mobile dropdown sits above any modal when opened */
  #burgerDropdown { z-index: 3100 !important; }

  /* Presenter modals sit above base modals (like the presenters list) */
  .modal.presenter-modal { z-index: 2050 !important; }

  /* Hide the overhang logo whenever any modal is open */
  body.modal-open .logo-overhang { display: none !important; }

  /* Allow clicking nav through the modal backdrop edge on desktop if needed */
  @media (min-width: 751px) {
    /* Keep a small gap for the top navbar to remain visible/clickable */
    .modal { top: 0px !important; height: calc(100vh - 0px) !important; }
  }

:root {
    /* Core brand */
    --brand: #fed351;     /* Essential yellow */
    --accent: #00818a;    /* Teal accent */
    --danger: #e0322f;

    /* Dark (default) */
    --bg-grad-1: #00818a;
    --bg-grad-2: #7e1974;
    --text: #f7f8fb;
    --panel: #101215;
    --panel-2: #171a1f;
    --border: #272c33;
    --muted: #c8d1dc;
  }

  /* Light theme overrides – tuned for print-friendliness & contrast */
  
  [data-theme="light"] {
    --bg-grad-1: #ffffff;
    --bg-grad-2: #f4f7fb;
    --text: #0b1220;
    --panel: #ffffff;
    --panel-2: #f7f9fc;
    --border: #e6ecf3;
    --muted: #6a778a;

    /* Brand tokens */
    --brand: #fed351;          /* keep Essential yellow for fills */
    --title-accent: #8a6a00;   /* readable mustard for headings/text accents */
    --accent: var(--title-accent);
    --danger: #b42318;

    /* Alias ER tokens (used by newer rules) */
    --er-bg: #ffffff;
    --er-panel: var(--panel);
    --er-card: var(--panel-2);
    --er-border: var(--border);
    --er-text: var(--text);
    --er-muted: var(--muted);
    --er-subtle: #526074;
    --er-heading: var(--text);
    --er-accent: var(--title-accent);
    --er-accent-hover: #725700;
    --er-chip: #eef2f6;
}
    

  /* Base */
  html, body { color: var(--text) !important; }
  body {
    background: linear-gradient(135deg, var(--bg-grad-1), var(--bg-grad-2)) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a { color: var(--accent) !important; }

  /* Containers */
  .strip-container { background-color: var(--panel) !important; }
  .left-panel { background: var(--panel) !important; border-right: 1px solid var(--border) !important; }
  .right-panel { background: var(--panel-2) !important; border-left: 1px solid var(--border) !important; }

  /* Now Playing */
  #now-playing-card { background: var(--panel-2) !important; color: var(--text) !important; box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important; border: 1px solid var(--border) !important; }
  #artwork { border: 2px solid var(--brand) !important; }

  /* Recent list */
    .recent-title { color: var(--title-accent) !important; }
  ul#recent-list li { border-bottom: 1px solid var(--border) !important; }
  ul#recent-list span.info { color: var(--text) !important; }
  ul#recent-list span.time { color: var(--muted) !important; }

  /* Live indicator */
  .live-indicator, .pulsing-label { color: var(--danger) !important; }

  /* Navbar & buttons */
  .navbar { background: var(--panel) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.10) !important; border-bottom: 1px solid var(--border) !important; }
  .navbar a { background: var(--brand) !important; color: #1a1a1a !important; }
  .navbar a:hover, .navbar a:focus { background: var(--accent) !important; color: #ffffff !important; }
  button, #mute-toggle { background: var(--brand) !important; color: #1a1a1a !important; border: 1px solid rgba(0,0,0,0.05) !important; }
  button:hover, button:focus, #mute-toggle:hover, #mute-toggle:focus { filter: brightness(0.97); box-shadow: 0 0 0 3px rgba(0,0,0,0.06) inset !important; }

  /* Modals */
  .modal { background: rgba(0,0,0,0.78) !important; }
  .modal-content { background: var(--panel) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
  .modal-content h2 { color: var(--accent) !important; }
  .modal-content a { color: var(--accent) !important; }

  /* Weather */
  #wxWrap { background: linear-gradient(135deg, var(--panel-2), var(--panel)) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
    #wxWrap .wxHeading { color: var(--title-accent) !important; }
  #wxNow span { text-shadow: none !important; }
  .weather-divider { border-top-color: var(--border) !important; }

  /* Right column & tiles */
    .side-social-title, .side-listen-title { color: var(--title-accent) !important; }
  .side-social-btn { background: var(--brand) !important; color:#111 !important; border: 1px solid rgba(0,0,0,0.05) !important; }
  .tile { border: 1px solid var(--border) !important; background: var(--panel) !important; }
  .tile-icon { background: var(--brand) !important; color:#111 !important; }
  .tile:hover .tile-icon, .tile:focus .tile-icon { background: var(--accent) !important; color:#fff !important; }

  /* Clock (tune light mode to avoid red-on-yellow clashes) */
  #liveClock { background: var(--panel-2) !important; border: 1px solid var(--border) !important; }
  #clockTime { color: #f0f3f8 !important; }
    #clockDate { color: var(--title-accent) !important; }
  [data-theme="light"] #clockTime { color: #111827 !important; } /* deep grey */
  [data-theme="light"] #clockDate { color: #e0b12b !important; text-shadow: none !important; }

  /* Forms & inputs */
  input, select, textarea { background: var(--panel-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
  [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #ffffff !important; color: #0b1220 !important; }

/* Global light-mode contrast fixes */
  
/* === DISABLED broad light-mode sweep (superseded) ===
[data-theme="light"] * { text-shadow: none !important; }
=== END DISABLED === */

  [data-theme="light"] .menu-link { color: #0b1220 !important; background: transparent !important; }
  [data-theme="light"] .menu-link:hover, 
  [data-theme="light"] .menu-link:focus { background: #eef2f7 !important; }

  /* Any leftover white-on-light from legacy inline styles */
  [data-theme="light"] .text-light, 
  [data-theme="light"] .white, 
  [data-theme="light"] .label, 
  [data-theme="light"] .tag,
  [data-theme="light"] .chip,
  [data-theme="light"] .badge { color: #0b1220 !important; background: #f2f5fb !important; border-color: #e6ecf3 !important; }

  /* Links inside light panels */
  [data-theme="light"] .modal-content a,
  [data-theme="light"] .left-panel a,
  [data-theme="light"] .right-panel a { color: #0b6b73 !important; }

  /* Tables */
  [data-theme="light"] table { background: #ffffff !important; color: #0b1220 !important; border: 1px solid #e6ecf3 !important; }
  [data-theme="light"] th, [data-theme="light"] td { border-color: #e6ecf3 !important; }
  [data-theme="light"] th { background: #f4f7fb !important; }

  /* Forms */
  [data-theme="light"] input, 
  [data-theme="light"] select, 
  [data-theme="light"] textarea { background: #ffffff !important; color: #0b1220 !important; border: 1px solid #d9e2ec !important; }
  [data-theme="light"] ::placeholder { color: #6a778a !important; }

  /* Buttons on light backgrounds */
  [data-theme="light"] button, 
  [data-theme="light"] #mute-toggle { color: #1a1a1a !important; border: 1px solid rgba(0,0,0,0.06) !important; }

  /* Timestamps, small/meta text */
  [data-theme="light"] .time, 
  [data-theme="light"] .meta, 
  [data-theme="light"] .note, 
  [data-theme="light"] small { color: #334155 !important; }

  /* Live badges / alerts */
  [data-theme="light"] .live-indicator, 
  [data-theme="light"] .pulsing-label { color: #b42318 !important; }

  /* SVG icons that were hard-coded white */
  [data-theme="light"] svg [fill="#fff"],
  [data-theme="light"] svg [fill="#FFFFFF"] { fill: #111111 !important; }
  [data-theme="light"] svg,
  [data-theme="light"] .icon { color: #0b1220 !important; }

  /* Cards/tiles inside right column */
  [data-theme="light"] .tile { background: #ffffff !important; color: #0b1220 !important; border: 1px solid #e6ecf3 !important; }
  [data-theme="light"] .tile .tile-icon { background: #fed351 !important; color:#111 !important; }

  /* News modal iframe wrapper (if any) */
  [data-theme="light"] .news-iframe-wrap { background: #ffffff !important; }

  /* Ensure headings don't fade */
  [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, 
  [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #0b1220 !important; }

/* Global: make sure UA picks light palette for forms etc. */
  [data-theme="light"] { color-scheme: light; }

  /* 1) Kill lingering white text set inline */
  [data-theme="light"] [style*="color:#fff"],
  [data-theme="light"] [style*="color: #fff"],
  [data-theme="light"] [style*="color:#FFF"],
  [data-theme="light"] [style*="color: #FFF"],
  [data-theme="light"] [style*="color:#ffffff"],
  [data-theme="light"] [style*="color: #ffffff"],
  [data-theme="light"] [style*="color:#FFFFFF"],
  [data-theme="light"] [style*="color: #FFFFFF"] { color: #0b1220 !important; }

  /* 2) Labels/badges that may be white-on-yellow or white-on-light */
  [data-theme="light"] .badge, 
  [data-theme="light"] .label, 
  [data-theme="light"] .tag, 
  [data-theme="light"] .chip, 
  [data-theme="light"] .pill {
    background: #f6f8fc !important; 
    color: #0b1220 !important; 
    border: 1px solid #e6ecf3 !important;
  }

  /* 3) Any title elements that used brand-yellow as text */
  [data-theme="light"] .recent-title,
  [data-theme="light"] .side-social-title,
  [data-theme="light"] .side-listen-title {
    color: #0b1220 !important;
  }

  /* 4) Links on light panels */
  [data-theme="light"] .left-panel a,
  [data-theme="light"] .right-panel a,
  [data-theme="light"] .modal-content a,
  [data-theme="light"] .tile a { color: #0b6b73 !important; }

  /* 5) Buttons that might be transparent/ghost */
  [data-theme="light"] .btn, 
  [data-theme="light"] .button, 
  [data-theme="light"] button,
  [data-theme="light"] #mute-toggle,
  [data-theme="light"] .side-social-btn {
    background: #fed351 !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    text-shadow: none !important;
  }

  /* 6) Tables, list dividers */
  [data-theme="light"] table { background: #ffffff !important; color: #0b1220 !important; }
  [data-theme="light"] th, 
  [data-theme="light"] td, 
  [data-theme="light"] ul#recent-list li { border-color: #e6ecf3 !important; }

  /* 7) Clock & small text */
  [data-theme="light"] #clockTime { color: #111827 !important; }
  [data-theme="light"] #clockDate { color: #ad7e00 !important; } /* deeper yellow for contrast */
  [data-theme="light"] .time, 
  [data-theme="light"] small, 
  [data-theme="light"] .meta, 
  [data-theme="light"] .note { color: #334155 !important; }

  /* 8) Hard-coded white SVGs/icons */
  [data-theme="light"] svg [fill="#fff"],
  [data-theme="light"] svg [fill="#FFF"],
  [data-theme="light"] svg [fill="#ffffff"],
  [data-theme="light"] svg [fill="#FFFFFF"] { fill: #0b1220 !important; }
  [data-theme="light"] .icon, [data-theme="light"] svg { color: #0b1220 !important; }

  /* 9) Card/tiles backgrounds */
  [data-theme="light"] .tile, 
  [data-theme="light"] #now-playing-card, 
  [data-theme="light"] .card { 
    background: #ffffff !important; 
    color: #0b1220 !important; 
    border: 1px solid #e6ecf3 !important; 
    box-shadow: 0 3px 14px rgba(0,0,0,0.06) !important;
  }

  /* 10) Navbar links that were white text */
  [data-theme="light"] .navbar a { color: #1a1a1a !important; }

  /* 11) Force transparent panels that were using white text */
  [data-theme="light"] .panel, 
  [data-theme="light"] .panel-ghost, 
  [data-theme="light"] .section,
  [data-theme="light"] .strip-container { color: #0b1220 !important; }

  /* 12) Focus visibility for keyboard nav in light mode */
  [data-theme="light"] a:focus, 
  [data-theme="light"] button:focus, 
  [data-theme="light"] input:focus, 
  [data-theme="light"] select:focus, 
  [data-theme="light"] textarea:focus {
    outline: 2px solid #0b6b73 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }

/* Headings, titles in light mode: use dark ink */
  [data-theme="light"] h1, 
  [data-theme="light"] h2, 
  [data-theme="light"] h3, 
  [data-theme="light"] h4, 
  [data-theme="light"] h5, 
  [data-theme="light"] h6,
  [data-theme="light"] .recent-title,
  [data-theme="light"] .side-social-title,
  [data-theme="light"] .side-listen-title {
    color: #0b1220 !important;
  }

  /* Buttons/nav in light mode: teal background */
  [data-theme="light"] button, 
  [data-theme="light"] .navbar a,
  [data-theme="light"] .side-social-btn,
  [data-theme="light"] #mute-toggle {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: rgba(0,0,0,0.08) !important;
  }

  /* Borders/dividers in light mode */
  [data-theme="light"] hr, 
  [data-theme="light"] .divider, 
  [data-theme="light"] ul#recent-list li, 
  [data-theme="light"] table, 
  [data-theme="light"] th, 
  [data-theme="light"] td {
    border-color: var(--border) !important;
  }

  /* Keep yellow for icons, small accents */
  [data-theme="light"] .icon,
  [data-theme="light"] svg .accent,
  [data-theme="light"] .accent {
    color: var(--title-accent) !important;
    fill: var(--title-accent) !important;
  }

  /* Remove yellow from clock date text, use dark teal instead */
  [data-theme="light"] #clockDate {
    color: var(--accent) !important;
  }

/* In light mode, force replace all yellow text with dark ink, except icons/accents */
  [data-theme="light"] *:not(.icon):not(.accent):not(svg):not(path):not(use):not(.mode-emoji) {
    /* If it's yellow, make it dark ink */
  }
  /* Target yellow text color inline or in CSS */
  [data-theme="light"] [style*="color:#fed351"],
  [data-theme="light"] [style*="color: #fed351"],
  [data-theme="light"] [style*="color:#e5b930"],
  [data-theme="light"] [style*="color: #e5b930"],
  [data-theme="light"] [style*="color:#c89d00"],
  [data-theme="light"] [style*="color: #c89d00"],
  [data-theme="light"] .text-yellow,
  [data-theme="light"] .recent-title,
  [data-theme="light"] .side-social-title,
  [data-theme="light"] .side-listen-title,
  [data-theme="light"] .label-yellow {
    color: #0b1220 !important;
  }
  /* Target yellow SVG fills/strokes for text shapes */
  [data-theme="light"] svg [fill="#fed351"],
  [data-theme="light"] svg [fill="#e5b930"],
  [data-theme="light"] svg [fill="#c89d00"],
  [data-theme="light"] svg [stroke="#fed351"],
  [data-theme="light"] svg [stroke="#e5b930"],
  [data-theme="light"] svg [stroke="#c89d00"] {
    fill: #0b1220 !important;
    stroke: #0b1220 !important;
  }
  /* Keep yellow for icons or explicit accent class */
  [data-theme="light"] .icon,
  [data-theme="light"] .accent,
  [data-theme="light"] svg.icon,
  [data-theme="light"] svg .accent {
    color: #c89d00 !important;
    fill: #c89d00 !important;
    stroke: #c89d00 !important;
  }

/* === SOCIAL BUTTONS: yellow background, high contrast text/icons === */
  .side-social-btn,
  .follow-icons .social-btn,
  .side-social .social-btn {
    background: var(--brand) !important; /* yellow background */
    color: #111 !important;              /* dark ink text */
    border: 1px solid rgba(0,0,0,0.12) !important;
  }
  /* Icons on yellow should be dark for contrast */
  .side-social-btn .icon, .side-social-btn svg,
  .follow-icons .social-btn .icon, .follow-icons .social-btn svg,
  .side-social .social-btn .icon, .side-social .social-btn svg {
    color: #111 !important;
    fill: #111 !important;
    stroke: #111 !important;
  }
  .side-social-btn:hover, .side-social-btn:focus,
  .follow-icons .social-btn:hover, .follow-icons .social-btn:focus,
  .side-social .social-btn:hover, .side-social .social-btn:focus {
    filter: brightness(0.97);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  }

  /* Keep the 'Follow' section heading readable in light mode */
  [data-theme="light"] .side-social-title { color: #0b1220 !important; }

  /* === EXTRA LEGIBILITY SWEEPS (light mode) === */
  /* Kill any leftover white-on-white in common areas */
  [data-theme="light"] .modal-content [style*="color:#fff"],
  [data-theme="light"] .modal-content [style*="color: #fff"],
  [data-theme="light"] .left-panel [style*="color:#fff"],
  [data-theme="light"] .left-panel [style*="color: #fff"],
  [data-theme="light"] .right-panel [style*="color:#fff"],
  [data-theme="light"] .right-panel [style*="color: #fff"] {
    color: #0b1220 !important;
  }

  /* Presenter names, show titles, schedule times */
  [data-theme="light"] .presenter-name,
  [data-theme="light"] .show-title,
  [data-theme="light"] .schedule time,
  [data-theme="light"] .badge,
  [data-theme="light"] .tag,
  [data-theme="light"] .chip {
    color: #0b1220 !important;
    background: #f7f9fc !important;
    border: 1px solid #e6ecf3 !important;
  }

  /* Links in content areas should use teal for clarity */
  [data-theme="light"] .left-panel a,
  [data-theme="light"] .right-panel a,
  [data-theme="light"] .modal-content a {
    color: var(--accent) !important;
  }

  /* Now Playing headings/labels */
  [data-theme="light"] #now-playing-card h3,
  [data-theme="light"] #now-playing-card h4,
  [data-theme="light"] #now-playing-card .label {
    color: #0b1220 !important;
  }

  /* Ensure recent list artist/title are readable */
  [data-theme="light"] ul#recent-list span.info { color: #0b1220 !important; }
  [data-theme="light"] ul#recent-list span.time { color: #6a778a !important; }

  /* If any remaining yellow text sneaks in, force it dark */
  [data-theme="light"] [style*="color:#fed351"],
  [data-theme="light"] [style*="color: #fed351"],
  [data-theme="light"] [style*="color:#e5b930"],
  [data-theme="light"] [style*="color: #e5b930"],
  [data-theme="light"] [style*="color:#c89d00"],
  [data-theme="light"] [style*="color: #c89d00"] {
    color: #0b1220 !important;
  }

/* === 1) NOW PLAYING: ensure song text is dark in light mode === */
  [data-theme="light"] #now-playing-card,
  [data-theme="light"] #now-playing-card * {
    text-shadow: none !important;
  }
  /* Common class/id guesses for title/artist; adjust as needed to your markup */
  [data-theme="light"] #now-playing-card .song,
  [data-theme="light"] #now-playing-card .title,
  [data-theme="light"] #now-playing-card .track-title,
  [data-theme="light"] #now-playing-card .artist,
  [data-theme="light"] #now-playing-card .np-title,
  [data-theme="light"] #now-playing-card .np-artist,
  [data-theme="light"] #now-playing-card h2,
  [data-theme="light"] #now-playing-card h3,
  [data-theme="light"] #now-playing-card p,
  [data-theme="light"] #now-playing-card span.info {
    color: #0b1220 !important;
  }
  /* Kill any inline white in Now Playing block */
  [data-theme="light"] #now-playing-card [style*="color:#fff"],
  [data-theme="light"] #now-playing-card [style*="color: #fff"] {
    color: #0b1220 !important;
  }
  /* Links inside Now Playing use teal for clarity */
  [data-theme="light"] #now-playing-card a {
    color: var(--accent) !important;
  }

  /* === 2) SOCIAL BUTTONS: keep yellow backgrounds with dark text/icons === */
  .side-social-btn,
  .follow-icons .social-btn,
  .side-social .social-btn {
    background: var(--brand) !important;
    color: #111 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
  }
  .side-social-btn .icon, .side-social-btn svg,
  .follow-icons .social-btn .icon, .follow-icons .social-btn svg,
  .side-social .social-btn .icon, .side-social .social-btn svg {
    color: #111 !important;
    fill: #111 !important;
    stroke: #111 !important;
  }

  /* === 3) RADIO NEWS HUB: make text/links teal in light mode === */
  [data-theme="light"] #rnh-news-list,
  [data-theme="light"] #rnh-news-list * {
    color: var(--accent) !important;
  }
  /* Headlines bold in dark ink; links teal */
  [data-theme="light"] #rnh-news-list .headline,
  [data-theme="light"] #rnh-news-list h3,
  [data-theme="light"] #rnh-news-list h4 {
    color: #0b1220 !important;
  }
  [data-theme="light"] #rnh-news-list a {
    color: var(--accent) !important;
  }

/* Apply to both Follow Essential Radio and Last.fm sections */
  .follow-icons .social-btn,
  .follow-icons a,
  .follow-icons button,
  .lastfm-icons .social-btn,
  .lastfm-icons a,
  .lastfm-icons button {
    background: var(--brand) !important;   /* yellow background */
    color: #111 !important;                /* dark text for contrast */
    border: 1px solid rgba(0,0,0,0.12) !important;
  }
  /* Icons/glyphs inside those buttons */
  .follow-icons .social-btn .icon, .follow-icons .social-btn svg,
  .follow-icons a .icon, .follow-icons a svg,
  .follow-icons button .icon, .follow-icons button svg,
  .lastfm-icons .social-btn .icon, .lastfm-icons .social-btn svg,
  .lastfm-icons a .icon, .lastfm-icons a svg,
  .lastfm-icons button .icon, .lastfm-icons button svg {
    color: #111 !important;
    fill: #111 !important;
    stroke: #111 !important;
  }
  /* Hover/focus feedback */
  .follow-icons .social-btn:hover, .follow-icons .social-btn:focus,
  .follow-icons a:hover, .follow-icons a:focus,
  .follow-icons button:hover, .follow-icons button:focus,
  .lastfm-icons .social-btn:hover, .lastfm-icons .social-btn:focus,
  .lastfm-icons a:hover, .lastfm-icons a:focus,
  .lastfm-icons button:hover, .lastfm-icons button:focus {
    filter: brightness(0.97);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    outline: none;
  }

/* Force yellow backgrounds in LIGHT MODE for Follow + Last.fm buttons/links */
  [data-theme="light"] :is(.follow-icons, .side-social, .lastfm-icons) :is(a, button, .social-btn) {
    background-color: var(--title-accent) !important;
    border-color: rgba(0,0,0,0.14) !important;
    color: #111 !important;
  }
  [data-theme="light"] :is(.follow-icons, .side-social, .lastfm-icons) :is(a, button, .social-btn) :is(svg, .icon) {
    color: #111 !important;
    fill: #111 !important;
    stroke: #111 !important;
  }
  /* If something earlier forces teal on all buttons in light mode, outrank it here */
  [data-theme="light"] .navbar :is(a, button).theme-navbtn {
    /* Keep the nav theme toggle teal — unaffected */
  }
  /* Counter any inline yellow/white text overrides inside these buttons */
  [data-theme="light"] :is(.follow-icons, .side-social, .lastfm-icons) :is(a, button, .social-btn) [style*="color:#fff"],
  [data-theme="light"] :is(.follow-icons, .side-social, .lastfm-icons) :is(a, button, .social-btn) [style*="color: #fff"],
  [data-theme="light"] :is(.follow-icons, .side-social, .lastfm-icons) :is(a, button, .social-btn) [style*="color:#ffffff"],
  [data-theme="light"] :is(.follow-icons, .side-social, .lastfm-icons) :is(a, button, .social-btn) [style*="color: #ffffff"] {
    color: #111 !important;
  }
  /* Compact padding so they don't dominate */
  [data-theme="light"] :is(.follow-icons, .side-social, .lastfm-icons) :is(a, button, .social-btn) {
    padding: 6px 10px !important;
  }

/* Keep the Last.fm circle yellow even in light mode overrides */
  /* Targets the inline icon injected in Recent list: <a href="...last.fm..." class="hour-nav prev-hour hour-nav next-hour"><svg><circle fill="#fed351"> */
  a[href*="last.fm"] svg circle[fill="#fed351"],
  a[href*="last.fm"] svg circle[fill="#e5b930"],
  a[href*="last.fm"] svg circle[fill="#c89d00"] {
    fill: var(--title-accent) !important;
  }
  /* Ensure the glyph path remains visible */
  a[href*="last.fm"] svg path { fill: #111 !important; stroke: none !important; }

/* In light mode, convert inline 'color:white' in Now Playing to dark ink */
  [data-theme="light"] #now-playing-card [style*="color:white"],
  [data-theme="light"] #now-playing-card [style*="color: white"] {
    color: #0b1220 !important;
  }

/* Trim right padding now that the toggle is absolutely positioned */
  .navbar {
    padding-right: 16px !important;
    margin-bottom: 0 !important; /* no extra gap below navbar */
  }
  /* Ensure main block starts immediately after navbar */
  .strip-container,
  .main,
  .content,
  .wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Kill any spacer divs used previously for top bars */
  .nav-spacer,
  .top-spacer {
    display: none !important;
    height: 0 !important;
  }

/* Base navbar compaction */
  .navbar {
    display: flex;
    align-items: center;
    justify-content: center;     /* center nav items */
    gap: 10px;
    flex-wrap: wrap;             /* allow wrapping instead of horizontal scroll */
    overflow-x: hidden;          /* belt-and-braces */
  }
  /* Compact nav links/buttons (not the theme toggle which is absolute) */
  .navbar a:not(.theme-navbtn),
  .navbar button:not(.theme-navbtn) {
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 8px;
    white-space: nowrap;         /* keep each item on one line */
    max-width: 100%;
  }

  /* Theme toggle stays absolute (defined earlier), but shrink its text a touch */
  .navbar .theme-navbtn {
    font-size: 12px;
    padding: 3px 7px;
  }

  /* Medium screens: tighten further */
  @media (max-width: 900px) {
    .navbar { gap: 8px; }
    .navbar a:not(.theme-navbtn),
    .navbar button:not(.theme-navbtn) {
      padding: 5px 8px;
      font-size: 12px;
    }
  }
  /* Small screens: tighter again; hide long labels if needed */
  @media (max-width: 600px) {
    .navbar { gap: 6px; }
    .navbar a:not(.theme-navbtn),
    .navbar button:not(.theme-navbtn) {
      padding: 4px 7px;
      font-size: 11px;
    }
    /* Optional: hide text on very long items, show ellipsis */
    .navbar a:not(.theme-navbtn),
    .navbar button:not(.theme-navbtn) {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  /* Very narrow: icon-first UX; hide labels inside nav items if they have .label spans */
  @media (max-width: 420px) {
    .navbar .label { display: none; }
  }

.navbar .theme-navbtn {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
  }
  [data-theme="light"] .navbar .theme-navbtn {
    background: #0b6b73 !important;
    color: #fff !important;
    border-color: rgba(0,0,0,0.10) !important;
  }
  @media (max-width: 480px) {
    .navbar .theme-navbtn .mode-label { display: none; }
    .navbar .theme-navbtn { padding: 0 8px; }
  }

/* OpenWeather PNGs were being inverted by generic light-mode rules.
     Restore them to normal in LIGHT mode so clouds etc. render correctly. */
  [data-theme="light"] #wxWrap img.forecast-icon,
  [data-theme="light"] #wxWrap img[src*="openweathermap.org/img/wn/"] {
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
  }
  /* Ensure no unintended colorization of PNG icons */
  [data-theme="light"] #wxWrap .forecast-icon {
    background: transparent !important;
  }

/* === Quick tweak: force white text for RNH heading and 'Additional Ways to Listen' captions === */
#rnh, #rnh *,
#rnh-widget, #rnh-widget *,
#rnh-news, #rnh-news *,
#rnh-news-container, #rnh-news-container *,
#newsModal .rnh-title, #newsModal .modal-title.rnh-title,
.rnh-title, .rnh-heading,
#right-panel h3:has(span[data-source='rnh']),
#right-panel h3[data-section='rnh'] {
  color: #fff !important;
}

/* Captions under 'Additional Ways to Listen' tiles */
#listen-tiles .tile .caption,
#listen-tiles .tile .label,
#listen-tiles .tile small,
#listen-tiles .tile p,
#listen-tiles .tile span.caption,
#additional-ways .tile .caption,
#additional-ways .tile p,
#additional-ways small,
#additional-ways .tile .label,
.addl-ways .tile .caption,
.addl-ways .tile p {
  color: #fff !important;
}

/* ===== Essential Radio – Dark theme (aligned with current live site) ===== */
:root {
  --er-bg: #f8fafc;
  --er-panel: #ffffff;
  --er-card: #ffffff;
  --er-border: #e5e7eb;
  --er-text: #111827;
  --er-muted: #4b5563;
  --er-subtle: #6b7280;
  --er-heading: #0b0f19;
  --er-accent: #fed351;
  --er-accent-hover: #e6c13c;
  --er-chip: #f3f4f6;
}
:root[data-theme="dark"] {
  --er-bg: #0b0c0f;
  --er-panel: #12141a;
  --er-card: #0f1116;
  --er-border: #272a33;
  --er-text: #ffffff;
  --er-muted: #cfd3da;
  --er-subtle: #a5acb5;
  --er-heading: #ffffff;
  --er-accent: #fed351;
  --er-accent-hover: #ffe28a;
  --er-chip: #1a1d24;

  --title-accent: var(--er-accent);
}

/* Base */
html, body {
  color: var(--er-text) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--er-heading) !important;
}

/* Links & accents */
a, .link, .accent {
  color: var(--er-accent) !important;
  text-decoration-color: var(--er-accent) !important;
}
a:hover, a:focus {
  color: var(--er-accent-hover) !important;
  text-decoration-color: var(--er-accent-hover) !important;
}

/* Panels / cards / sections */
:root[data-theme="dark"] .panel, .card, .tile, :root[data-theme="dark"] .modal-content, .drawer, .sidebar, .right-panel, #right-panel {
  background: var(--er-panel) !important;
  color: var(--er-text) !important;
  border-color: var(--er-border) !important;
}

/* Buttons */
button, .btn {
  background: var(--er-chip) !important;
  color: var(--er-text) !important;
  border: 1px solid var(--er-border) !important;
}
button.primary, .btn-primary {
  background: var(--er-accent) !important;
  color: #000 !important;
  border-color: var(--er-accent) !important;
}
button.primary:hover, .btn-primary:hover {
  filter: brightness(1.05);
}

/* Inputs */
input, select, textarea {
  background: var(--er-card) !important;
  color: var(--er-text) !important;
  border: 1px solid var(--er-border) !important;
}

/* Dividers */
hr, .divider {
  border-color: var(--er-border) !important;
}

/* Lists and small text */
small, .muted, .subtle { color: var(--er-subtle) !important; }
p, li, dt, dd { color: var(--er-text) !important; }

/* Specific areas mentioned */
.rnh-title,
#right-panel h3:has(span[data-source='rnh']),
#right-panel h3[data-section='rnh'] {
  color: var(--er-heading) !important;
}

/* Social follow caption area */
#follow, .follow, .social, #social {
  color: var(--er-text) !important;
}
#follow small, .follow small, .social small, #social small {
  color: var(--er-text) !important;
}

/* Additional Ways to Listen tile captions */
#listen-tiles .tile .caption,
#listen-tiles .tile .label,
#listen-tiles .tile small,
#listen-tiles .tile p,
#listen-tiles .tile span.caption,
#additional-ways .tile .caption,
#additional-ways .tile p,
#additional-ways small,
#additional-ways .tile .label {
  color: var(--er-text) !important;
}

/* Player area */
#player, .player, #now-playing, .now-playing {
  background: var(--er-card) !important;
  color: var(--er-text) !important;
  border: 1px solid var(--er-border) !important;
}

/* Weather widget wrapper (keep dark but readable) */
#weather, .weather-widget {
  background: var(--er-card) !important;
  color: var(--er-text) !important;
}

/* Footer */
footer, .footer {
  color: var(--er-text) !important;
  border-top: 1px solid var(--er-border) !important;
}

/* === RNH story text to white === */
#rnh-news-list,
#rnh-news-list *,
#rnh .rnh-story,
#rnh .rnh-story *,
#rnh .story,
#rnh .story *,
.rnh-story, .rnh-story *,
#right-panel .rnh-item, #right-panel .rnh-item *,
#newsModal .rnh-item, #newsModal .rnh-item *,
#newsModal #rnh-news-list, #newsModal #rnh-news-list *,
#rnh-news-list a, #rnh-news-list p, #rnh-news-list li, #rnh-news-list small, #rnh-news-list span {
  color: #fff !important;
}

/* === RNH dates in yellow === */
#rnh, #right-panel, #newsModal {
  --rnh-accent: var(--er-accent, #fed351);
}
/* Target common date/time elements in RNH widgets (panel + modal) */
#rnh-news-list time,
#rnh time,
#rnh .date, #rnh .rnh-date, #rnh .pub-date, #rnh .posted-on, #rnh .meta .date,
#rnh-news-list .date, #rnh-news-list .rnh-date, #rnh-news-list .pub-date, #rnh-news-list .posted-on,
#right-panel .rnh-item time, #right-panel .rnh-item .date, #right-panel .rnh-item .rnh-date, #right-panel .rnh-item .pub-date,
#newsModal .rnh-item time, #newsModal .rnh-item .date, #newsModal .rnh-item .rnh-date, #newsModal .rnh-item .pub-date,
#newsModal #rnh-news-list time,
#newsModal #rnh-news-list .date,
#rnh-news-list small.time, #rnh-news-list small.date,
#rnh-news-list .meta time, #rnh-news-list .meta .date {
  color: var(--rnh-accent) !important;
}

/* === Force RNH dates to yellow === */
#rnh-news-list .rnh-date, #rnh-news-list #rnh-news-list .rnh-date, #right-panel .rnh-item #rnh-news-list .rnh-date, #newsModal .rnh-item #rnh-news-list .rnh-date {
  color: var(--er-accent, #fed351) !important;
}

/* === FINAL: Force RNH dates to yellow (override white rules) === */
#rnh-news-list #rnh-news-list .rnh-date,
#right-panel .rnh-item #rnh-news-list .rnh-date,
#newsModal .rnh-item #rnh-news-list .rnh-date,
#rnh-news-list .rnh-date { color: var(--er-accent, #fed351) !important; }

/* === Structural target: make the date (2nd child div) yellow === */
#rnh-news-list > div > div,
#newsModal #rnh-news-list > div > div {
  color: var(--er-accent, #fed351) !important;
}

/* Let the page gradient show through */
main, .main, .content, .wrapper, #page, #app {
  background: transparent !important;
}

/* Ensure the site gradient is visible */
html { background: transparent !important; }
body { background: linear-gradient(135deg, #00818a, #7e1974) !important; }

/* === Enforce original red clock time === */
#clockTime { color: #e53935 !important; }

/* ===== Light Mode Readability Fixes (Now Playing & Recently Played) ===== */
:root[data-theme="light"] #now-playing,
:root[data-theme="light"] #now-playing *,
:root[data-theme="light"] #now-playing-card,
:root[data-theme="light"] #nowplaying-inline-white-fix {
  color: #111 !important;
}

:root[data-theme="light"] #now-playing-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important; /* Tailwind slate-200-ish */
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

:root[data-theme="light"] .recently-played-container,
:root[data-theme="light"] .recent-title {
  color: #111 !important;
}

:root[data-theme="light"] ul#recent-list,
:root[data-theme="light"] ul#recent-list * {
  color: #111 !important;
}

:root[data-theme="light"] ul#recent-list span.time {
  color: #555 !important;
}

/* Links inside recent list in light mode */
:root[data-theme="light"] ul#recent-list a {
  color: #111 !important;
  text-decoration: none;
}

/* Optional: subtle separators in light mode */
:root[data-theme="light"] ul#recent-list li {
  border-bottom: 1px solid #eee !important;
}

:root[data-theme="light"] #player,
:root[data-theme="light"] .player,
:root[data-theme="light"] #now-playing,
:root[data-theme="light"] #now-playing-card {
  background: var(--er-card) !important;
  color: var(--er-text) !important;
  border: 1px solid var(--er-border) !important;
}
:root[data-theme="light"] ul#recent-list,
:root[data-theme="light"] ul#recent-list * {
  color: var(--er-text) !important;
}
:root[data-theme="light"] .recent-title { color: var(--er-heading) !important; }

/* === Enlarge icons within yellow circles (social + tiles) === */
/* Social buttons: keep circle size, scale SVG up inside */
.side-social-btn svg {
  width: 78% !important;
  height: 78% !important;
}

/* 'Additional Ways to Listen' tile icons */
.tile-icon svg {
  width: 82% !important;
  height: 82% !important;
}

/* If any tile icons use <img loading="lazy" decoding="async">, scale them too */
.tile-icon img {
  width: 82% !important;
  height: 82% !important;
  object-fit: contain !important;
}

/* Ensure the circle remains perfectly centered */
.side-social-btn, .tile-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* === Tweak: slightly reduce icon scale inside circles === */
.side-social-btn svg { width: 70% !important; height: 70% !important; }
.tile-icon svg { width: 76% !important; height: 76% !important; }
.tile-icon img { width: 76% !important; height: 76% !important; }

/* ===== Light Mode: modal readability fixes ===== */
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .modal .modal-content {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
}

/* Ensure all text inside modals is readable in light mode */
:root[data-theme="light"] .modal-content h1,
:root[data-theme="light"] .modal-content h2,
:root[data-theme="light"] .modal-content h3,
:root[data-theme="light"] .modal-content h4,
:root[data-theme="light"] .modal-content h5,
:root[data-theme="light"] .modal-content h6,
:root[data-theme="light"] .modal-content p,
:root[data-theme="light"] .modal-content li,
:root[data-theme="light"] .modal-content dt,
:root[data-theme="light"] .modal-content dd,
:root[data-theme="light"] .modal-content span,
:root[data-theme="light"] .modal-content a {
  color: #111827 !important;
}

/* RNH in modal: dark text for stories in light mode; keep dates yellow */
:root[data-theme="light"] #newsModal #rnh-news-list,
:root[data-theme="light"] #newsModal #rnh-news-list * {
  color: #111827 !important;
}
:root[data-theme="light"] #newsModal #rnh-news-list .rnh-date,
:root[data-theme="light"] #newsModal #rnh-news-list time {
  color: var(--er-accent, #fed351) !important;
}

/* Scope previous RNH white text to dark mode only */
:root[data-theme="dark"] #rnh-news-list,
:root[data-theme="dark"] #rnh-news-list *,
:root[data-theme="dark"] #newsModal #rnh-news-list,
:root[data-theme="dark"] #newsModal #rnh-news-list * {
  color: #fff !important;
}

/* === Force light backgrounds for all modal contents in light mode === */
:root[data-theme="light"] #aboutModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
:root[data-theme="light"] #presentersModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
:root[data-theme="light"] #scheduleModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
:root[data-theme="light"] #requestsModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
:root[data-theme="light"] #newsModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
:root[data-theme="light"] #travelModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
:root[data-theme="light"] #localModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
:root[data-theme="light"] #playlistModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
:root[data-theme="light"] #listenModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
:root[data-theme="light"] #searchModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }
:root[data-theme="light"] #contactModal .modal-content { background:#ffffff !important; color:#111827 !important; border:1px solid #e5e7eb !important; }

/* ---- FINAL OVERRIDE: Light mode modals must be white ---- */
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .modal .modal-content,
:root[data-theme="light"] #aboutModal .modal-content,
:root[data-theme="light"] #presentersModal .modal-content,
:root[data-theme="light"] #scheduleModal .modal-content,
:root[data-theme="light"] #requestsModal .modal-content,
:root[data-theme="light"] #newsModal .modal-content,
:root[data-theme="light"] #travelModal .modal-content,
:root[data-theme="light"] #localModal .modal-content,
:root[data-theme="light"] #playlistModal .modal-content,
:root[data-theme="light"] #listenModal .modal-content,
:root[data-theme="light"] #searchModal .modal-content,
:root[data-theme="light"] #contactModal .modal-content,
:root[data-theme="light"] .presenter-modal .modal-content {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
  z-index: 10002 !important;
}

/* Also ensure any nested cards inside modals use light tones */
:root[data-theme="light"] .modal-content .card,
:root[data-theme="light"] .modal-content .panel,
:root[data-theme="light"] .modal-content .tile {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}

/* === Light mode: make modal overlay light, not black === */
:root[data-theme="light"] .modal {
  background: rgba(255,255,255,0.7) !important; /* light glassy backdrop */
}
/* Ensure scroll blockers don't add dark layers */
:root[data-theme="light"] body.modal-open::before,
:root[data-theme="light"] .modal::before {
  background: transparent !important;
}

:root[data-theme="light"] .modal-overlay,
:root[data-theme="light"] .modal-backdrop,
:root[data-theme="light"] .backdrop {
  background: rgba(255,255,255,0.7) !important;
}

/* Theme-scoped modal overlay backgrounds */
:root[data-theme="dark"] .modal { background: rgba(0,0,0,0.6) !important; }
:root[data-theme="light"] .modal { background: rgba(255,255,255,0.75) !important; }

/* Light mode: make modals match the main page */
:root[data-theme="light"] .modal {
  background: rgba(255,255,255,0.78) !important; /* light overlay */
}

/* Modal panel uses light palette */
:root[data-theme="light"] .modal-content {
  background: var(--er-panel, #ffffff) !important;
  color: var(--er-text, #111827) !important;
  border: 1px solid var(--er-border, #e5e7eb) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
}

/* Ensure all text inside is readable in light mode */
:root[data-theme="light"] .modal-content h1,
:root[data-theme="light"] .modal-content h2,
:root[data-theme="light"] .modal-content h3,
:root[data-theme="light"] .modal-content h4,
:root[data-theme="light"] .modal-content h5,
:root[data-theme="light"] .modal-content h6,
:root[data-theme="light"] .modal-content p,
:root[data-theme="light"] .modal-content li,
:root[data-theme="light"] .modal-content dt,
:root[data-theme="light"] .modal-content dd,
:root[data-theme="light"] .modal-content span,
:root[data-theme="light"] .modal-content a {
  color: var(--er-text, #111827) !important;
}

/* Any nested cards/panels/tiles inside a modal should also be light */
:root[data-theme="light"] .modal-content .card,
:root[data-theme="light"] .modal-content .panel,
:root[data-theme="light"] .modal-content .tile {
  background: var(--er-card, #ffffff) !important;
  color: var(--er-text, #111827) !important;
  border-color: var(--er-border, #e5e7eb) !important;
}

/* Scope any previous dark panel rule to dark mode only (belt-and-braces) */
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .drawer,
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .right-panel,
:root[data-theme="dark"] #right-panel {
  background: var(--er-panel, #12141a) !important;
  color: var(--er-text, #ffffff) !important;
  border-color: var(--er-border, #272a33) !important;
}

/* Make 'Previous hour' / 'Next hour' controls white for better contrast */
#searchModal .hour-nav a,
#searchModal .hour-nav button,
#searchModal .hour-next,
#searchModal .hour-prev,
#searchModal .next-hour,
#searchModal .prev-hour {
  color: #ffffff !important;
}

#searchModal .hour-nav { color: #ffffff !important; font-weight: 600; }
#searchModal .hour-nav:hover { opacity: 0.9; }

/* Force white text on specific hour nav buttons */
#searchModal #prevHour,
#searchModal #nextHour { color: #ffffff !important; font-weight: 600; }

#searchModal #prevHour,
#searchModal #nextHour { color: #ffffff !important; font-weight: 600; }
#searchModal #reset, 
#searchModal #resetBtn, 
#searchModal #resetButton, 
#searchModal #resetSearch, 
#searchModal #searchReset { color: #ffffff !important; font-weight: 600; }

:root[data-theme="dark"] #rnh-news-list .rnh-date,
:root[data-theme="dark"] #rnh-news-list time,
:root[data-theme="dark"] #right-panel .rnh-item .rnh-date,
:root[data-theme="dark"] #right-panel .rnh-item time {
  color: var(--er-accent, #fed351) !important;
}

/* Pull content up slightly below the nav */
main, .main, .content, #content, .page, #page, .wrapper {
  margin-top: 0.75rem !important; /* reduce top gap */
}
/* If a hero banner exists, keep a bit more breathing room */
.hero, .banner { margin-top: 1rem !important; }

:root[data-theme="light"] #newsModal,
:root[data-theme="light"] #newsModal * { color: #111827 !important; }
:root[data-theme="light"] #newsModal #rnh-news-list .rnh-date,
:root[data-theme="light"] #newsModal #rnh-news-list time { color: var(--er-accent, #fed351) !important; }
:root[data-theme="light"] #newsModal .card,
:root[data-theme="light"] #newsModal .panel,
:root[data-theme="light"] #newsModal .tile,
:root[data-theme="light"] #newsModal .rnh-item,
:root[data-theme="light"] #newsModal .rnh-story,
:root[data-theme="light"] #newsModal .inner,
:root[data-theme="light"] #newsModal .content { background: #ffffff !important; border-color: #e5e7eb !important; }

header + *, header + section, header + div, header + main { margin-top: 0.5rem !important; }

#searchModal #resetFilters,
#localModal #localReset {
  color: #ffffff !important;
  font-weight: 600;
}

/* Kill the big spacer after the nav and tighten the gap */
.header-spacer { height: 0 !important; margin: 0 !important; padding: 0 !important; }
/* Nudge immediate content up */
nav + .header-spacer + *, 
nav + * { margin-top: 1rem !important; }
/* Keep hero/banner comfortable if present */
.hero, .banner { margin-top: .75rem !important; }

nav {
  position: relative;
}
nav #theme-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

@media (max-width: 767px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom,
  .navbar-static-top {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 991px) {
  #theme-toggle {
    float: right;
    margin-right: 1rem;
    margin-top: 0.3rem;
  }
}
.navbar-collapse {
  color: #000 !important;
}
.navbar-collapse a {
  color: #000 !important;
}

@media (min-width: 992px) {
  #theme-toggle {
    position: absolute;
    left: max(1rem, 5vw);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 9999;
  }
}

/* === Fix: Mobile burger menu text visibility === */
#burgerDropdown a, #burgerDropdown .menu-link, .burger-dropdown a, .burger-dropdown .menu-link {
  color: #0b1220 !important;          /* dark text */
  background: #fed351 !important;     /* brand yellow */
}
#burgerDropdown a:hover, #burgerDropdown a:focus,
#burgerDropdown .menu-link:hover, #burgerDropdown .menu-link:focus,
.burger-dropdown a:hover, .burger-dropdown a:focus,
.burger-dropdown .menu-link:hover, .burger-dropdown .menu-link:focus {
  background: #ffe67c !important;
  color: #0b1220 !important;
}
/* In case a parent sets color to yellow (e.g., .rnh-date), neutralize it within dropdown */
#burgerDropdown, .burger-dropdown {
  color: inherit !important;
}

/* === Place theme toggle beside burger on mobile === */
@media (max-width: 768px) {
  /* Make navbar a flex row if not already */
  header .navbar, nav.navbar, .navbar, header nav, .site-header, .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
  }
  /* Treat burger and toggle as a cluster on the right */
  .burger, .burger-button, #burgerButton, #burger, .hamburger, .menu-toggle {
    order: 2;
  }
  /* Theme toggle */
  #themeToggle, #theme-toggle, .theme-toggle, .dark-light-toggle, .mode-toggle, #modeToggle {
    order: 2;
    margin-left: .5rem;
  }
  /* Keep logo to the left */
  .logo, #logo, .brand, .site-logo {
    order: 1;
  }
  /* Put the right-side controls (burger+toggle) in a wrap if container supports it */
  .navbar, header .navbar, header nav, .topbar {
    flex-wrap: nowrap;
  }
  /* If toggle was hidden on mobile, reveal it */
  #themeToggle, #theme-toggle, .theme-toggle, .dark-light-toggle, .mode-toggle, #modeToggle {
    display: inline-flex !important;
  }
  /* Fine-tune vertical alignment */
  #themeToggle button, #theme-toggle button, .theme-toggle button {
    height: 36px;
  }
}

#burgerMenuBtn { order: 2; }
  #themeToggle { order: 2; }
}

/* FINAL OVERRIDE: ensure light-mode modal overlays are light, even if later !important rules exist */
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .backdrop {
  background: rgba(255,255,255,0.78) !important;
}
html[data-theme="light"] body.modal-open::before,
html[data-theme="light"] .modal::before {
  background: rgba(255,255,255,0.78) !important;
}

/* Force light overlay for presenters and schedule in light mode */
html[data-theme="light"] .modal.presenter-modal,
html[data-theme="light"] #scheduleModal {
  background: rgba(255,255,255,0.78) !important;
}
html[data-theme="light"] .modal.presenter-modal::before,
html[data-theme="light"] #scheduleModal::before {
  background: rgba(255,255,255,0.78) !important;
}

/* Light overlay for ALL modals in light mode */
html[data-theme="light"] .modal,
html[data-theme="light"] .modal.presenter-modal,
html[data-theme="light"] .modal.presenter-detail,
html[data-theme="light"] #scheduleModal,
html[data-theme="light"] #presentersModal,
html[data-theme="light"] #newsModal {
  background: rgba(255,255,255,0.78) !important;
}

/* Ensure no pseudo-element re-darkens the overlay */
html[data-theme="light"] .modal::before,
html[data-theme="light"] .modal.presenter-modal::before,
html[data-theme="light"] .modal.presenter-detail::before,
html[data-theme="light"] #scheduleModal::before,
html[data-theme="light"] #presentersModal::before,
html[data-theme="light"] #newsModal::before {
  background: rgba(255,255,255,0.78) !important;
}

/* Panels inside modals use light palette */
html[data-theme="light"] .modal-content,
html[data-theme="light"] .modal .modal-content,
html[data-theme="light"] .presenter-modal .modal-content {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
}

/* Any inner cards/panels/tiles inside these modals also light */
html[data-theme="light"] .modal-content .card,
html[data-theme="light"] .modal-content .panel,
html[data-theme="light"] .modal-content .tile,
html[data-theme="light"] .modal-content .presenter-card {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}

/* Presenters: kill any residual dark background declarations */
html[data-theme="light"] .presenter-modal { background: rgba(255,255,255,0.78) !important; }
html[data-theme="light"] .modal.presenter-modal { background: rgba(255,255,255,0.78) !important; }

/* Schedule: enforce light */
html[data-theme="light"] #scheduleModal .modal-content { background: #ffffff !important; color: #111827 !important; }
html[data-theme="light"] #scheduleModal { background: rgba(255,255,255,0.78) !important; }

/* NEWS modal: readable story text & yellow dates in light mode */
html[data-theme="light"] #newsModal #rnh-news-list,
html[data-theme="light"] #newsModal #rnh-news-list * {
  color: #111827 !important;
}
html[data-theme="light"] #newsModal #rnh-news-list .rnh-date,
html[data-theme="light"] #newsModal #rnh-news-list time {
  color: var(--er-accent, #fed351) !important;
}
html[data-theme="light"] #newsModal a { color: #111827 !important; }

/* Light overlays for schedule & news modals */
html[data-theme="light"] #scheduleModal,
html[data-theme="light"] #scheduleModal::before,
html[data-theme="light"] #newsModal,
html[data-theme="light"] #newsModal::before {
  background: rgba(255,255,255,0.78) !important;
}

/* Modal panels */
html[data-theme="light"] #scheduleModal .modal-content,
html[data-theme="light"] #newsModal .modal-content {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
}

/* Ensure any nested cards/panels/tiles are light */
html[data-theme="light"] #scheduleModal .modal-content .card,
html[data-theme="light"] #scheduleModal .modal-content .panel,
html[data-theme="light"] #scheduleModal .modal-content .tile,
html[data-theme="light"] #newsModal .modal-content .card,
html[data-theme="light"] #newsModal .modal-content .panel,
html[data-theme="light"] #newsModal .modal-content .tile {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}

/* News list readability (light mode) */
html[data-theme="light"] #newsModal #rnh-news-list,
html[data-theme="light"] #newsModal #rnh-news-list * { color: #111827 !important; }
html[data-theme="light"] #newsModal #rnh-news-list .rnh-date,
html[data-theme="light"] #newsModal #rnh-news-list time { color: var(--er-accent, #fed351) !important; }
html[data-theme="light"] #newsModal a { color: #111827 !important; }

/* Schedule-specific inner sections often use dark chips; neutralize them in light mode */
html[data-theme="light"] #scheduleModal .chip,
html[data-theme="light"] #scheduleModal .badge,
html[data-theme="light"] #scheduleModal .show-block,
html[data-theme="light"] #scheduleModal .slot-block {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
}

/* Force any lingering dark backgrounds inside schedule/news to inherit light */
html[data-theme="light"] #scheduleModal *,
html[data-theme="light"] #newsModal * {
  --panel-bg: #ffffff;
}

/* Schedule: inner block (day-card) should be light in light mode */
html[data-theme="light"] #scheduleModal .day-card {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] #scheduleModal .day-card * { color: #111827 !important; }

/* News modal: force readable text in light mode */
html[data-theme="light"] #newsModal * { color: #111827 !important; }
html[data-theme="light"] #newsModal h2,
html[data-theme="light"] #newsModal h3,
html[data-theme="light"] #newsModal h4 { color: #111827 !important; }

/* Keep RNH dates yellow in news modal */
html[data-theme="light"] #newsModal #rnh-news-list .rnh-date,
html[data-theme="light"] #newsModal #rnh-news-list time { color: var(--er-accent, #fed351) !important; }

/* Soften dark borders/shadows inside news modal */
html[data-theme="light"] #newsModal [style*="border:1px solid #333"] { border: 1px solid #e5e7eb !important; }
html[data-theme="light"] #newsModal [style*="box-shadow:0 0 20px"] { box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important; }

/* === Song Search (light mode): make menus legible === */
:root[data-theme="light"] #searchModal input,
:root[data-theme="light"] #searchModal select,
:root[data-theme="light"] #searchModal textarea {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
}

/* Common menu/dropdown containers in search modal */
:root[data-theme="light"] #searchModal .dropdown-menu,
:root[data-theme="light"] #searchModal .menu,
:root[data-theme="light"] #searchModal .listbox,
:root[data-theme="light"] #searchModal .options,
:root[data-theme="light"] #searchModal .select-menu,
:root[data-theme="light"] #searchModal ul,
:root[data-theme="light"] #searchModal li {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}

/* Placeholder contrast */
:root[data-theme="light"] #searchModal ::placeholder { color: #6b7280 !important; }

/* === Radio News Hub modal (light mode): kill dark inner blocks === */
:root[data-theme="light"] #newsModal [style*="background"],
:root[data-theme="light"] #newsModal [style*="background-color"] {
  background: #ffffff !important;
}

/* Ensure all common inner containers are light */
:root[data-theme="light"] #newsModal .card,
:root[data-theme="light"] #newsModal .panel,
:root[data-theme="light"] #newsModal .tile,
:root[data-theme="light"] #newsModal .rnh-item,
:root[data-theme="light"] #newsModal .rnh-story,
:root[data-theme="light"] #newsModal .inner,
:root[data-theme="light"] #newsModal .content {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}

/* Text readability + keep dates yellow */
:root[data-theme="light"] #newsModal,
:root[data-theme="light"] #newsModal * {
  color: #111827 !important;
}
:root[data-theme="light"] #newsModal #rnh-news-list .rnh-date,
:root[data-theme="light"] #newsModal #rnh-news-list time {
  color: var(--er-accent, #fed351) !important;
}

/* Radio News Hub modal: card blocks should be light in light mode */
:root[data-theme="light"] #newsModal .rnh-card {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}
:root[data-theme="light"] #newsModal .rnh-cards { background: transparent !important; }

/* Song Search: ensure everything is legible in light mode */
:root[data-theme="light"] #searchModal,
:root[data-theme="light"] #searchModal * {
  color: #111827 !important;
}
:root[data-theme="light"] #searchModal select,
:root[data-theme="light"] #searchModal input,
:root[data-theme="light"] #searchModal textarea {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}
:root[data-theme="light"] #searchModal option {
  background: #ffffff !important;
  color: #111827 !important;
}

/* Keep these controls WHITE in light mode, even if a global light text rule exists */
:root[data-theme="light"] #searchModal #prevHour,
:root[data-theme="light"] #searchModal #nextHour,
:root[data-theme="light"] #searchModal #resetFilters {
  color: #ffffff !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Dark mode: front page RNH dates back to yellow (override any white text rules) */
:root[data-theme="dark"] body #right-panel #rnh-news-list time,
:root[data-theme="dark"] body #right-panel #rnh-news-list #rnh-news-list .rnh-date,
:root[data-theme="dark"] body #rnh-news-list time,
:root[data-theme="dark"] body #rnh-news-list #rnh-news-list .rnh-date {
  color: var(--er-accent, #fed351) !important;
}

/* Dark mode: force the right-panel RNH date (the last child div in each item) back to yellow */
:root[data-theme="dark"] #right-panel #rnh-news-list > div > div:last-child,
:root[data-theme="dark"] #rnh-news-list > div > div:last-child {
  color: var(--er-accent, #fed351) !important;
}

:root[data-theme="dark"] .modal-content h1,
:root[data-theme="dark"] .modal-content h2,
:root[data-theme="dark"] .modal-content h3,
:root[data-theme="dark"] .modal-content h4,
:root[data-theme="dark"] .modal-content h5,
:root[data-theme="dark"] .modal-content h6 {
  color: #ffffff !important;
}

/* Programme Schedule: kill teal/underlines in dark mode */
:root[data-theme="dark"] #scheduleModal a,
:root[data-theme="dark"] .programme-schedule a,
:root[data-theme="dark"] .program-schedule a,
:root[data-theme="dark"] .schedule a {
  color: #ffffff !important;
  text-decoration: none !important;
}
:root[data-theme="dark"] #scheduleModal a:hover,
:root[data-theme="dark"] .programme-schedule a:hover,
:root[data-theme="dark"] .program-schedule a:hover,
:root[data-theme="dark"] .schedule a:hover {
  text-decoration: underline !important; /* optional hover */
}

/* Schedule dropdown legibility */
/* Light mode */
:root[data-theme="light"] #scheduleModal label { color: #111827 !important; }
:root[data-theme="light"] #scheduleModal select {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px;
  padding: 8px 12px;
}
:root[data-theme="light"] #scheduleModal option {
  background: #ffffff !important;
  color: #111827 !important;
}

/* Dark mode */
:root[data-theme="dark"] #scheduleModal label { color: #ffffff !important; }
:root[data-theme="dark"] #scheduleModal select {
  background: var(--er-panel, #12141a) !important;
  color: #ffffff !important;
  border: 1px solid var(--er-border, #272a33) !important;
  border-radius: 8px;
  padding: 8px 12px;
}
:root[data-theme="dark"] #scheduleModal option {
  background: var(--er-panel, #12141a) !important;
  color: #ffffff !important;
}

/* If a custom dropdown/menu is used */
:root[data-theme="light"] #scheduleModal .dropdown-menu,
:root[data-theme="light"] #scheduleModal .menu,
:root[data-theme="light"] #scheduleModal .listbox,
:root[data-theme="light"] #scheduleModal .options {
  background: #ffffff !important; color: #111827 !important; border: 1px solid #e5e7eb !important;
}
:root[data-theme="dark"] #scheduleModal .dropdown-menu,
:root[data-theme="dark"] #scheduleModal .menu,
:root[data-theme="dark"] #scheduleModal .listbox,
:root[data-theme="dark"] #scheduleModal .options {
  background: var(--er-panel, #12141a) !important; color: #ffffff !important; border: 1px solid var(--er-border, #272a33) !important;
}

/* About Us: make email link white in dark mode (no underline), with underline on hover */
:root[data-theme="dark"] #aboutModal a[href^="mailto:"] {
  color: #ffffff !important;
  text-decoration: none !important;
}
:root[data-theme="dark"] #aboutModal a[href^="mailto:"]:hover {
  text-decoration: underline !important;
}

/* Song Search: make 'Artist - Title' text yellow */
#searchModal .result-title,
#searchModal .song-title,
#searchModal .track-title,
#searchModal .track,
#searchModal .result .title,
#searchModal .song-result .title {
  color: var(--er-accent, #fed351) !important;
}

/* Song Search: make the table header (including "Artist – Title") yellow in both themes */
#searchModal thead,
#searchModal thead th {
  color: var(--er-accent, #fed351) !important;
}

/* About Us: email link in accent yellow, both themes (wins over earlier dark-mode white) */
:root[data-theme="dark"] #aboutModal a[href^="mailto:"],
:root[data-theme="light"] #aboutModal a[href^="mailto:"],
#aboutModal a[href^="mailto:"] {
  color: var(--er-accent, #fed351) !important;
  text-decoration: none !important;
}
#aboutModal a[href^="mailto:"]:hover {
  text-decoration: underline !important;
}

/* About Us email: readable teal in light mode, yellow in dark mode */
:root[data-theme="light"] #aboutModal a[href^="mailto:"] { color: #00818a !important; }
:root[data-theme="dark"]  #aboutModal a[href^="mailto:"] { color: var(--er-accent, #fed351) !important; }
#aboutModal a[href^="mailto:"]:hover { text-decoration: underline !important; }

/* Push page content lower under the nav bar */
nav + .header-spacer + main,
nav + .header-spacer + section,
nav + .header-spacer + div,
nav + main,
nav + section,
nav + div {
  margin-top: 1.5rem !important;
}

/* === Mobile-only cloned theme toggle beside burger === */
#themeToggle {
  display: none; /* hide on desktop */
}
@media (max-width: 768px) {
  #themeToggle { display: inline-flex; order: 2; margin-left: .5rem; }
  #burgerMenuBtn { order: 2; }
  nav.navbar { display:flex; align-items:center; justify-content:space-between; }
}

/* Light mode: force black text in Additional Ways to Listen (.side-listen) */
  [data-theme="light"] .side-listen,
  [data-theme="light"] .side-listen * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
  }

@media (max-width: 750px) {
    #themeToggleBtn {
      position: fixed !important;
      top: 20px !important;
      left: 48px !important;
      height: 32px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 10px !important;
      border-radius: 7px !important;
      background: var(--accent) !important;
      color: #fff !important;
      border: none !important;
      font-size: 14px !important;
      line-height: 1 !important;
      z-index: 3201 !important;
    }
  }
  
  }

@media (min-width: 751px){
    #themeToggleBtn.theme-navbtn { display: inline-flex !important; }
  }

/* Hide blue H2 headers inside Contact and Requests modals */
  #contactModal .modal-content h2,
  #requestsModal .modal-content h2 {
    display: none !important;
  }

body { padding-top: var(--nav-h, 60px); }

@media (max-width: 750px){
  /* Show the same toggle button on mobile, positioned beside the burger */
  #themeToggleBtn.theme-navbtn {
    position: fixed !important;
    top: 20px !important;
    right: 8px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    z-index: 2002 !important; /* above the burger overlay */
    border-radius: 7px !important;
  }
  /* Hide long text label on narrow screens, keep the icon */
  #themeToggleBtn .mode-label { display: none !important; }
}

/* Mobile: pin the same button beside the burger */
.theme-navbtn.mobile-fixed{
  position: fixed;
  top: 20px;
  right: 8px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  z-index: 2002; /* above burger; below dropdown */
}
@media (max-width: 480px){
  .theme-navbtn.mobile-fixed .mode-label{ display:none; }
}

/* Compact icon-only theme toggle, like the burger */
#themeToggleBtn.theme-navbtn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7px !important;
  line-height: 1 !important;
  gap: 0 !important;
}
#themeToggleBtn .mode-label { display: none !important; } /* icon-only everywhere */

/* Mobile: keep the same button beside the burger (fixed) */
@media (max-width: 750px){
  #themeToggleBtn.theme-navbtn.mobile-fixed {
    position: fixed !important;
    top: 20px !important;
    right: 8px !important;
    z-index: 2002 !important;
  }
}

/* Mute button styling – Essential yellow theme */
#mute-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background-color: #fed351 !important;  /* Essential yellow */
  color: #111 !important;                /* Dark icon for contrast */
  border: 2px solid #e6c13c !important;   /* Slightly darker yellow border */
  font-size: 20px !important;
  transition: background-color 0.2s, transform 0.15s ease;
  padding: 0 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

/* Icon inside */
#mute-toggle svg,
#mute-toggle i {
  width: 1.5em !important;
  height: 1.5em !important;
}

/* Hover effect */
#mute-toggle:hover {
  background-color: #ffe67c !important;   /* lighter yellow on hover */
  transform: scale(1.05);
}

/* ===== Contact modal: force true fullscreen on DESKTOP, prevent bottom cut ===== */

/* Base: let the modal backdrop fill the viewport and not crop content */
.modal {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;           /* background doesn't scroll */
}

/* Generic modal-content rules are already present; raise the cap for desktop */
@media (min-width: 751px) {
  /* Target Contact + Requests if present */
  #contactModal .modal-content,
  #requestsModal .modal-content {
    margin: 0 auto !important;
    width: 96vw !important;
    max-width: 1200px !important;
    height: 94vh !important;             /* nearly fullscreen */
    max-height: 94vh !important;
    padding: 16px !important;
    overflow: hidden !important;         /* inner wrapper/iframe will scroll */
    border-radius: 16px !important;
  }

  /* Inner scrolling area (iframe or wrapper) */
  #contactModal .modal-content .embed-wrap,
  #requestsModal .modal-content .embed-wrap {
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Make the iframe fill the available height */
  #contactModal iframe,
  #requestsModal iframe,
  #contactModal .embed-wrap iframe,
  #requestsModal .embed-wrap iframe {
    display: block !important;
    width: 100% !important;
    height: calc(94vh - 48px) !important; /* subtract padding/close button */
    border: 0 !important;
    overflow: auto !important;
  }
}

/* MOBILE already handles 56px top offset elsewhere; ensure contact/request iframes fill */
@media (max-width: 750px) {
  #contactModal .modal-content,
  #requestsModal .modal-content {
    margin: 0 !important;
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: calc(100vh - 56px) !important;
    height: calc(100vh - 56px) !important;
    overflow: hidden !important;
  }
  #contactModal iframe,
  #requestsModal iframe {
    width: 100% !important;
    height: calc(100vh - 56px - 36px) !important;
    border: 0 !important;
  }
}

/* Keep close button above the iframe and clickable */
#contactModal .close,
#requestsModal .close {
  position: absolute !important;
  z-index: 10 !important;
}

/* Song Search: Previous / Next / Reset in Essential Yellow – compact version */
#searchModal #prevHour,
#searchModal #nextHour,
#searchModal #resetFilters {
  background-color: #fed351 !important;
  color: #111 !important;
  border: 1px solid #e6c13c !important;
  font-weight: 600 !important;
  font-size: 14px !important;        /* smaller text */
  border-radius: 6px !important;     /* less rounded */
  padding: 5px 10px !important;      /* smaller padding */
  box-shadow: none !important;       /* remove heavy shadow */
  transition: background-color .2s ease, transform .15s ease !important;
}

/* Hover / focus */
#searchModal #prevHour:hover,
#searchModal #nextHour:hover,
#searchModal #resetFilters:hover {
  background-color: #ffe67c !important;
  transform: none !important; /* no lift effect */
}

/* Base yellow button styling (desktop) */
#play-toggle {
  background-color: #fed351 !important;
  color: #111 !important;
  border: 2px solid #e6c13c !important;
  font-weight: bold !important;
  font-size: 18px !important;
  padding: 14px 24px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  margin-top: 8px !important; /* extra space from show name */
}

/* Icon size */
#play-toggle svg,
#play-toggle i {
  width: 1.4em !important;
  height: 1.4em !important;
}

/* Hover effect */
#play-toggle:hover,
#play-toggle:focus {
  background-color: #ffe67c !important;
}

/* Mobile adjustments – scale down further */
@media (max-width: 768px) {
  #play-toggle {
    font-size: 13px !important;
    padding: 8px 14px !important;
    width: auto !important;
    margin: 8px auto 0 auto !important; /* space from show name, center horizontally */
    border-radius: 8px !important;
    gap: 6px !important;
  }
  #play-toggle svg,
  #play-toggle i {
    width: 1.1em !important;
    height: 1.1em !important;
  }
}

/* --- Now Playing marquee --- */
.np-marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.np-track {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: np-scroll linear infinite;
  animation-duration: 18s; /* JS recalculates based on text width */
}
.np-track:hover { animation-play-state: paused; }

/* soft gradient fades at the edges */
.np-marquee::before,
.np-marquee::after {
  content:"";
  position:absolute; top:0; bottom:0; width:28px; pointer-events:none;
}
.np-marquee::before { left:0; background:linear-gradient(to right, rgba(0,0,0,.35), transparent); }
.np-marquee::after  { right:0; background:linear-gradient(to left,  rgba(0,0,0,.35), transparent); }
[data-theme="light"] .np-marquee::before { background:linear-gradient(to right, rgba(255,255,255,.75), transparent); }
[data-theme="light"] .np-marquee::after  { background:linear-gradient(to left,  rgba(255,255,255,.75), transparent); }

@keyframes np-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Live show highlight in schedule --- */
.live-now {
  border-left: 4px solid var(--brand, #fed351);
  background: linear-gradient(90deg, rgba(254,211,81,.12), transparent 70%);
  box-shadow: 0 0 0 1px rgba(254,211,81,.18) inset, 0 0 22px rgba(254,211,81,.18);
  border-radius: 10px;
  padding-left: 12px;
}
.show--current, .current-show, .show-entry.current, .show.current, .schedule-item.current, .live-now {
border-left: 4px solid var(--brand, #fed351);
  background: linear-gradient(90deg, rgba(254,211,81,.12), transparent 70%);
  box-shadow: 0 0 0 1px rgba(254,211,81,.18) inset, 0 0 22px rgba(254,211,81,.18);
  border-radius: 10px;
  padding-left: 12px;
}

.show--current, .current-show, .show-entry.current, .show.current, .schedule-item.current  {
  border-left: 4px solid var(--brand, #fed351);
  background: linear-gradient(90deg, rgba(254,211,81,.12), transparent 70%);
  box-shadow: 0 0 0 1px rgba(254,211,81,.18) inset, 0 0 22px rgba(254,211,81,.18);
  border-radius: 10px;
  padding-left: 12px;
}
[data-theme="light"] .live-now {
  background: linear-gradient(90deg, rgba(254,211,81,.16), transparent 70%);
}

/* --- Share button --- */
#share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--brand, #fed351);
  color: #111;
  border: 1px solid rgba(0,0,0,.06);
  cursor: pointer;
}
#share-btn:hover, #share-btn:focus { filter: brightness(.97); }

#share-btn .share-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* mobile layout: keep share under play */
@media (max-width:768px){
  #share-btn { width: 100%; margin-top: 10px; justify-content: center; }
}

/* Share button inside Now Playing card */
#share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85em;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--brand, #fed351);
  color: #111;
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  margin-top: 8px;
}
#share-btn:hover, #share-btn:focus { filter: brightness(.97); }

/* Share platform popup anchors relative to NP button */
#share-btn { position: relative; }
#share-platforms {
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel, #222);
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 5000;
}
#share-btn:hover #share-platforms,
#share-btn:focus-within #share-platforms {
  opacity: 1;
  pointer-events: auto;
}
#share-platforms a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--brand, #fed351);
  color: #111;
  text-decoration: none;
  font-size: 14px;
}
#share-platforms a:hover { filter: brightness(0.95); }

@media (max-width:768px){
  /* On mobile, anchor the popup just under the full-width share button */
  #share-platforms {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* --- Share button inside LIVE box --- */
.live-indicator #share-btn {
  background: var(--brand, #fed351);
  color: #111;
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 0.75em;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: 8px;
  cursor: pointer;
}
.live-indicator #share-btn:hover,
.live-indicator #share-btn:focus { filter: brightness(.95); }

.live-indicator #share-btn { position: relative; }
.live-indicator #share-platforms {
  position: absolute;
  top: 120%;
  right: 0;
  background: var(--panel, #222);
  border: 1px solid var(--border, #444);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 5000;
}
.live-indicator #share-btn:hover #share-platforms,
.live-indicator #share-btn:focus-within #share-platforms {
  opacity: 1;
  pointer-events: auto;
}
.live-indicator #share-platforms a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--brand, #fed351);
  color: #111;
  font-size: 13px;
  text-decoration: none;
}
.live-indicator #share-platforms a:hover { filter: brightness(0.95); }

#modalDaySchedule .show-entry.live-now {
  background: rgba(254, 211, 81, 0.12);
  border-left: 4px solid var(--brand, #fed351);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(254, 211, 81, 0.25) inset;
  padding: 10px 12px;
}
#modalDaySchedule .show-entry.live-now time { color: var(--brand, #fed351); }
#modalDaySchedule .show-entry.live-now .show-title { color: #fff; text-shadow: 0 0 8px rgba(254,211,81,0.25); }

#now-playing-card .np-share-toolbar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin:8px 0 6px 0;
}
#now-playing-card .np-share-btn svg { display:block; }
#now-playing-card .np-share-btn { width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; color:#111;
  background: var(--brand, #fed351); color:#111; border:1px solid rgba(0,0,0,.08); border-radius:8px; cursor:pointer; }
#now-playing-card .np-share-btn:focus{ outline:2px solid rgba(0,0,0,.15); outline-offset:2px; }
#now-playing-card .np-share-btn:hover{ filter:brightness(0.97); }
#now-playing-card .np-share-label { margin-right: 4px; font-size:12px; font-weight:700; color: var(--text, #fff); }
[data-theme="light"] #now-playing-card .np-share-label { color:#111; }
@media (max-width: 480px){ #now-playing-card .np-share-toolbar{ justify-content:flex-start; } }

/* Highlight for the current show inside the Schedule modal */
.show--current,
.current-show,

/* If the entry already has a highlight class from older CSS, keep it visible */
.show-entry.current, .show.current, .schedule-item.current { 
  outline: 2px solid rgba(254,211,81,.85);
}

/* === Modal expansion hardening === */

/* Prefer dynamic viewport units to avoid iOS 100vh issues */
@supports (height: 100dvh) {
  .modal { height: 100dvh !important; }
  /* Desktop */
  .modal-content { max-height: calc(100dvh - 8vh) !important; }
  /* Mobile header offset case */
  @media (max-width: 768px) {
    .modal { top: 56px !important; height: calc(100dvh - 56px) !important; }
    .modal-content { max-height: calc(100dvh - 56px) !important; }
  }
}
/* Safe fallback when dvh unsupported */
@supports not (height: 100dvh) {
  .modal { height: 100svh !important; }
  .modal-content { max-height: calc(100svh - 8vh) !important; }
  @media (max-width: 768px) {
    .modal { top: 56px !important; height: calc(100svh - 56px) !important; }
    .modal-content { max-height: calc(100svh - 56px) !important; }
  }
}

/* Make sure the modal itself isn't clipping content */
.modal { overflow: hidden !important; }
.modal-content {
  display: block !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  contain: content; /* prevent weird overflow painting on iOS */
}

/* Flex children inside modal should be allowed to shrink/grow */
#scheduleModal *, 
#newsModal *, 
.modal-content * {
  min-width: 0;
  min-height: 0;
}

/* Specific to schedule modal columns: prevent overflow clipping */
#modalScheduleContainer .split-columns, 
#modalScheduleContainer .column,
#modalDaySchedule .split-columns,
#modalDaySchedule .column {
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Media inside modals should scale down */
.modal-content img,
.modal-content video,
.modal-content iframe,
.modal-content embed {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* If an iframe needs a reasonable default height */
.modal-content iframe {
  min-height: 240px;
}

/* Make sure sticky headers/footers inside the modal don't steal space */
.modal-content .sticky,
.modal-content [style*="position:sticky"] {
  top: 0;
}

/* Avoid scroll chaining glitches near edges */
.modal, .modal-content { overscroll-behavior: contain; }

/* === Uniform Presenter Image Sizing === */
/* Schedule modal presenter avatars */
#modalScheduleContainer .show-entry img,
#modalDaySchedule .show-entry img {
  width: 48px !important;
  height: 48px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* Presenter list / presenter modal cards */
#presentersModal .presenter-card img,
.presenter-modal .presenter-card img,
#presentersModal .presenter img,
.presenter-modal .presenter img,
#presentersModal .presenter-photo,
.presenter-modal .presenter-photo,
#presentersModal .presenter-list img,
.presenter-modal .presenter-list img {
  width: 96px !important;
  height: 96px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 7px !important;
  display: block !important;
}

/* Fall-back: any image flagged as presenter via class */
img.presenter, img.presenter-photo, img.host, img.host-photo {
  width: 96px !important;
  height: 96px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 7px !important;
}

/* Mobile tweak */
@media (max-width: 768px) {
  #modalScheduleContainer .show-entry img,
  #modalDaySchedule .show-entry img {
    width: 32px !important;
    height: 32px !important;
  }
  #presentersModal .presenter-card img,
  .presenter-modal .presenter-card img,
  #presentersModal .presenter img,
  .presenter-modal .presenter img,
  #presentersModal .presenter-photo,
  .presenter-modal .presenter-photo,
  #presentersModal .presenter-list img,
  .presenter-modal .presenter-list img,
  img.presenter, img.presenter-photo, img.host, img.host-photo {
    width: 80px !important;
    height: 80px !important;
  }
}

/* === Presenter image centering === */

/* 1) Schedule entries: vertically center avatar relative to text */
#modalScheduleContainer .show-entry,
#modalDaySchedule .show-entry {
      position: relative;
  align-items: center !important; /* override earlier align-items:flex-start */
}

/* 2) Make the actual <img loading="lazy" decoding="async"> center itself in any layout (flex, grid, or block) */
#modalScheduleContainer .show-entry img,
#modalDaySchedule .show-entry img,
#presentersModal .presenter-card img,
.presenter-modal .presenter-card img,
#presentersModal .presenter img,
.presenter-modal .presenter img,
#presentersModal .presenter-photo,
.presenter-modal .presenter-photo,
#presentersModal .presenter-list img,
.presenter-modal .presenter-list img,
img.presenter, img.presenter-photo, img.host, img.host-photo {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;     /* centers along cross-axis in flex/grid */
  object-position: center center !important; /* ensure crop is centered */
  place-self: center !important;     /* grid-friendly centering */
}

/* Optional: if presenter cards have a fixed-height image area, center inside it */
.presenter-card .image, .presenter .image, .presenter-photo-wrap {
  display: grid !important;
  place-items: center !important;
}

/* Restore original schedule row alignment */
#modalScheduleContainer .show-entry,
#modalDaySchedule .show-entry {
      position: relative;
  align-items: flex-start !important;
}

/* === Schedule avatar alignment: restore original === */
#modalScheduleContainer .show-entry,
#modalDaySchedule .show-entry {
      position: relative;
  align-items: flex-start !important;
}

/* Avatars in schedule rows: no auto-centering, sit at the top-left of their slot */
#modalScheduleContainer .show-entry img,
#modalDaySchedule .show-entry img {
  margin: 0 !important;
  align-self: flex-start !important;
  place-self: auto !important;
  object-position: center center !important; /* keep crop centered inside the circle */
  display: block !important;
}

/* Ensure the volume % label is readable in both themes */
#volume-container #volume-display {
  color: var(--text, #fff) !important;
  font-weight: 600;
  text-shadow: none !important;
}
/* Light mode: dark ink */
[data-theme="light"] #volume-container #volume-display {
  color: #111827 !important;
}
/* Dark mode: bright ink */
[data-theme="dark"] #volume-container #volume-display,
html:not([data-theme="light"]) #volume-container #volume-display {
  color: #f5f7ff !important;
}

#now-playing-card .np-share-toolbar,
#now-playing-card .np-share-btn {
  pointer-events: auto !important;
  z-index: 5;
  position: relative;
}
#now-playing-card *[style*="pointer-events: none"] .np-share-toolbar,
#now-playing-card *[style*="pointer-events:none"] .np-share-toolbar {
  pointer-events: auto !important;
}

/* Put the toolbar above artwork, badges, and decorative layers */
#now-playing-card { position: relative; }
#now-playing-card #np-share-toolbar {
  position: relative !important;
  z-index: 6000 !important;
  pointer-events: auto !important;
}
#now-playing-card #np-share-toolbar * {
  pointer-events: auto !important;
}

/* Ensure common overlapping bits sit lower */
#now-playing-card #artwork,
#now-playing-card .artwork,
#now-playing-card .artwork-container,
#now-playing-card .badge,
#now-playing-card .np-marquee,
#now-playing-card .overlay,
#now-playing-card .glow {
  position: relative;
  z-index: 1 !important;
}

/* Share links should behave like buttons and be obviously clickable */
#now-playing-card #np-share-toolbar .np-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* If any ancestor mistakenly disables clicks, re-enable here */
#now-playing-card,
#now-playing-card *:not(#np-share-toolbar):not(#np-share-toolbar *)
{
  /* don't force pointer-events here; just ensure toolbar is clickable */
}

/* Make SVGs inherit button text color */
#np-share-toolbar .np-share-btn svg,
#np-share-toolbar .np-share-btn svg * {
  fill: currentColor !important;
  stroke: none !important;
}

/* Base colors per theme */
[data-theme="dark"] #np-share-toolbar .np-share-btn { color: #fff !important; }   /* white icons in dark mode */
[data-theme="light"] #np-share-toolbar .np-share-btn { color: #000 !important; }  /* black icons in light mode */

/* Platform-specific overrides to guarantee contrast in light mode */
[data-theme="light"] #np-share-toolbar .np-share-btn[data-platform="twitter"]  { color: #fff !important; }  /* black bg -> white icon */
[data-theme="light"] #np-share-toolbar .np-share-btn[data-platform="facebook"] { color: #fff !important; }  /* blue bg -> white icon */
/* WhatsApp on light: keep black icon for max contrast on green */

/* Neutralize share button background/outline */
#np-share-toolbar .np-share-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
}
#np-share-toolbar .np-share-btn:hover,
#np-share-toolbar .np-share-btn:focus {
  background: rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] #np-share-toolbar .np-share-btn:hover,
[data-theme="dark"] #np-share-toolbar .np-share-btn:focus {
  background: rgba(255,255,255,0.08) !important;
}

/* --- Keep button order consistent on mobile: Facebook, Twitter, WhatsApp --- */
#np-share-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
#np-share-toolbar .np-share-btn { order: 10; } /* default */
#np-share-toolbar .np-share-btn[data-platform="facebook"],
#np-share-toolbar .np-share-btn[data-platform="fb"] { order: 1; }
#np-share-toolbar .np-share-btn[data-platform="twitter"],
#np-share-toolbar .np-share-btn[data-platform="x"] { order: 2; }
#np-share-toolbar .np-share-btn[data-platform="whatsapp"],
#np-share-toolbar .np-share-btn[data-platform="wa"] { order: 3; }

/* Make sure wrapping keeps the sequence visually on small screens */
@media (max-width: 640px) {
  #np-share-toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* --- Ensure modals cover share toolbar (share should NOT sit above modals) --- */
#now-playing-card { position: relative; }
#now-playing-card #np-share-toolbar {
  position: relative !important;
  z-index: 1200 !important;  /* below .modal (2000) but above card bits */
  pointer-events: auto !important;
}
/* Keep modal on top (your modals use z-index:2000+) */
.modal { z-index: 2000 !important; }

#np-share-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#np-share-toolbar .np-share-btn{order:10;text-decoration:none}
#np-share-toolbar .np-share-btn[data-platform="facebook"],
#np-share-toolbar .np-share-btn[data-platform="fb"]{order:1}
#np-share-toolbar .np-share-btn[data-platform="twitter"],
#np-share-toolbar .np-share-btn[data-platform="x"]{order:2}
#np-share-toolbar .np-share-btn[data-platform="whatsapp"],
#np-share-toolbar .np-share-btn[data-platform="wa"]{order:3}

#np-share-toolbar{margin-top:8px}
#np-share-toolbar .np-share-btn{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
[data-theme="light"] #np-share-toolbar .np-share-btn{
  border-color: rgba(0,0,0,0.15);
}
#np-share-toolbar .np-share-btn svg{width:16px;height:16px}
#np-share-toolbar .np-share-btn svg [fill="#fed351"],
#np-share-toolbar .np-share-btn svg [fill="#FFF"],
#np-share-toolbar .np-share-btn svg [fill="#ffffff"]{fill:#fff}
[data-theme="light"] #np-share-toolbar .np-share-btn svg [fill="#FFF"],
[data-theme="light"] #np-share-toolbar .np-share-btn svg [fill="#ffffff"]{fill:#111}

#now-playing-card{position:relative}
#np-share-toolbar{position:relative;z-index:1200}
.modal{z-index:2000 !important}

/* Keep Mixcloud players slim in all contexts (modals, lists, etc.) */
  iframe[src*="mixcloud.com/widget/iframe"] {
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 72px !important; /* allow a tiny bit of variation */
    border: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

/* === Dark mode – Events modal link colour override === */
[data-theme="dark"] #eventsModal a,
[data-theme="dark"] #eventsModal a:visited {
  color: var(--text) !important; /* Match normal dark mode text colour */
}
[data-theme="dark"] #eventsModal a:hover,
[data-theme="dark"] #eventsModal a:focus {
  color: var(--er-accent) !important; /* Yellow hover for visibility */
}

/* Hide the old LIVE-box Share button to avoid duplicates */
.live-indicator #share-btn { display: none !important; }

.install-hint {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: .6rem .8rem;
    background: rgba(0,0,0,.85);
    color: #fff;
    border-radius: .75rem;
    font-size: .9rem;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    z-index: 9999;
    display: none;
  }
  .install-hint strong { color: #ffd400; }

/* === Wider, taller modals on desktop; keep mobile behaviour === */
  @media (min-width: 1024px) {
    .modal-content {
      width: auto !important;         /* size to content up to cap */
      max-width: 1200px !important;   /* wider than previous 920px */
      max-height: 95vh !important;    /* taller viewport allowance */
      overflow-y: auto !important;    /* still scroll if truly needed */
      margin: 4% auto !important;     /* tighten top spacing slightly */
    }
  }

@media (min-width: 1024px) {
  #scheduleModal .modal-content,
  #scheduleModal #modalScheduleContainer {
    max-width: 1100px !important; /* schedule only */
	margin-top: 60px !important;
    width: 100% !important;
    max-height: 96vh !important;
  }

  /* Ensure Presenters modal keeps the wider default */
  #presentersModal .modal-content {
    max-width: 1200px !important;
    max-height: 95vh !important;
  }
}

/* === Schedule modal: make better use of extra width on desktop === */
@media (min-width: 1200px) {
  /* Give the two columns more breathing room */
  #modalScheduleContainer .split-columns {
    display: flex !important;
    gap: 32px !important;
  }
  #modalScheduleContainer .column {
    flex: 1 1 0 !important;
    min-width: 520px !important; /* lets columns widen nicely without squashing */
  }

  /* Enlarge avatars and tighten layout rhythm */
  #modalScheduleContainer .show-entry { 
    gap: 16px !important; 
    margin-bottom: 20px !important;
  }
  #modalScheduleContainer .show-entry img {
    width: 52px !important;
    height: 52px !important;
  }

  /* Improve typographic hierarchy */
  #modalScheduleContainer .show-info time {
    font-size: 15px !important;
  }
  #modalScheduleContainer .show-title-presenter .show-title {
    font-size: 1.12em !important;
    line-height: 1.25 !important;
  }
  #modalScheduleContainer .show-title-presenter .show-presenter {
    font-size: 1.02em !important;
  }
  #modalScheduleContainer .show-details {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
}

/* Ultra‑wide: if there’s space, allow 3 columns safely when markup permits more than 2 columns */
@media (min-width: 1500px) {
  #modalScheduleContainer .split-columns.three {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 28px !important;
  }
  #modalScheduleContainer .split-columns.three .column {
    min-width: 0 !important;
  }
}

/* Presenter modal width fixes (don’t affect the big presenters list) */
.modal.presenter-modal:not(#presentersModal) .modal-content {
  max-width: 820px !important;   /* tweak this to taste: 760–900 works well */
  width: min(94vw, 820px) !important;
}

/* Ensure the big presenters list stays nice and wide */
#presentersModal .modal-content {
  max-width: 1300px !important;
  width: min(96vw, 1300px) !important;
}

@media (min-width: 1024px) {
  /* Requests & Contact Us wider */
  #requestsModal .modal-content,
  #contactModal .modal-content {
    max-width: 1300px !important;
    width: min(96vw, 1300px) !important;
    max-height: 95vh !important;
  }

  /* Listen Again back to original width */
  #listenModal .modal-content {
    max-width: 920px !important;
    width: min(96vw, 920px) !important;
    max-height: 95vh !important;
  }

  /* Local Events stays at 1300px */
  #localModal .modal-content {
    max-width: 1300px !important;
    width: min(96vw, 1300px) !important;
	margin-top: 60px !important;
    max-height: 95vh !important;
  }
}

.modal-content {
  position: relative;
  overflow-y: auto;
}
.modal-content::before,
.modal-content::after {
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
  z-index: 5;
}
.modal-content::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);
}
.modal-content::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
}
/* Dark mode adjustment */
body.dark-mode .modal-content::before {
  background: linear-gradient(to bottom, rgba(255,255,255,0.15), transparent);
}
body.dark-mode .modal-content::after {
  background: linear-gradient(to top, rgba(255,255,255,0.15), transparent);
}

/* Sticky Now Playing bar (mobile only) */
#mobileNowBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none; /* default hidden; enabled on small screens */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(16, 18, 21, 0.96);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -6px 18px rgba(0,0,0,0.25);
  z-index: 3200; /* above modals backdrop */
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
  line-height: 1.2;
}
#mobileNowBar .np-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#mobileNowBar .np-text .title {
  font-weight: 700;
}
#mobileNowBar .np-text .artist {
  opacity: 0.9;
}
#mobileNowBar .np-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand, #fed351);
  color: #111;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,0.06);
}
#mobileNowBar .np-cta:active { transform: translateY(1px); }

/* Make room for the bar so it doesn't cover content on mobile */
@media (max-width: 768px) {
  #mobileNowBar { display: flex; }
  body { padding-bottom: 64px !important; }
  body.modal-open #mobileNowBar { display: none !important; } /* hide when a modal is open */
}

/* Light theme variant */
html[data-theme="light"] #mobileNowBar {
  background: rgba(255,255,255,0.98);
  color: #0b1220;
  border-top-color: rgba(0,0,0,0.08);
}

/* Mobile mini-player bar */
  #mobileNowBar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 3002;
    display: none;                 /* shown only on mobile */
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(16, 18, 21, 0.96);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  #mobileNowBar-inner {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
  }
  #mobilePlayBtn {
    -webkit-tap-highlight-color: transparent;
    border: none;
    border-radius: 999px;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fed351 !important; color: #111 !important;  /* brand yellow */
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    cursor: pointer;
  }
  #mobilePlayBtn:active { transform: scale(.98); }

  /* Single-line text, centered */
  #mobileNowText {
    color: #fff;
    font-size: 14.5px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    width: 100%;
  }

  /* Only show the bar on small screens, add bottom padding so it doesn't cover content */
  @media (max-width: 768px) {
    #mobileNowBar { display: flex; }
    body { padding-bottom: 66px; }
  }

  /* Light theme contrast */
  [data-theme="light"] #mobileNowBar { background: rgba(255,255,255,.96); border-top-color: #e6ecf3; }
  [data-theme="light"] #mobileNowText { color: #0b1220; }

/* === Force tidy for presenter modal images === */
  .modal[id*="presenter"] .modal-content img,
  .modal.presenter .modal-content img {
    display: block !important;
    max-width: 300px !important;
    width: 100% !important;
    height: auto !important;
    margin: 6px auto 14px auto !important;
    border-radius: 7px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important;
    object-fit: cover !important;
  }

  /* Reduce padding for presenter modals */
  .modal[id*="presenter"] .modal-content,
  .modal.presenter .modal-content {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }

  /* Adjust on very small screens */
  @media (max-width: 480px) {
    .modal[id*="presenter"] .modal-content img,
    .modal.presenter .modal-content img {
      max-width: 260px !important;
      border-radius: 7px !important;
      margin: 4px auto 12px auto !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.22) !important;
    }
    .modal[id*="presenter"] .modal-content,
    .modal.presenter .modal-content {
      padding-top: 12px !important;
      padding-bottom: 10px !important;
    }
  }

/* Song Search: make Reset & Refresh yellow (scoped) */
#searchModal #resetFilters,
#searchModal #songsearchRefreshBtn {
  background: #fed351 !important;
  color: #191c29 !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 0.9em !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
  transition: all 0.18s !important;
  margin-left: 8px;
}
#searchModal #resetFilters:active,
#searchModal #songsearchRefreshBtn:active {
  transform: translateY(1px);
}

/* === Cross-browser, theme-aware volume slider (DESKTOP/TABLET ONLY) === */
#volume-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 180px;
  height: 16px;
  background: transparent;
  outline: none;
  cursor: pointer;
}
#volume-slider::-webkit-slider-runnable-track{
  height: 6px;
  background: var(--accent, #00818a);
  border-radius: 4px;
  border: none;
}
#volume-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--brand, #fed351);
  border: 2px solid #111;
  box-sizing: border-box;
}
#volume-slider::-moz-range-track{
  height: 6px;
  background: var(--accent, #00818a);
  border-radius: 4px;
  border: none;
}
#volume-slider::-moz-range-progress{
  height: 6px;
  background: var(--accent, #00818a);
  border-radius: 4px 0 0 4px;
}
#volume-slider::-moz-range-thumb{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand, #fed351);
  border: 2px solid #111;
  box-sizing: border-box;
}
[data-theme="light"] #volume-slider::-webkit-slider-runnable-track,
[data-theme="light"] #volume-slider::-moz-range-track,
[data-theme="light"] #volume-slider::-moz-range-progress{
  background: var(--accent, #0b6b73);
}
#volume-display { color: var(--text, #f7f8fb); }

/* === Hide volume on small screens === */
@media (max-width: 768px){
  #volume-container { display: none !important; }
}

/* === Now Playing progress bar (only visible during tracks) === */
#np-progress{
  display:none;
  width:100%;
  height:8px;
  background: rgba(255,255,255,0.2);
  border-radius:6px;
  overflow:hidden;
  margin-top:10px;
}
#np-progress .bar{
  height:100%;
  width:0%;
  background: var(--er-accent, #fed351);
  transition: width 0.4s linear;
}
:root[data-theme="light"] #np-progress{
  background: rgba(0,0,0,0.15);
}
#np-progress.ending-soon .bar { animation: npPulse 1s infinite; }
@keyframes npPulse { 50% { opacity: .6 } }

/* Bring Requests & Contact modals fully into view on desktop and above everything */
@media (min-width: 751px){
  #contactModal, #requestsModal {
    z-index: 12000 !important; /* ensure above any presenter/detail modals */
  }
  #contactModal .modal-content,
  #requestsModal .modal-content {
    /* override inline absolute fullscreen that was causing off-screen positioning */
    position: relative !important;
    inset: auto !important;
    width: 96vw !important;
    max-width: 1200px !important;
    height: 94vh !important;
    margin: 3vh auto !important;   /* drop it slightly from very top */
    overflow: hidden !important;
    border-radius: 16px !important;
    padding: 0 !important;
    box-shadow: 0 0 34px #00818a99;
  }
  /* The internal scrolling region & iframe should fill the remaining space under the 48px top bar */
  #contactModal .embed-wrap,
  #requestsModal .embed-wrap {
    height: calc(94vh - 48px) !important;
    max-height: calc(94vh - 48px) !important;
    overflow: hidden !important;
  }
  #contactModal iframe,
  #requestsModal iframe {
    display: block !important;
    width: 100% !important;
    height: calc(94vh - 48px) !important;
    min-height: 0 !important; /* kill any rogue min-height like 300% */
    border: 0 !important;
  }
}
/* Close button must be visible above iframe */
#contactModal .close,
#requestsModal .close {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  font-size: 32px !important;
  font-weight: bold;
  color: #00818a;
  cursor: pointer;
  z-index: 5000 !important;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  padding: 4px 10px;
  line-height: 1;
}
#contactModal .close:hover,
#requestsModal .close:hover {
  color: #ff4d4d;
  background: #ffffff;
}

@media (min-width: 751px) {
  #presentersModal .modal-content {
    margin: 6% auto !important;   /* was closer to 8%, so this drops it slightly */
    max-width: 1100px !important; /* wider than the default 920px */
    width: 90vw !important;       /* responsive scaling */
  }
}

.travel-links a {
  color: #fed351 !important;
  font-weight: 600;
  text-decoration: none;
}
.travel-links a:hover, .travel-links a:focus {
  text-decoration: underline;
  color: #ffe67c !important;
}

/* Base: ensure relative positioning so 'top' works */
#presentersModal .modal-content,
#listenAgainModal .modal-content {
  position: relative !important;
  margin-top: 0 !important;
}

/* Mobile default (≤ 599px) */
@media (max-width: 599px) {
  #presentersModal .modal-content,
  #listenAgainModal .modal-content {
    top: 36px !important;
  }
}

/* Tablets / small laptops */
@media (min-width: 600px) and (max-width: 899px) {
  #presentersModal .modal-content,
  #listenAgainModal .modal-content {
    top: 48px !important;
  }
}

/* Desktop (≥ 900px) */
@media (min-width: 900px) {
  #presentersModal .modal-content,
  #listenAgainModal .modal-content {
    top: 64px !important;
  }
}

/* Extra: nudge down a bit more on very tall screens */
@media (min-height: 900px) and (min-width: 900px) {
  #presentersModal .modal-content,
  #listenAgainModal .modal-content {
    top: 72px !important;
  }
}

/* iOS notch/safe area: add a little extra if present */
@supports (padding: max(0px)) {
  @media (max-width: 599px) {
    #presentersModal .modal-content,
    #listenAgainModal .modal-content {
      top: calc(36px + env(safe-area-inset-top)) !important;
    }
  }
}

/* Responsive fix for Listen Again modal */
#listenModal .modal-content {
  position: relative !important;
  margin-top: 0 !important;
  top: 60px !important; /* Desktop offset */
}
@media (max-width: 599px) {
  #listenModal .modal-content {
    top: 36px !important; /* Smaller bump for phones */
  }
}

/* Ensure embedded Microsoft Forms show inside the modals */
  /* Desktop/tablet */
  @media (min-width: 751px){
    #requestsModal .embed-wrap,
    #contactModal .embed-wrap {
      height: calc(94vh - 48px) !important;
      max-height: calc(94vh - 48px) !important;
      overflow: hidden !important;
    }
    #requestsModal iframe,
    #contactModal iframe {
      display:block !important;
      width:100% !important;
      height: calc(94vh - 48px) !important;
      min-height:0 !important;
      border:0 !important;
    }
  }
  /* Mobile */
  @media (max-width: 750px){
    #requestsModal .embed-wrap,
    #contactModal .embed-wrap {
      height: calc(100vh - 56px) !important;
      max-height: calc(100vh - 56px) !important;
    }
    #requestsModal iframe,
    #contactModal iframe {
      display:block !important;
      width:100% !important;
      height: calc(100vh - 56px - 36px) !important;
      min-height:0 !important;
      border:0 !important;
    }
  }
  /* If there is no embed-wrap in Requests modal, make sure any iframe still fills */
  #requestsModal iframe { width:100% !important; border:0 !important; }

/* === Mobile: place clock above Play button by moving the element === */
@media (max-width: 768px) {
  #liveClock {
    margin-bottom: 10px;
  }
}

/* === Mobile logo/clock spacing fix === */
@media (max-width: 600px) {
  /* The logo sits absolutely in .player-wrapper; add top padding so content clears it */
  .player-wrapper { padding-top: 24px !important; }

  /* Nudge/scale the overhang logo slightly smaller for tight screens */
  .logo-overhang {
    width: 120px !important;
    left: 6px !important;
    top: 6px !important;
    transform: translate(0, 0) !important;
  }

  /* Keep the clock comfortably below the logo */
  #liveClock { margin-top: 4px !important; }
}

body.alt-mode #np-progress,
  body.alt-mode #countdown,
  body.alt-mode #mobileNowBar { display: none !important; }

#playlistModal .modal-content{
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; padding: clamp(12px, 2vw, 28px);
    display:flex; flex-direction:column;
    background: radial-gradient(1200px 600px at 80% -10%, rgba(0,161,170,0.15), transparent 60%),
                linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    background-color: var(--panel, #0f1316);
    color: var(--text, #e9f1f3);
  }
  #playlistModal h2{margin:0 0 8px 0; color:#00818a;}
  #playlistModal .close{position:absolute; top:10px; right:12px; font-size:28px; line-height:1; color:var(--text,#e9f1f3); opacity:0.85; cursor:pointer; padding:4px 10px; border-radius:10px;}
  #playlistModal .close:hover{opacity:1; background:rgba(255,255,255,0.06);}

  #playlistWrap{flex:1; overflow:auto; padding:8px 2px 16px;}
  .playlist-toolbar{display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; padding:8px 0 12px; border-bottom:1px solid var(--border, rgba(255,255,255,0.12)); margin-bottom:10px;}
  .segmented{ background: rgba(255,255,255,0.06); border: 1px solid var(--border, rgba(255,255,255,0.12)); padding:4px; border-radius:12px; display:inline-flex; gap:4px; }
  .segmented .seg{ background:transparent; color: var(--text, #e9f1f3); border:0; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:700; opacity:0.85; }
  .segmented .seg.active{ background: linear-gradient(180deg, rgba(0,160,170,0.25), rgba(0,160,170,0.18)); border:1px solid rgba(0,160,170,0.45); opacity:1; }

  .playlist-note{ font-size:13px; color:rgba(233,241,243,0.75); margin-top:6px; }
  .playlist-grid{ display:grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: clamp(10px, 2vw, 16px); }
  @media (max-width: 1100px){ .playlist-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
  @media (max-width: 680px){ .playlist-grid{ grid-template-columns: 1fr; } }
  #playlistWrap.single-list .playlist-grid { grid-template-columns: 1fr !important; }

  .playlist-section{ border:1px solid var(--border, rgba(255,255,255,0.12)); border-radius:14px; padding:12px; background: rgba(255,255,255,0.03); }
  .playlist-section h3{ margin:0 0 10px 0; font-size:16px; letter-spacing:.3px; color:#7bdff2; }
  .track{ display:grid; grid-template-columns: 56px 1fr auto; gap:10px; align-items:center; padding:8px; border-radius:10px; }
  .track + .track{ margin-top:6px; }
  .track:hover{ background: rgba(255,255,255,0.05); }
  .cover{ width:56px; height:56px; border-radius:8px; object-fit:cover; border:1px solid var(--border, rgba(255,255,255,0.12)); }
  .meta{ display:flex; flex-direction:column; gap:2px; }
  .artist{ font-weight:700; }
  .title{ opacity:0.9; }
  .badge{ font-size:11px; border:1px solid rgba(0,160,170,0.45); border-radius:999px; padding:2px 8px; margin-left:8px; background: linear-gradient(180deg, rgba(0,160,170,0.25), rgba(0,160,170,0.18)); font-weight:800; letter-spacing:.2px; }
  .arrow{ font-size:18px; opacity:0.9; }
  .muted{ opacity:0.7; }

  /* Movement tags */
  .move{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
  .move-tag{ font-size:12px; font-weight:800; letter-spacing:.2px; padding:4px 10px; border-radius:999px; border:1px solid transparent; }
  .move-tag.up{ 
    background: linear-gradient(180deg, rgba(46, 204, 113, 0.25), rgba(46, 204, 113, 0.18));
    border-color: rgba(39, 174, 96, 0.55);
    color: #c5f7d5;
  }
  .move-tag.down{ 
    background: linear-gradient(180deg, rgba(231, 76, 60, 0.25), rgba(231, 76, 60, 0.18));
    border-color: rgba(192, 57, 43, 0.55);
    color: #ffd3d0;
  }

  /* NEW pill in house yellow */
  .badge.new{
    background: linear-gradient(180deg, rgba(255, 209, 102, 0.35), rgba(255, 209, 102, 0.24));
    border-color: rgba(255, 209, 102, 0.75);
    color: #1a1a1a;
  }

  :root {
    --success: #1fa97a;
    /* keep existing --danger from site if present */
  }
  .move{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
  .move-tag{
    font-size:14px; font-weight:900; letter-spacing:.2px;
    padding:2px 10px; border-radius:10px; border:1px solid transparent; line-height:1.2;
    min-width: 40px; text-align:center;
  }
  .move-tag.up{
    background: var(--success, #1fa97a);
    border-color: color-mix(in oklab, var(--success, #1fa97a) 85%, black);
    color: #041b11;
  }
  .move-tag.down{
    background: var(--danger, #b42318);
    border-color: color-mix(in oklab, var(--danger, #b42318) 85%, black);
    color: #fff5f4;
  }
  /* NEW pill in house yellow */
  .badge.new{
    background: var(--er-accent, #fed351) !important;
    border-color: var(--er-accent, #fed351) !important;
    color: #000 !important;
  }

/* === PATCH: Multi-column layout for single-list (A/B/C) on desktop === */
@media (min-width: 900px) {
  #playlistWrap.single-list .playlist-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 12px;
  }
  #playlistWrap.single-list .playlist-section > h3 {
    grid-column: 1 / -1;
    margin-bottom: 6px;
  }
  #playlistWrap.single-list .playlist-section .track + .track {
    margin-top: 0;
  }
}
@media (min-width: 1400px) {
  #playlistWrap.single-list .playlist-section {
    grid-template-columns: repeat(3, minmax(300px, 1fr));
  }
}
/* === END PATCH === */

/* === PATCH: Playlist key layout (inline desktop, stacked mobile) === */
#playlistModal .playlist-note { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#playlistModal .playlist-note .key-item { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px){
  #playlistModal .playlist-note { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* === END PATCH === */

.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;}
  #collegeModal .modal-content{
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; padding: clamp(12px, 2vw, 28px);
    display: flex; flex-direction: column;
    background: radial-gradient(1200px 600px at 80% -10%, rgba(0,161,170,0.15), transparent 60%),
                linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
    background-color: var(--panel, #0f1316);
    color: var(--text, #e9f1f3);
    box-sizing: border-box;
  }
  #collegeModal h2{ margin:0 0 8px 0; color:#00818a; }
  #collegeModal .close{ position:absolute; top:10px; right:12px; font-size:28px; line-height:1; color:var(--text,#e9f1f3); opacity:0.85; cursor:pointer; padding:4px 10px; border-radius:10px; }
  #collegeModal .close:hover{ opacity:1; background:rgba(255,255,255,0.06); }

  .college-toolbar{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; padding: 8px 0 12px; border-bottom:1px solid var(--border, rgba(255,255,255,0.12)); margin-bottom:10px; }
  .segmented{ background: rgba(255,255,255,0.06); border: 1px solid var(--border, rgba(255,255,255,0.12)); padding:4px; border-radius:12px; display:inline-flex; gap:4px; }
  .segmented .seg{ background:transparent; color: var(--text, #e9f1f3); border:0; border-radius:10px; padding:6px 10px; cursor:pointer; font-weight:700; opacity:0.85; }
  .segmented .seg.active{ background: linear-gradient(180deg, rgba(0,160,170,0.25), rgba(0,160,170,0.18)); border:1px solid rgba(0,160,170,0.45); opacity:1; }
  #collegeSelect{ appearance:none; border-radius:10px; border:1px solid var(--border, rgba(255,255,255,0.14)); background: rgba(255,255,255,0.05); color: var(--text, #e9f1f3); padding:8px 12px; min-width:min(48vw, 420px); outline:none; }

  #collegeWrap{ flex:1; overflow:auto; padding:12px 2px 16px; }
  .college-detail{ min-height:100%; display:flex; flex-direction:column; gap:12px; }
  .college-detail .placeholder{ color: rgba(233,241,243,0.7); font-style: italic; }
  .detail-head{display:flex; flex-wrap:wrap; gap:12px; align-items:baseline;}
  .detail-title{font-size: clamp(18px, 2.4vw, 28px); margin:0; color: var(--text, #e9f1f3);}
  .date-pill{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; font-weight:800; letter-spacing:.3px; border:1px solid rgba(0,160,170,0.45); background:linear-gradient(180deg, rgba(0,160,170,0.25), rgba(0,160,170,0.18));}
  .badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:800; letter-spacing:.3px; border:1px solid transparent; }
  .badge.internal{ background: rgba(89,210,255,0.18); border-color: rgba(89,210,255,0.35); color:#bfefff; }
  .badge.external{ background: rgba(255,209,102,0.20); border-color: rgba(255,209,102,0.45); color:#ffe6a6; }
  .detail-body p{ margin:0 0 10px 0; white-space:pre-wrap; }

/* ===== OVERRIDES (safe to edit) v1 =====
     Put new tweaks here so they don't get lost among legacy patches.
     Keep changes small and comment what they fix.
  */

  /* ===== MOBILE CONSOLIDATION (<= 768px) v1 =====
     Goal: one predictable mobile layout + scroll behaviour.
     This sits LAST so it wins over earlier mobile patches.
  */
  @media (max-width: 768px) {
    /* Layout: stack panels */
    .strip-container {
      flex-direction: column !important;
      height: auto !important;
      min-height: 0 !important;
      overflow: visible !important;
      max-width: 100vw !important;
    }

    .left-panel,
    .right-panel {
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      overflow: visible !important;
      border: none !important;
      box-sizing: border-box !important;
    }

    /* Recent list: allow page scroll (no nested scroll traps) */
    ul#recent-list {
      max-height: none !important;
      overflow: visible !important;
      -webkit-overflow-scrolling: auto !important;
      touch-action: pan-y !important;
    }

    /* Modals: fit within viewport below burger bar (56px) */
    .modal {
      top: 56px !important;
      left: 0 !important;
      width: 100vw !important;
      height: calc(100vh - 56px) !important;
      overflow: hidden !important; /* prevent background scroll */
      overscroll-behavior: contain !important;
    }

    .modal-content {
      width: 96vw !important;
      max-width: 96vw !important;
      margin: 0 auto !important;
      max-height: calc(100vh - 56px) !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      box-sizing: border-box !important;
      -webkit-overflow-scrolling: touch !important;
    }
  }

  /* ===== LIGHT MODE CLEANUP v1 =====
     Reduce brittle 'white text' hardpatches by explicitly resetting key areas in LIGHT mode.
     This is intentionally small and targeted so we don't break dark mode.
  */
  [data-theme="light"] #rnh, 
  [data-theme="light"] #rnh *,
  [data-theme="light"] #rnh-widget, 
  [data-theme="light"] #rnh-widget *,
  [data-theme="light"] #rnh-news, 
  [data-theme="light"] #rnh-news *,
  [data-theme="light"] #rnh-news-container, 
  [data-theme="light"] #rnh-news-container *,
  [data-theme="light"] #newsModal .rnh-title, 
  [data-theme="light"] #newsModal .modal-title.rnh-title,
  [data-theme="light"] .rnh-title, 
  [data-theme="light"] .rnh-heading {
    color: var(--text) !important;
    text-shadow: none !important;
  }

  /* 'Additional Ways to Listen' captions: make readable in LIGHT mode */
  [data-theme="light"] #listen-tiles .tile .caption,
  [data-theme="light"] #listen-tiles .tile .label,
  [data-theme="light"] #listen-tiles .tile small,
  [data-theme="light"] #listen-tiles .tile p,
  [data-theme="light"] #listen-tiles .tile span.caption,
  [data-theme="light"] #additional-ways .tile .caption,
  [data-theme="light"] #additional-ways .tile p,
  [data-theme="light"] #additional-ways small,
  [data-theme="light"] #additional-ways .tile .label,
  [data-theme="light"] .addl-ways .tile .caption,
  [data-theme="light"] .addl-ways .tile p {
    color: var(--text) !important;
    text-shadow: none !important;
  }

  /* ===== Z-INDEX NORMALISATION v1 =====
     Centralise z-index so nav/dropdowns/modals stop fighting each other.
  */
  :root {
    --z-navbar: 3001;
    --z-dropdown: 3100;
    --z-modal: 2000;
    --z-modal-top: 2050;
    --z-logo: 3000;
  }

  .navbar { z-index: var(--z-navbar) !important; }
  #burgerDropdown { z-index: var(--z-dropdown) !important; }
  .modal { z-index: var(--z-modal) !important; }
  .modal.presenter-modal { z-index: var(--z-modal-top) !important; }

  /* Overhang logo sits below the navbar by default */
  .logo-overhang { z-index: var(--z-logo) !important; }

  /* When any modal is open, hide the overhang logo to prevent overlap */
  body.modal-open .logo-overhang { display: none !important; }

  /* ===== COLOUR ALIASES v1 =====
     Use these in NEW CSS (prefer variables over hex).
     Existing legacy hex values are left alone for now.
  */
  :root {
    --ink-dark: #0b1220;
    --ink-light: #ffffff;
    --yellow: var(--brand);
    --yellow-deep: #c89d00;
    --teal: var(--accent);
    --panel-1: var(--panel);
    --panel-2: var(--panel-2);
  }

  /* In light mode, ensure text defaults to dark ink unless explicitly accented */
  [data-theme="light"] {
    color: var(--ink-dark);
  }

  /* ===== REDUCED MOTION v1 =====
     Respect OS accessibility setting to reduce animations.
  */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }

    /* Specifically stop pulsing dots/indicators */
    .refresh-indicator,
    .live-indicator .dot,
    .pulsing-label {
      animation: none !important;
    }
  }

  /* ===== FOCUS VISIBLE v1 =====
     Show strong focus ring for keyboard users without adding noisy outlines for mouse/touch.
  */
  :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
    outline: none;
  }

  :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
  }

  /* On dark backgrounds, make the focus ring a touch brighter */
  [data-theme="dark"] :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.14);
  }

  /* ===== UTILITY CLASSES v1 ===== */
  .no-scroll { overflow: hidden !important; }

  /* ===== SKIP LINK v1 ===== */
  .skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 8px 12px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    z-index: 9999;
    text-decoration: none;
    transform: translateY(-140%);
    transition: transform 0.2s ease;
  }
  .skip-link:focus,
  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* ===== SAFE AREA INSETS v1 =====
     Improves iOS notch/rounded-corner devices (keeps fixed UI out of unsafe areas).
  */
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
  }

  /* Apply safe padding to body on small screens */
  @media (max-width: 768px) {
    body {
      padding-left: calc(2vw + var(--safe-left)) !important;
      padding-right: calc(2vw + var(--safe-right)) !important;
      padding-bottom: calc(8vw + var(--safe-bottom)) !important;
    }

    /* Fixed burger button: nudge into safe area */
    #burgerMenuBtn {
      top: calc(20px + var(--safe-top)) !important;
      left: calc(8px + var(--safe-left)) !important;
    }

    /* Burger dropdown: ensure it starts below notch */
    #burgerDropdown {
      top: calc(56px + var(--safe-top)) !important;
      height: calc(100vh - 56px - var(--safe-top)) !important;
      padding-left: var(--safe-left) !important;
      padding-right: var(--safe-right) !important;
      padding-bottom: var(--safe-bottom) !important;
    }

    /* Modals: also respect safe area */
    .modal {
      top: calc(56px + var(--safe-top)) !important;
      height: calc(100vh - 56px - var(--safe-top)) !important;
    }
    .modal-content {
      max-height: calc(100vh - 56px - var(--safe-top)) !important;
    }
  }

  /* ===== PRINT FRIENDLY v1 =====
     Keeps print output readable if someone prints the schedule/links.
  */
  @media print {
    /* Remove backgrounds and fixed UI */
    body { background: #fff !important; color: #000 !important; }
    .navbar, #burgerMenuBtn, #burgerDropdown, .logo-overhang { display: none !important; }
    .modal { position: static !important; background: transparent !important; display: block !important; }
    .modal-content { box-shadow: none !important; border: 1px solid #ccc !important; max-height: none !important; overflow: visible !important; }

    /* Panels */
    .strip-container { box-shadow: none !important; border: 1px solid #ccc !important; }
    .left-panel, .right-panel { background: #fff !important; color: #000 !important; }

    /* Links show destination */
    a[href]:after { content: " (" attr(href) ")"; font-size: 10px; }
  }

  /* ===== BURGER BUTTON CSS v3 =====
     Robust styling for the burger button and bars (avoids block-fill issues).
  */
  #burgerMenuBtn.burger-btn {
    display: none; /* desktop default - you already toggle this elsewhere */
  }

  @media (max-width: 768px) {
    #burgerMenuBtn.burger-btn {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 3px !important;
      width: 32px !important;
      height: 32px !important;
      border-radius: 7px !important;
      padding: 0 !important;
      line-height: 1 !important;
      cursor: pointer !important;
    }

    /* Button background per theme */
    [data-theme="light"] #burgerMenuBtn.burger-btn {
      background: var(--brand) !important;
      border: 1px solid rgba(0,0,0,0.18) !important;
    }
    [data-theme="dark"] #burgerMenuBtn.burger-btn {
      background: rgba(255,255,255,0.10) !important;
      border: 1px solid rgba(255,255,255,0.22) !important;
    }

    /* The three bars */
    #burgerMenuBtn.burger-btn .burger-bar {
      display: block !important;
      width: 16px !important;
      height: 3px !important;
      border-radius: 2px !important;
      background: var(--ink-dark) !important;
      flex: 0 0 auto !important;
    }

    /* Bars colour per theme */
    [data-theme="dark"] #burgerMenuBtn.burger-btn .burger-bar {
      background: var(--ink-light) !important;
    }
  }

/* desktop / tablet */
    #wxWrap .wxHeading{
      font-size:1.15em;font-weight:600;margin:0 0 10px 0;color:#fed351;letter-spacing:.3px;
    }
    #wxWrap .wxHeading .sub{
      font-weight:400;font-style:italic;color:#bbb;
    }
    #wxWrap .mobBreak{display:none;}

    /* mobile <=500 px */
    @media(max-width:500px){
      #wxWrap .wxHeading{font-size:1.05em;}
      #wxWrap .wxHeading .sub{font-size:.9em;}
      #wxWrap .mobBreak{display:inline;}
    }

.weather-divider {
    border: 0;
    border-top: 1.5px solid #28304c;
    margin: 14px 0 0 0;
    opacity: 0.6;
  }

  #wxNow span {
    text-shadow: 0 2px 10px #000c, 0 1px 0 #fed351;
    font-size: 1.06em;
  }

  /* ========= WEATHER WIDGET SCROLL SMOOTHNESS ========= */

  /* Default: no horizontal scroll = no vertical stall */
  #hrWrap, #dyWrap {
    overflow-x: hidden;
    touch-action: pan-y;
    overscroll-behavior: auto;
  }

  /* Phones (<=500 px) get sideways strips */
  @media (max-width: 500px) {
    #hrWrap, #dyWrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
      overscroll-behavior-x: contain;
      overscroll-behavior-y: auto;
    }
  }

  /* Ensure the whole widget never traps vertical scroll */
  #wxWrap {
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #toggleBtn:hover {
    background: #ffe67c !important;
    color: #222 !important;
    transform: scale(1.08);
    box-shadow: 0 2px 8px #fed35180;
    transition: all 0.18s;
  }

  #hrWrap, #dyWrap {
    transition: opacity 0.35s, transform 0.3s;
    opacity: 1;
    scroll-snap-type: x mandatory;
  }

  #hrWrap[style*="display: none"],
  #dyWrap[style*="display: none"] {
    opacity: 0 !important;
    transform: translateY(-8px);
  }

  .forecast-icon {
    transition: transform 0.2s ease-in-out, filter 0.2s;
  }
  .forecast-icon:hover {
    filter: brightness(1.15) drop-shadow(0 2px 8px #fed35188);
    transform: scale(1.16) rotate(-8deg);
  }

  #dyWrap > div > div {
    width: 20% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  .wxRainNote {
    font-size: 90%;
    font-style: italic;
    display: inline-block;
  }
  @media (max-width: 500px) {
    .wxRainNote { text-align: right; width: 100%; }
    #wxNow {
      font-size: 0.9em !important;
      line-height: 1.25;
    }
  }

.strip-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    flex-wrap: nowrap;
  }

  .left-panel, .right-panel {
    flex: 1 1 0;
  }

  .side-banner-panel {
    width: 190px;
    min-width: 190px;
    flex-shrink: 0;
  }

  .side-banner-img {
    width: 190px;
    height: auto;
    max-height: 1000px;
    display: block;
  }
/* Section title */
.side-listen { margin-top: 14px; }
.side-listen-title {
  color:#fed351; font-weight:700; font-size:1.1em; margin-bottom:8px;
}

/* Groups */
.listen-group { margin-bottom: 12px; }
.listen-group-title {
  color:#bbb; font-weight:600; font-size:.95em; margin:4px 0 8px 0; text-align:center;
}

/* Icon tiles */
.tile-row { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

.tile{
  width:72px; text-align:center; text-decoration:none; color:#ddd;
  transition: transform .15s ease, color .2s ease;
}
.tile-icon{
  width:54px; height:54px; border-radius:50%;
  background:#fed351; color:#111;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  margin:0 auto 6px auto;
}
.tile-icon svg{ width:24px; height:24px; display:block; }
.tile-icon svg *{ fill: currentColor; }

.tile-caption{ font-size:.85em; line-height:1.1; display:block; }

.tile:hover .tile-icon,
.tile:focus .tile-icon{ background:#00818a; color:#fff; }
.tile:hover, .tile:focus{ transform: translateY(-2px); outline:none; }

/* Slightly tighter on narrow screens */
@media (max-width: 768px){
  .tile{ width:64px; }
  .tile-icon{ width:50px; height:50px; }
  .tile-icon svg{ width:22px; height:22px; }
}

/* Right column social strip */
.side-social {
  text-align: center;
  margin: 8px 0 10px 0;
}
.side-social-title {
  color: #fed351;
  font-weight: 700;
  font-size: 1.02em;
  margin-bottom: 8px;
}
.side-social-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.side-social-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fed351; color: #111; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .15s, background .2s, color .2s;
}
.side-social-btn:hover, .side-social-btn:focus {
  background: #00818a; color: #fff; transform: translateY(-2px); outline: none;
}
.side-social-btn svg { width: 18px; height: 18px; display: block; }
.side-social-btn svg * { fill: currentColor; }

/* Keep things neat on very narrow screens */
@media (max-width: 768px){
  .side-social { margin-top: 6px; }
  .side-social-btn { width: 32px; height: 32px; }
  .side-social-btn svg { width: 16px; height: 16px; }
}

/* Right column separators — similar feel to the left */
.side-banner-panel > :is(.side-social, .side-listen, #rnh-news-hub, #ayrshire-college)
  + :is(.side-social, .side-listen, #rnh-news-hub, #ayrshire-college){
  margin-top:12px;              /* space before the next section */
  padding-top:12px;             /* space after the rule */
  border-top:1px solid #2b2b2b; /* the line */
  box-shadow:0 -1px 0 rgba(255,255,255,.05) inset; /* subtle highlight */
}

  @media (max-width: 768px) {
    .strip-container {
      flex-direction: column;
      align-items: center;
    }

    .left-panel, .right-panel {
      width: 100%;
    }

    .side-banner-panel {
      width: 100%;
      text-align: center;
      order: 3;
    }

    .side-banner-img {
      width: 100%;
      max-width: 220px;
      height: auto;
    }
  }
/* Compact tiles */
.side-listen .tile-row { gap: 6px; }
.side-listen .tile { width: 42px; }
.side-listen .tile-icon { width: 32px; height: 32px; margin-bottom: 3px; }
.side-listen .tile-icon svg { width: 14px; height: 14px; }
.side-listen .tile-caption { font-size: 0.70em; line-height: 1.05; }

/* Match Follow icons to Compact tile size */
.side-social .side-social-btn { width:32px; height:32px; }
.side-social .side-social-btn svg { width:14px; height:14px; }

/* Optional: tighten spacing to match tiles */
.side-social .side-social-row { gap: 6px; }

.show-block {
        margin-bottom: 30px;
      }
      .show-title {
        font-size: 18px;
        margin-bottom: 8px;
        color: #fff;
        word-break: break-word;
        line-height: 1.2;
        font-weight: 500;
      }
      .mixcloud-player {
        width: 100%;
        min-width: 0;
        height: 120px;
        border: 0;
        display: block;
        border-radius: 8px;
        background: #222;
      }
      @media (max-width: 600px) {
        .show-title {
          font-size: 16px;
        }
        .mixcloud-player {
          height: 150px;
        }
      }
      @media (max-width: 400px) {
        .mixcloud-player {
          height: 165px;
        }
      }

.show-block {
        margin-bottom: 30px;
      }
      .show-title {
        font-size: 18px;
        margin-bottom: 8px;
        color: #fff;
        word-break: break-word;
        line-height: 1.2;
        font-weight: 500;
      }
      .mixcloud-player {
        width: 100%;
        min-width: 0;
        height: 120px;
        border: 0;
        display: block;
        border-radius: 8px;
        background: #222;
      }
      @media (max-width: 600px) {
        .show-title {
          font-size: 16px;
        }
        .mixcloud-player {
          height: 150px;
        }
      }
      @media (max-width: 400px) {
        .mixcloud-player {
          height: 165px;
        }
      }

/* === MOBILE WEATHER SUMMARY SIZE === */
@media (max-width: 500px) {
  #wxNow {
    font-size: 0.9em !important;   /* tweak value to taste */
    line-height: 1.25;
  }
}
@media (max-width: 768px) {
  .left-panel {
    width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
  }
  #player-box, #now-playing-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* === MODALS DROP BELOW LOGO/BURGER (Desktop + Mobile) === */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 5px;   /* Desktop: below logo/burger; adjust if your top area is taller/shorter */
  width: 100vw;
  height: calc(100vh - 5px); /* Prevents modal covering logo/burger */
  overflow: auto;
  background: rgba(0,0,0,0.78);
  transition: background 0.2s;
}
@media (max-width: 768px) {
  .modal {
    top: 56px !important;  /* Push modal below burger/nav */
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 56px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,0.78) !important;
    z-index: 2000;
  }
  .modal-content {
    margin: 0 !important;
    max-height: calc(100vh - 56px) !important;
    min-height: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding-top: 18px !important;
    padding-bottom: 12px !important;
    border-radius: 14px 14px 0 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    background: #fff !important;
    font-size: 15px !important;
    scrollbar-width: thin;
    scrollbar-color: #fed351 #ececec;
  }
  .modal-content::-webkit-scrollbar {
    width: 14px;
    background: #ececec;
    border-radius: 10px;
  }
  .modal-content::-webkit-scrollbar-thumb {
    background: #fed351;
    border-radius: 10px;
    border: 3px solid #ececec;
  }
  .modal-content::-webkit-scrollbar-thumb:active {
    background: #ffe67c;
  }
  .modal-content::-webkit-scrollbar-track {
    background: #ececec;
    border-radius: 10px;
  }
}
#burgerMenuBtn {
  z-index: 3000 !important; /* Higher than .modal (z-index: 2000) */
}
@media (max-width: 500px) {
  #hrWrap > div > div {
    min-width: 0 !important;
    padding: 0 1px !important;
    font-size: 11px !important;
  }
  #hrWrap img.forecast-icon {
    width: 15px !important;
    height: 15px !important;
  }
  #hrWrap {
    gap: 1px !important;
  }
}

/* Extra modal-specific responsive tweaks for Song Search */
      @media (max-width: 950px) {
        #searchModal .content-card, #searchModal .container { max-width: 98vw; }
        #searchModal .content-card, #searchModal .container { padding: 2vw 3vw; }
      }
      @media (max-width: 700px) {
        #searchModal .content-card { padding: 13px 3vw 10px 3vw; font-size: 16px; }
        #searchModal .container { padding: 8px 1vw 10px 1vw; }
        #searchModal table, #searchModal th, #searchModal td { font-size: 15px; }
        #searchModal .filters { gap: 0.5rem 0.7rem; }
        #searchModal select, #searchModal input[type="text"], #searchModal button { font-size: 14px; }
      }
      @media (max-width: 540px) {
        #searchModal .content-card { padding: 7px 1vw 4px 1vw; }
        #searchModal .container { padding: 5px 0vw 5px 0vw; }
        #searchModal .filters { flex-direction: column; gap: 0.6rem 0; }
      }

.travel-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .travel-list li + li {
    margin-top: 8px;
  }
  .travel-list a {
    display: inline-block;
    text-decoration: none;
  }
  .travel-list a:hover,
  .travel-list a:focus {
    text-decoration: underline;
  }

.presenters-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 24px;
        justify-content: center;
        padding: 10px 0;
      }
      .presenter-card {
        background: #111;
        border: 1px solid #333;
        border-radius: 12px;
        padding: 16px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        box-shadow: 0 0 10px #0006;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
        z-index: 1;
      }
      .presenter-card:hover {
        transform: scale(1.05);
        box-shadow: 0 0 16px #fed351aa;
      }
      .presenter-card img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 10px;
        border: 2px solid #fed351;
      }
      .presenter-card h3 {
        font-size: 1em;
        margin: 0 0 4px;
        color: #fed351;
        font-style: italic;
      }
      .presenter-card p {
        font-size: 0.85em;
        color: #ccc;
        margin: 0;
        font-style: normal;
      }
      @media (max-width: 768px) {
        .presenters-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 480px) {
        .presenters-grid {
          grid-template-columns: 1fr;
        }
      }
#presentersModal.modal.presenter-modal {
  z-index: 2050 !important;
}
.modal.presenter-detail {
  z-index: 10001 !important;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: none; /* Shown via JS */
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.85);
}
.modal.presenter-detail.show {
      position: relative;
  display: flex !important;
}

.modal.presenter-modal {
  display: none;
  position: fixed !important;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  z-index: 9999 !important;
}
.modal.presenter-modal .modal-content {
  z-index: 10000 !important;
  position: relative;
}
@media (max-width: 768px) {
  #requestsModal .embed-wrap {
    min-height: 80vh !important;
    height:    80vh !important;
    overflow:  hidden !important;
    /* (no need for -webkit-overflow-scrolling here, since the iframe scrolls itself) */
  }
}

/* Modal news cards */
  .rnh-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
  }
  .rnh-card{
    background:#0e0e0e;border:1px solid #333;border-radius:12px;overflow:hidden
  }
  .rnh-card a{color:inherit;text-decoration:none;display:block}
  .rnh-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
  .rnh-title{padding:10px 12px;font-weight:700;line-height:1.25;color:#fff}
  .rnh-meta{padding:0 12px 12px;color:#fed351;font-size:.9em}
  @media (max-width:500px){ .rnh-cards{grid-template-columns:1fr} }

/* Force black text on yellow Song Search modal buttons in all themes */
#songSearchModal button,
#songSearchModal .menu-link {
  background-color: #fed351 !important;
  color: #111 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Force black text for volume percentage in Now Playing */
#volume-display {
  color: #111 !important;
}

/* Minimal style so it sits like a compact utility button */
  .er-install-btn {
    display: none;
    margin-left: .5rem;
    padding: .35rem .6rem;
    border: 0;
    border-radius: .5rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    background: #ffd400; /* Essential yellow */
    color: #000;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
  }
  .er-install-btn:focus { outline: 2px solid #000; outline-offset: 2px; }

/* Ensure badge anchor exists */
  .show-entry { position: relative; }

  /* Visual highlight */
  .show-entry.live-now,
  .show-entry.current,
  .show-entry.current-show,
  .show-entry.show--current {
    background: color-mix(in srgb, #ffd000 16%, transparent);
    box-shadow: 0 0 0 2px #ffd00022 inset;
  }

  /* Left bar */
  .show-entry.live-now::before {
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 6px; background: #ffd000;
    border-radius: 6px;
  }

  /* “ON AIR NOW” pill */
  .show-entry.live-now::after {
    content: var(--now-flag, "ON AIR NOW");
    position: absolute; top: 8px; right: 8px;
    font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    padding: 4px 8px; border-radius: 999px;
    background: #d60000; color: #fff; letter-spacing: .02em;
    text-transform: uppercase;
  }

  @media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto; }
  }

/* === Desktop modal centring fix === */
@media (min-width: 769px) {
  .modal {
    display: flex;
    align-items: c

enter;       /* centre vertically */
    justify-content: center;   /* centre horizontally */
    padding: 20px;              /* keep away from edges */
  }
  .modal-content {
    margin: 0 !important;       /* remove old 8% top margin */
    max-height: 90vh;           /* fit within viewport */
    overflow-y: auto !important;/* scroll inside if needed */
  }
}

/* === Desktop modal centring fix (safe) ===
   Only center when the modal is actually visible. We do NOT force display:flex globally.
*/
@media (min-width: 769px) {
  /* Keep base hidden state intact */
  .modal { /* no display change here */ padding: 20px; }

  /* When a modal is explicitly shown via inline style or common 'open' classes, center it */
  .modal[style*="display: block"],
  .modal.show,
  .modal.active,
  .modal.is-open,
  .modal.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .modal-content {
    margin: 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

/* === Desktop modal centring fix (v3, force reset) === */
@media (min-width: 769px) {
  /* Force the base state back to hidden on desktop */
  .modal {
    display: none !important;            /* neutralize any earlier display:flex */
    align-items: center;                 /* harmless while hidden */
    justify-content: center;             /* harmless while hidden */
    padding: 20px;
  }

  /* Only centre when explicitly opened */
  .modal[style*="display: block"],
  .modal.show,
  .modal.active,
  .modal.is-open,
  .modal.open {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .modal-content {
    margin: 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
}

.show--current::after, .current-show::after, .show-entry.current::after, .show.current::after, .schedule-item.current::after, .live-now::after {
  content: var(--now-flag, "ON AIR NOW");
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e0322f;
  color: #fff;
  box-shadow: 0 2px 8px rgba(224,50,47,.35);
  z-index: 2;
  line-height: 1;
  white-space: nowrap;
}
/* Center #artwork on mobile (and generally) */
#artwork{
  display:block;               /* so margin auto works */
  margin:0 auto;               /* center in block layout */
  align-self:center;           /* center if parent is flex */
  justify-self:center;         /* center if parent is grid */
  max-width:300px;
  width:clamp(160px, 60vw, 300px);
}

/* ===========================
   PATCH v2 - Theme + layout fixes
   - Light mode consistency
   - Tighter top spacing
   - Burger visibility in both themes
   - Better modal behaviour + scroll shadows
   - 3-panel resilience
   =========================== */

/* Make the spacer follow the real nav height */
.header-spacer {
  height: var(--nav-h, 64px) !important;
}
@media (max-width: 750px) {
  .header-spacer { height: 8px !important; }
}

/* Navbar uses theme surfaces instead of hard-coded dark colours */
.navbar {
  background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 0 7px 0 !important;
}
.navbar a {
  background: var(--brand) !important;
  color: var(--ink-dark) !important;
}
.navbar a:hover,
.navbar a:focus {
  background: var(--accent) !important;
  color: var(--ink-light) !important;
}

/* Tidy the ON AIR NOW block - keep it tight, top-right */
.left-panel { padding-top: 14px !important; }
#onAirNow {
  margin: 0 0 8px 0 !important;
  max-width: none !important;
  padding-right: 0 !important;
  line-height: 1.15 !important;
}
#onAirNow .pulsing-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* Burger button - readable in both themes */
:root { --burger-bar: var(--ink-light); }
[data-theme="light"] { --burger-bar: var(--ink-dark); }

#burgerMenuBtn.burger-btn {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}
[data-theme="light"] #burgerMenuBtn.burger-btn {
  background: var(--brand) !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
}
#burgerMenuBtn.burger-btn .burger-bar,
#burgerMenuBtn .burger-bar {
  background: var(--burger-bar) !important;
}

/* Burger dropdown overlay - lighter in light mode */
#burgerDropdown {
  background: rgba(0,0,0,0.92) !important;
}
[data-theme="light"] #burgerDropdown {
  background: rgba(255,255,255,0.96) !important;
}

/* Modals: follow theme, go full-screen on mobile, and show scroll shadows */
.modal {
  background: rgba(0,0,0,0.78) !important;
}
[data-theme="light"] .modal {
  background: rgba(0,0,0,0.35) !important;
}

.modal-content {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35) !important;
  max-height: calc(100vh - 120px) !important;
  margin: 72px auto 40px auto !important;
  position: relative;
}

/* Force inline-coloured headings inside modals to obey theme */
.modal-content h1,
.modal-content h2,
.modal-content h3 {
  color: var(--accent) !important;
}

/* Scroll shadows driven by JS vars --shadow-top-opacity/--shadow-bottom-opacity */
.modal-content::before,
.modal-content::after{
  content: "";
  position: sticky;
  left: 0;
  right: 0;
  height: 18px;
  pointer-events: none;
  z-index: 2;
  display: block;
}
.modal-content::before{
  top: 0;
  opacity: var(--shadow-top-opacity, 0);
  background: linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0));
}
[data-theme="light"] .modal-content::before{
  background: linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0));
}
.modal-content::after{
  bottom: 0;
  opacity: var(--shadow-bottom-opacity, 0);
  background: linear-gradient(to top, rgba(0,0,0,0.28), rgba(0,0,0,0));
}
[data-theme="light"] .modal-content::after{
  background: linear-gradient(to top, rgba(0,0,0,0.12), rgba(0,0,0,0));
}

@media (max-width: 750px){
  .modal-content{
    width: calc(100vw - 20px) !important;
    height: calc(100vh - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    margin: 10px auto !important;
    border-radius: 14px !important;
    padding: 18px 16px 16px 16px !important;
  }
  .close { top: 10px !important; right: 12px !important; }
}

/* 3-panel resilience */
.strip-container.three-panel {
  gap: 12px !important;
}
.left-panel,
.right-panel,
.side-banner-panel {
  min-width: 0;
}
.side-banner-panel {
  flex: 0 0 180px;
}
@media (max-width: 768px){
  .side-banner-panel { flex: 0 0 auto; }
}