/* AURORA THEME (theme_css=aurora.css) — the bespoke Aurora skin over the design
   settings: gradient wordmark/title/highlight, orb-lit dark surfaces, accent bars.
   Loaded after the design-settings stylesheet, before the user's custom_css. Every
   gradient/orb color is var(--accent-N-color) / var(--orb-N-color), derived from the
   podcast's primary (derive_gradient_palette in colors.py). */

/* ---------- NAVBAR ---------- */
.show-page .navbar-brand,
.show-page .navbar-brand div {
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--accent-1-color, #818cf8), var(--accent-2-color, #f472b6));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  /* clip:text paints only within the glyph box; padding-bottom keeps a descender
     (a trailing g/y/p in the show name) from rendering transparent (clipped). */
  line-height: 1.2; padding-bottom: 0.12em;
}
/* pill nav: rounds the hover/focus/open background (padding + hover color are the
   platform default, so only the radius is set here) */
.navbar-nav .nav-link { border-radius: 100px !important; }
.navbar-nav .nav-link:hover { color: var(--heading-color) !important; }
/* nav CTA geometry only — the gradient fill comes from button_style: gradient */
#nav-cta .btn,
.navbar .btn-base-1 { padding: 10px 22px !important; font-weight: 700 !important; }
.nav-dropdown-menu,
.dropdown-menu { border-radius: var(--border-radius-card) !important; }

/* ---------- HERO ---------- */
#header-hero .mask { display: none !important; }
/* the achievement-badge renders as a native pill (achievement_badge_format); aurora
   only tints its colors, and only for the pill format — the plain "text" eyebrow
   format stays accented text with no box */
/* badge text defaults to the primary, but NOT !important (and the fill follows
   color) so a customer's achievement_badge_text_color — emitted !important in the
   design-settings stylesheet, which loads before this file — wins when they set it. */
#homepage-header-achievement-badge {
  color: var(--primary-color);
  -webkit-text-fill-color: currentColor;
}
/* soft primary tint as the default pill fill, but NOT !important so a customer's
   achievement_badge_background_color (emitted !important in the design-settings
   stylesheet) wins when they set one. */
#homepage-header-achievement-badge.rounded-pill {
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
}
/* -webkit-background-clip:text paints the gradient only within the glyph box, so
   descenders (g/y/p) that fall outside it render transparent and look clipped. The
   leading clears inner lines; padding-bottom extends the paint area under the last. */
#homepage-header-title { line-height: 1.15 !important; padding-bottom: 0.22em !important; }
/* gradient the whole title only when there's no *highlight* span */
#homepage-header-title:not(:has(.text-highlight)) {
  background: linear-gradient(115deg, var(--accent-1-color, #818cf8) 0%, var(--accent-2-color, #f472b6) 35%, var(--accent-3-color, #38bdf8) 65%, var(--accent-1-color, #818cf8) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  color: transparent !important;
}
/* .text-highlight gradient is the system accent_style now (accent--gradient),
   driven off --heading-highlight-color — not hand-rolled here. */
.podpage-player .pp-player-card,
.plyr_grid_container { border-radius: var(--border-radius-card) !important; }
.pp-podcast-name { color: var(--primary-color) !important; }
.pp-episode-title { color: var(--heading-color) !important; }

/* ---------- EPISODE CARDS ---------- */
/* material + hover lift come from Surface: Glass; radius from card_border_radius */
.pp-card.card { position: relative; }   /* anchors the ::before accent bars */
/* text-only grid cards — image hidden so it's title + accent bar only */
.pp-card--vertical .pp-card-image { display: none !important; }
.pp-card--vertical.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--accent-4-color, #6366f1), var(--accent-5-color, #ec4899), var(--accent-3-color, #38bdf8));
}
/* large featured card: left accent bar + "Latest" eyebrow */
.pp-card--large-card.card::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px; z-index: 2;
  background: linear-gradient(180deg, var(--accent-4-color, #6366f1), var(--accent-5-color, #ec4899), var(--accent-3-color, #38bdf8));
}
.pp-card--large-card .pp-card-date::before {
  content: '\2726\00a0 Latest Episode \00b7\00a0';
  color: var(--primary-color);
}
.pp-card--large-card .pp-card-image img { box-shadow: 0 12px 40px color-mix(in srgb, var(--accent-4-color) 30%, transparent) !important; }
/* card CTAs (featured = primary, regular = secondary) are the card_cta_style
   setting now — no hand-rolled CTA CSS here. */
/* card text */
.pp-card-date {
  color: var(--primary-color) !important;
  font-size: 0.62rem !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.pp-card-description, .pp-card-description.excerpt {
  color: var(--text-light-color) !important; font-size: 0.78rem !important; line-height: 1.7 !important;
}

/* ---------- FOOTER ---------- */
/* Deliberate override of footer_background_color: aurora forces the footer
   transparent so the page's bottom orbs show through. (A blank footer bg resolves
   to a solid COMPONENT_BG tint, and there's no footer "background style" enum to
   opt into transparent — so it lives here.) */
#footer.footer { background: transparent !important; border-top: 1px solid var(--border-color); }
#footer.footer .heading {
  background: linear-gradient(135deg, var(--accent-1-color, #818cf8), var(--accent-2-color, #f472b6));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  color: transparent !important; font-weight: 800 !important;
}
.footer-links a:hover, .copy-links a:hover, #footer.footer a:hover { color: var(--primary-color) !important; }

/* ---------- MISC ---------- */
::selection { background: color-mix(in srgb, var(--primary-color) 40%, transparent); color: #fff; }
.modal-content { border-radius: var(--border-radius-card) !important; }