/*
  Celeb Savant Episodes — plugin stylesheet
  v1.8.2 — 2026-08-06 — episode title colour hardened with !important. v1.8.1
                        added an explicit colour, but on the client's WordPress
                        theme an equal/higher-specificity h1-h6 rule still won,
                        so titles rendered near-black on the dark card. The
                        ID-scoped selector + !important settles it for good.
  v1.8.1 — 2026-08-01 — episode title given an explicit colour. It had only ever
                        INHERITED --cs-text, which is fine standalone but loses in
                        WordPress: the host theme declares h1-h6 { color:#333 } and a
                        declaration beats an inheritance, so titles rendered near-black
                        on a near-black card. Verified on the live site — computed
                        colour was rgb(51,51,51), now rgb(240,240,240).
                        RULE for future ports: never rely on inheritance for colour
                        inside the plugin container; the theme captures every bare
                        h1-h6, p, li, td and button.
  v1.8.0 — 2026-07-23 — synced with episodes-search.html v1.9.0: mobile filter-dropdown fix (facet panel position:fixed under 560px).
  v1.7.0 — 2026-07-17 — birthday banner shrunk to a small quiet pill
                        (was a bold gold block).
  v1.6.0 — 2026-07-17 — birthday pill is now clickable (pointer cursor,
                        gold hover) with a new "soon" (this week, gold)
                        style alongside "today" (red).
  v1.5.0 — 2026-07-17 — birthday cake pill + today-highlight + "Happy
                        Birthday" banner; credit footer link hover style.
  v1.4.0 — 2026-07-17 — small "Thank you to Solid Gold" credit footer.
  v1.3.1 — 2026-07-17 — band / company pills gold (#e8a838).
  v1.3.0 — 2026-07-17 — dashed style for inferred (auto-detected) chips.
  v1.2.0 — 2026-07-17 — search row layout with Reset button.
  v1.1.0 — 2026-07-17 — accent switched to Celeb Savant red (#e02b20);
                        white text on red buttons/badges.
  v1.0.0 — 2026-07-17 — extracted from ver 02\episodes-search.html v1.1.0.
  All rules are scoped under #cs-episodes so theme (Divi) styles and these
  styles never fight.
*/

/* ---- Scoped design system: dark with Celeb Savant red accent ---- */
#cs-episodes {
  --cs-bg: #161616;
  --cs-bg-soft: #1f1f1f;
  --cs-bg-card: #1c1c1c;
  --cs-accent: #e02b20; /* Celeb Savant red (site accent) */
  --cs-accent-soft: rgba(224, 43, 32, 0.14);
  --cs-gold: #e8a838; /* podcast-artwork gold — band / company pills */
  --cs-gold-soft: rgba(232, 168, 56, 0.14);
  --cs-text: #f0f0f0;
  --cs-text-dim: #a8a8a8;
  --cs-border: #333333;
  --cs-radius: 12px;
  background: var(--cs-bg);
  color: var(--cs-text);
  font-family: "Open Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  padding: 40px 24px 72px;
  min-height: 100vh;
  box-sizing: border-box;
}
#cs-episodes *, #cs-episodes *::before, #cs-episodes *::after { box-sizing: border-box; }

#cs-episodes .cs-shell { max-width: 1140px; margin: 0 auto; }

/* ---- Header ---- */
#cs-episodes .cs-head { text-align: center; margin-bottom: 28px; }
#cs-episodes .cs-head h1 {
  margin: 0 0 6px;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--cs-text);
}
#cs-episodes .cs-head h1 em { color: var(--cs-accent); font-style: normal; }
#cs-episodes .cs-head p { margin: 0; color: var(--cs-text-dim); font-size: 15px; }

/* ---- Search bar ---- */
#cs-episodes .cs-searchrow { display: flex; gap: 10px; max-width: 680px; margin: 22px auto 0; }
#cs-episodes .cs-searchwrap { position: relative; flex: 1; }
#cs-episodes .cs-reset {
  flex: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--cs-text-dim); background: var(--cs-bg-soft);
  border: 1px solid var(--cs-border); border-radius: 999px;
  padding: 0 20px; cursor: pointer; transition: border-color .15s, color .15s;
}
#cs-episodes .cs-reset:hover { border-color: var(--cs-accent); color: var(--cs-accent); }
#cs-episodes .cs-search {
  width: 100%;
  padding: 15px 52px 15px 22px;
  font: inherit;
  font-size: 17px;
  color: var(--cs-text);
  background: var(--cs-bg-soft);
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  outline: none;
  transition: border-color 0.15s;
}
#cs-episodes .cs-search::placeholder { color: #777; }
#cs-episodes .cs-search:focus { border-color: var(--cs-accent); }
#cs-episodes .cs-searchwrap .cs-searchico {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none; color: var(--cs-accent);
}

