/* ===== copied from essential.radio index.html: theme-mode ===== */
: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;
    --accent: #0b6b73;   /* deep teal for contrast */
    --danger: #b42318;
    --brand: #c89d00;    /* darkened yellow for accents only */
  }
    

  /* 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(--brand) !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(--brand) !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(--brand) !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(--brand) !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; }


/* ===== copied from essential.radio index.html: theme-contrast-patch ===== */
/* 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; }


/* ===== copied from essential.radio index.html: theme-contrast-hardpatch ===== */
/* 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;
  }


/* ===== copied from essential.radio index.html: light-mode-contrast-tune ===== */
/* 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(--brand) !important;
    fill: var(--brand) !important;
  }

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


/* ===== copied from essential.radio index.html: lightmode-hardpatch-yellow ===== */
/* 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;
  }


/* ===== copied from essential.radio index.html: socials-yellow-style ===== */
/* === 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;
  }


/* ===== copied from essential.radio index.html: np-social-rnh-specifics ===== */
/* === 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;
  }


/* ===== copied from essential.radio index.html: socials-follow-lastfm-yellow ===== */
/* 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;
  }


/* ===== copied from essential.radio index.html: socials-follow-lastfm-yellow-strong ===== */
/* 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(--brand) !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;
  }


/* ===== copied from essential.radio index.html: lastfm-keep-yellow ===== */
/* 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(--brand) !important;
  }
  /* Ensure the glyph path remains visible */
  a[href*="last.fm"] svg path { fill: #111 !important; stroke: none !important; }


/* ===== copied from essential.radio index.html: navbar-gap-fix ===== */
/* 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;
  }


/* ===== copied from essential.radio index.html: navbar-compact ===== */
/* 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; }
  }


/* ===== copied from essential.radio index.html: theme-toggle-nav-style ===== */
.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; }
  }


/* ===== copied from essential.radio index.html: wx-icon-light-fix ===== */
/* 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;
  }


/* ===== copied from essential.radio index.html: dark-theme-overrides ===== */
/* ===== 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;
}

/* 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;
}


/* ===== copied from essential.radio index.html: rnh-date-accent ===== */
/* === 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;
}


/* ===== copied from essential.radio index.html: rnh-date-fix ===== */
/* === 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;
}


/* ===== copied from essential.radio index.html: rnh-date-final ===== */
/* === 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; }


/* ===== copied from essential.radio index.html: rnh-date-structural ===== */
/* === 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;
}


/* ===== copied from essential.radio index.html: gradient-restore ===== */
/* Let the page gradient show through */
main, .main, .content, .wrapper, #page, #app {
  background: transparent !important;
}


/* ===== copied from essential.radio index.html: gradient-assert ===== */
/* Ensure the site gradient is visible */
html { background: transparent !important; }
body { background: linear-gradient(135deg, #00818a, #7e1974) !important; }


/* ===== copied from essential.radio index.html: clock-red-fix ===== */
/* === Enforce original red clock time === */
#clockTime { color: #e53935 !important; }


/* ===== copied from essential.radio index.html: light-mode-readability ===== */
/* ===== 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;
}


/* ===== copied from essential.radio index.html: light-mode-components ===== */
: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; }


/* ===== copied from essential.radio index.html: light-modal-fixes ===== */
/* ===== 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;
}


/* ===== copied from essential.radio index.html: light-mode-modal-force ===== */
/* === 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; }


/* ===== copied from essential.radio index.html: light-modal-hard-override ===== */
/* ---- 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;
}


/* ===== copied from essential.radio index.html: light-modal-overlay-fix ===== */
/* === 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;
}


/* ===== copied from essential.radio index.html: theme-overlay-bg ===== */
/* 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; }


/* ===== copied from essential.radio index.html: light-modal-theme-sync ===== */
/* 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;
}


/* ===== copied from essential.radio index.html: rnh-dates-dark-restore ===== */
: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;
}


/* ===== copied from essential.radio index.html: search-news-targeted-light-fixes ===== */
: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; }


/* ===== copied from essential.radio index.html: darklight-toggle-navbar ===== */
nav {
  position: relative;
}
nav #theme-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}


/* ===== copied from essential.radio index.html: navbar-scroll-fix ===== */
@media (max-width: 767px) {
  .navbar-fixed-top,
  .navbar-fixed-bottom,
  .navbar-static-top {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ===== copied from essential.radio index.html: ultimate-light-modal-overlay-override ===== */
/* 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;
}


/* ===== copied from essential.radio index.html: final-light-overlays-presenters-schedule ===== */
/* 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;
}


/* ===== copied from essential.radio index.html: final-presenters-schedule-news-light-fix ===== */
/* 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; }


/* ===== copied from essential.radio index.html: light-mode-schedule-news-inner-fixes ===== */
/* 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; }


/* ===== copied from essential.radio index.html: light-mode-search-news-fixes ===== */
/* === 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;
}


/* ===== copied from essential.radio index.html: targeted-fixes-rnh-card-and-search ===== */
/* 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;
}


/* ===== copied from essential.radio index.html: songsearch-light-override-final ===== */
/* 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);
}


/* ===== copied from essential.radio index.html: rnh-dark-dates-frontpage ===== */
/* 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;
}


/* ===== copied from essential.radio index.html: rnh-rightpanel-dates-structural ===== */
/* 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;
}


/* ===== copied from essential.radio index.html: dark-modal-headings-white ===== */
: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;
}


/* ===== copied from essential.radio index.html: about-email-dark-fix ===== */
/* 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;
}


/* ===== copied from essential.radio index.html: songsearch-artist-title-yellow ===== */
/* 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;
}


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


/* ===== copied from essential.radio index.html: about-email-yellow ===== */
/* 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;
}


/* ===== copied from essential.radio index.html: about-email-light-readable ===== */
/* 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; }


/* ===== copied from essential.radio index.html: show-desktop-theme-toggle ===== */
@media (min-width: 751px){
    #themeToggleBtn.theme-navbtn { display: inline-flex !important; }
  }


/* ===== copied from essential.radio index.html: navbar-offset-fix ===== */
body { padding-top: var(--nav-h, 60px); }


/* ===== copied from essential.radio index.html: mobile-theme-toggle-style ===== */
/* 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; }
}


/* ===== copied from essential.radio index.html: theme-toggle-compact ===== */
/* 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;
  }
}


/* ===== copied from essential.radio index.html: contact-modal-fullscreen-override ===== */
/* ===== 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;
}


/* ===== copied from essential.radio index.html: np-share-icon-css ===== */
#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; } }


/* ===== copied from essential.radio index.html: schedule-highlight-style ===== */
/* 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);
}


/* ===== copied from essential.radio index.html: modal-expand-fixes ===== */
/* === 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; }


/* ===== copied from essential.radio index.html: np-share-clickable-fix ===== */
#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;
}


