/* ===========================
   Spooked main.css (clean rebuild)
   - Fixes broken dropdown CSS + missing braces
   - Removes duplicated / conflicting episode filter styles
   - Adds scoped, non-colliding Episodes Archive styling
   =========================== */

:root{
	--bg:#050505;
	--bg2:#0b0b0b;
	--text:#f2f2f2;
	--muted:#b7b7b7;
	--line:#232323;
	--accent:#ff3b30;
	--shadow: 0 14px 45px rgba(0,0,0,.55);
	--radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	background: radial-gradient(1200px 600px at 50% -100px, rgba(255,59,48,.12), transparent 60%), var(--bg);
	color:var(--text);
	font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

a{color:inherit}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}

.container{max-width:1120px;margin:0 auto;padding:0 18px}
.narrow{max-width:820px}

.screen-reader-text{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:18px;top:18px;width:auto;height:auto;background:#fff;color:#000;padding:10px 12px;border-radius:10px;z-index:10000}

/* ===========================
   Header
   =========================== */
.site-header{
	position:sticky;
	top:0;
	z-index:40;
	background:rgba(5,5,5,.75);
	backdrop-filter: blur(10px);
	border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	padding:14px 0
}
.site-title{
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	text-decoration:none
}
.custom-logo{max-height:46px;width:auto}

.primary-nav ul{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	gap:18px;
	align-items:center
}
.primary-nav a{
	text-decoration:none;
	font-size:13px;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--muted)
}
.primary-nav a:hover{color:var(--text)}

.menu-toggle{display:none;background:transparent;border:0;padding:10px;cursor:pointer}
.menu-toggle__bar{display:block;width:22px;height:2px;background:var(--text);margin:4px 0;opacity:.85}

/* ===========================
   Dropdown menus (fixed)
   =========================== */
.primary-nav ul li{position:relative}

/* Hide submenus by default */
.primary-nav ul ul{
	position:absolute;
	top:100%;
	left:0;
	min-width:220px;
	background:rgba(5,5,5,.95);
	border:1px solid rgba(255,255,255,.08);
	border-radius:12px;
	padding:8px 0;
	opacity:0;
	visibility:hidden;
	transform:translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index:100;
}

/* Show on hover (desktop) */
.primary-nav ul li:hover > ul{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

/* Submenu links */
.primary-nav ul ul li a{
	display:block;
	padding:10px 16px;
	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted);
	white-space:nowrap;
}
.primary-nav ul ul li a:hover{
	background:rgba(255,255,255,.06);
	color:var(--text);
}

/* ===========================
   Hero
   =========================== */
.hero{
	position:relative;
	min-height:68vh;
	display:flex;
	align-items:center
}
.hero__bg{
	position:absolute;
	inset:0;
	background:
		radial-gradient(900px 600px at 50% 10%, rgba(0,0,0,.0), rgba(0,0,0,.85) 70%),
		linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.95));
	background-size:cover;
	background-position:center;
	filter:saturate(.95) contrast(1.05);
}
.hero__inner{position:relative;padding:72px 0 44px;text-align:center}
.hero__brand{display:flex;justify-content:center}
.hero__title{
	margin:0 0 18px;
	font-size:44px;
	letter-spacing:.12em;
	text-transform:uppercase;
}
.hero__cta{
	display:flex;
	gap:12px;
	justify-content:center;
	flex-wrap:wrap;
	margin:18px 0 14px
}
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 16px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.14);
	text-decoration:none;
	font-size:13px;
	letter-spacing:.18em;
	text-transform:uppercase;
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.btn--primary{
	background: linear-gradient(180deg, rgba(255,59,48,.95), rgba(255,59,48,.72));
	border-color: rgba(255,59,48,.35);
}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{background: rgba(10,10,10,.35)}
.hero__note{max-width:58ch;margin:0 auto;color:var(--muted);font-size:15px}

/* ===========================
   Sections
   =========================== */
.latest{padding:34px 0 64px}
.section-head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:12px;
	margin:0 0 16px
}
.section-title{
	margin:0;
	font-size:18px;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:rgba(255,255,255,.9);
}

/* ===========================
   Cards
   =========================== */
