/*
 * FM Pod Fetcher — Audio Player
 *
 * All visual properties are controlled by CSS custom properties.
 * Override any of these on `.fmpf-player` from your theme stylesheet:
 *
 *   .fmpf-player {
 *     --fmpf-bg:          #1a1a2e;
 *     --fmpf-accent:      #e94560;
 *     --fmpf-text:        #ffffff;
 *     --fmpf-text-muted:  rgba(255,255,255,0.6);
 *   }
 *
 * To fully replace the markup, create fmpf/player.php in your theme directory.
 */

/* =========================================================================
   Custom property defaults
   ========================================================================= */

.fmpf-player {
	/* Layout */
	--fmpf-padding:          1.5rem;
	--fmpf-gap:              1.25rem;
	--fmpf-border-radius:    12px;
	--fmpf-artwork-size:     88px;
	--fmpf-artwork-radius:   8px;

	/* Colour */
	--fmpf-bg:               #f4f4f5;
	--fmpf-accent:           #18181b;
	--fmpf-text:             #18181b;
	--fmpf-text-muted:       #71717a;

	/* Play button */
	--fmpf-btn-size:         2.75rem;
	--fmpf-btn-bg:           var(--fmpf-accent);
	--fmpf-btn-color:        #ffffff;
	--fmpf-btn-radius:       50%;

	/* Progress track */
	--fmpf-track-height:     4px;
	--fmpf-track-bg:         #d4d4d8;
	--fmpf-fill-bg:          var(--fmpf-accent);
	--fmpf-thumb-size:       13px;
	--fmpf-thumb-bg:         var(--fmpf-accent);

	/* Typography */
	--fmpf-title-size:       0.9375rem;
	--fmpf-meta-size:        0.8rem;
	--fmpf-time-size:        0.75rem;
}

/* =========================================================================
   Shell
   ========================================================================= */

.fmpf-player {
	display:         flex;
	align-items:     center;
	gap:             var(--fmpf-gap);
	background:      var(--fmpf-bg);
	border-radius:   var(--fmpf-border-radius);
	padding:         var(--fmpf-padding);
	width:           100%;
	box-sizing:      border-box;
}

/* =========================================================================
   Artwork
   ========================================================================= */

.fmpf-player__artwork {
	flex-shrink: 0;
	width:       var(--fmpf-artwork-size);
	height:      var(--fmpf-artwork-size);
}

.fmpf-player__artwork-img {
	width:        100%;
	height:       100%;
	object-fit:   cover;
	border-radius: var(--fmpf-artwork-radius);
	display:      block;
}

/* =========================================================================
   Body
   ========================================================================= */

.fmpf-player__body {
	flex:            1;
	min-width:       0;
	display:         flex;
	flex-direction:  column;
	gap:             0.75rem;
}

/* =========================================================================
   Info block
   ========================================================================= */

.fmpf-player__info {
	display:        flex;
	flex-direction: column;
	gap:            0.15rem;
	min-width:      0;
}

.fmpf-player__episode-title,
.fmpf-player__podcast-title,
.fmpf-player__meta {
	margin:       0;
	white-space:  nowrap;
	overflow:     hidden;
	text-overflow: ellipsis;
}

.fmpf-player__episode-title {
	font-size:   var(--fmpf-title-size);
	font-weight: 600;
	color:       var(--fmpf-text);
	line-height: 1.3;
}

.fmpf-player__podcast-title {
	font-size:  var(--fmpf-meta-size);
	font-weight: 500;
	color:      var(--fmpf-text);
	opacity:    0.75;
}

.fmpf-player__meta {
	font-size: var(--fmpf-meta-size);
	color:     var(--fmpf-text-muted);
}

.fmpf-player__meta-sep {
	margin: 0 0.2em;
}

/* =========================================================================
   Controls row
   ========================================================================= */

.fmpf-player__controls {
	display:     flex;
	align-items: center;
	gap:         0.75rem;
}

/* ---- Play/Pause button ---- */

.fmpf-player__play-btn {
	flex-shrink:      0;
	width:            var(--fmpf-btn-size);
	height:           var(--fmpf-btn-size);
	border-radius:    var(--fmpf-btn-radius);
	background:       var(--fmpf-btn-bg);
	color:            var(--fmpf-btn-color);
	border:           none;
	cursor:           pointer;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	padding:          0;
	transition:       opacity 0.15s ease, transform 0.1s ease;
}