/* ===== copied from essential.radio index.html: np-share-click-path ===== */
/* 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 */
}


/* ===== copied from essential.radio index.html: np-share-icon-contrast ===== */
/* 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 */


/* ===== copied from essential.radio index.html: np-share-neutral-buttons ===== */
/* 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;
}


/* ===== copied from essential.radio index.html: np-share-mobile-order-and-modal-stack ===== */
/* --- 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; }


/* ===== copied from essential.radio index.html: np-share-order-guard ===== */
#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}


/* ===== copied from essential.radio index.html: np-share-style-neutral ===== */
#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}


/* ===== copied from essential.radio index.html: np-share-modal-stack ===== */
#now-playing-card{position:relative}
#np-share-toolbar{position:relative;z-index:1200}
.modal{z-index:2000 !important}


/* ===== copied from essential.radio index.html: events-modal-darkmode-fix ===== */
/* === 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 */
}


/* ===== copied from essential.radio index.html: modal-dimension-overrides ===== */
/* === 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 */
    }
  }


/* ===== copied from essential.radio index.html: schedule-modal-wide ===== */
@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;
  }
}


/* ===== copied from essential.radio index.html: presenter-modal-width-fix ===== */
/* 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;
}


/* ===== copied from essential.radio index.html: modal-scroll-shadows ===== */
.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);
}


/* ===== copied from essential.radio index.html: presenter-modal-tidy ===== */
/* === 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;
    }
  }


/* ===== copied from essential.radio index.html: np-progress-css ===== */
/* === 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 } }


/* ===== copied from essential.radio index.html: presenters-modal-tune ===== */
@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 */
  }
}


/* ===== copied from essential.radio index.html: modal-offset-responsive ===== */
/* 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;
    }
  }
}


/* ===== copied from essential.radio index.html: listen-modal-offset-fix ===== */
/* 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 */
  }
}


/* ===== copied from essential.radio index.html: schedule-highlight-polish ===== */
/* 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; }
  }



/* ===== external build fixes (kept minimal) ===== */
/* Prevent sideways “bounce” (mobile + desktop) */
html, body { overflow-x: hidden !important; }

/* Keep layout widths sane */
*, *::before, *::after { box-sizing: border-box; }



/* =========================
   99% MATCH PATCHES (desktop alignment + remove teal in key places)
   ========================= */

/* 1) ON AIR NOW alignment (desktop): push block to the right */
@media (min-width: 900px) {
  .left-panel #onAirNow {
    width: 100%;
    text-align: right !important;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px;
    margin: 0 !important;
  }
  .left-panel { align-items: stretch !important; } /* if base CSS centers children */
}

/* Keep mobile behaviour untouched (mobile already OK) */

/* 2) Schedule show name: should be white (not teal) */
#scheduleModal .show-title,
#scheduleModal .show-title:link,
#scheduleModal .show-title:visited {
  color: #ffffff !important;
}
#scheduleModal .show-title:hover,
#scheduleModal .show-title:focus {
  color: #ffffff !important;
  text-decoration: underline;
}

/* 3) Travel & Transport: stop teal heading/links */
#travelModal h2 {
  color: #ffffff !important;
}
#travelModal a,
#travelModal a:link,
#travelModal a:visited {
  color: #ffffff !important;
}
#travelModal a:hover,
#travelModal a:focus {
  color: #ffffff !important;
  text-decoration: underline;
}
\n\n
/* =========================
   Fix: light mode mobile looks "brown"
   Cause: light theme overrides --brand to a darker mustard tone.
   Solution: keep brand yellow consistent in light mode on mobile.
   ========================= */
@media (max-width: 899px) {
  html[data-theme="light"],
  body[data-theme="light"],
  :root[data-theme="light"],
  [data-theme="light"] {
    --brand: #fed351 !important; /* Essential yellow */
  }
}

/* Optional: force key accents if any rules set a hard-coded mustard */
@media (max-width: 899px) {
  html[data-theme="light"] #clockDate,
  body[data-theme="light"] #clockDate,
  html[data-theme="light"] .recent-title,
  body[data-theme="light"] .recent-title {
    color: #fed351 !important;
  }
}



/* =========================
   TWEAK: Desktop light - Now Playing "Coming up"
   - Song title black/ink
   - "Coming up:" teal
   ========================= */
@media (min-width: 900px) {
  html[data-theme="light"] #next-up,
  body[data-theme="light"] #next-up {
    color: #111827 !important;
    opacity: 1 !important;
  }
  html[data-theme="light"] #next-up-text,
  body[data-theme="light"] #next-up-text {
    color: #111827 !important;
    opacity: 1 !important;
  }
  html[data-theme="light"] #next-up > span:first-child,
  body[data-theme="light"] #next-up > span:first-child {
    color: var(--accent) !important;
    opacity: 1 !important;
  }
}



/* =========================
   TWEAK: Desktop light - correct yellow shade for socials + Last.fm / Recently Played buttons
   Force brand yellow token to the proper Essential yellow in desktop light.
   ========================= */
@media (min-width: 900px) {
  html[data-theme="light"],
  body[data-theme="light"] {
    --brand: #fed351 !important;
  }

  /* Ensure key button styles pick up the corrected yellow */
  html[data-theme="light"] .side-social-btn,
  body[data-theme="light"] .side-social-btn,
  html[data-theme="light"] .np-share-btn,
  body[data-theme="light"] .np-share-btn,
  html[data-theme="light"] .lastfm-icons .social-btn,
  body[data-theme="light"] .lastfm-icons .social-btn {
    background: var(--brand) !important;
  }
}



