/*
Theme Name: The Mammoth Radio
Theme URI: https://themammoth.live
Author: The Mammoth / Ticaboo Media
Description: Custom theme for The Mammoth Radio station website.
Version: 1.1
*/

/* ── RESET & BASE ── */
:root {
  --blue:       #2AABE2;
  --blue-hover: #1a90c8;
  --blue-pale:  #f0f8fd;
  --dark:       #1a1a1a;
  --mid:        #444;
  --muted:      #767676;
  --border:     #e0e0e0;
  --bg:         #ffffff;
  --bg-light:   #f5f5f5;
  --sidebar-w:  300px;
}
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--dark); font-family: 'Source Sans 3', sans-serif; font-size: 16px; line-height: 1.6; overflow-x: clip; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── MASTHEAD ── */
.masthead {
  position: relative;
  overflow: visible;
  border-bottom: none;
  padding: 0.5rem 1.5rem;
  padding-right: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 90px;
  background: url("images/masthead-bg.png") center center / cover no-repeat;
}

/* Mammoth icon — sits in header, feet landing on player bar */
.masthead-mammoth {
  position: absolute;
  right: 1.5rem;
  bottom: -10px;
  height: 48px;
  width: auto;
  z-index: 300;
  pointer-events: none;
}
.masthead-mammoth img {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.masthead-logo {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.masthead-logo img { height: 80px; width: auto; display: block; filter: none; }
.masthead-logo .custom-logo-link { display: block; line-height: 0; }
.masthead-logo .custom-logo-link img,
.masthead-logo .custom-logo { height: 80px !important; width: auto !important; max-width: none; display: block; filter: none !important; }

.masthead-widget { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.75rem; flex: 1; justify-content: flex-end; padding: 0 1rem; }

@media (max-width: 780px) {
  .masthead { padding: 0.75rem 1rem; padding-right: 70px; min-height: 80px; }
  .masthead-logo .custom-logo-link img,
  .masthead-logo .custom-logo { height: 52px !important; }
  .masthead-mammoth { height: 36px; bottom: -8px; right: 0.75rem; }
}
@media (max-width: 480px) {
  .masthead { padding-right: 1rem; }
  .masthead-mammoth { display: none; }
  .player-meta { display: none; }
  .player-show-name { display: none !important; }
  .player-listeners { display: none; }
  input.vol-range { display: none; }
}

.btn-primary { background: var(--blue); color: white; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; padding: 0.45rem 1.1rem; border-radius: 3px; border: none; cursor: pointer; transition: background 0.2s; text-decoration: none; display: inline-block; }
.btn-primary:hover { background: var(--blue-hover); }

/* ── PLAYER BAR ── */
.player-bar { position: sticky; top: 0; z-index: 200; background: #222; color: white; display: flex; align-items: stretch; height: 48px; overflow: hidden; }
.player-btn-wrap { background: var(--blue); width: 56px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: background 0.2s; border: none; padding: 0; margin: 0; }
.player-btn-wrap:hover { background: var(--blue-hover); }
.player-btn-wrap svg { fill: white; width: 18px; height: 18px; }
.player-meta { padding: 0 1.25rem; display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.player-meta .player-show-name { border-left: 1px solid rgba(255,255,255,0.15); padding-left: 0.75rem; margin-left: 0.25rem; }
.player-live-dot { width: 7px; height: 7px; background: var(--blue); border-radius: 50%; flex-shrink: 0; animation: pblink 1.4s ease-in-out infinite; }
@keyframes pblink { 0%,100%{opacity:1}50%{opacity:.25} }
.player-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); flex-shrink: 0; }
.player-now { font-size: 0.88rem; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.player-now-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: block; }
.player-now strong { font-weight: 600; }
.player-now span { color: rgba(255,255,255,0.55); }
.player-vol { display: flex; align-items: center; gap: 0.5rem; padding-right: 1.25rem; flex-shrink: 0; }
.player-vol-icon { font-size: 0.8rem; color: rgba(255,255,255,0.45); user-select: none; }
input.vol-range { -webkit-appearance: none; width: 90px; height: 3px; background: rgba(255,255,255,0.2); border-radius: 2px; outline: none; cursor: pointer; }
input.vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: white; cursor: pointer; }
.player-listeners { font-size: 0.75rem; color: rgba(255,255,255,0.4); padding-right: 1.25rem; white-space: nowrap; flex-shrink: 0; }
.player-all-streams { height: 100%; display: flex; align-items: center; padding: 0 1.1rem; border-left: 1px solid rgba(255,255,255,0.1); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; color: rgba(255,255,255,0.6); white-space: nowrap; flex-shrink: 0; }

/* ── NAV ── */
.main-nav { background: var(--bg); border-bottom: 2px solid #e0e0e0; position: sticky; top: 48px; z-index: 190; }
.main-nav ul { max-width: 1800px; margin: 0 auto; padding: 0 5%; display: flex; list-style: none; flex-wrap: wrap; }
.main-nav li { display: block; }
.main-nav a { display: block; padding: 0.85rem 1.1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mid); transition: color 0.15s; }
.main-nav a:hover { color: var(--blue); }

/* Remove underline from ALL WordPress active menu states — catch-all */
.main-nav li[class*="current"] > a { color: var(--blue); }


/* ── NAV DROPDOWNS ── */
.main-nav li { position: relative; }
.main-nav ul ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: 2px solid #2AABE2;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 300;
  list-style: none;
  padding: 0.25rem 0;
  transition: opacity 0.15s, visibility 0.15s;
}
.main-nav li:hover > ul { visibility: visible; opacity: 1; }
.main-nav ul ul li { display: block; width: 100%; }
.main-nav ul ul a,
.main-nav ul ul a[aria-current],
.main-nav ul ul a[aria-current="page"] {
  display: block !important;
  padding: 0.55rem 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #444 !important;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.main-nav ul ul li:last-child a { border-bottom: none; }
.main-nav ul ul a:hover,
.main-nav ul ul a[aria-current]:hover,
.main-nav ul ul a[aria-current="page"]:hover { color: #2AABE2 !important; background: #f0f8fd; }
.main-nav li:has(> ul) > a::after { content: ' ▾'; font-size: 0.65rem; opacity: 0.5; }

/* ── PAGE WRAPPER ── */
.page-wrap { max-width: 1800px; margin: 0 auto; padding: 2rem 5% 3rem; display: grid; grid-template-columns: 1fr var(--sidebar-w); gap: 3.5rem; align-items: start; }

/* ── SECTION HEADER ── */
.sec-head { border-top: 2px solid var(--blue); padding-top: 0.6rem; margin-bottom: 1.25rem; }
.sec-head h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }

/* ── NEWS SECTION ── */
#news { margin-bottom: 2.5rem; }
.featured-post { margin-bottom: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 2rem; }
.featured-banner { width: 100%; aspect-ratio: 16/7; background: linear-gradient(160deg, #1a7aad 0%, #0d3d5a 100%); display: flex; align-items: center; justify-content: center; border-radius: 4px; margin-bottom: 1.25rem; overflow: hidden; position: relative; }
.featured-banner img.station-logo { width: 340px; background: white; border-radius: 6px; padding: 0.75rem 1.25rem; }
.featured-banner img.post-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.post-tag { background: var(--blue); color: white; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.22rem 0.65rem; border-radius: 2px; }
.post-date { font-size: 0.8rem; color: var(--muted); }
.featured-post h2 { font-family: 'Source Sans 3', sans-serif; font-size: 1.7rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.6rem; }
.featured-post .post-body { font-size: 1rem; color: var(--mid); line-height: 1.75; max-width: 640px; }
.featured-post .post-body p { margin-bottom: 1rem; }
.featured-post .post-body p:last-child { margin-bottom: 0; }

/* ── OLDER POSTS ── */
.older-posts { display: flex; flex-direction: column; }
.post-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); align-items: start; }
.post-row:last-child { border-bottom: none; }
.post-row-thumb { width: 72px; height: 54px; border-radius: 3px; background: #ddd; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.1rem; }
.post-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-row-title { font-family: 'Source Sans 3', sans-serif; font-size: 1rem; font-weight: 600; color: var(--dark); line-height: 1.3; margin-bottom: 0.2rem; }
.post-row-tag { display: inline-block; background: var(--blue-pale); color: var(--blue); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 2px; }
.post-row-excerpt { font-size: 0.88rem; color: var(--muted); line-height: 1.5; margin-top: 0.25rem; }
.posts-empty { color: var(--muted); font-size: 0.95rem; padding: 1.5rem 0; }

/* ── ABOUT STRIP ── */
.about-strip { background: var(--bg-light); border-top: 2px solid var(--blue); padding: 1.5rem; border-radius: 3px; margin-bottom: 2.5rem; }
.about-strip p { font-size: 0.97rem; color: var(--mid); line-height: 1.75; }
.genre-list { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.85rem; }
.genre-pill { background: var(--blue); color: white; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: 2px; }

/* ── SHOWS GRID ── */
.shows-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; }
.show-card { border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; }
.show-card-banner { width: 100%; aspect-ratio: 16/6; border-radius: 3px; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; font-family: 'Source Sans 3', sans-serif; font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,0.92); overflow: hidden; text-align: center; padding: 0 1rem; }
.sc-morning   { background: linear-gradient(135deg, #c9a96e, #8B6914); }
.sc-lunchbox  { background: linear-gradient(135deg, #4a7c59, #2d5c3b); }
.sc-stampede  { background: linear-gradient(135deg, #7a4f2e, #3d2208); }
.sc-throwback { background: linear-gradient(135deg, #3a4a7a, #1a2044); }
.sc-rave      { background: linear-gradient(135deg, #5a1a5a, #1a0830); }
.sc-weekend   { background: linear-gradient(135deg, #1a5a8a, #0d2d4a); }
.sc-teal      { background: linear-gradient(135deg, #1a7a7a, #0d3d3d); }
.sc-red       { background: linear-gradient(135deg, #8B1F1F, #3d0a0a); }
.sc-pink      { background: linear-gradient(135deg, #8B1a5a, #3d0a2d); }

.show-card-time { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.show-card h3 { font-family: 'Source Sans 3', sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--dark); margin-bottom: 0.2rem; }
.show-card-days { font-size: 0.82rem; color: var(--muted); }
.show-card-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin-top: 0.35rem; }

/* ── SINGLE POST PAGE ── */
.single-post-wrap { max-width: 1800px; margin: 0 auto; padding: 2rem 5% 3rem; }
.single-post-banner { width: 100%; aspect-ratio: 16/7; background: linear-gradient(160deg, #1a7aad 0%, #0d3d5a 100%); border-radius: 4px; overflow: hidden; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; }
.single-post-featured-img { margin-bottom: 1.5rem; }
.single-post-featured-img img { width: 100%; height: auto; border-radius: 4px; display: block; }
.single-post-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.single-post-banner img.station-logo { width: 340px; background: white; border-radius: 6px; padding: 0.75rem 1.25rem; height: auto; }
.single-post-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.single-post-title { font-family: 'Source Sans 3', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem; color: var(--dark); }
.single-post-content { font-size: 1rem; color: var(--mid); line-height: 1.8; max-width: 720px; }
.single-post-content p { margin-bottom: 1.1rem; }
.single-post-content h2,
.single-post-content h3 { font-family: 'Source Sans 3', sans-serif; color: var(--dark); margin: 1.5rem 0 0.5rem; }
.single-post-content img { border-radius: 4px; margin: 1rem 0; max-width: 100%; }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--blue); margin-bottom: 1.5rem; letter-spacing: 0.04em; text-transform: uppercase; }
.back-link:hover { color: var(--blue-hover); }

/* ── SIDEBAR ── */
.sidebar { display: flex; flex-direction: column; gap: 2rem; min-width: 0; overflow: hidden; }
.np-card { background: var(--bg-light); border: 1px solid var(--border); border-radius: 3px; padding: 1rem; overflow: hidden; }
.np-card-art { width: 100%; aspect-ratio: 1; background: #ddd; border-radius: 3px; margin-bottom: 0.85rem; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 2.5rem; overflow: hidden; }
.np-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-card-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.2rem; }
.np-card-title { font-family: 'Source Sans 3', sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--dark); }
.np-card-artist { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }

/* ── LISTEN ON BUTTONS ── */
.listen-on { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.listen-on-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.listen-on-btns { display: flex; flex-direction: column; gap: 0.4rem; }
.listen-btn { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.75rem; border-radius: 4px; font-size: 0.78rem; font-weight: 600; text-decoration: none; transition: opacity 0.15s; color: white; }
.listen-btn:hover { opacity: 0.85; color: white; }
.listen-btn svg { flex-shrink: 0; }
.listen-btn-spotify  { background: #1DB954; }
.listen-btn-apple    { background: #fc3c44; }
.listen-btn-ytmusic  { background: #FF0000; }

/* ── RECENTLY PLAYED ── */
.recent-list { display: flex; flex-direction: column; }
.recent-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0.65rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); align-items: center; }
.recent-item:last-child { border-bottom: none; }
.recent-art { width: 40px; height: 40px; border-radius: 3px; background: #ddd; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1rem; overflow: hidden; flex-shrink: 0; }
.recent-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-title { font-size: 0.86rem; font-weight: 600; color: var(--dark); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
.recent-artist { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
.recent-time { font-size: 0.68rem; color: var(--muted); margin-top: 0.1rem; }
.recent-item > div:last-child { min-width: 0; overflow: hidden; width: 100%; }
.recent-loading { font-size: 0.82rem; color: var(--muted); padding: 0.5rem 0; }

/* ── CONTACT MODULE ── */
.contact-module { background: var(--bg-light); border: 1px solid var(--border); border-radius: 3px; padding: 1.1rem; }
.contact-module p { font-size: 0.88rem; color: var(--mid); line-height: 1.65; margin-bottom: 0.85rem; }
.contact-module a.btn-primary { display: block; text-align: center; font-size: 0.82rem; padding: 0.55rem 1rem; word-break: break-all; }

/* ── FOOTER ── */
footer.site-footer { background: #1a1a1a; color: rgba(255,255,255,0.5); padding: 2rem 1.5rem; }
.footer-inner { max-width: 1800px; margin: 0 auto; padding: 0 5%; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.footer-parent img { height: 28px; }
.footer-right { font-size: 0.78rem; line-height: 1.75; text-align: right; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .page-wrap { grid-template-columns: 1fr; }
  .shows-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .main-nav a { padding: 0.6rem 0.75rem; font-size: 0.72rem; }
  .masthead { padding: 0.75rem 1rem; }
  .masthead-logo img { height: 52px; }
  .page-wrap { padding: 1.25rem 1rem 2rem; }
  .single-post-wrap { padding: 1.25rem 1rem 2rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-right { text-align: left; }
}

/* ── WP ADMIN BAR OFFSET ── */
.admin-bar .player-bar { top: 32px; }
.admin-bar .main-nav { top: calc(48px + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .player-bar { top: 46px; }
  .admin-bar .main-nav { top: calc(48px + 46px); }
}
/* On mobile, the WP admin bar is position:absolute (scrolls away), not fixed.
   Once scrolled past, sticky bars must use top:0 / top:48px or they leave a gap. */
@media screen and (max-width: 600px) {
  .admin-bar .player-bar { top: 0; }
  .admin-bar .main-nav  { top: 48px; }
}

/* ── ABOUT CONTENT (block editor) ── */
.about-content { font-size: 0.97rem; color: var(--mid); line-height: 1.75; }
.about-content p { margin-bottom: 0.75rem; }
.about-content p:last-child { margin-bottom: 0; }
.about-content ul, .about-content ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.about-content strong { color: var(--dark); }

/* ── BLOCK EDITOR CONTENT ── */
.main-content { min-width: 0; overflow-x: hidden; }

/* WordPress block defaults */
.main-content .wp-block-group { margin-bottom: 0; }
.main-content p { margin-bottom: 1rem; line-height: 1.75; color: var(--mid); }
.main-content p:last-child { margin-bottom: 0; }
.main-content h1, .main-content h2, .main-content h3,
.main-content h4, .main-content h5, .main-content h6 {
  font-family: 'Source Sans 3', sans-serif;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}
.main-content h1:first-child,
.main-content h2:first-child { margin-top: 0; }
.main-content ul, .main-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  color: var(--mid);
}
.main-content li { margin-bottom: 0.3rem; }
.main-content img { border-radius: 4px; max-width: 100%; height: auto; }
.main-content a { color: var(--blue); text-decoration: underline; }
.main-content a:hover { color: var(--blue-hover); }
.main-content hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.main-content blockquote {
  border-left: 3px solid var(--blue);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  color: var(--muted);
  font-style: italic;
}

/* Section header block helper class */
.mammoth-sec-head {
  border-top: 2px solid var(--blue);
  padding-top: 0.6rem;
  margin-bottom: 1.25rem;
}
.mammoth-sec-head p,
.mammoth-sec-head h2 {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue) !important;
  margin: 0 !important;
  font-family: 'Source Sans 3', sans-serif !important;
}

/* Featured post banner block helper */
.mammoth-featured-banner {
  width: 100%;
  aspect-ratio: 16/7;
  background: linear-gradient(160deg, #1a7aad 0%, #0d3d5a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.mammoth-featured-banner img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}

/* About strip helper */
.mammoth-about-strip {
  background: var(--bg-light);
  border-top: 2px solid var(--blue);
  padding: 1.5rem;
  border-radius: 3px;
  margin-bottom: 2rem;
}

/* Show card helper classes for use in block editor */
.mammoth-shows-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (max-width: 600px) { .mammoth-shows-grid { grid-template-columns: 1fr; } }

.mammoth-show-card { border-bottom: 1px solid var(--border); padding-bottom: 1.25rem; }
.mammoth-show-card .banner {
  width: 100%; aspect-ratio: 16/6; border-radius: 3px; margin-bottom: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Source Sans 3', sans-serif; font-size: 1.1rem; font-weight: 600;
  color: rgba(255,255,255,0.92); text-align: center; padding: 0 1rem;
}
.mammoth-show-card .time  { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.mammoth-show-card h3     { font-family: 'Source Sans 3', sans-serif; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--dark); margin: 0 0 0.2rem 0; }
.mammoth-show-card .days  { font-size: 0.82rem; color: var(--muted); }
.mammoth-show-card .desc  { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin-top: 0.35rem; }

/* Post tag pill */
.mammoth-tag {
  display: inline-block;
  background: var(--blue); color: white;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.22rem 0.65rem; border-radius: 2px; margin-bottom: 0.5rem;
}

/* Genre pills */
.mammoth-genre-list { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.85rem; }
.mammoth-genre-pill {
  background: var(--blue); color: white;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25rem 0.75rem; border-radius: 2px;
}

/* ── MASTHEAD WIDGET ── */
.masthead-widget { display: flex; align-items: center; gap: 0.75rem; flex: 1; justify-content: flex-end; padding: 0 1rem; }
.masthead-widget img { max-height: 36px; width: auto; }
.masthead-widget a { color: var(--mid); transition: color 0.2s; }
.masthead-widget a:hover { color: var(--blue); }
.masthead-widget .widget { margin: 0; }
.masthead-widget p { margin: 0; font-size: 0.85rem; color: var(--muted); }

/* ── SHOW CARD — image support ── */
.show-card-banner-link { display: block; text-decoration: none; width: 100%; }
.show-card-banner-link:hover .show-card-banner { opacity: 0.9; }
/* All show card banners — consistent 16/6 height whether image or colour */
.show-card-banner-img {
  width: 100%;
  aspect-ratio: 16/6;
  overflow: hidden;
  border-radius: 3px;
  display: block;
  position: relative;
}
.show-card-banner-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 3px;
}
.show-card h3 a { color: var(--dark); text-decoration: none; }
.show-card h3 a:hover { color: var(--blue); }

/* ── SINGLE SHOW PAGE ── */
.show-hero-banner {
  width: 100%; max-width: 100%; aspect-ratio: 16/6; border-radius: 4px; margin-bottom: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 700; color: rgba(255,255,255,0.92);
  text-align: center; padding: 0 2rem; box-sizing: border-box;
}
.show-hero-img { margin-bottom: 1.25rem; max-width: 100%; }
.show-hero-img img { width: 100%; max-width: 100%; height: auto; border-radius: 4px; display: block; }
.show-meta { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.show-meta-time { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.show-meta-days { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.show-title { font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--dark); margin-bottom: 1.25rem; }
.show-content { max-width: 720px; }

/* ═══════════════════════════════════════════════
   SCHEDULE GRID
   ═══════════════════════════════════════════════ */

.mammoth-schedule-wrap {
  position: relative;
  margin: 0 0 2rem;
  overflow-x: auto;
}

.mammoth-schedule {
  display: grid;
  grid-template-columns: 72px repeat(7, 1fr);
  grid-template-rows: 72px;
  grid-auto-rows: 30px;
  min-width: 600px;
  position: relative;
  gap: 0;
}

/* ── Day headers ── */
.sch-corner,
.sch-day-header {
  grid-row: 1;
  background: var(--blue);
  color: white;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.25rem;
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
  line-height: 1.2;
}
.sch-corner {
  grid-column: 1;
  justify-content: flex-start;
  padding-left: 0.6rem;
  border-radius: 8px 0 0 0;
}
.sch-day-header:last-child { border-radius: 0 8px 0 0; }

/* ── Time labels ── */
.sch-time-label {
  font-size: 0.6rem;
  color: var(--muted);
  padding-right: 0.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 2px;
  background: transparent;
  user-select: none;
}
.sch-time-hour { font-weight: 600; color: #555; }

/* ── Background grid cells — no lines, no shading ── */
.sch-bg-cell { background: transparent; }
.sch-bg-hour { background: transparent; }

/* ── Show blocks — card style ── */
.sch-show {
  border: 2px solid transparent;
  border-radius: 6px;
  margin: 2px;
  padding: 5px 7px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  text-align: left;
  transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
  position: relative;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.sch-show:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.22);
}
@keyframes onair-block-pulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(0.65); }
}
.sch-show.is-airing {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  animation: onair-block-pulse 1.4s ease-in-out infinite;
}
.sch-show.is-airing::after {
  content: "● ON AIR";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: white;
  white-space: nowrap;
  background: rgba(0,0,0,0.35);
  padding: 2px 8px;
  border-radius: 10px;
  animation: none;
}
.sch-show-name {
  font-size: 0.63rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* ── Popup overlay ── */
.sch-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.sch-popup[hidden] { display: none; }

.sch-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.sch-popup-card {
  position: relative;
  background: white;
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.28);
  max-width: 420px;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  animation: sch-pop-in 0.18s ease;
}
@keyframes sch-pop-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.sch-popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.65rem;
  background: rgba(0,0,0,0.3);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  line-height: 1;
  color: white;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sch-popup-close:hover { background: rgba(0,0,0,0.55); }

.sch-popup-img {
  width: 100%;
  aspect-ratio: 16/6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sch-popup-img {
  position: relative;
}
.sch-popup-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.sch-popup-img.no-img {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  text-align: center;
  padding: 1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.sch-popup-body { padding: 1.1rem 1.25rem 1.35rem; }

.sch-popup-meta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
  line-height: 1.7;
}
.sch-popup-meta strong { font-weight: 800; }

.sch-popup-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.55rem;
  line-height: 1.2;
}

.sch-popup-excerpt {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.65;
  margin-bottom: 1rem;
}


@media (max-width: 600px) {
  .mammoth-schedule-wrap { overflow-x: auto; }
  .mammoth-schedule { min-width: 500px; }
}

/* ── SHOW SCHEDULE DISPLAY ── */
.show-sched-line {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 0.1rem;
}
.show-sched-line strong {
  color: var(--blue);
  font-weight: 700;
}
.show-meta-full {
  margin-bottom: 0.75rem;
}

/* Compact "(+ N more)" button */
.show-sched-more {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--blue);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.show-sched-more:hover { color: var(--blue-hover); }

/* Schedule detail popup (lightweight, reuses sch-popup styles) */
.sched-detail-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.sched-detail-popup[hidden] { display: none; }
.sched-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.sched-detail-card {
  position: relative;
  background: white;
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.25);
  max-width: 380px;
  width: 100%;
  padding: 1.5rem;
  z-index: 1;
  animation: sch-pop-in 0.15s ease;
}
.sched-detail-card h3 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.75rem;
}
.sched-detail-lines { display: flex; flex-direction: column; gap: 0.4rem; }
.sched-detail-line { font-size: 0.88rem; color: var(--dark); line-height: 1.5; }
.sched-detail-line strong { color: var(--blue); }
.sched-detail-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: #f0f0f0;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mid);
}
.sched-detail-close:hover { background: #e0e0e0; }

/* ── Schedule-only / filler blocks ── */
.sch-show-filler {
  opacity: 0.65;
  cursor: default;
  /* No forced background — respects the hex colour set in the editor */
}
.sch-show-filler:hover {
  filter: none;
  transform: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.sch-show-filler .sch-show-name {
  font-style: italic;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}

/* ── Schedule week navigation ── */
.sch-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}
.sch-week-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--blue);
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.sch-week-btn:hover { background: var(--blue); color: white; }
.sch-week-label {
  text-align: center;
  flex: 1;
}
.sch-week-dates {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  display: block;
}
.sch-week-today {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}

/* Day header with date number */
.sch-day-header { flex-direction: column; gap: 2px; padding: 0.55rem 0.25rem; min-height: 52px; }
.sch-day-name   { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; }
.sch-day-date   { font-size: 0.92rem; font-weight: 700; }
/* Today highlight removed — use ON AIR indicator instead */

/* Specific date show badge */
.sch-show-badge {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 0.5rem;
  color: #fff700;
  line-height: 1;
}

/* Specific date shows — sits on top of recurring shows, solid with white border */
.sch-show[data-is-specific="1"] {
  z-index: 5;
  border-color: rgba(255,255,255,0.9) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6), 0 3px 12px rgba(0,0,0,0.4) !important;
  opacity: 1 !important;
}
.sch-show[data-is-specific="1"].is-airing {
  border: none !important;
  box-shadow: none !important;
}

/* Recurring shows that are overridden by a specific date show */
.sch-show.is-overridden {
  opacity: 0.25 !important;
  pointer-events: none;
}

/* ── On-Air Show Pill ── */
.player-show-name { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; background: transparent; padding: 0; margin: 0; }
.player-show-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.player-show-label { font-size: 0.88rem; font-weight: 400; color: rgba(255,255,255,0.9); white-space: nowrap; text-decoration: none; background: transparent; }
a.player-show-label:hover { color: white; text-decoration: underline; }
.player-show-pill::before { display: none !important; }
.np-show-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 8px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.04em;
  margin: 4px 0 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-show-pill::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  flex-shrink: 0;
}

/* ── Schedule timezone toggle ── */
.sch-tz-toggle { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.78rem; color: var(--muted); }
.sch-tz-btn { background: transparent; border: 1px solid var(--border); border-radius: 3px; padding: 2px 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; color: var(--mid); transition: all 0.15s; }
.sch-tz-btn.active { background: var(--blue); border-color: var(--blue); color: white; }
.sch-tz-btn:hover:not(.active) { border-color: var(--blue); color: var(--blue); }