.fmpf-player__play-btn:hover {
	opacity: 0.8;
}

.fmpf-player__play-btn:active {
	transform: scale(0.93);
}

.fmpf-player__play-btn:focus-visible {
	outline:        2px solid var(--fmpf-accent);
	outline-offset: 3px;
}

.fmpf-player.is-loading .fmpf-player__play-btn {
	opacity: 0.5;
	cursor:  wait;
}

.fmpf-player__icon {
	display:     flex;
	align-items: center;
}

.fmpf-player__icon svg {
	width:  1.125rem;
	height: 1.125rem;
	fill:   currentColor;
	display: block;
}

/* Nudge the play icon slightly right so it looks visually centred */
.fmpf-player__icon--play svg {
	transform: translateX(1px);
}

/* Icon visibility — driven by .is-playing on the player shell, not JS .hidden */
.fmpf-player__icon--pause             { display: none; }
.fmpf-player.is-playing .fmpf-player__icon--pause { display: flex; }
.fmpf-player.is-playing .fmpf-player__icon--play  { display: none; }

/* ---- Scrubber / progress bar ---- */

.fmpf-player__scrubber {
	flex:           1;
	min-width:      0;
	cursor:         pointer;
	padding:        0.625rem 0; /* expand vertical hit area without affecting layout */
	touch-action:   none;
	-webkit-user-select: none;
	user-select:    none;
}

.fmpf-player__scrubber:focus {
	outline: none;
}

.fmpf-player__scrubber:focus-visible {
	outline:        2px solid var(--fmpf-accent);
	outline-offset: 4px;
	border-radius:  3px;
}

.fmpf-player__track {
	position:      relative;
	height:        var(--fmpf-track-height);
	background:    var(--fmpf-track-bg);
	border-radius: calc(var(--fmpf-track-height) / 2);
}

.fmpf-player__fill {
	position:      absolute;
	left:          0;
	top:           0;
	height:        100%;
	width:         0%;
	background:    var(--fmpf-fill-bg);
	border-radius: inherit;
	pointer-events: none;
}

.fmpf-player__thumb {
	position:       absolute;
	top:            50%;
	left:           0%;
	width:          var(--fmpf-thumb-size);
	height:         var(--fmpf-thumb-size);
	border-radius:  50%;
	background:     var(--fmpf-thumb-bg);
	transform:      translate(-50%, -50%);
	pointer-events: none;
	opacity:        0;
	transition:     opacity 0.15s ease;
}

/* Show thumb on hover/focus */
.fmpf-player:hover .fmpf-player__thumb,
.fmpf-player__scrubber:focus-visible .fmpf-player__thumb,
.fmpf-player.is-scrubbing .fmpf-player__thumb {
	opacity: 1;
}

/* ---- Time display ---- */

.fmpf-player__time {
	flex-shrink:          0;
	display:              flex;
	align-items:          center;
	gap:                  0.2em;
	font-size:            var(--fmpf-time-size);
	color:                var(--fmpf-text-muted);
	font-variant-numeric: tabular-nums;
	white-space:          nowrap;
}

.fmpf-player__time-sep {
	opacity: 0.5;
}

/* =========================================================================
   Embed fallback (no native audio — just an iframe with the info header)
   ========================================================================= */

.fmpf-player--embed {
	flex-direction: column;
	align-items:    stretch;
}

.fmpf-player--embed .fmpf-player__artwork {
	display: none; /* artwork shown inline in the info area when stacked */
}

.fmpf-player--embed .fmpf-player__body {
	gap: 0.5rem;
}

.fmpf-player__embed iframe {
	display:       block;
	width:         100%;
	border:        none;
	border-radius: 6px;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 520px) {
	.fmpf-player {
		--fmpf-artwork-size: 60px;
		--fmpf-btn-size:     2.375rem;
		--fmpf-padding:      1rem;
		--fmpf-gap:          0.875rem;
	}

	/* Stack artwork above body on very small screens */
	.fmpf-player {
		flex-wrap: wrap;
	}

	.fmpf-player__artwork {
		width:  var(--fmpf-artwork-size);
		height: var(--fmpf-artwork-size);
	}

	.fmpf-player__body {
		flex: 1 1 0;
		min-width: 0;
	}

	.fmpf-player__time {
		display: none; /* reclaim space on tiny screens */
	}
}