/**
 * Frontend player and chapter list.
 *
 * Uses CSS custom properties for easy theming.
 *
 * Width: the list is not "overflow" — it fills the post content column. The native
 * <audio> control is often narrower than the column; we cap the block with
 * --spc-max-width so player + chapters share one readable width (override in theme).
 */
.spc-player-wrapper {
	--spc-border: #dcdcde;
	--spc-bg-hover: #f6f7f7;
	--spc-bg-active: #e7f5fe;
	--spc-accent: #2271b1;
	--spc-text: #1d2327;
	--spc-muted: #646970;
	/* Max width of the whole block (audio + chapters). Default ~640px; use 100% for full-bleed. */
	--spc-max-width: min(100%, 40rem);

	margin: 1.5rem auto;
	max-width: var(--spc-max-width);
	width: 100%;
	box-sizing: border-box;
}

.spc-player-wrapper .spc-audio {
	width: 100%;
	display: block;
}

/* -------------------------------------------------------------------------
 * Stacked layout: built-in <audio> + chapters (one card, no gap between).
 * ------------------------------------------------------------------------- */
.spc-player-stack {
	border: 1px solid var(--spc-border);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

/* Flatten native control chrome so it meets the list (WebKit/Blink). */
.spc-player-stack .spc-audio {
	border-radius: 0;
	vertical-align: bottom;
}

.spc-player-stack .spc-audio::-webkit-media-controls-enclosure {
	border-radius: 0;
}

.spc-player-stack .spc-chapters {
	margin-top: 0;
}

.spc-player-stack .spc-chapters-list {
	border: none;
	border-radius: 0;
	background: transparent;
}

/* Separator between player and first chapter row */
.spc-player-stack .spc-chapters-item:first-child {
	border-top: 1px solid var(--spc-border);
}

.spc-chapters {
	margin-top: 0.75rem;
}

/* Pinned under embedded Audio block: tighten gap (DOM move in player.js) */
figure.wp-block-audio + .spc-player-wrapper.spc-chapters-only,
audio + .spc-player-wrapper.spc-chapters-only {
	margin-top: 0.35rem;
}

.spc-player-wrapper.spc-chapters-only .spc-chapters {
	margin-top: 0;
}

/* Full-width row below SSP/theme players (avoid sitting inside a flex item beside cover art). */
.spc-player-wrapper.spc-chapters-only {
	clear: both;
	float: none;
	width: 100%;
	min-width: 0;
	position: relative;
	z-index: auto;
}

/* Standalone chapter list (not stacked with our audio) */
.spc-player-wrapper:not(.spc-player-stack) .spc-chapters-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--spc-border);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.spc-player-stack .spc-chapters-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.spc-chapters-item + .spc-chapters-item {
	border-top: 1px solid var(--spc-border);
}

.spc-chapter {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.65rem 0.85rem;
	margin: 0;
	text-align: left;
	border: none;
	background: transparent;
	color: var(--spc-text);
	font: inherit;
	cursor: pointer;
	transition: background 0.15s ease;
}

.spc-chapter:hover,
.spc-chapter:focus-visible {
	background: var(--spc-bg-hover);
	outline: none;
}

.spc-chapter.is-active {
	background: var(--spc-bg-active);
	box-shadow: inset 3px 0 0 var(--spc-accent);
}

.spc-chapter:disabled,
.spc-chapter.spc-chapter-out-of-range {
	cursor: not-allowed;
	opacity: 0.55;
	color: var(--spc-muted);
}

.spc-chapter:disabled:hover,
.spc-chapter.spc-chapter-out-of-range:hover {
	background: transparent;
}

.spc-chapter-time {
	flex: 0 0 4.5rem;
	font-variant-numeric: tabular-nums;
	color: var(--spc-muted);
	font-size: 0.875rem;
}