/* =========================
   TWEAK: Desktop light
   - Weather heading teal, location label black
   - Listen group headings (On your smart speaker, etc) teal
   ========================= */
@media (min-width: 900px) {
  html[data-theme="light"] .wxHeading,
  body[data-theme="light"] .wxHeading {
    color: var(--accent) !important;
  }

  /* "Select a location" label - try common patterns */
  html[data-theme="light"] label[for="wx-location"],
  body[data-theme="light"] label[for="wx-location"],
  html[data-theme="light"] #wx-location-label,
  body[data-theme="light"] #wx-location-label,
  html[data-theme="light"] .wxControls label,
  body[data-theme="light"] .wxControls label {
    color: #111827 !important;
  }

  html[data-theme="light"] .listen-group-title,
  body[data-theme="light"] .listen-group-title {
    color: var(--accent) !important;
  }
}



/* =========================
   TWEAK: Desktop light - swap weather heading/label colours
   - "Ayrshire Weather" black
   - "Select a location" teal
   ========================= */
@media (min-width: 900px) {
  html[data-theme="light"] .wxHeading,
  body[data-theme="light"] .wxHeading {
    color: #111827 !important;
  }

  html[data-theme="light"] label[for="wx-location"],
  body[data-theme="light"] label[for="wx-location"],
  html[data-theme="light"] #wx-location-label,
  body[data-theme="light"] #wx-location-label,
  html[data-theme="light"] .wxControls label,
  body[data-theme="light"] .wxControls label {
    color: var(--accent) !important;
  }
}



/* =========================
   FORCE: Desktop light weather heading + subline
   Markup is: <h3 class="wxHeading">Ayrshire Weather ... <span class="sub">- select a location</span></h3>
   Parent container may set a light text colour, so override both explicitly.
   ========================= */
@media (min-width: 900px) {
  [data-theme="light"] h3.wxHeading,
  html[data-theme="light"] h3.wxHeading,
  body[data-theme="light"] h3.wxHeading {
    color: #111827 !important; /* black/ink */
  }

  [data-theme="light"] h3.wxHeading .sub,
  html[data-theme="light"] h3.wxHeading .sub,
  body[data-theme="light"] h3.wxHeading .sub {
    color: var(--accent) !important; /* teal */
    font-weight: 600;
  }
}



/* =========================
   FINAL LOCK: Desktop light - ensure only subline is teal
   Keep "Ayrshire Weather" black even if other rules target .wxHeading spans.
   ========================= */
@media (min-width: 900px) {
  [data-theme="light"] h3.wxHeading,
  html[data-theme="light"] h3.wxHeading,
  body[data-theme="light"] h3.wxHeading {
    color: #111827 !important;
  }

  /* Any spans inside heading default to black, except the .sub line */
  [data-theme="light"] h3.wxHeading span,
  html[data-theme="light"] h3.wxHeading span,
  body[data-theme="light"] h3.wxHeading span {
    color: #111827 !important;
  }

  [data-theme="light"] h3.wxHeading .sub,
  html[data-theme="light"] h3.wxHeading .sub,
  body[data-theme="light"] h3.wxHeading .sub {
    color: var(--accent) !important;
  }
}



/* =========================
   TWEAK: Desktop light - Travel modal header + links black
   ========================= */
@media (min-width: 900px) {
  html[data-theme="light"] #travelModal h1,
  html[data-theme="light"] #travelModal h2,
  html[data-theme="light"] #travelModal h3,
  html[data-theme="light"] #travelModal .modal-title,
  body[data-theme="light"] #travelModal h1,
  body[data-theme="light"] #travelModal h2,
  body[data-theme="light"] #travelModal h3,
  body[data-theme="light"] #travelModal .modal-title {
    color: #111827 !important;
  }

  html[data-theme="light"] #travelModal a,
  html[data-theme="light"] #travelModal a:link,
  html[data-theme="light"] #travelModal a:visited,
  body[data-theme="light"] #travelModal a,
  body[data-theme="light"] #travelModal a:link,
  body[data-theme="light"] #travelModal a:visited {
    color: #111827 !important;
  }

  html[data-theme="light"] #travelModal a:hover,
  html[data-theme="light"] #travelModal a:focus,
  body[data-theme="light"] #travelModal a:hover,
  body[data-theme="light"] #travelModal a:focus {
    color: #111827 !important;
    text-decoration: underline;
  }
}



/* =========================
   TWEAK: Song Search light mode - buttons teal with white text
   Targets searchModal buttons + refresh button id.
   ========================= */
html[data-theme="light"] #searchModal button,
body[data-theme="light"] #searchModal button,
html[data-theme="light"] #songsearchRefreshBtn,
body[data-theme="light"] #songsearchRefreshBtn {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}

html[data-theme="light"] #searchModal button:hover,
html[data-theme="light"] #searchModal button:focus,
body[data-theme="light"] #searchModal button:hover,
body[data-theme="light"] #searchModal button:focus {
  filter: brightness(0.97);
}



/* =========================
   FORCE: Song Search light mode buttons (wins against later rules)
   Theme attr might be on a wrapper, so match any ancestor with [data-theme="light"].
   ========================= */
[data-theme="light"] #searchModal button,
[data-theme="light"] #searchModal button#prevHour,
[data-theme="light"] #searchModal button#nextHour,
[data-theme="light"] #searchModal button#resetFilters,
[data-theme="light"] #searchModal button#songsearchRefreshBtn,
[data-theme="light"] #searchModal #songsearchRefreshBtn {
  background-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: rgba(0,0,0,0.10) !important;
}

[data-theme="light"] #searchModal button:hover,
[data-theme="light"] #searchModal button:focus {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}



/* =========================
   Fix: double close (×) buttons in Requests + Contact modals
   Keep the large header button, hide the small floating .close span.
   ========================= */
#requestsModal .close,
#contactModal .close {
  display: none !important;
}

/* Make the header close button consistently "big" and clickable */
#requestsModal button[aria-label="Close"],
#contactModal button[aria-label="Close"] {
  font-size: 28px !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
  cursor: pointer !important;
}

html[data-theme="light"] #requestsModal button[aria-label="Close"],
html[data-theme="light"] #contactModal button[aria-label="Close"],
body[data-theme="light"] #requestsModal button[aria-label="Close"],
body[data-theme="light"] #contactModal button[aria-label="Close"] {
  color: #111827 !important;
}