.cards{
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:18px;
}
.cards--compact{grid-template-columns: repeat(4, minmax(0, 1fr))}
.card{
	background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
	border: 1px solid rgba(255,255,255,.07);
	border-radius: var(--radius);
	overflow:hidden;
	box-shadow: var(--shadow);
}
.card__thumb{
	display:block;
	aspect-ratio: 2/1;
	background: #111;
	overflow:hidden;
}
.card__thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	transform:scale(1.01)
}
.card__thumb:hover img{transform:scale(1.06);transition:transform .35s ease}
.thumb-fallback{
	width:100%;
	height:100%;
	background: radial-gradient(700px 260px at 50% 10%, rgba(255,59,48,.14), rgba(0,0,0,.0) 60%), #0f0f0f
}
.card__body{padding:14px 14px 16px}
.card__meta{margin:0 0 8px;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.card__title{margin:0;font-size:18px;line-height:1.25}
.card__title a{text-decoration:none}
.card__excerpt{color:var(--muted);font-size:14px}

/* Result Cards (if used elsewhere) */
.article.result-card{
	background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

/* ===========================
   Single
   =========================== */
.single__head{margin:26px 0 14px}
.single__meta{margin:0 0 10px;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.single__title{margin:0;font-size:40px;line-height:1.12}
.single__hero{margin:18px 0;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.single__content{color:rgba(255,255,255,.92)}
.single__content p{margin:0 0 1em}
.single__content h2,.single__content h3{margin:1.2em 0 .4em}
.tags{color:var(--muted);font-size:13px}
.post-nav{margin:26px 0 60px}

/* ===========================
   Footer
   =========================== */
.site-footer{border-top:1px solid rgba(255,255,255,.06);background:rgba(5,5,5,.9)}
.footer-inner{
	padding:22px 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	flex-wrap:wrap
}
.footer-note{margin:0;color:var(--muted);font-size:13px}
.footer-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex-wrap:wrap}
.footer-nav a{text-decoration:none;color:var(--muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.footer-nav a:hover{color:var(--text)}

/* ===========================
   Pagination
   =========================== */
.pagination{margin:22px 0 60px}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:40px;
	height:40px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.12);
	text-decoration:none;
	color:var(--muted)
}
.page-numbers.current{background:rgba(255,255,255,.08);color:var(--text);border-color:rgba(255,255,255,.18)}

/* ===========================
   Podcast player
   =========================== */
.pod-player{
	margin: 18px 0 22px;
	padding: 14px;
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,.08);
	background: rgba(255,255,255,.03);
	box-shadow: var(--shadow);
}
.pod-player audio{width:100%}
.pod-subscribe{margin:18px 0}

/* ===========================
   Episode search select (existing)
   =========================== */
.episode-search__select{
	padding:12px 14px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.14);
	background: rgba(10,10,10,.35);
	color: var(--text);
	outline:none;
}

/* ===========================
   Episodes Archive (SCOPED + non-colliding)
   Works with archive-episode.php markup using:
   - .spooked-episodes, .spooked-hero, .spooked-controls
   - .spooked-chips with .spooked-chip
   - .episode-grid, .episode-card, .episode-pill
   =========================== */
.spooked-episodes .spooked-hero{
	padding:44px 0 18px;
	border-bottom:1px solid rgba(255,255,255,.06);
}
.spooked-episodes .spooked-hero__inner{
	max-width:1120px;
	margin:0 auto;
	padding:0 18px;
}
.spooked-episodes .spooked-hero__kicker{
	margin:0 0 10px;
	font-size:12px;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--muted);
}
.spooked-episodes .spooked-hero__title{
	margin:0 0 10px;
	font-size:34px;
	line-height:1.08;
	letter-spacing:.02em;
}
.spooked-episodes .spooked-hero__sub{
	margin:0 0 18px;
	color:var(--muted);
	max-width:60ch;
}

.spooked-episodes .spooked-controls{display:grid;gap:12px}
.spooked-episodes .spooked-control{display:grid;gap:6px}
.spooked-episodes .spooked-control__label{
	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted);
}
.spooked-episodes .spooked-control__select{
	padding:12px 14px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.14);
	background: rgba(10,10,10,.35);
	color: var(--text);
	outline:none;
	max-width:360px;
	width:100%;
}

