/*
Theme Name: DJ Bob Show
Description: Custom theme for the DJ Bob Show podcast site, built around PowerPress episode data.
Author: DJ Bob Show
Version: 0.1.0
*/

:root{
  --ink:#0d2b4d;
  --paper:#f6f3ec;
  --paper-dim:#eae5d8;
  --panel:#ffffff;
  --line:#d8d0bd;
  --text:#20232b;
  --text-dim:#4b4c52;
  --blue:#1c88f2;
  --blue-strong:#0f5cb0;
  --blue-deep:#041c38;
  --red:#dd1824;
  --red-strong:#b31119;
  --focus:#0b5fff;
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eef1f6;
    --paper:#0e1420;
    --paper-dim:#161d2c;
    --panel:#1a2233;
    --line:#2c3548;
    --text:#eef0f4;
    --text-dim:#b7bece;
    --blue:#6fb0ff;
    --blue-strong:#a9cdf5;
    --blue-deep:#1d4d8c;
    --red:#ff3b30;
    --red-strong:#ff5c52;
    --focus:#8fbaff;
  }
}
:root[data-theme="dark"]{
  --ink:#eef1f6;
  --paper:#0e1420;
  --paper-dim:#161d2c;
  --panel:#1a2233;
  --line:#2c3548;
  --text:#eef0f4;
  --text-dim:#b7bece;
  --blue:#6fb0ff;
  --blue-strong:#a9cdf5;
  --blue-deep:#1d4d8c;
  --red:#ff3b30;
  --red-strong:#ff5c52;
  --focus:#8fbaff;
}

