/**
 * Sitewide visual polish — top bar glass, footer link motion, contact hero.
 * Loaded after ultra-skin; keep overrides minimal and on-theme.
 */

body.oldies-premium .premium-topbar {
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  border: 1px solid rgba(16, 247, 255, 0.14) !important;
}

body.oldies-premium .premium-brand {
  transition: filter 0.2s ease, transform 0.2s ease;
}

body.oldies-premium .premium-brand:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

body.oldies-premium .site-footer.premium-footer .footer-col--links a {
  transition: color 0.18s ease, text-shadow 0.18s ease, transform 0.18s ease;
}

body.oldies-premium .site-footer.premium-footer .footer-col--links a:hover {
  color: #9dfaf0 !important;
  text-shadow: 0 0 14px rgba(16, 247, 255, 0.35);
  transform: translateX(3px);
}

body.oldies-premium .contact-banner {
  padding: clamp(22px, 4vw, 38px) clamp(16px, 3vw, 32px);
  border-radius: 18px;
  border: 1px solid rgba(16, 247, 255, 0.2);
  background: linear-gradient(155deg, rgba(10, 16, 22, 0.82), rgba(4, 10, 14, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 48px rgba(0, 0, 0, 0.38);
  margin-bottom: 28px;
}

body.oldies-premium .contact-banner-text {
  font-family: var(--u-font-display, "Outfit", system-ui, sans-serif) !important;
  font-size: clamp(1.85rem, 4vw, 2.85rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: #f4fffc !important;
  text-shadow:
    0 0 22px rgba(93, 255, 232, 0.4),
    0 0 48px rgba(255, 143, 74, 0.15) !important;
}

body.oldies-premium .contact-subtext {
  font-size: 1.06rem !important;
  color: rgba(225, 240, 236, 0.9) !important;
  margin-top: 10px;
  letter-spacing: 0.02em;
}

/* Join / team hero — match contact energy */
body.oldies-premium .join-banner {
  padding: clamp(22px, 4vw, 38px) clamp(16px, 3vw, 32px);
  border-radius: 18px;
  border: 1px solid rgba(255, 143, 74, 0.22);
  background: linear-gradient(155deg, rgba(18, 12, 10, 0.78), rgba(8, 8, 12, 0.65));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 48px rgba(0, 0, 0, 0.38);
  margin-bottom: 28px;
}

body.oldies-premium .join-banner-text {
  font-family: var(--u-font-display, "Outfit", system-ui, sans-serif) !important;
  font-size: clamp(1.85rem, 4vw, 2.85rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: #fff6f0 !important;
  text-shadow:
    0 0 22px rgba(255, 143, 74, 0.45),
    0 0 40px rgba(93, 255, 232, 0.12) !important;
}

/* Anti-spam honeypot — off-screen, not display:none (some bots skip display:none) */
.oldies-hp-wrap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.oldies-hp-field {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
}

.oldies-hp-label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.oldies-premium .premium-brand,
  body.oldies-premium .site-footer.premium-footer .footer-col--links a {
    transition: none;
  }
  body.oldies-premium .premium-brand:hover,
  body.oldies-premium .site-footer.premium-footer .footer-col--links a:hover {
    transform: none;
  }
}

/* =====================================================================
   mobile-nav-fix (20260510)
   - Closes the 901–1050px dead-zone where the desktop top nav was hidden
     but the sidebar hamburger toggle only appeared ≤900px.
   - Forces the footer grid to actually collapse on narrow viewports
     (oldies-ultra-skin.css sets a 5-col grid with !important and no media
     query, which was beating the responsive rules in premium-neon.css and
     the inline footer style).
   ===================================================================== */
@media (max-width: 1050px) {
  /* Show the sidebar hamburger toggle from 1050px down (was 900px down).
     The topbar uses z-index: 12000 (layout-hotfix.css), so the toggle MUST
     sit above that — and so must the drawer + overlay or they'd slide in
     under the topbar. */
  .sidebar-mobile-toggle,
  body.oldies-premium .sidebar-mobile-toggle,
  html .sidebar-mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    width: 54px !important;
    height: 54px !important;
    border: none !important;
    border-radius: 14px !important;
    z-index: 13000 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(10,10,10,.95), rgba(35,35,35,.92)) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 12px rgba(255,123,0,.35) !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .sidebar-mobile-overlay,
  body.oldies-premium .sidebar-mobile-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 12400 !important;
    background: rgba(0,0,0,.55) !important;
    backdrop-filter: blur(2px) !important;
  }
  .sidebar-mobile-overlay[hidden],
  body.oldies-premium .sidebar-mobile-overlay[hidden] { display: none  !important; }
  .sidebar-mobile-overlay:not([hidden]),
  body.oldies-premium .sidebar-mobile-overlay:not([hidden]) { display: block !important; }

  /* Force the sidebar into off-canvas drawer mode at this breakpoint.
     Drawer must be above the topbar (z-index 12000) so it can actually
     reveal when opened. The explicit display:block is required to beat
     `.sidebar { display: none !important }` from premium-neon.css's
     @media (max-width: 720px) block. */
  body.oldies-premium .sidebar,
  html body.oldies-premium .sidebar {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(84vw, 320px) !important;
    max-width: min(84vw, 320px) !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 20px 20px 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: translate3d(-110%, 0, 0) !important;
    transition: transform .25s ease !important;
    box-shadow: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 12700 !important;
  }
  body.oldies-premium.nav-open .sidebar,
  html.nav-open body.oldies-premium .sidebar,
  body.nav-open .sidebar,
  html.nav-open .sidebar {
    display: block !important;
    transform: translate3d(0, 0, 0) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 0 18px rgba(255,123,0,.18) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.oldies-premium .sidebar .sidebar-label {
    opacity: 1 !important;
    transform: none !important;
  }

  /* No left rail in mobile mode — flush content. */
  body.oldies-premium .main-wrap,
  body.oldies-premium .premium-page-wrap {
    margin-left: 0 !important;
    padding-top: 88px !important;
  }
  body.nav-open,
  html.nav-open { overflow: hidden; }

  /* Push the topbar's left edge past the 14+54=68px hamburger zone so it
     can never visually cover the toggle, regardless of z-index quirks
     (backdrop-filter + position:fixed on both can interact strangely in
     some browsers). 80px = hamburger right edge (68) + 12px gap. */
  body.oldies-premium .premium-topbar,
  body.oldies-ref-premium .premium-topbar {
    left: 80px !important;
    right: 12px !important;
    padding-left: 14px !important;
  }
}

/* Very narrow phones: drop the brand's tagline so the topbar doesn't run
   off-screen next to the hamburger zone. */
@media (max-width: 520px) {
  body.oldies-premium .premium-topbar .premium-brand small {
    display: none !important;
  }
  body.oldies-premium .premium-topbar .premium-brand strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }
  body.oldies-premium .premium-topbar .premium-brand img {
    width: 36px !important;
    height: 36px !important;
  }
  body.oldies-premium .premium-topbar {
    gap: 10px !important;
  }
}

/* Footer: actually collapse columns on narrow viewports.
   Specificity + !important is required to beat oldies-ultra-skin.css. */
@media (max-width: 1050px) {
  body.oldies-premium .site-footer.premium-footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }
}
@media (max-width: 768px) {
  body.oldies-premium .site-footer.premium-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  body.oldies-premium .site-footer.premium-footer {
    padding: 22px 18px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
  body.oldies-premium .site-footer.premium-footer .footer-bottom-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    text-align: left !important;
  }
}