.spooked-episodes .spooked-sort{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	align-items:center;
}
.spooked-episodes .spooked-sort a{
	text-decoration:none;
	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--muted);
}
.spooked-episodes .spooked-sort a.is-active{
	color:var(--text);
	text-decoration:underline;
	text-underline-offset:3px;
}

.spooked-episodes .spooked-chips{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}
.spooked-episodes .spooked-chip{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:8px 12px;
	border-radius:999px;
	border:1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.03);
	color:var(--muted);
	text-decoration:none;
	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;
}
.spooked-episodes .spooked-chip:hover{
	color:var(--text);
	border-color:rgba(255,255,255,.22);
}
.spooked-episodes .spooked-chip.is-active{
	color:var(--text);
	border-color:rgba(255,255,255,.32);
	background:rgba(255,255,255,.06);
	font-weight:700;
}

.spooked-episodes .spooked-results{padding:22px 0 60px}

.spooked-episodes .episode-grid{
	max-width:1120px;
	margin:0 auto;
	padding:0 18px;
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:18px;
}

.spooked-episodes .episode-card{
	background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
	border: 1px solid rgba(255,255,255,.07);
	border-radius: var(--radius);
	overflow:hidden;
	box-shadow: var(--shadow);
	transition: transform .16s ease, border-color .16s ease;
}
.spooked-episodes .episode-card:hover{
	transform:translateY(-2px);
	border-color:rgba(255,255,255,.14);
}
.spooked-episodes .episode-card__link{
	display:block;
	text-decoration:none;
	color:inherit;
}
.spooked-episodes .episode-card__art{
	position:relative;
	aspect-ratio: 2 / 1;
	background:#111;
	overflow:hidden;
}
.spooked-episodes .episode-card__art img{
	width:100%;
	height:100%;
	object-fit:cover;
	transform:scale(1.01);
}
.spooked-episodes .episode-card:hover .episode-card__art img{
	transform:scale(1.06);
	transition:transform .35s ease;
}
.spooked-episodes .episode-pill{
	position:absolute;
	left:12px;
	bottom:12px;
	padding:6px 10px;
	border-radius:999px;
	background:rgba(5,5,5,.75);
	border:1px solid rgba(255,255,255,.14);
	color:var(--text);
	font-size:12px;
	letter-spacing:.12em;
	text-transform:uppercase;
}
.spooked-episodes .episode-card__body{padding:14px 14px 16px}
.spooked-episodes .episode-card__title{margin:0 0 8px;font-size:18px;line-height:1.25}
.spooked-episodes .episode-card__meta{
	margin:0 0 10px;
	color:var(--muted);
	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;
}
.spooked-episodes .episode-card__excerpt{margin:0;color:var(--muted);font-size:14px}
.spooked-episodes .episode-card__cta{
	margin-top:12px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}
.spooked-episodes .cta-link{
	font-size:12px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:rgba(255,255,255,.9);
}

.spooked-episodes .spooked-pagination{
	max-width:1120px;
	margin:22px auto 0;
	padding:0 18px;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 980px){
	.cards{grid-template-columns: repeat(2, minmax(0, 1fr))}
	.cards--compact{grid-template-columns: repeat(2, minmax(0, 1fr))}
	.single__title{font-size:34px}
	.spooked-episodes .episode-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
}
@media (max-width: 760px){
	.menu-toggle{display:inline-flex}
	.primary-nav{display:none}
	.primary-nav.is-open{display:block;width:100%}
	.primary-nav ul{flex-direction:column;align-items:flex-start;padding:12px 0}
	.header-inner{flex-wrap:wrap}
	.hero__inner{padding:56px 0 34px}
	.hero__title{font-size:34px}
	.cards{grid-template-columns: 1fr}
	.cards--compact{grid-template-columns: 1fr}

	/* Mobile submenu behavior */
	.primary-nav ul ul{
		position:static;
		transform:none;
		opacity:1;
		visibility:visible;
		display:none;
		border:none;
		background:transparent;
		padding:0 0 0 14px;
	}
	.primary-nav li.submenu-open > ul{display:block}

	/* Episodes archive */
	.spooked-episodes .spooked-hero{padding:34px 0 14px}
	.spooked-episodes .spooked-hero__title{font-size:28px}
	.spooked-episodes .episode-grid{grid-template-columns: 1fr}
}