/* ---- Filter bar ---- */
#cs-episodes .cs-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: center; margin: 22px 0 8px;
}
#cs-episodes .cs-facet { position: relative; }
#cs-episodes .cs-facet-btn {
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--cs-text); background: var(--cs-bg-soft);
  border: 1px solid var(--cs-border); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; transition: border-color .15s, background .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
#cs-episodes .cs-facet-btn:hover { border-color: var(--cs-accent); }
#cs-episodes .cs-facet-btn .cs-caret { font-size: 10px; color: var(--cs-text-dim); }
#cs-episodes .cs-facet-btn.cs-active {
  background: var(--cs-accent-soft); border-color: var(--cs-accent); color: var(--cs-accent);
}
#cs-episodes .cs-facet-btn .cs-count {
  background: var(--cs-accent); color: #ffffff; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 1px 7px; line-height: 1.5;
}
#cs-episodes .cs-facet-panel {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  min-width: 230px; max-width: 300px; max-height: 320px; overflow-y: auto;
  background: #202020; border: 1px solid var(--cs-border); border-radius: var(--cs-radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55); padding: 8px; display: none;
}
#cs-episodes .cs-facet.cs-open .cs-facet-panel { display: block; }
#cs-episodes .cs-facet-panel label {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 8px; cursor: pointer; font-size: 14px;
}
#cs-episodes .cs-facet-panel label:hover { background: rgba(255,255,255,0.05); }
#cs-episodes .cs-facet-panel input { accent-color: var(--cs-accent); width: 15px; height: 15px; flex: none; }
#cs-episodes .cs-facet-panel .cs-opt-n { margin-left: auto; color: var(--cs-text-dim); font-size: 12px; }
#cs-episodes .cs-facet-panel .cs-empty { padding: 10px 12px; color: var(--cs-text-dim); font-size: 13px; }

#cs-episodes select.cs-sort {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--cs-text);
  background: var(--cs-bg-soft); border: 1px solid var(--cs-border);
  border-radius: 999px; padding: 8px 14px; cursor: pointer; outline: none;
}
#cs-episodes select.cs-sort:focus { border-color: var(--cs-accent); }
#cs-episodes select.cs-sort option { background: #202020; }

/* ---- Active filter chips ---- */
#cs-episodes .cs-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 0; }
#cs-episodes .cs-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cs-accent-soft); border: 1px solid var(--cs-accent);
  color: var(--cs-accent); font-size: 13px; font-weight: 600;
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
#cs-episodes .cs-chip .cs-x { font-weight: 800; }
#cs-episodes .cs-clearall {
  background: none; border: none; color: var(--cs-text-dim); font: inherit;
  font-size: 13px; cursor: pointer; text-decoration: underline; padding: 5px 8px;
}
#cs-episodes .cs-clearall:hover { color: var(--cs-accent); }

/* ---- Results meta ---- */
#cs-episodes .cs-meta { text-align: center; color: var(--cs-text-dim); font-size: 14px; margin: 20px 0 22px; }
#cs-episodes .cs-meta strong { color: var(--cs-accent); font-weight: 700; }

/* ---- Status (loading / error) ---- */
#cs-episodes .cs-status { text-align: center; padding: 70px 20px; color: var(--cs-text-dim); }
#cs-episodes .cs-spinner {
  width: 38px; height: 38px; margin: 0 auto 16px; border-radius: 50%;
  border: 3px solid var(--cs-border); border-top-color: var(--cs-accent);
  animation: cs-spin 0.9s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }
#cs-episodes .cs-status a { color: var(--cs-accent); }