/* =========================
   Fix: Contact modal close button under iframe/content
   Make the header bar sit above the embedded iframe area.
   ========================= */
#contactModal .modal-content {
  position: fixed !important;
  inset: 0 !important;
}

/* The header is the first direct div after modal-content in the markup */
#contactModal .modal-content > div:first-of-type {
  position: relative !important;
  z-index: 10002 !important;
}

/* The iframe wrapper should sit below header */
#contactModal .modal-content > div:nth-of-type(2) {
  position: absolute !important;
  top: 48px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 10001 !important;
}

/* Ensure the close button is always on top and clickable */
#contactModal button[aria-label="Close"] {
  position: relative !important;
  z-index: 10003 !important;
  pointer-events: auto !important;
}

/* Make sure iframe can't steal clicks over header */
#contactModal iframe {
  position: relative !important;
  z-index: 10000 !important;
}



/* =========================
   Unify sizing: black icon buttons (socials + device tiles)
   Make the yellow circles the same diameter everywhere.
   Affects:
   - Follow socials row buttons (.side-social-btn)
   - Device tiles icon circles (.tile-icon)
   ========================= */

:root { --icon-circle: 56px; --icon-glyph: 70%; --tile-glyph: 82%; }

/* Social buttons */
.side-social-btn {
  width: var(--icon-circle) !important;
  height: var(--icon-circle) !important;
  min-width: var(--icon-circle) !important;
  min-height: var(--icon-circle) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}
.side-social-btn svg {
  width: var(--icon-glyph) !important;
  height: var(--icon-glyph) !important;
  display: block !important;
}

/* Device tile icon circles */
.tile-icon {
  width: var(--icon-circle) !important;
  height: var(--icon-circle) !important;
  min-width: var(--icon-circle) !important;
  min-height: var(--icon-circle) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.tile-icon svg {
  width: var(--tile-glyph) !important;
  height: var(--tile-glyph) !important;
  display: block !important;
}

/* If any theme-specific rules alter padding/border, neutralise */
[data-theme="light"] .side-social-btn,
[data-theme="dark"] .side-social-btn,
[data-theme="light"] .tile-icon,
[data-theme="dark"] .tile-icon {
  padding: 0 !important;
  border-width: 0 !important;
}



/* =========================
   Adjust: icon circles slightly smaller, identical in dark + light
   ========================= */
:root { --icon-circle: 52px; --icon-glyph: 70%; --tile-glyph: 82%; }

/* Force same sizing regardless of theme attribute placement */
html[data-theme="light"] .side-social-btn,
html[data-theme="dark"] .side-social-btn,
body[data-theme="light"] .side-social-btn,
body[data-theme="dark"] .side-social-btn,
html[data-theme="light"] .tile-icon,
html[data-theme="dark"] .tile-icon,
body[data-theme="light"] .tile-icon,
body[data-theme="dark"] .tile-icon {
  width: var(--icon-circle) !important;
  height: var(--icon-circle) !important;
  min-width: var(--icon-circle) !important;
  min-height: var(--icon-circle) !important;
}



/* =========================
   HARD LOCK: identical icon sizing across light/dark
   Also reduce device glyph size (was a bit big).
   ========================= */

/* Single source of truth */
:root {
  --icon-circle: 52px;     /* circle diameter */
  --social-glyph: 70%;     /* socials svg size */
  --device-glyph: 74%;     /* device svg size (smaller than before) */
}

/* Apply regardless of where data-theme lives */
:where(html, body, [data-theme]) .side-social-btn,
:where(html, body, [data-theme]) .side-social-row .side-social-btn,
:where(html, body, [data-theme]) .tile-icon {
  width: var(--icon-circle) !important;
  height: var(--icon-circle) !important;
  min-width: var(--icon-circle) !important;
  min-height: var(--icon-circle) !important;
  padding: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Social SVGs */
:where(html, body, [data-theme]) .side-social-btn svg,
:where(html, body, [data-theme]) .side-social-row .side-social-btn svg {
  width: var(--social-glyph) !important;
  height: var(--social-glyph) !important;
  display: block !important;
}

/* Device SVGs (Alexa/Apple/Android circles) */
:where(html, body, [data-theme]) .tile-icon svg {
  width: var(--device-glyph) !important;
  height: var(--device-glyph) !important;
  display: block !important;
}

/* Prevent any theme-specific rules from altering perceived size */
html[data-theme="light"] .side-social-btn,
html[data-theme="dark"] .side-social-btn,
body[data-theme="light"] .side-social-btn,
body[data-theme="dark"] .side-social-btn,
html[data-theme="light"] .tile-icon,
html[data-theme="dark"] .tile-icon,
body[data-theme="light"] .tile-icon,
body[data-theme="dark"] .tile-icon {
  width: var(--icon-circle) !important;
  height: var(--icon-circle) !important;
  min-width: var(--icon-circle) !important;
  min-height: var(--icon-circle) !important;
  padding: 0 !important;
  border: 0 !important;
}



/* =========================
   Social icons: lock identical rendered size across light/dark
   Devices are OK - leave them alone.
   Use fixed px for SVG so borders/shadows can't make them look different.
   ========================= */

:root { --social-circle: 52px; --social-svg: 36px; } /* 36px ~ 70% of 52 */

/* Buttons */
.side-social-btn,
.side-social-row .side-social-btn,
.follow-icons .social-btn,
.side-social .social-btn,
.lastfm-icons .social-btn {
  width: var(--social-circle) !important;
  height: var(--social-circle) !important;
  min-width: var(--social-circle) !important;
  min-height: var(--social-circle) !important;
  padding: 0 !important;
  border: 0 !important;
  border-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Neutralise any theme rule adding a border back */
html[data-theme="light"] .side-social-btn,
body[data-theme="light"] .side-social-btn,
html[data-theme="dark"] .side-social-btn,
body[data-theme="dark"] .side-social-btn {
  border: 0 !important;
  border-width: 0 !important;
}

/* SVG size fixed */
.side-social-btn svg,
.side-social-row .side-social-btn svg,
.follow-icons .social-btn svg,
.side-social .social-btn svg,
.lastfm-icons .social-btn svg {
  width: var(--social-svg) !important;
  height: var(--social-svg) !important;
  display: block !important;
}



/* =========================
   Dark mode: Travel & Transport links should be yellow (not white)
   (Keep desktop light travel links black as previously specified.)
   ========================= */
html[data-theme="dark"] #travelModal a,
html[data-theme="dark"] #travelModal a:link,
html[data-theme="dark"] #travelModal a:visited,
body[data-theme="dark"] #travelModal a,
body[data-theme="dark"] #travelModal a:link,
body[data-theme="dark"] #travelModal a:visited,
[data-theme="dark"] #travelModal a,
[data-theme="dark"] #travelModal a:link,
[data-theme="dark"] #travelModal a:visited {
  color: var(--brand) !important;
}

html[data-theme="dark"] #travelModal a:hover,
html[data-theme="dark"] #travelModal a:focus,
body[data-theme="dark"] #travelModal a:hover,
body[data-theme="dark"] #travelModal a:focus,
[data-theme="dark"] #travelModal a:hover,
[data-theme="dark"] #travelModal a:focus {
  color: var(--brand) !important;
  text-decoration: underline;
}



/* =========================
   POLISH: socials + device icons (subtle, consistent, premium)
   - consistent diameter across modes
   - crisp border + soft shadow
   - gentle hover/focus states
   ========================= */
:root {
  --icon-circle: 50px;
  --icon-border: rgba(0,0,0,0.14);
  --icon-shadow: 0 3px 10px rgba(0,0,0,0.14);
  --icon-shadow-hover: 0 6px 18px rgba(0,0,0,0.18);
}

/* Social buttons (follow row + any other social buttons) */
.side-social-btn,
.side-social-row .side-social-btn,
.follow-icons .social-btn,
.side-social .social-btn,
.lastfm-icons .social-btn {
  width: var(--icon-circle) !important;
  height: var(--icon-circle) !important;
  min-width: var(--icon-circle) !important;
  min-height: var(--icon-circle) !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--icon-border) !important;
  box-shadow: var(--icon-shadow) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  transform: translateZ(0);
}