/* On real phones the sticky player bar at the bottom of the footer can
   crowd content; allow it to wrap rather than overflow horizontally. */
@media (max-width: 640px) {
  body.oldies-premium .sticky-player-shell {
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    padding: 10px 12px !important;
  }
  body.oldies-premium .sticky-player-shell .mini-wave { display: none !important; }
}

/* =====================================================================
   Now-playing — DJ on-air column (20260510)
   Layout: [album art]  [track copy / wave / buttons]  [DJ photo + link]
   The DJ card is always rendered in the DOM so JS can reveal/swap it
   when a live DJ connects mid-stream; .np-air-autodj hides it.
   ===================================================================== */
body.oldies-premium .now-playing-premium.np-with-dj,
body.oldies-ref-premium .now-playing-premium.np-with-dj {
  display: grid !important;
  grid-template-columns: minmax(160px, 210px) 1fr minmax(160px, 210px) !important;
  align-items: center !important;
  gap: 26px !important;
  padding: 24px 26px !important;
}

body.oldies-premium .np-dj-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px;
  text-decoration: none !important;
  color: inherit;
  border-radius: 14px;
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}
body.oldies-premium .np-dj-card:hover {
  transform: translateY(-2px);
}
body.oldies-premium .np-dj-card__art {
  position: relative;
  display: block;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 0 2px rgba(93, 255, 232, 0.25), 0 0 32px rgba(93, 255, 232, 0.2);
  border: 1px solid rgba(16, 247, 255, 0.4);
}
body.oldies-premium .np-dj-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  transition: transform .35s ease;
}
body.oldies-premium .np-dj-card:hover .np-dj-card__art img {
  transform: scale(1.04);
}
body.oldies-premium .np-dj-card__halo {
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 30% 20%, rgba(255, 143, 74, 0.35), transparent 55%),
              radial-gradient(circle at 70% 80%, rgba(93, 255, 232, 0.32), transparent 55%);
  filter: blur(14px);
  opacity: 0.85;
}
/* Microphone-on-gradient placeholder shown when a DJ has no photo on disk.
   Hidden by default; revealed via .np-dj-card--no-photo. */