/* ---- Cards ---- */
#cs-episodes .cs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px;
}
#cs-episodes .cs-card {
  background: var(--cs-bg-card); border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
}
#cs-episodes .cs-card:hover { border-color: #4a4a4a; transform: translateY(-2px); }
#cs-episodes .cs-card-top { display: flex; gap: 14px; padding: 16px 16px 0; }
#cs-episodes .cs-art {
  width: 86px; height: 86px; flex: none; border-radius: 10px; object-fit: cover;
  background: var(--cs-bg-soft); border: 1px solid var(--cs-border);
}
#cs-episodes .cs-card h3 { margin: 2px 0 6px; font-size: 16.5px; line-height: 1.35; font-weight: 700; color: var(--cs-text) !important; }
#cs-episodes .cs-card .cs-date { color: var(--cs-text-dim); font-size: 12.5px; }
#cs-episodes .cs-card .cs-date .cs-dot { margin: 0 6px; color: #555; }
#cs-episodes .cs-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
#cs-episodes .cs-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px;
  border-radius: 999px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--cs-border); color: var(--cs-text-dim); background: transparent;
  font-family: inherit;
}
#cs-episodes .cs-tag:hover { border-color: var(--cs-accent); color: var(--cs-accent); }
#cs-episodes .cs-tag.cs-tag-guest { border-color: var(--cs-accent); color: var(--cs-accent); background: var(--cs-accent-soft); }
#cs-episodes .cs-tag.cs-tag-band { border-color: var(--cs-gold); color: var(--cs-gold); background: var(--cs-gold-soft); }
/* Birthday pill: click to see every episode with a guest born on that date. */
#cs-episodes .cs-dob {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.2px;
  border-radius: 999px; padding: 3px 10px; cursor: pointer;
  border: 1px solid var(--cs-border); color: var(--cs-text-dim); background: transparent;
  display: inline-flex; align-items: center; gap: 4px; font-family: inherit;
}
#cs-episodes .cs-dob:hover { border-color: var(--cs-gold); color: var(--cs-gold); }
/* Birthday within the coming week: gold. Today: red (matches the banner). */
#cs-episodes .cs-dob.cs-dob-soon {
  border-color: var(--cs-gold); color: var(--cs-gold); background: var(--cs-gold-soft);
}
#cs-episodes .cs-dob.cs-dob-today {
  border-color: var(--cs-accent); color: var(--cs-accent); background: var(--cs-accent-soft);
}
#cs-episodes .cs-dob.cs-dob-today:hover { border-color: var(--cs-accent); color: var(--cs-accent); }

/* ---- Birthday banner: small, quiet, classy — not a big visual moment ---- */
#cs-episodes .cs-bday-banner {
  max-width: 720px; margin: 16px auto 0; padding: 8px 18px;
  background: transparent; border: 1px solid var(--cs-gold);
  border-radius: 999px; text-align: center; font-size: 12.5px; font-weight: 600;
  color: var(--cs-gold); letter-spacing: 0.1px;
}
#cs-episodes .cs-bday-banner button {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: inherit; text-decoration: underline;
}
#cs-episodes .cs-bday-banner button:hover { color: var(--cs-accent); }
#cs-episodes .cs-bday-banner .cs-bday-more { color: var(--cs-text-dim); font-weight: 600; }
/* Inferred (auto-detected) chips: dashed border marks them as best-guess
   until the episode gets a real [[CS1]] tag. */
#cs-episodes .cs-tag.cs-tag-inferred { border-style: dashed; }
#cs-episodes .cs-desc {
  padding: 10px 16px 0; color: var(--cs-text-dim); font-size: 13.5px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#cs-episodes .cs-card.cs-expanded .cs-desc { display: block; -webkit-line-clamp: unset; }
#cs-episodes .cs-more {
  background: none; border: none; color: var(--cs-accent); font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; padding: 6px 16px 0; text-align: left; align-self: flex-start;
}
#cs-episodes .cs-card-foot { margin-top: auto; padding: 14px 16px 16px; }
#cs-episodes .cs-play {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
  color: #ffffff; background: var(--cs-accent); border: none; border-radius: 999px;
  padding: 11px 18px; cursor: pointer; transition: filter 0.15s;
}
#cs-episodes .cs-play:hover { filter: brightness(1.08); }
#cs-episodes .cs-play svg { width: 14px; height: 14px; }
#cs-episodes .cs-player iframe {
  width: 100%; height: 44px; border: 0; border-radius: 8px; display: block;
}

/* ---- Load more ---- */
#cs-episodes .cs-loadmore {
  display: block; margin: 34px auto 0; font: inherit; font-size: 15px; font-weight: 700;
  color: var(--cs-accent); background: transparent; border: 1px solid var(--cs-accent);
  border-radius: 999px; padding: 12px 34px; cursor: pointer; transition: background .15s;
}
#cs-episodes .cs-loadmore:hover { background: var(--cs-accent-soft); }

/* ---- Credit footer ---- */
#cs-episodes .cs-credit {
  margin: 48px 0 0; padding-top: 20px; border-top: 1px solid var(--cs-border);
  text-align: center; color: var(--cs-text-dim); font-size: 13px;
}
#cs-episodes .cs-credit a { color: inherit; text-decoration: none; }
#cs-episodes .cs-credit a:hover { color: var(--cs-gold); text-decoration: underline; }
#cs-episodes .cs-credit img {
  height: 20px; width: auto; vertical-align: -5px; margin: 0 2px;
}

/* ---- No results ---- */
#cs-episodes .cs-noresults { text-align: center; padding: 60px 20px; color: var(--cs-text-dim); }
#cs-episodes .cs-noresults strong { color: var(--cs-text); }

@media (max-width: 560px) {
  #cs-episodes { padding: 28px 14px 56px; }
  #cs-episodes .cs-grid { grid-template-columns: 1fr; }
  #cs-episodes .cs-facet-panel { position: fixed; left: 14px; right: 14px; top: 50%; transform: translateY(-50%); max-width: none; max-height: 76vh; }
}