.side-social-btn svg,
.side-social-row .side-social-btn svg,
.follow-icons .social-btn svg,
.side-social .social-btn svg,
.lastfm-icons .social-btn svg {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
}

/* Device circles (tile icons) */
.tile-icon {
  width: var(--icon-circle) !important;
  height: var(--icon-circle) !important;
  min-width: var(--icon-circle) !important;
  min-height: var(--icon-circle) !important;
  border-radius: 999px !important;
  border: 1px solid var(--icon-border) !important;
  box-shadow: var(--icon-shadow) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transform: translateZ(0);
}

.tile-icon svg {
  width: 36px !important;
  height: 36px !important;
  display: block !important;
}

/* Desktop hover/active micro-interactions */
@media (hover:hover) and (pointer:fine) {
  .side-social-btn:hover,
  .follow-icons .social-btn:hover,
  .side-social .social-btn:hover,
  .lastfm-icons .social-btn:hover,
  .tile:hover .tile-icon {
    box-shadow: var(--icon-shadow-hover) !important;
    filter: brightness(0.985);
    transform: translateY(-1px);
  }
  .side-social-btn:active,
  .follow-icons .social-btn:active,
  .side-social .social-btn:active,
  .lastfm-icons .social-btn:active,
  .tile:active .tile-icon {
    transform: translateY(0px);
    filter: brightness(0.96);
  }
}

/* Accessible focus ring */
.side-social-btn:focus-visible,
.follow-icons .social-btn:focus-visible,
.side-social .social-btn:focus-visible,
.lastfm-icons .social-btn:focus-visible,
.tile:focus-visible .tile-icon {
  outline: 3px solid rgba(0,129,138,0.35);
  outline-offset: 3px;
}



/* =========================
   VISUAL IMPROVEMENTS: socials + device tiles
   Goals:
   - remove the faint "square" backgrounds behind tiles
   - tighten alignment and spacing
   - make captions cleaner and consistent
   ========================= */

/* --- Follow socials row --- */
.side-social-row{
  display:flex !important;
  gap: 10px !important;
  justify-content:flex-start !important;
  align-items:center !important;
}

/* Slightly smaller, cleaner circle + consistent glyph centring */
:root{
  --icon-circle: 48px;
  --icon-border: rgba(0,0,0,0.18);
  --icon-shadow: 0 2px 8px rgba(0,0,0,0.14);
  --icon-shadow-hover: 0 5px 14px rgba(0,0,0,0.18);
}

/* --- Device tiles (Alexa / Apple / Android) --- */
.tile-row{
  display:flex !important;
  gap: 12px !important;
  justify-content:center !important;
  align-items:flex-start !important;
  flex-wrap: wrap;
}