body.oldies-premium .np-dj-card__placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(16, 247, 255, 0.38), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255, 122, 0, 0.32), transparent 55%),
    linear-gradient(135deg, #131b2c 0%, #1f2a44 100%);
  color: #eaffff;
  font-size: clamp(48px, 9vw, 72px);
  text-shadow: 0 0 18px rgba(16, 247, 255, 0.55), 0 0 4px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  z-index: 1;
}
body.oldies-premium .np-dj-card--no-photo .np-dj-card__placeholder { display: flex; }
body.oldies-premium .np-dj-card--no-photo .np-dj-card__art img { visibility: hidden; }
body.oldies-premium .np-dj-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  width: 100%;
  max-width: 200px;
}
body.oldies-premium .np-dj-card__eyebrow {
  font: 700 11px/1 "Syne", "Outfit", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffc44f;
  text-shadow: 0 0 10px rgba(255, 196, 79, 0.45);
}
body.oldies-premium .np-air-live  .np-dj-card__eyebrow { color: #ff5959; text-shadow: 0 0 10px rgba(255, 89, 89, 0.55); }
body.oldies-premium .np-air-autodj .np-dj-card__eyebrow { color: #94a3b8; text-shadow: none; }
body.oldies-premium .np-dj-card__name {
  font: 800 1rem/1.15 "Syne", "Outfit", system-ui, sans-serif;
  color: #eaffff;
  letter-spacing: 0.02em;
  word-break: break-word;
}
body.oldies-premium .np-dj-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 12px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #10f7ff;
  margin-top: 4px;
  opacity: 0.92;
}
body.oldies-premium .np-dj-card:hover .np-dj-card__cta {
  color: #ff7a00;
  text-shadow: 0 0 10px rgba(255, 122, 0, 0.45);
}

/* AutoDJ: keep the same 3-column layout and show a muted placeholder card so
   the right side never looks "empty". The card links to /djs.php so listeners
   can still browse the roster while no human DJ is on air. */
body.oldies-premium .now-playing-premium.np-air-autodj .np-dj-card__placeholder {
  /* Cooler / quieter gradient than the live/prerecorded variant. */
  background:
    radial-gradient(circle at 30% 25%, rgba(148, 163, 184, 0.30), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(16, 247, 255, 0.18), transparent 55%),
    linear-gradient(135deg, #0f1626 0%, #182338 100%);
  color: #cfe9ff;
  text-shadow: 0 0 14px rgba(148, 163, 184, 0.45), 0 0 4px rgba(0, 0, 0, 0.5);
  opacity: 0.92;
}
body.oldies-premium .now-playing-premium.np-air-autodj .np-dj-card__halo {
  opacity: 0.45;
  filter: blur(18px);
}
body.oldies-premium .now-playing-premium.np-air-autodj .np-dj-card__art {
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.20), 0 0 22px rgba(148, 163, 184, 0.18);
  border-color: rgba(148, 163, 184, 0.35);
}

/* "PRERECORDED" pill: warm orange to differentiate from live (cyan/red) and autodj (gray). */
body.oldies-premium .live-pill--prerecorded {
  background: linear-gradient(180deg, #ff9f43, #d2691e) !important;
  border-color: rgba(255, 159, 67, 0.55) !important;
  color: #2a1505 !important;
  text-shadow: none !important;
  box-shadow: 0 0 14px rgba(255, 122, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Tablet: drop to 2 columns (album + copy on top row, DJ card spans below).
   Keep the DJ visible on tablets — it's still useful. */
@media (max-width: 1050px) {
  body.oldies-premium .now-playing-premium.np-with-dj,
  body.oldies-ref-premium .now-playing-premium.np-with-dj {
    grid-template-columns: minmax(140px, 180px) 1fr !important;
  }
  body.oldies-premium .np-dj-card {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 10px 12px;
    border-top: 1px solid rgba(16, 247, 255, 0.16);
    margin-top: 6px;
  }
  body.oldies-premium .np-dj-card__art {
    max-width: 88px;
    flex: 0 0 88px;
  }
  body.oldies-premium .np-dj-card__meta {
    align-items: flex-start;
    text-align: left;
    max-width: none;
  }
}

/* Phone: stack everything; DJ card becomes a horizontal pill row. */
@media (max-width: 640px) {
  body.oldies-premium .now-playing-premium.np-with-dj,
  body.oldies-ref-premium .now-playing-premium.np-with-dj {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body.oldies-premium .np-dj-card { grid-column: auto; }
  body.oldies-premium .np-dj-card__art { max-width: 64px; flex: 0 0 64px; }
  body.oldies-premium .np-dj-card__name { font-size: 0.95rem; }
}