/* RETRO THEME (theme_css=retro.css) — 70s schoolhouse: a warm cream ground,
   rounded everything, mustard + rust, a chunky rounded-serif/sans display, and
   the feed as a friendly "syllabus" of rounded rows with mustard circle numbers.

   Colors/type/radii come from settings (background_color, text_color,
   primary_color, heading_font, default_border_radius_style and
   homepage_feed_layout). This file owns only the bespoke skin: the mustard
   circle numerals, responsive syllabus grid, and hero artwork treatment. */

:root {
  --re-rust: var(--primary-color);      /* accent — primary_color is protected, own it here */
  --re-mustard: var(--heading-highlight-color);   /* mustard second hue, on heading_highlight_color (§5.2) */
  --re-card: var(--card-bg-color);
  --re-ink: var(--text-color);
  --re-rule: var(--border-color);
  --re-muted: color-mix(in srgb, var(--text-color) 60%, transparent);
}

/* ---------- NAV ---------- */
.navbar-nav .nav-link:hover { color: var(--re-rust) !important; }
#nav-cta .btn, .navbar .btn-base-1 {
  border: none !important; padding: 10px 22px !important;
}

/* ---------- HERO: rounded rust panel ---------- */
/* the rounded rust hero panel is the section_background_width:centered treatment
   (transparent #header-hero, rust bg + 40px radius on .section-wrapper) — don't
   re-roll it here. Just clip the panel so nothing pokes past the rounded corners. */
#header-hero { border-bottom: none !important; }
#header-hero .section-wrapper { overflow: hidden !important; }
#homepage-header-title .text-highlight {
  color: var(--re-mustard) !important; background: none !important; -webkit-text-fill-color: var(--re-mustard) !important;
}
#homepage-header-description { color: color-mix(in srgb, var(--header-text-color) 85%, transparent) !important; }
/* artwork: gold rounded border */
#header-hero #c-artwork img {
  border: 3px solid var(--re-mustard) !important;
  box-shadow: 0 16px 44px color-mix(in srgb, var(--text-color) 25%, transparent);
}
/* CTAs: mustard pill + white outline pill */
#header-hero #c-text .btn {
  font-weight: 700 !important; padding: 12px 24px !important; box-shadow: none !important;
  background: transparent !important; color: var(--header-text-color) !important; border: 1.5px solid color-mix(in srgb, var(--header-text-color) 60%, transparent) !important;
}
#header-hero #c-text .btn:first-child {
  background: var(--re-mustard) !important; color: var(--re-ink) !important; border-color: var(--re-mustard) !important;
}
#header-hero #c-text .btn:hover { background: var(--re-mustard) !important; color: var(--re-ink) !important; border-color: var(--re-mustard) !important; }

/* ---------- THE SYLLABUS (list feed) ---------- */
.feed-section, .slice { border-color: var(--re-rule) !important; }
#recent-episodes-header .col-4 a {
  font-size: 0.8rem; font-weight: 700;
}
/* rows: rounded cream cards laid out as [ circle | title+desc | play+meta ].
   The card body holds number/date/title/description/cta in DOM order, so grid
   placement pulls each into its column/row rather than stacking them. */
.feed-section .pp-card.card {
  background: var(--re-card) !important; border: 1px solid var(--re-rule) !important;
  margin-bottom: 14px !important;
}
.feed-section .pp-card .pp-card-body {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 26px; row-gap: 6px; align-items: center;
}
.feed-section .pp-card-episode-number {
  display: flex !important; align-items: center; justify-content: center;
  grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center;
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 58px;
  background: var(--re-mustard) !important; color: var(--re-ink) !important;
  font-family: var(--body-font), system-ui, sans-serif !important;
  font-size: 1.2rem !important; font-weight: 800 !important; line-height: 1 !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
.feed-section .pp-card-title,
.feed-section .pp-card-title a {
  grid-column: 2 !important; grid-row: 1 !important; align-self: end;
  line-height: 1.3 !important;
}
.feed-section .pp-card-title a:hover { color: var(--re-rust) !important; }
.feed-section .pp-card-description {
  grid-column: 2 !important; grid-row: 2 !important; align-self: start; margin: 0 !important;
  color: var(--re-muted) !important; font-size: 0.9rem !important; line-height: 1.55 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* right rail: play pill on top, date below. public_styles hides the CTA in
   horizontal cards via `.pp-card--horizontal[data-object-type=episode] .pp-card-cta`
   (0,3,0 !important) — this selector (0,4,0) reveals it. */
.feed-section .pp-card.card .pp-card--horizontal .pp-card-cta,
.feed-section .pp-card--horizontal.card .pp-card-cta,
.feed-section .pp-card.card .pp-card-cta {
  display: block !important;
  grid-column: 3 !important; grid-row: 1 !important; justify-self: end; align-self: end; margin: 0 !important;
}
.feed-section .pp-card-cta a {
  margin-top: 0 !important; white-space: nowrap;
}
.feed-section .pp-card-date {
  grid-column: 3 !important; grid-row: 2 !important; justify-self: end; align-self: start;
  color: var(--re-muted) !important; font-size: 0.72rem !important; font-weight: 600; white-space: nowrap;
}

@media (max-width: 767px) {
  .feed-section .pp-card .pp-card-body {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 16px;
    padding: 20px !important;
  }
  .feed-section .pp-card-episode-number { grid-column: 1 !important; grid-row: 1 / span 2 !important; width: 48px; height: 48px; }
  .feed-section .pp-card-title, .feed-section .pp-card-title a { grid-column: 2 !important; grid-row: 1 !important; }
  .feed-section .pp-card-description { grid-column: 2 !important; grid-row: 2 !important; }
  .feed-section .pp-card.card .pp-card-cta { grid-column: 2 !important; grid-row: 3 !important; justify-self: start; align-self: start; margin-top: 12px !important; }
  .feed-section .pp-card-date { grid-column: 2 !important; grid-row: 4 !important; justify-self: start; }
}

/* ---------- FOOTER ---------- */
#footer.footer { border-top: 1px solid var(--re-rule); }
.footer-links a:hover, .copy-links a:hover, #footer.footer a:hover { color: var(--re-rust) !important; }