/* Remove the faint square boxes / borders around tiles */
.tile{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* Make each tile a neat vertical stack */
.tile{
  display:flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 88px; /* stops captions jumping */
}

/* Ensure the circle is the only visual container */
.tile-icon{
  border: 1px solid var(--icon-border) !important;
  box-shadow: var(--icon-shadow) !important;
}

/* Captions: smaller, cleaner, consistent */
.tile-caption{
  font-size: 13px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.2px;
  opacity: 0.95;
  margin: 0 !important;
}

/* Dark mode captions white; light mode captions ink */
html[data-theme="dark"] .tile-caption,
body[data-theme="dark"] .tile-caption,
[data-theme="dark"] .tile-caption{
  color: #ffffff !important;
}

html[data-theme="light"] .tile-caption,
body[data-theme="light"] .tile-caption,
[data-theme="light"] .tile-caption{
  color: #111827 !important;
}

/* Hover: subtle lift on desktop only */
@media (hover:hover) and (pointer:fine){
  .tile:hover .tile-icon{
    box-shadow: var(--icon-shadow-hover) !important;
    transform: translateY(-1px);
  }
  .tile:active .tile-icon{
    transform: translateY(0px);
    filter: brightness(0.96);
  }
}



/* =========================
   MOBILE TUNE-UP for socials + "Additional Ways to Listen"
   Based on screenshot feedback: tighten spacing and improve hierarchy.
   ========================= */
@media (max-width: 899px) {

  /* Titles: slightly smaller + less vertical space */
  .side-social-title,
  .side-listen-title,
  .listen-group-title {
    margin: 14px 0 10px !important;
    letter-spacing: 0.2px;
  }

  /* Follow socials row: centre and tighten */
  .side-social-row{
    justify-content: center !important;
    gap: 12px !important;
    margin: 6px 0 12px !important;
  }

  /* Device sections: use a neat grid for pairs */
  .tile-row{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
    justify-items: center !important;
    align-items: start !important;
    margin: 10px auto 14px !important;
    max-width: 320px;
  }

  /* Alexa row: single item centred */
  .tile-row.one,
  .tile-row.alexa,
  .tile-row.single {
    grid-template-columns: 1fr !important;
    max-width: 220px;
  }

  /* Reduce icon circle slightly on mobile so it feels lighter */
  :root { --icon-circle: 46px; }
  .side-social-btn,
  .tile-icon{
    width: var(--icon-circle) !important;
    height: var(--icon-circle) !important;
    min-width: var(--icon-circle) !important;
    min-height: var(--icon-circle) !important;
  }
  .side-social-btn svg{ width: 32px !important; height: 32px !important; }
  .tile-icon svg{ width: 34px !important; height: 34px !important; }

  /* Captions: slightly smaller + tighter */
  .tile-caption{
    font-size: 12.5px !important;
    margin-top: 2px !important;
  }

  /* Section description text: keep readable but reduce height */
  .side-listen p,
  .side-listen .note,
  .side-listen small{
    margin: 8px 0 !important;
    line-height: 1.35 !important;
  }
}



/* =========================
   Centre socials row (all modes)
   ========================= */
.side-social-row{
  justify-content: center !important;
}



/* =========================
   Mobile light fixes:
   - remove "brown/mustard" by locking brand yellow
   - Coming up song title black/ink
   ========================= */
@media (max-width: 899px) {
  html[data-theme="light"],
  body[data-theme="light"],
  :root[data-theme="light"],
  [data-theme="light"] {
    --brand: #fed351 !important; /* Essential yellow */
  }

  /* Coming up song title */
  html[data-theme="light"] #next-up-text,
  body[data-theme="light"] #next-up-text,
  [data-theme="light"] #next-up-text {
    color: #111827 !important;
    opacity: 1 !important;
  }

  /* Ensure whole coming up block isn't inheriting faint grey */
  html[data-theme="light"] #next-up,
  html[data-theme="light"] #next-up *,
  body[data-theme="light"] #next-up,
  body[data-theme="light"] #next-up *,
  [data-theme="light"] #next-up,
  [data-theme="light"] #next-up * {
    opacity: 1 !important;
  }
}



/* =========================
   Mobile light: remove white "card" squares behind device tiles
   (Seen behind Alexa/Apple/Android icons)
   ========================= */
@media (max-width: 899px) {
  html[data-theme="light"] .tile,
  body[data-theme="light"] .tile,
  [data-theme="light"] .tile {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Sometimes the square is on the icon wrapper itself */
  html[data-theme="light"] .tile-icon,
  body[data-theme="light"] .tile-icon,
  [data-theme="light"] .tile-icon {
    background-color: var(--brand) !important; /* just the yellow circle */
    background-image: none !important;
  }
}



/* =========================
   Mobile light: Weather heading readability (from screenshot)
   - "Ayrshire Weather" black
   - "- select a location" teal
   ========================= */
@media (max-width: 899px) {
  [data-theme="light"] h3.wxHeading,
  html[data-theme="light"] h3.wxHeading,
  body[data-theme="light"] h3.wxHeading {
    color: #111827 !important;
  }
  [data-theme="light"] h3.wxHeading .sub,
  html[data-theme="light"] h3.wxHeading .sub,
  body[data-theme="light"] h3.wxHeading .sub {
    color: var(--accent) !important;
    opacity: 1 !important;
    font-weight: 600;
  }
}



/* =========================
   Mobile light fixes (strong):
   1) Weather heading "Ayrshire Weather" black, subline teal
   2) Now Playing progress bar colour (use brand yellow, not olive/brown)
   ========================= */
@media (max-width: 899px) {

  /* 1) Weather heading */
  [data-theme="light"] h3.wxHeading,
  html[data-theme="light"] h3.wxHeading,
  body[data-theme="light"] h3.wxHeading {
    color: #111827 !important;
    opacity: 1 !important;
  }

  /* Force any spans inside to default to black */
  [data-theme="light"] h3.wxHeading span,
  html[data-theme="light"] h3.wxHeading span,
  body[data-theme="light"] h3.wxHeading span {
    color: #111827 !important;
    opacity: 1 !important;
  }

  /* Subline teal */
  [data-theme="light"] h3.wxHeading .sub,
  html[data-theme="light"] h3.wxHeading .sub,
  body[data-theme="light"] h3.wxHeading .sub {
    color: var(--accent) !important;
    opacity: 1 !important;
    font-weight: 600;
  }

  /* 2) Now Playing progress bar */
  [data-theme="light"] #np-progress,
  html[data-theme="light"] #np-progress,
  body[data-theme="light"] #np-progress {
    background: #e5e7eb !important;
    border-radius: 999px !important;
    height: 8px !important;
    overflow: hidden !important;
  }

  [data-theme="light"] #np-progress .bar,
  html[data-theme="light"] #np-progress .bar,
  body[data-theme="light"] #np-progress .bar {
    background: var(--brand) !important; /* #fed351 from earlier lock */
    height: 100% !important;
    border-radius: 999px !important;
  }
}



/* =========================
   MOBILE LIGHT: force "Ayrshire Weather" to black (selector-agnostic)
   If markup or later rules differ, this targets the class regardless of tag.
   ========================= */
