/**
 * Shared Audio Player Components (PMHK Theme)
 *
 * Consolidated styles for Speed Menu, Speed Button, Volume Slider,
 * and dynamic collision repositioning (.is-down) for Hymn and Sermon players.
 *
 * @package PMHK_KLN
 */

/* ==========================================================================
   1. Volume Control (Expandable Slider)
   ========================================================================== */

.pmhk-hymn-player__volume-wrap,
.pmhk-sermon-player__volume-wrap {
	display: inline-flex;
	align-items: center;
	position: relative;
	flex-shrink: 0;
	gap: 0;
	transition: gap 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exact gap between vol-btn and vol-track: 12px when open/hovered */
.pmhk-hymn-player__volume-wrap:hover,
.pmhk-hymn-player__volume-wrap:focus-within,
.pmhk-hymn-player__volume-wrap.is-open,
.pmhk-hymn-player__capsule.has-volume-open .pmhk-hymn-player__volume-wrap,
.pmhk-sermon-player__volume-wrap:hover,
.pmhk-sermon-player__volume-wrap:focus-within,
.pmhk-sermon-player__volume-wrap.is-open,
.pmhk-sermon-player__left.has-volume-open .pmhk-sermon-player__volume-wrap {
	gap: 12px;
}

.pmhk-hymn-player__vol-btn,
.pmhk-sermon-player__vol-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	color: var(--color-black, #272727);
	cursor: pointer;
	flex-shrink: 0;
	transition: color 0.25s ease;
}

.pmhk-hymn-player__vol-btn:hover,
.pmhk-sermon-player__vol-btn:hover {
	color: var(--color-orange, #FF8700);
}

.pmhk-hymn-player__vol-icon,
.pmhk-sermon-player__vol-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: inherit;
}

.pmhk-hymn-player__vol-icon svg,
.pmhk-sermon-player__vol-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.pmhk-hymn-player__vol-icon--mute,
.pmhk-sermon-player__vol-icon--mute {
	display: none;
}

.pmhk-hymn-player__volume-wrap.is-muted .pmhk-hymn-player__vol-icon--up,
.pmhk-sermon-player__volume-wrap.is-muted .pmhk-sermon-player__vol-icon--up {
	display: none;
}

.pmhk-hymn-player__volume-wrap.is-muted .pmhk-hymn-player__vol-icon--mute,
.pmhk-sermon-player__volume-wrap.is-muted .pmhk-sermon-player__vol-icon--mute {
	display: inline-flex;
}

/* Volume Slider (40px track width when expanded) */
.pmhk-hymn-player__vol-track,
.pmhk-sermon-player__vol-track {
	position: relative;
	width: 0;
	height: 1px;
	background-color: rgba(39, 39, 39, 0.2);
	cursor: pointer;
	opacity: 0;
	overflow: visible;
	pointer-events: none;
	display: flex;
	align-items: center;
	user-select: none;
	transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* Hit area 24px height to prevent mouse slipping off 1px track */
.pmhk-hymn-player__vol-track::before,
.pmhk-sermon-player__vol-track::before {
	content: '';
	position: absolute;
	top: -12px;
	bottom: -12px;
	left: 0;
	right: 0;
}

.pmhk-hymn-player__volume-wrap:hover .pmhk-hymn-player__vol-track,
.pmhk-hymn-player__volume-wrap:focus-within .pmhk-hymn-player__vol-track,
.pmhk-hymn-player__volume-wrap.is-open .pmhk-hymn-player__vol-track,
.pmhk-hymn-player__capsule.has-volume-open .pmhk-hymn-player__vol-track,
.pmhk-sermon-player__volume-wrap:hover .pmhk-sermon-player__vol-track,
.pmhk-sermon-player__volume-wrap:focus-within .pmhk-sermon-player__vol-track,
.pmhk-sermon-player__volume-wrap.is-open .pmhk-sermon-player__vol-track,
.pmhk-sermon-player__left.has-volume-open .pmhk-sermon-player__vol-track {
	width: 40px;
	opacity: 1;
	pointer-events: auto;
}

.pmhk-hymn-player__vol-fill,
.pmhk-sermon-player__vol-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #000000;
	pointer-events: none;
}

.pmhk-hymn-player__vol-dot,
.pmhk-sermon-player__vol-dot {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 7px;
	height: 7px;
	background-color: #000000;
	border-radius: 50%;
	pointer-events: none;
	transition: left 0.05s linear;
}

/* ==========================================================================
   2. Playback Speed Selector
   ========================================================================== */

.pmhk-hymn-player__speed-wrap,
.pmhk-sermon-player__speed-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* Elevate parent row/item so sibling rows in DOM order do not overlap open dropdown */
.pmhk-hymn-item:has(.pmhk-hymn-player__speed-wrap.is-open),
.pmhk-hymn-item.has-speed-open,
.pmhk-sermons-table tbody tr:has(.pmhk-sermon-player__speed-wrap.is-open),
.pmhk-sermons-table tbody tr.has-speed-open,
.pmhk-sermon-row:has(.pmhk-sermon-player__speed-wrap.is-open),
.pmhk-sermon-row.has-speed-open {
	position: relative;
	z-index: 110;
}

/* Elevate player container inside active row */
.pmhk-hymn-item:has(.pmhk-hymn-player__speed-wrap.is-open) .pmhk-hymn-item__player,
.pmhk-hymn-item.has-speed-open .pmhk-hymn-item__player,
.pmhk-sermon-row:has(.pmhk-sermon-player__speed-wrap.is-open) .pmhk-sermon-player__left,
.pmhk-sermon-row.has-speed-open .pmhk-sermon-player__left {
	position: relative;
	z-index: 115;
}

/* Elevate open dropdown over sibling cards/rows (below .site-header z-index: 9999) */
.pmhk-hymn-player__speed-wrap.is-open,
.pmhk-sermon-player__speed-wrap.is-open {
	z-index: 120;
}

.pmhk-hymn-player__speed-btn,
.pmhk-sermon-player__speed-btn {
	display: inline-grid;
	grid-template-columns: 1fr;
	align-items: center;
	justify-items: center;
	height: 28px;
	max-width: 70px;
	box-sizing: border-box;
	padding: 0 12px;
	margin: 0;
	background-color: #00000014;
	color: #000000;
	border: none;
	border-radius: 14px;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	user-select: none;
	flex-shrink: 0;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Invisible ghost text sizing the button to the longest speed option */
.pmhk-hymn-player__speed-btn::after,
.pmhk-sermon-player__speed-btn::after {
	content: "0.25x";
	content: attr(data-longest-speed);
	visibility: hidden;
	height: 0;
	grid-column: 1;
	grid-row: 1;
	pointer-events: none;
	font-weight: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	white-space: nowrap;
}

.pmhk-hymn-player__speed-val,
.pmhk-sermon-player__speed-val {
	grid-column: 1;
	grid-row: 1;
	text-align: center;
	white-space: nowrap;
}

.pmhk-hymn-player__speed-btn:hover,
.pmhk-sermon-player__speed-btn:hover {
	background-color: rgba(0, 0, 0, 0.15);
}

/* Default: Opens Upwards */
.pmhk-hymn-player__speed-menu,
.pmhk-sermon-player__speed-menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: #FFFFFF;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 6px 0;
	margin: 0;
	list-style: none;
	z-index: 130;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	min-width: 68px;
	text-align: center;
}

.pmhk-hymn-player__speed-wrap.is-open .pmhk-hymn-player__speed-menu,
.pmhk-sermon-player__speed-wrap.is-open .pmhk-sermon-player__speed-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* Flipped: Opens Downwards when near top / header */
.pmhk-hymn-player__speed-wrap.is-down .pmhk-hymn-player__speed-menu,
.pmhk-sermon-player__speed-wrap.is-down .pmhk-sermon-player__speed-menu {
	bottom: auto;
	top: calc(100% + 8px);
	transform: translateX(-50%) translateY(-4px);
}

.pmhk-hymn-player__speed-wrap.is-open.is-down .pmhk-hymn-player__speed-menu,
.pmhk-sermon-player__speed-wrap.is-open.is-down .pmhk-sermon-player__speed-menu {
	transform: translateX(-50%) translateY(0);
}

/* Menu Items */
.pmhk-hymn-player__speed-menu li,
.pmhk-sermon-player__speed-menu li {
	padding: 6px 12px;
	font-size: 13px;
	line-height: 1.2;
	color: #272727;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	user-select: none;
}

.pmhk-hymn-player__speed-menu li:hover,
.pmhk-sermon-player__speed-menu li:hover {
	background-color: rgba(35, 70, 119, 0.08);
	color: var(--color-blue, #234677);
}

.pmhk-hymn-player__speed-menu li.is-selected,
.pmhk-sermon-player__speed-menu li.is-selected {
	font-weight: 700;
	color: var(--color-orange, #FF8700);
}

/* ==========================================================================
   5. Mobile Player Capsule (.pmhk-player-mobile-capsule)
   ========================================================================== */

.pmhk-player-mobile-capsule {
	display: none;
}

@media (max-width: 768px) {
	.pmhk-player-control--desktop-only {
		display: none !important;
	}

	.pmhk-player-mobile-capsule {
		display: inline-flex !important;
		align-items: center;
		position: relative;
		gap: 20px;
		height: 44px;
		margin-top: 14px;
		margin-bottom: 20px;
		border-radius: 999px;
		padding: 0 16px;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.04);
		transition: background-color 0.25s ease;
		max-width: 100%;
		z-index: 10;
	}

	.pmhk-player-mobile-capsule.has-speed-open,
	.pmhk-hymn-item.has-speed-open .pmhk-player-mobile-capsule,
	.pmhk-sermon-row.has-speed-open .pmhk-player-mobile-capsule {
		z-index: 140;
	}

	.pmhk-player-mobile-capsule .pmhk-hymn-player__speed-wrap,
	.pmhk-player-mobile-capsule .pmhk-sermon-player__speed-wrap {
		position: relative;
	}

	/* Mobile Capsule volume slider: collapsed by default, expandable on tap */
	.pmhk-player-mobile-capsule .pmhk-hymn-player__volume-wrap,
	.pmhk-player-mobile-capsule .pmhk-sermon-player__volume-wrap {
		gap: 0;
		transition: gap 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.pmhk-player-mobile-capsule .pmhk-hymn-player__vol-track,
	.pmhk-player-mobile-capsule .pmhk-sermon-player__vol-track {
		width: 0;
		opacity: 0;
		pointer-events: none;
		touch-action: none;
		transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
	}

	.pmhk-player-mobile-capsule .pmhk-hymn-player__volume-wrap.is-open,
	.pmhk-player-mobile-capsule.has-volume-open .pmhk-hymn-player__volume-wrap,
	.pmhk-player-mobile-capsule .pmhk-sermon-player__volume-wrap.is-open,
	.pmhk-player-mobile-capsule.has-volume-open .pmhk-sermon-player__volume-wrap {
		gap: 12px;
	}

	.pmhk-player-mobile-capsule .pmhk-hymn-player__volume-wrap.is-open .pmhk-hymn-player__vol-track,
	.pmhk-player-mobile-capsule.has-volume-open .pmhk-hymn-player__vol-track,
	.pmhk-player-mobile-capsule .pmhk-sermon-player__volume-wrap.is-open .pmhk-sermon-player__vol-track,
	.pmhk-player-mobile-capsule.has-volume-open .pmhk-sermon-player__vol-track {
		width: 50px;
		opacity: 1;
		pointer-events: auto;
	}

	/* Active / hover row background styling */
	.pmhk-hymn-item:hover .pmhk-hymn-player__mobile-capsule,
	.pmhk-hymn-item.is-playing .pmhk-hymn-player__mobile-capsule,
	.pmhk-hymn-item.is-active .pmhk-hymn-player__mobile-capsule,
	.pmhk-single-hymn-more__item:hover .pmhk-single-hymn-more__mobile-capsule,
	.pmhk-single-hymn-more__item.is-playing .pmhk-single-hymn-more__mobile-capsule,
	.pmhk-single-hymn-more__item.is-active .pmhk-single-hymn-more__mobile-capsule,
	.pmhk-sermons-table tbody tr.pmhk-sermon-row:hover .pmhk-sermon-player__mobile-capsule,
	.pmhk-sermons-table tbody tr.pmhk-sermon-row.is-active .pmhk-sermon-player__mobile-capsule,
	.pmhk-sermons-table tbody tr.pmhk-sermon-row.is-playing .pmhk-sermon-player__mobile-capsule,
	.pmhk-single-hymn__mobile-capsule {
		background-color: #FFFFFF;
	}
}