/* Shared Northern Dial landscape banner */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Inner-page canvas: keep the branded warm-to-red gradient while letting content breathe. */
body:not(#top) {
  background: linear-gradient(to bottom, #f3eee3 0%, #f3eee3 10%, #eccfc8 34%, #df978b 68%, #cc3333 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  min-height: 100vh !important;
}

body:not(#top) .page-header,
body:not(#top) main {
  background: transparent !important;
}

/* Artists also uses id="top" like the homepage. Keep the library on a clean solid canvas. */
body#top:has(.artist-card) {
  background: #f3eee3 !important;
  background-image: none !important;
  min-height: 100vh !important;
}

body#top:has(.artist-card) .page-header,
body#top:has(.artist-card) main {
  background: transparent !important;
}

/* Static page headers used across About, library, discovery and editorial pages. */
body:not(#top) .header .header-inner {
  align-items: center !important;
  background: #f3eee3 url('/assets/northern-dial-home-hero.jpg?v=20260914c') center center / cover no-repeat !important;
  display: flex !important;
  height: clamp(250px, 30vw, 390px) !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
}

body:not(#top) .header .header-inner .brand {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
}

body:not(#top) .header .header-inner .brand img {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Shared JS-generated header shell. buildShell() only runs on non-homepage URLs. */
.nd-site-header {
  align-items: center !important;
  background: #f3eee3 url('/assets/northern-dial-home-hero.jpg?v=20260914c') center center / cover no-repeat !important;
  border-bottom: 0 !important;
  display: flex !important;
  height: clamp(250px, 30vw, 390px) !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
}

.nd-site-header .nd-site-logo {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
}

.nd-site-header .nd-site-logo img {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Legacy standalone headers on ordinary inner pages. */
body:not(#top) > header:not(.page-header):not(.nd-site-header):not(.header),
body#top > header:not(.page-header):not(.nd-site-header):not(.header) {
  align-items: center !important;
  background: #f3eee3 url('/assets/northern-dial-home-hero.jpg?v=20260914c') center center / cover no-repeat !important;
  border-bottom: 0 !important;
  display: flex !important;
  height: clamp(250px, 30vw, 390px) !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
}

body:not(#top) > header:not(.page-header):not(.nd-site-header):not(.header) > a,
body:not(#top) > header:not(.page-header):not(.nd-site-header):not(.header) .site-logo,
body:not(#top) > header:not(.page-header):not(.nd-site-header):not(.header) .brand,
body#top > header:not(.page-header):not(.nd-site-header):not(.header) > a,
body#top > header:not(.page-header):not(.nd-site-header):not(.header) .site-logo,
body#top > header:not(.page-header):not(.nd-site-header):not(.header) .brand {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
}

body:not(#top) > header:not(.page-header):not(.nd-site-header):not(.header) img,
body#top > header:not(.page-header):not(.nd-site-header):not(.header) img {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Artists jump controls. */
body#top .letter-nav {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body#top .letter-nav select,
body#top main select {
  background: rgba(243, 238, 227, .88) !important;
  border-color: #CC3333 !important;
  box-shadow: none !important;
}

/* New Artists is a promoted discovery destination, not a permanent primary-nav item. */
.nd-primary-links > a[href="/new-canadian-artists.html"],
.nd-home-nav-links > a[href="./new-canadian-artists.html"],
.nd-home-nav-links > a[href="/new-canadian-artists.html"] {
  display: none !important;
}

/* Use the exact voice command that reliably opens the station on Alexa. */
body#top .custom-player::after {
  content: 'NOW ON ALEXA  •  “Alexa, play Northern Dial Radio.”' !important;
}

@media (max-width: 768px) {
  body#top .custom-player::after {
    content: 'NOW ON ALEXA\A“Alexa, play Northern Dial Radio.”' !important;
    white-space: pre-line !important;
  }
}

/* Homepage program art: use the cleaned repo-hosted versions. */
body#top #shows .show-card:nth-child(-n+3) .show-image {
  display: none !important;
}

body#top #shows .show-card:nth-child(-n+3)::before {
  content: '';
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body#top #shows .show-card:nth-child(1)::before {
  background-image: url('https://raw.githubusercontent.com/rileywallaceriley/Northern-Dial/03954c40f81984ac0bb8f2e343347627eda8f153/images/FE0A88F5-0586-43D7-99BC-93C7C0660DD5.png');
}

body#top #shows .show-card:nth-child(2)::before {
  background-image: url('https://raw.githubusercontent.com/rileywallaceriley/Northern-Dial/03954c40f81984ac0bb8f2e343347627eda8f153/images/B0F53A6B-3622-449D-BFE4-937595E69805.png');
}

body#top #shows .show-card:nth-child(3)::before {
  background-image: url('https://raw.githubusercontent.com/rileywallaceriley/Northern-Dial/03954c40f81984ac0bb8f2e343347627eda8f153/images/F7169CAB-3BEE-4F2D-B5A1-0E988B33B065.png');
}

/* Remove the old white-logo header treatment while keeping the nav intact. */
body:not(#top) .header {
  background: #f3eee3 !important;
  border-bottom: 0 !important;
}

@media (max-width: 768px) {
  body:not(#top) .header .header-inner,
  .nd-site-header,
  body:not(#top) > header:not(.page-header):not(.nd-site-header):not(.header),
  body#top > header:not(.page-header):not(.nd-site-header):not(.header) {
    background-position: 72% center !important;
    height: 250px !important;
  }
}

/* Discovery lower information block: use a high-contrast light panel over the page gradient. */
body:has(.about-tool) .about-tool {
  background: #ffffff !important;
  border: 3px solid #111214 !important;
  border-radius: 12px !important;
  gap: 24px !important;
  margin-top: 36px !important;
  padding: 24px !important;
}

body:has(.about-tool) .about-tool h2 {
  color: #111214 !important;
}

body:has(.about-tool) .about-tool p {
  color: #4f4d49 !important;
  margin-bottom: 0 !important;
}

body:has(.about-tool) .library-cta {
  color: #8B2323 !important;
  font-weight: 700 !important;
}

body:has(.about-tool) main {
  padding-bottom: 28px !important;
}

@media (max-width: 760px) {
  body:has(.about-tool) .about-tool {
    gap: 22px !important;
    margin-top: 30px !important;
    padding: 20px 18px !important;
  }
}