@media (max-width: 899px) {
  [data-theme="light"] .wxHeading,
  html[data-theme="light"] .wxHeading,
  body[data-theme="light"] .wxHeading {
    color: #111827 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    filter: none !important;
  }

  /* Any children default to black unless explicitly overridden */
  [data-theme="light"] .wxHeading *,
  html[data-theme="light"] .wxHeading *,
  body[data-theme="light"] .wxHeading * {
    color: #111827 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  /* Subline teal */
  [data-theme="light"] .wxHeading .sub,
  html[data-theme="light"] .wxHeading .sub,
  body[data-theme="light"] .wxHeading .sub {
    color: var(--accent) !important;
  }
}



/* =========================
   Mobile light: make date in clock bar more visible
   (Date currently too pale/yellow on white)
   ========================= */
@media (max-width: 899px) {
  [data-theme="light"] #clockDate,
  html[data-theme="light"] #clockDate,
  body[data-theme="light"] #clockDate {
    color: #111827 !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  /* If date is inside the pill as a span */
  [data-theme="light"] #clockDate span,
  html[data-theme="light"] #clockDate span,
  body[data-theme="light"] #clockDate span {
    color: #111827 !important;
    opacity: 1 !important;
  }

  /* If the pill uses a general class */
  [data-theme="light"] .clockDate,
  html[data-theme="light"] .clockDate,
  body[data-theme="light"] .clockDate {
    color: #111827 !important;
    opacity: 1 !important;
  }
}



/* =========================
   Desktop: device icons in one line (no wrapping) like mobile
   ========================= */
@media (min-width: 900px) {
  .side-listen .tile-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  .side-listen .tile {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
}



/* =========================
   Contact modal: close icon too opaque/heavy
   Make it lighter but still clear + accessible.
   ========================= */
#contactModal button[aria-label="Close"] {
  opacity: 0.78 !important;
  font-weight: 600 !important;
}

#contactModal button[aria-label="Close"]:hover,
#contactModal button[aria-label="Close"]:focus {
  opacity: 1 !important;
}

html[data-theme="light"] #contactModal button[aria-label="Close"],
body[data-theme="light"] #contactModal button[aria-label="Close"],
[data-theme="light"] #contactModal button[aria-label="Close"] {
  color: #111827 !important;
}

html[data-theme="dark"] #contactModal button[aria-label="Close"],
body[data-theme="dark"] #contactModal button[aria-label="Close"],
[data-theme="dark"] #contactModal button[aria-label="Close"] {
  color: rgba(255,255,255,0.92) !important;
}



/* =========================
   Contact modal: close icon not clear enough
   Increase contrast + give it a subtle hit area so it stands out over content.
   ========================= */
#contactModal button[aria-label="Close"] {
  opacity: 1 !important;
  font-weight: 700 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
}

#contactModal button[aria-label="Close"]:hover,
#contactModal button[aria-label="Close"]:focus {
  background: rgba(0,0,0,0.10) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important;
}

html[data-theme="light"] #contactModal button[aria-label="Close"],
body[data-theme="light"] #contactModal button[aria-label="Close"],
[data-theme="light"] #contactModal button[aria-label="Close"] {
  color: #111827 !important;
}

html[data-theme="dark"] #contactModal button[aria-label="Close"],
body[data-theme="dark"] #contactModal button[aria-label="Close"],
[data-theme="dark"] #contactModal button[aria-label="Close"] {
  color: #ffffff !important;
  background: rgba(255,255,255,0.10) !important;
}



/* =========================
   Schedule modal tweaks:
   - Reduce gap between day selector and schedule panel
   - Make "Choose a day" visible on dark desktop
   ========================= */
#scheduleModal h2 + div {
  margin-bottom: 8px !important; /* was 18px inline */
}

#scheduleModal #modalScheduleContainer {
  margin-top: -6px !important;
}

/* Dark mode: label readable (inline was #222) */
html[data-theme="dark"] #scheduleModal label[for="modalDaySelect"],
body[data-theme="dark"] #scheduleModal label[for="modalDaySelect"],
[data-theme="dark"] #scheduleModal label[for="modalDaySelect"] {
  color: #ffffff !important;
}

/* Dark mode: select readable */
html[data-theme="dark"] #scheduleModal #modalDaySelect,
body[data-theme="dark"] #scheduleModal #modalDaySelect,
[data-theme="dark"] #scheduleModal #modalDaySelect {
  color: #111827 !important;
  background: #ffffff !important;
}



/* =========================
   Global: nudge modal close buttons DOWN so none sit off-screen
   Applies to any header close button using aria-label="Close".
   ========================= */
.modal button[aria-label="Close"]{
  position: relative !important;
  top: 6px !important; /* global nudge */
}

/* Some modals need a touch more */
#scheduleModal button[aria-label="Close"],
#newsModal button[aria-label="Close"],
#localModal button[aria-label="Close"],
#aboutModal button[aria-label="Close"]{
  top: 8px !important;
}

/* Keep Requests/Contact/Playlist consistent with the above */
#requestsModal button[aria-label="Close"],
#contactModal button[aria-label="Close"],
#playlistModal button[aria-label="Close"]{
  top: 8px !important;
}



/* =========================
   REAL FIX: Most modals use <span class="close">×</span>, not a button.
   Style + nudge those so they don't sit off-screen.
   ========================= */

/* Universal close span styling */
.modal .close {
  position: absolute !important;
  top: 12px !important;   /* nudge down */
  right: 12px !important;
  z-index: 10050 !important;
  width: 44px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0b0b0b !important;   /* black */
  color: var(--accent) !important;  /* teal */
  border-radius: 10px !important;
  font-size: 26px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* If any modal-content is fixed, ensure close is positioned relative to it */
.modal .modal-content {
  position: relative;
}

/* Small screens: a touch more padding from the top edge */
@media (max-width: 899px) {
  .modal .close {
    top: 14px !important;
    right: 10px !important;
  }
}


/* =========================
   ADD-ON: Modal position fix (prevents modal headers/close sitting under top menu)
   Applies to Playlist, Local, News, Requests, Schedule.
   ========================= */
:root { --modal-top-inset: 68px; }

#playlistModal .modal-content,
#localModal .modal-content,
#newsModal .modal-content,
#requestsModal .modal-content,
#scheduleModal .modal-content {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--modal-top-inset) + env(safe-area-inset-top)) !important;
  bottom: 12px !important;
  height: auto !important;
  max-height: calc(100vh - (var(--modal-top-inset) + env(safe-area-inset-top)) - 12px) !important;
  margin: 0 auto !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 900px) {
  :root { --modal-top-inset: 58px; }
  #playlistModal .modal-content,
  #localModal .modal-content,
  #newsModal .modal-content,
  #requestsModal .modal-content,
  #scheduleModal .modal-content {
    bottom: 18px !important;
    max-height: calc(100vh - (var(--modal-top-inset) + env(safe-area-inset-top)) - 18px) !important;
  }
}