/* ===========================
   Supercast component styling
   =========================== */
supercast-plan, supercast-purchase{
	font-family: sans-serif;
	color: black;
	font-size: 12pt;
	text-align: left;
	--supercast-button-background-color: #000;
	}

/* PAGE EDITOR base */
.editor-styles-wrapper {
  background: #050505;
  color: #f5f5f5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Headings */
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3 {
  color: #ffffff;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Body text */
.editor-styles-wrapper p {
  color: #d8d8d8;
  line-height: 1.6;
  max-width: 65ch;
}

/* Buttons */
.editor-styles-wrapper .wp-block-button__link {
  border-radius: 999px;
  background: linear-gradient(180deg, #ff3b30, #c92a21);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
}

/* Cards (match front-end classes) */
.editor-styles-wrapper .card {
  background: rgba(15,15,15,.85);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px;
}

.editor-styles-wrapper .card__meta {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .7;
}

.editor-styles-wrapper .card__title {
  font-size: 18px;
  margin: 6px 0;
}
/* team page thumbnails and cards */
.team__thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}
.team-card .card__thumb {
  margin-bottom: 10px;
}

/* Team grid wrapper (Gutenberg Group with class "team-grid") */
.team-grid{
  max-width: 1200px;
  margin-left:auto;
  margin-right:auto;
}



/* Make Gutenberg "card" groups behave like real cards */
.team-grid .team-card{
  background: rgba(15,15,15,.85);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
}

.team-grid .team-card .wp-block-image{
  margin: 0 0 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.team-grid .team-card .wp-block-image img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display:block;
}

.team-grid .team-card .card__meta{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
  margin: 0 0 6px;
}

.team-grid .team-card .card__title{
  font-size: 18px;
  margin: 0 0 10px;
}

.team-grid .team-card .card__excerpt{
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  margin: 0;

  /* Optional: keeps rows tidy */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bio wrapper (JS creates this) */
.team-grid .team-bio-wrap{
  position: relative;
  overflow: hidden;
  max-height: 12.5em;       /* ~8 lines at 1.55 line-height */
}

/* Expanded state */
.team-grid .team-bio-wrap.is-expanded{
  max-height: none;
}

/* Nice fade at bottom when collapsed */
.team-grid .team-bio-wrap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 3.2em;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.92));
  pointer-events:none;
}

.team-grid .team-bio-wrap.is-expanded::after{
  display:none;
}

/* READ Button */
.team-grid .team-readmore{
  margin-top: 10px;
  background: transparent;
  border: 0px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}


.team-grid .team-readmore:hover{
  border-color: rgba(255,255,255,.22);
}

.team-grid .team-readmore:focus{
  outline: 1px solid rgba(255,255,255,.25);
  outline-offset: 1px;
}

/* ===== Team Bio Clamp (works with multiple <p> blocks) ===== */

/* put the name/role at the top, and treat everything after as "bio" */
.team-grid .team-card{
  display:flex;
  flex-direction:column;
}

/* Create a clamp region using the card body content */
.team-grid .team-card .wp-block-group__inner-container{
  display:flex;
  flex-direction:column;
}

/* Wrap/clamp everything AFTER the name heading */
.team-grid .team-card h3,
.team-grid .team-card h2{
  margin-bottom: 10px;
}

/* This targets ALL paragraphs after the name heading and clamps them as a unit */
.team-grid .team-card .team-bio-wrap{
  position: relative;
  overflow: hidden;
  max-height: 12.5em; /* ~8 lines */
}

/* Hide fade when expanded */
.team-grid .team-card .team-bio-wrap.is-expanded{
  max-height:none;
}

.team-grid .team-card .team-bio-wrap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 3.2em;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.92));
  pointer-events:none;
}
.team-grid .team-card .team-bio-wrap.is-expanded::after{ display:none; }