/* =========================================================
   3 GUYS IN A BASEMENT — Podbean custom CSS starter
   Aesthetic: warm, dim basement / nostalgic analog
   ---------------------------------------------------------
   HOW TO USE
   1. Podbean dashboard → Distribution → Podcast Website →
      Customize → CSS Editor (top-left).
   2. Paste this whole block in. Click Save Now.
   3. Some rules below are GLOBAL and should just work.
   4. The blocks marked  >>> PASTE YOUR SELECTOR  need the
      selector for that piece of YOUR theme. Get it from the
      LIVE site (not customize mode): right-click the element
      → Inspect → Copy → Copy selector → paste it where shown.
   5. Pair this with Podbean's DARK theme mode for best results.
   ========================================================= */

/* ---- Fonts (Google Fonts are supported by Podbean) ---- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Spectral:ital,wght@0,300;0,400;0,500;1,400&display=swap');

/* ---- Palette (edit these to retune the whole site) ---- */
:root {
  --bg:        #17120d;  /* deep basement brown-black     */
  --surface:   #241b13;  /* cards / panels                */
  --surface-2: #2f231a;  /* hover / raised                */
  --amber:     #e6a141;  /* warm bulb — primary accent    */
  --amber-lt:  #f4c074;  /* brighter amber for hovers     */
  --cream:     #ece0cf;  /* main text                     */
  --muted:     #a8927a;  /* secondary text                */
  --line:      #3a2c1f;  /* borders / dividers            */
}

/* ---- Global base ---- */
body {
  background-color: var(--bg) !important;
  color: var(--cream) !important;
  font-family: 'Spectral', Georgia, serif !important;
  line-height: 1.65;
}

/* Headings — condensed, basement-poster feel */
h1, h2, h3, h4, h5,
.site-title, .podcast-title {
  font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
  color: var(--cream) !important;
  letter-spacing: 0.5px;
}

/* The show title — make it loud */
h1, .site-title, .podcast-title {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
}

/* Body copy / descriptions */
p, .description, .episode-description, li, span {
  color: var(--cream) !important;
}
.subtitle, .meta, .date, .duration, small {
  color: var(--muted) !important;
}

/* ---- Links ---- */
a { color: var(--amber) !important; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--amber-lt) !important; }

/* ---- Buttons (subscribe, play, etc.) ---- */
button,
.btn,
a.button,
input[type="submit"] {
  background: linear-gradient(180deg, var(--amber), #c97f23) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  transition: filter .15s ease;
}
button:hover, .btn:hover, a.button:hover { filter: brightness(1.12) !important; }

/* Secondary / outline buttons */
.btn-outline, .button-secondary {
  background: transparent !important;
  color: var(--amber) !important;
  border: 1px solid var(--amber) !important;
}

/* =========================================================
   THEME-SPECIFIC BLOCKS
   These need YOUR selectors. Replace the placeholder
   selector on each line (keep the { ... } rules), using
   Inspect → Copy selector from your live site.
   Delete any block you don't need.
   ========================================================= */

/* ---- Page header / hero banner ---- */
/* >>> PASTE YOUR HEADER SELECTOR before the comma below */
.site-header, .header, header {
  background-color: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* ---- Navigation bar links ---- */
/* >>> PASTE YOUR NAV SELECTOR */
.nav a, .navbar a, .menu a {
  color: var(--cream) !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}
.nav a:hover, .navbar a:hover, .menu a:hover { color: var(--amber) !important; }

/* ---- Episode list / cards ---- */
/* >>> PASTE YOUR EPISODE-CARD SELECTOR */
.episode, .episode-item, .episode-card, .post {
  background-color: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  transition: background-color .15s ease;
}
.episode:hover, .episode-item:hover, .episode-card:hover {
  background-color: var(--surface-2) !important;
}

/* ---- Episode title links ---- */
/* >>> PASTE YOUR EPISODE-TITLE SELECTOR */
.episode-title, .episode-title a {
  font-family: 'Oswald', sans-serif !important;
  color: var(--cream) !important;
  font-weight: 600 !important;
}

/* ---- Footer ---- */
/* >>> PASTE YOUR FOOTER SELECTOR */
.site-footer, .footer, footer {
  background-color: var(--surface) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--line) !important;
}

/* ---- Optional: subtle film-grain / vignette on the body ----
   Adds a dim, lived-in basement feel. Remove if too heavy. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%,
              rgba(230,161,65,0.06), transparent 60%);
  z-index: 0;
}

/* =========================================================
   TUNING NOTES
   - Too dark? Lighten --bg toward #211913.
   - Amber too orange? Try --amber: #d8a657 (more brass/gold).
   - Headings too tall/condensed? Swap 'Oswald' for
     'Libre Franklin' in the @import and the h1..h5 rules.
   - If a rule doesn't take, the theme's own selector is more
     specific — grab it via Inspect and paste it in.
   ========================================================= */