.spc-chapter-title {
	flex: 1 1 auto;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
 * SSP / Castos typography: match chapter text to the Castos player UI.
 * Title matches .episode-title (Poppins 500, ~14px).
 * Time matches .player-panels-nav button / Subscribe|Share (Poppins 500, 12px, uppercase).
 * ------------------------------------------------------------------------- */
.spc-player-wrapper.spc-ssp-dark .spc-chapter-title,
.spc-player-wrapper.spc-ssp-light .spc-chapter-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
}

.spc-player-wrapper.spc-ssp-dark .spc-chapter-time,
.spc-player-wrapper.spc-ssp-light .spc-chapter-time {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
 * SSP / Castos dark mode integration.
 * JS adds .spc-ssp-dark when the nearest .castos-player has .dark-mode.
 * We read SSP's own CSS custom properties so custom colors carry over.
 * ------------------------------------------------------------------------- */
.spc-player-wrapper.spc-ssp-dark {
	--spc-border: rgba(255, 255, 255, 0.12);
	--spc-bg-hover: rgba(255, 255, 255, 0.08);
	--spc-bg-active: rgba(255, 255, 255, 0.14);
	--spc-accent: var(--ssp-play-btn-color, #dd4142);
	--spc-text: var(--ssp-dark-mode-text-color, #fff);
	--spc-muted: rgba(255, 255, 255, 0.6);
}

.spc-player-wrapper.spc-ssp-dark .spc-chapters-list {
	background: var(--ssp-dark-mode-bg2-color, #383344);
	border-color: var(--spc-border);
}

.spc-player-wrapper.spc-ssp-dark .spc-chapter.is-active {
	background: var(--spc-bg-active);
	box-shadow: inset 3px 0 0 var(--spc-accent);
}

/* -------------------------------------------------------------------------
 * SSP / Castos light mode integration.
 * JS adds .spc-ssp-light when the nearest .castos-player has .light-mode.
 * ------------------------------------------------------------------------- */
.spc-player-wrapper.spc-ssp-light {
	--spc-border: rgba(0, 0, 0, 0.1);
	--spc-bg-hover: rgba(0, 0, 0, 0.04);
	--spc-bg-active: rgba(0, 0, 0, 0.08);
	--spc-accent: var(--ssp-play-btn-color, #dd4142);
	--spc-text: var(--ssp-light-mode-text-color, #4b4659);
	--spc-muted: rgba(75, 70, 89, 0.6);
}

.spc-player-wrapper.spc-ssp-light .spc-chapters-list {
	background: var(--ssp-light-mode-bg1-color, #f0f0f0);
	border-color: var(--spc-border);
}

.spc-player-wrapper.spc-ssp-light .spc-chapter.is-active {
	background: var(--spc-bg-active);
	box-shadow: inset 3px 0 0 var(--spc-accent);
}

/* -------------------------------------------------------------------------
 * Flush: chapter list directly below the Castos player (no metadata gap).
 * JS adds .spc-flush-player when our wrapper is the immediate next sibling.
 * ------------------------------------------------------------------------- */
.spc-player-wrapper.spc-flush-player {
	margin-top: 0;
	/* Match the Castos player width exactly. */
	max-width: none;
	--spc-max-width: 100%;
}

.spc-player-wrapper.spc-flush-player .spc-chapters-list {
	border-top: none;
	border-radius: 0 0 4px 4px;
}

.spc-player-wrapper.spc-flush-player .spc-chapters {
	margin-top: 0;
}

/* Remove the Castos player's bottom rounding so it meets the chapter list. */
.castos-player + .spc-player-wrapper.spc-flush-player {
	margin-top: 0 !important;
}

.castos-player:has(+ .spc-player-wrapper.spc-flush-player),
.castos-player:has(+ .spc-player-wrapper.spc-flush-player) .player {
	border-radius: 4px 4px 0 0;
}

@media (max-width: 480px) {
	.spc-chapter {
		flex-wrap: wrap;
	}

	.spc-chapter-time {
		flex-basis: auto;
	}
}