/* =========================
   ADD-ON: Close controls pinned into the viewport (prevents off-screen close buttons)
   Covers span.close and close buttons.
   ========================= */
.modal .close,
.modal .modal-close,
.modal .close-btn,
.modal .btn-close,
.modal button.close,
.modal button.close-btn,
.modal button[aria-label="Close"]{
  position: fixed !important;
  top: calc(14px + env(safe-area-inset-top)) !important;
  right: calc(14px + env(safe-area-inset-right)) !important;
  z-index: 2147483647 !important;
  width: 44px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0b0b0b !important;
  color: var(--accent) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 26px !important;
  line-height: 1 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28) !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

/* =========================
   ADD-ON: Mobile device rows - centre Alexa and add breathing room
   ========================= */
@media (max-width: 899px) {
  .side-listen .tile-row{ gap: 14px 20px !important; }
  .side-listen .tile-row:first-of-type{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================
   ADD-ON: Modal position fix (desktop only)
   Prevents modal headers/close sitting under top menu on desktop.
   Applies to Playlist, Local, News, Requests, Schedule.
   ========================= */
@media (min-width: 900px) {
  :root { --modal-top-inset: 58px; }

  #playlistModal .modal-content,
  #localModal .modal-content,
  #newsModal .modal-content,
  #requestsModal .modal-content,
  #scheduleModal .modal-content {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--modal-top-inset) + env(safe-area-inset-top)) !important;
    bottom: 18px !important;
    height: auto !important;
    max-height: calc(100vh - (var(--modal-top-inset) + env(safe-area-inset-top)) - 18px) !important;
    margin: 0 auto !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}



/* =========================
   No double close icons: Contact + Requests
   Keep the header close button, hide any .close span.
   ========================= */
#contactModal .close,
#requestsModal .close {
  display: none !important;
}


/* =========================
   Desktop: nudge About Us modal down (prevents sitting under top menu)
   ========================= */
@media (min-width: 900px) {
  /* Use existing modal-top-inset token if present, otherwise fall back */
  #aboutModal .modal-content {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--modal-top-inset, 58px) + env(safe-area-inset-top)) !important;
    bottom: 18px !important;
    height: auto !important;
    max-height: calc(100vh - (var(--modal-top-inset, 58px) + env(safe-area-inset-top)) - 18px) !important;
    margin: 0 auto !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* =========================
   Playlist: ensure close icon is teal (X), regardless of mode
   ========================= */
#playlistModal .close,
#playlistModal button[aria-label="Close"] {
  color: var(--accent) !important;
}

/* ===== Sailaway Travel Club join button states ===== */
/* Sitewide rule `.modal-content a { color: var(--accent) !important; }` can override link colours,
   so we use `!important` here to ensure the button text stays visible. */
.sailaway-join-btn,
.sailaway-join-btn:visited {
  color: #fed351 !important; /* yellow on first glance */
}
.sailaway-join-btn:hover,
.sailaway-join-btn:focus {
  color: #fed351 !important;
}
/* blue while pressing/clicking (iOS-safe via JS class too) */
.sailaway-join-btn:active,
.sailaway-join-btn.is-pressed {
  color: #00818a !important;
}

/* --- iOS/Safari: prevent occasional logo disappearing after closing modals --- */
.logo-overhang{
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

/* Override base rule that used display:none (can get 'stuck' on iOS) */
.logo-hide{
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* --- Mobile tweak: center Alexa tile + bring Apple/Android tiles closer --- */
@media (max-width: 520px){
  .side-listen .tile-row{
    justify-content: center !important;
    gap: 8px !important;
  }
  /* Slightly smaller minimum width stops wide spacing on narrow screens */
  .side-listen .tile{
    min-width: 80px !important;
  }
}

/* =========================================================
   Mobile listen tiles - force centre Alexa + tighten Apple/Android
   (High-specificity override to beat grid rules)
   ========================================================= */
@media (max-width: 600px){
  /* 1) Smart speaker group (Alexa) - single tile centred */
  .side-listen .listen-group:nth-of-type(1) .tile-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 10px !important;
  }

  /* 2) Apps group (Apple + Android) - keep them close together */
  .side-listen .listen-group:nth-of-type(2) .tile-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 8px !important; /* tighten spacing */
  }
  .side-listen .listen-group:nth-of-type(2) .tile{
    flex: 0 0 auto !important;
    width: 72px !important;
  }
}


/* --- ON AIR NOW label: match index.html sizing --- */
#onAirNow .pulsing-label{
  font-size: inherit !important;
  letter-spacing: normal !important;
  margin-bottom: 0 !important;
}


/* =========================================================
   Desktop logo overhang - SAFE NUDGE ONLY (no absolute positioning)
   Moves logo higher + left without changing layout model.
   ========================================================= */
@media (min-width: 751px){
  .player-wrapper .logo-overhang{
    /* Use clamp to avoid pushing so far it creates horizontal scrollbars */
    --logoShiftX: clamp(-68px, -3.8vw, -26px);
    --logoShiftY: clamp(-76px, -4.2vw, -30px);
    -webkit-transform: translate3d(var(--logoShiftX), var(--logoShiftY), 0) !important;
    transform: translate3d(var(--logoShiftX), var(--logoShiftY), 0) !important;
    z-index: 50 !important;
  }
}
/* =========================
   FORCE TEAL CLOSE: Requests + Contact (desktop, dark mode)
   Overrides earlier rules that force white.
   ========================= */
@media (min-width: 751px) {
  html[data-theme="dark"] #requestsModal button[aria-label="Close"],
  body[data-theme="dark"] #requestsModal button[aria-label="Close"],
  [data-theme="dark"] #requestsModal button[aria-label="Close"],
  html[data-theme="dark"] #contactModal button[aria-label="Close"],
  body[data-theme="dark"] #contactModal button[aria-label="Close"],
  [data-theme="dark"] #contactModal button[aria-label="Close"]{
    color: var(--accent) !important;
    fill: var(--accent) !important;
  }
}