*{box-sizing:border-box;}
html{ font-size:112.5%; }
body{
  background:var(--paper); color:var(--text);
  font-family:'Poppins', system-ui, -apple-system, sans-serif;
  line-height:1.6; margin:0;
}
h1,h2,h3{ font-family:'Poppins', system-ui, sans-serif; text-wrap:balance; letter-spacing:0.01em; }
a{ color:var(--blue); }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
.skip-link{
  position:absolute; left:1rem; top:-4rem; background:var(--focus); color:#fff;
  padding:0.75rem 1.25rem; border-radius:6px; z-index:200; font-weight:600; transition:top 0.15s;
}
.skip-link:focus{ top:1rem; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
body.reduce-motion *{ animation:none !important; transition:none !important; }
body.big-text{ font-size:1.2rem; }
body.high-contrast{ --paper:#ffffff; --panel:#ffffff; --text:#000000; --text-dim:#1a1a1a; --line:#000000; --ink:#000000; --blue:#0043b0; --red:#b3001b; }

.icon{ width:1em; height:1em; display:inline-block; fill:currentColor; vertical-align:-0.12em; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 1.5rem; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 1.5rem; }

/* Header */
header.site{ background:var(--ink); }
.top-bar{ padding-top:0.9rem; padding-bottom:0.9rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.wordmark{ display:inline-flex; align-items:center; }
.wordmark img{ height:54px; width:auto; display:block; }
nav.primary ul{ list-style:none; display:flex; gap:1.75rem; margin:0; padding:0; font-weight:600; font-size:1.05rem; }
nav.primary a{ color:var(--paper); text-decoration:none; padding:0.35rem 0.1rem; border-bottom:2px solid transparent; }
nav.primary a:hover, nav.primary a:focus-visible{ border-bottom-color:var(--red); }
.btn{
  display:inline-flex; align-items:center; gap:0.5rem; font-weight:700; text-decoration:none;
  padding:0.75rem 1.4rem; border-radius:999px; font-size:1.02rem; border:none; cursor:pointer;
}
.btn-blue-outline{ background:var(--blue-deep); color:#fff; }
.btn-blue-outline:hover{ background:var(--blue-strong); color:#fff; }
.btn-glow{ box-shadow:0 0 0 3px rgba(255,255,255,0.18), 0 0 14px 2px rgba(255,255,255,0.55); }
.btn-glow:hover{ box-shadow:0 0 0 4px rgba(255,255,255,0.24), 0 0 18px 3px rgba(255,255,255,0.7); }

/* Hero */
.hero{ background:linear-gradient(160deg, #4fb3ff 0%, #1c88f2 38%, #0d3d80 78%, #0a1f3d 100%); color:#fff; padding:3.5rem 0 4.5rem; }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:3rem; align-items:center; }
.hero h1{ font-size:3.6rem; font-weight:800; margin:0 0 1rem; line-height:0.98; color:#fff; }
.hero p.lede{ font-size:1.25rem; color:#dfe2ec; max-width:48ch; margin:0 0 1.75rem; }
.hero-actions{ display:flex; gap:0.9rem; flex-wrap:wrap; }
.hero-art{ display:flex; justify-content:center; }
.hero-art img{ width:min(340px, 90%); height:auto; }

main section{ padding:4rem 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.section-head-episodes{ align-items:center; justify-content:center; text-align:center; }
h2.section-title{ font-size:2.3rem; font-weight:700; margin:0; color:var(--text); }
h2.section-title-platforms{ text-align:center; margin-bottom:2rem; }
h2.section-title-centered{ text-align:center; }
h2.section-title-plain{ font-family:'Poppins', system-ui, sans-serif; font-size:2.1rem; font-weight:800; flex:1 1 auto; width:100%; text-align:center; }
p.section-sub{ color:var(--text-dim); max-width:62ch; margin:0.5rem 0 2rem; font-size:1.08rem; }

/* About */
.about-grid{ display:grid; grid-template-columns:220px 1fr; gap:2.5rem; align-items:stretch; }
.host-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; text-align:center; display:flex; flex-direction:column; justify-content:center; }
.host-photo{ width:100%; aspect-ratio:1 / 1; border-radius:50%; margin-bottom:0.9rem; display:block; object-fit:cover; object-position:50% 30%; border:3px solid var(--line); }
.host-card strong{ display:block; font-size:1.2rem; }
.host-card span{ color:var(--text-dim); font-size:0.98rem; }
.about p{ max-width:66ch; font-size:1.08rem; }

/* Episode cards / carousel */
#episodes .wrap{ max-width:none; padding:0 2.5rem; }
.carousel-wrap{ position:relative; max-width:965px; margin:0 auto; }
.carousel-track{ display:flex; gap:1.25rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; padding-bottom:0.5rem; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none; }
.carousel-track::-webkit-scrollbar{ display:none; }
/* Deliberately justify-content:flex-start, not center: on a scrollable flex
   container, justify-content:center makes the browser start the scroll
   position at the middle of the overflowing content instead of the true
   first item -- the outer .carousel-wrap's own margin:0 auto is what
   centers the visible window on the page. */
.carousel-track-center{ justify-content:flex-start; }
.ep-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--text); }
.carousel-track .ep-card{ scroll-snap-align:start; flex:0 0 auto; width:300px; }
.ep-grid .ep-card{ width:100%; }
.ep-card:hover{ border-color:var(--blue); }
.ep-thumb{ aspect-ratio:1 / 1; background:linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); overflow:hidden; }
.ep-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ep-body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:0.45rem; }
.ep-num{ font-family:'Poppins',sans-serif; color:var(--blue); font-size:0.92rem; font-weight:700; letter-spacing:0.04em; }
.ep-body h3{ font-size:1.15rem; margin:0; font-weight:700; line-height:1.28; }
.ep-excerpt{ color:var(--text-dim); font-size:0.96rem; margin:0.2rem 0 0; }
.ep-tag{ display:inline-block; align-self:flex-start; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-dim); background:var(--paper-dim); border:1px solid var(--line); border-radius:999px; padding:0.15rem 0.6rem; margin-bottom:0.1rem; }
.carousel-nav{ display:flex; gap:0.6rem; margin-top:1rem; }
#episodes .carousel-nav{ justify-content:center; }
.carousel-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.carousel-btn:hover{ border-color:var(--blue); color:var(--blue); }
.see-all{ display:inline-flex; align-items:center; gap:0.4rem; font-weight:700; text-decoration:none; color:var(--blue); font-size:1.02rem; white-space:nowrap; }
.see-all:hover{ color:var(--blue-strong); }

/* Listen platforms */
.platform-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; }
.platform{ display:flex; align-items:center; justify-content:center; gap:0.85rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; text-decoration:none; color:var(--text); font-weight:600; font-size:1.02rem; min-width:0; }
.platform:hover{ border-color:var(--red); }
.platform .icon{ font-size:1.4rem; color:var(--blue); flex-shrink:0; }
.platform-heading{ font-size:1.2rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); margin:1.5rem 0 0.75rem; text-align:center; }

/* Connect */
.feed-card{ scroll-snap-align:start; flex:0 0 auto; width:230px; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; position:relative; background:linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%); display:flex; align-items:flex-end; padding:0.9rem; border:1px solid var(--line); }
.feed-card span{ color:#fff; font-size:0.92rem; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.feed-card .icon{ position:absolute; top:0.7rem; right:0.7rem; color:#fff; font-size:1.2rem; opacity:0.9; }
#connect .carousel-nav{ justify-content:center; }

/* Episode single page */
.breadcrumb{ background:var(--paper-dim); padding:0.9rem 0; font-size:0.95rem; }
.breadcrumb a{ color:var(--text-dim); text-decoration:none; font-weight:600; }
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb span{ color:var(--text-dim); margin:0 0.4rem; }
.breadcrumb strong{ color:var(--text); }
main.episode-main{ padding:2.75rem 0 3.5rem; }
.ep-hero{ display:flex; align-items:flex-start; gap:2rem; margin-bottom:2.25rem; }
.ep-hero-bg{ width:260px; height:260px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line); flex-shrink:0; }
.ep-hero-content{ flex:1 1 auto; padding-top:0.25rem; }
.ep-badge{ font-weight:700; color:var(--text-dim); font-size:1.2rem; }
.ep-date{ font-weight:700; color:var(--text-dim); font-size:1.2rem; }
.ep-title{ font-size:2rem; font-weight:800; margin:0.4rem 0 1.4rem; line-height:1.2; text-align:left; color:var(--text); }

.player{ padding:0.5rem 0 1.75rem; color:var(--text); }
.player-track-row{ display:flex; align-items:center; gap:0.85rem; margin-bottom:1.5rem; }
.player-time-start, .player-time-end{ font-size:0.85rem; color:var(--text); font-variant-numeric:tabular-nums; flex-shrink:0; }
.player-track{ position:relative; flex:1 1 auto; height:2px; border-radius:999px; background:var(--line); cursor:pointer; }
.player-dot{ position:absolute; left:0%; top:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:var(--text); }
.player-controls{ display:flex; align-items:center; justify-content:center; gap:2.25rem; }
.player-speed{ font-weight:700; font-size:1rem; color:var(--text); background:none; border:none; padding:0; cursor:pointer; font-family:inherit; }
.skip-btn{ position:relative; width:28px; height:28px; background:none; border:none; color:var(--text); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
.skip-btn .icon{ width:28px; height:28px; }
.skip-btn .n{ position:absolute; top:50%; left:50%; transform:translate(-50%,-52%); font-size:0.6rem; font-weight:700; }
.play-btn{ width:52px; height:52px; border-radius:50%; background:none; color:var(--text); border:2px solid var(--text); display:flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer; flex-shrink:0; }
.play-btn:hover{ background:var(--paper-dim); }
.play-btn .icon.pause-icon{ display:none; }
.play-btn.is-playing .icon.play-icon{ display:none; }
.play-btn.is-playing .icon.pause-icon{ display:block; }

.notes{ max-width:70ch; }
.notes p{ font-size:1.06rem; margin:0 0 1.1rem; }
h2.section-title-episode{ font-size:1.5rem; font-weight:700; margin:2rem 0 1.1rem; color:var(--text); }
.ep-nav{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:2.5rem; }
.ep-nav-card{ display:flex; flex-direction:column; gap:0.3rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem; text-decoration:none; color:var(--text); }
.ep-nav-card.solo{ grid-column:1 / -1; }
.ep-nav-card:hover{ border-color:var(--blue); }
.ep-nav-card .dir{ font-size:0.82rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--blue); display:flex; align-items:center; gap:0.4rem; }
.ep-nav-card.next .dir{ justify-content:flex-end; }
.ep-nav-card.next{ text-align:right; align-items:flex-end; }
.ep-nav-card strong{ font-size:1.02rem; line-height:1.3; }
.ep-nav-card span{ color:var(--text-dim); font-size:0.9rem; }

/* Archive / pagination */
.page-head{ padding:2.75rem 0 1.5rem; text-align:center; }
.page-head h1{ font-size:2.4rem; font-weight:800; margin:0 0 0.6rem; }
.page-head p{ color:var(--text-dim); font-size:1.06rem; max-width:56ch; margin:0 auto; }
.ep-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.5rem; margin-bottom:2.5rem; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.search-box{ display:flex; gap:0.6rem; align-items:center; max-width:520px; margin:0 auto 2rem; flex-wrap:wrap; justify-content:center; }
.search-box input[type="search"]{
  flex:1 1 260px; padding:0.7rem 1rem; border:1px solid var(--line); border-radius:999px;
  background:var(--panel); color:var(--text); font-size:1rem; font-family:inherit;
}
.search-box button{
  display:inline-flex; align-items:center; gap:0.5rem; background:var(--blue-deep); color:#fff;
  border:none; border-radius:999px; padding:0.7rem 1.3rem; font-weight:700; font-size:1rem; cursor:pointer; font-family:inherit;
}
.search-box button:hover{ background:var(--blue-strong); }
.search-box .search-clear{ color:var(--text-dim); font-weight:600; font-size:0.95rem; text-decoration:underline; }
.search-status{ text-align:center; color:var(--text-dim); margin:0 0 1.5rem; }
.pagination{ display:flex; align-items:center; justify-content:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.page-btn{ min-width:42px; height:42px; padding:0 0.9rem; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-weight:700; font-size:0.95rem; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; text-decoration:none; }
.page-btn:hover{ border-color:#000; }
.page-jump{ display:inline-flex; }
.page-jump input{
  width:42px; height:42px; border-radius:999px; border:1px solid var(--line); background:var(--panel);
  color:var(--text); font-weight:700; font-size:0.95rem; font-family:inherit; text-align:center; padding:0 0.4rem;
}
.page-jump input:focus{ border-color:var(--blue); }
.page-jump input::-webkit-outer-spin-button,
.page-jump input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.page-jump input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.page-btn.current{ background:#000; color:#fff; border-color:#000; }

/* Footer */
footer.site{ background:var(--ink); color:var(--text-dim); padding:2.2rem 0; font-size:0.98rem; }
footer.site .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
footer.site a{ color:var(--paper); }

/* Accessibility toolbar */
.a11y-toggle{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:150; width:56px; height:56px; border-radius:50%; border:none; background:var(--blue); color:#fff; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,0.3); }
.a11y-toggle:hover{ background:var(--blue-strong); }
.a11y-panel{ position:fixed; right:1.25rem; bottom:5.25rem; z-index:150; width:270px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; box-shadow:0 8px 24px rgba(0,0,0,0.25); }
.a11y-panel h2{ font-size:1.1rem; margin:0 0 0.85rem; font-weight:700; }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.55rem 0; border-top:1px solid var(--line); font-size:0.98rem; }
.a11y-row:first-of-type{ border-top:none; }
.a11y-row button{ background:var(--paper-dim); border:1px solid var(--line); border-radius:6px; padding:0.35rem 0.6rem; cursor:pointer; color:var(--text); font-weight:700; font-family:inherit; }
.a11y-row button[aria-pressed="true"]{ background:var(--blue); color:#fff; border-color:var(--blue); }
.a11y-note{ font-size:0.82rem; color:var(--text-dim); margin:0.85rem 0 0; }

@media (max-width:820px){
  .hero-grid, .about-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:2.4rem; }
  .top-bar{ justify-content:space-between; }
  nav.primary ul{ gap:0.6rem 1rem; font-size:0.95rem; flex-wrap:wrap; justify-content:center; }
  .a11y-panel{ right:1rem; left:1rem; width:auto; }
}
@media (max-width:640px){
  .ep-title{ font-size:1.4rem; }
  .ep-hero{ flex-direction:column; gap:1.25rem; }
  .ep-hero-bg{ width:100%; height:auto; aspect-ratio:1; }
  .ep-nav{ grid-template-columns:1fr; }
  .ep-nav-card.next{ text-align:left; align-items:flex-start; }
  .ep-nav-card.next .dir{ justify-content:flex-start; }
  .page-head h1{ font-size:1.9rem; }
  .ep-grid{ grid-template-columns:1fr; }
}