/*
 * MLDP Site Suite — music player.
 * Colors extend the site's existing navy/gold system (footer navy ~#1f3a5f,
 * gold accent already used for the visit counter and language switcher)
 * with gradient/glow variants for a more distinctive, less "flat corporate
 * bar" treatment - deliberately more polished than a bare navy rectangle,
 * while staying in the same two-color family the rest of the site uses.
 *
 * Icon visibility is driven by classes (.is-playing / .is-muted), never by
 * the `hidden` attribute/property - unreliable on <svg> in some browsers.
 *
 * Seek/volume sliders render a filled gradient track via a `--progress`
 * custom property that player.js updates on every input/timeupdate - the
 * gradient has a hard color stop at that percentage, splitting "played"
 * (gold) from "remaining" (translucent white) in one background-image
 * instead of layering a second element on top.
 */

/* Colors are indirected through --mldp-suite-* custom properties (falling
   back to these exact hex values when unset) so MLDP Suite -> Stile can
   override just the two "key" colors from the admin - a user-set
   --mldp-suite-primary/--mldp-suite-accent pair (plus the derived shades
   PHP computes alongside them) replaces every one of these without this
   file changing at all. See class-style-settings.php. */
:root {
	--mldp-player-height: 64px;
	--mldp-player-navy: var( --mldp-suite-primary, #1f3a5f );
	--mldp-player-navy-light: var( --mldp-suite-primary-light, #2c4d7c );
	--mldp-player-navy-deep: var( --mldp-suite-primary-deep, #142a49 );
	--mldp-player-gold: var( --mldp-suite-accent, #d4af37 );
	--mldp-player-gold-light: var( --mldp-suite-accent-light, #f2d888 );
	--mldp-player-gold-hover: var( --mldp-suite-accent-hover, #e6c455 );
	--mldp-player-glow: var( --mldp-suite-accent-glow, rgba( 212, 175, 55, 0.45 ) );
	--mldp-player-border: rgba( 255, 255, 255, 0.14 );
	--mldp-player-radius: var( --mldp-suite-radius, 16px );
}

body.mldp-player-active {
	padding-bottom: var( --mldp-player-height );
}

#mldp-player-root {
	position: relative;
}

.mldp-player-bar {
	display: flex;
	align-items: center;
	gap: 0.9em;
	min-height: 64px;
	/* No bottom padding: the bar variant's toggle button pins its own
	   margin-bottom to exactly match the cookie button's bottom:15px (see
	   .mldp-player--bar .mldp-player-toggle) - any padding here would add
	   on top of that margin and throw the alignment off by that amount. */
	padding: 0.5em 1em 0;
	background: linear-gradient( 180deg, var( --mldp-player-navy-light ) 0%, var( --mldp-player-navy ) 55%, var( --mldp-player-navy-deep ) 100% );
	color: #f2f4f8;
	font-family: inherit;
	border-top: 1px solid rgba( 212, 175, 55, 0.3 );
	/* Hard safety net: whatever happens to the flex children below, nothing
	   ever visually escapes the bar's own box. */
	overflow: hidden;
	box-sizing: border-box;
	max-width: 100%;
}

/* MLDP Suite -> Stile -> "Effetto vetro" can turn this off (adds
   body.mldp-suite-no-glass) for a fully opaque bar - some admins may
   prefer that over a translucent one, or need it for contrast reasons. */
@supports ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) {
	body:not( .mldp-suite-no-glass ) .mldp-player-bar {
		background: linear-gradient( 180deg, rgba( 44, 77, 124, 0.92 ) 0%, rgba( 31, 58, 95, 0.94 ) 55%, rgba( 20, 39, 68, 0.96 ) 100% );
		-webkit-backdrop-filter: blur( 14px ) saturate( 150% );
		backdrop-filter: blur( 14px ) saturate( 150% );
	}
}

/* --- Bar variant: full-width, fixed to the bottom of the viewport --- */
.mldp-player--bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	border-radius: var( --mldp-player-radius ) var( --mldp-player-radius ) 0 0;
	box-shadow: 0 -8px 28px rgba( 8, 16, 30, 0.4 );
}

/* The site's cookie-consent "reopen" button (button.cookieadmin_re_consent)
   is position:fixed at left:15px/bottom:15px/width:50px/height:50px on
   EVERY viewport width, not just mobile - it's not responsive, so this
   can't be scoped to a mobile media query either (that was the bug: fixed
   only below 640px, so it silently came back on desktop). The toggle
   matches its 50px size (see .mldp-player-toggle) and is pinned to the
   same bottom:15px instead of just vertically centered in the bar - the
   bar's height varies with its content (title + seek stack taller than a
   single row), so centering alone left the two circles' centers a few px
   off from each other; anchoring both to the same bottom offset keeps
   them level regardless of how tall the bar's content gets. */
.mldp-player--bar .mldp-player-toggle {
	margin-left: 65px;
	align-self: flex-end;
	margin-bottom: 15px;
}

/* --- Floating variant: compact, rounded, anchored bottom-right --- */
.mldp-player--floating {
	position: fixed;
	right: 1.2em;
	bottom: 1.2em;
	z-index: 9999;
	width: min( 340px, calc( 100vw - 2.4em ) );
	border-radius: calc( var( --mldp-player-radius ) + 2px );
	box-shadow: 0 10px 34px rgba( 8, 16, 30, 0.45 ), 0 0 0 1px rgba( 212, 175, 55, 0.18 );
	gap: 0.6em;
	padding: 0.55em 0.8em;
}

/* --- Inline variant: static card, embedded via the [mldp_player] shortcode --- */
.mldp-player--inline {
	position: relative;
	border-radius: max( 0px, calc( var( --mldp-player-radius ) - 2px ) );
	max-width: 480px;
	margin: 1em 0;
	box-shadow: 0 6px 20px rgba( 8, 16, 30, 0.22 ), 0 0 0 1px rgba( 212, 175, 55, 0.15 );
}

.mldp-player-toggle,
.mldp-player-prev,
.mldp-player-next,
.mldp-player-mute {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	border: 1px solid var( --mldp-player-border );
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.04 );
	color: #f2f4f8;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, color 0.18s ease;
}

.mldp-player-toggle {
	background: linear-gradient( 135deg, var( --mldp-player-gold-light ), var( --mldp-player-gold ) );
	border-color: rgba( 255, 255, 255, 0.4 );
	color: var( --mldp-player-navy-deep );
	/* Fixed px, not em: matches the site's cookie-consent button
	   (button.cookieadmin_re_consent, height/width: 50px) exactly, so the
	   two circular buttons that share the bottom-left corner of the screen
	   read as a deliberately aligned pair rather than a coincidence. */
	width: 50px;
	height: 50px;
	box-shadow: 0 3px 12px rgba( 212, 175, 55, 0.35 );
}

.mldp-player-prev:hover,
.mldp-player-next:hover,
.mldp-player-mute:hover {
	background-color: rgba( 255, 255, 255, 0.1 );
	border-color: rgba( 212, 175, 55, 0.5 );
	box-shadow: 0 0 12px rgba( 212, 175, 55, 0.3 );
	transform: translateY( -1px );
}

.mldp-player-toggle:hover {
	background: linear-gradient( 135deg, #fbe8ae, var( --mldp-player-gold-hover ) );
	box-shadow: 0 4px 18px rgba( 212, 175, 55, 0.55 );
	transform: translateY( -1px );
}

.mldp-player-toggle:active,
.mldp-player-prev:active,
.mldp-player-next:active,
.mldp-player-mute:active {
	transform: translateY( 0 ) scale( 0.95 );
}

.mldp-player-toggle:focus-visible,
.mldp-player-prev:focus-visible,
.mldp-player-next:focus-visible,
.mldp-player-mute:focus-visible,
.mldp-player-seek:focus-visible,
.mldp-player-volume-slider:focus-visible {
	outline: 2px solid var( --mldp-player-gold );
	outline-offset: 2px;
}

/* Play/pause icon swap - class-based, not [hidden] (see player.js comment). */
.mldp-player-toggle .mldp-player-icon-pause {
	display: none;
}
.mldp-player-toggle.is-playing .mldp-player-icon-play {
	display: none;
}
.mldp-player-toggle.is-playing .mldp-player-icon-pause {
	display: block;
}

/* Gentle glowing pulse on the toggle button while playing. */
@keyframes mldp-player-pulse {
	0%, 100% { box-shadow: 0 3px 12px rgba( 212, 175, 55, 0.35 ), 0 0 0 0 var( --mldp-player-glow ); }
	50% { box-shadow: 0 3px 12px rgba( 212, 175, 55, 0.35 ), 0 0 0 7px rgba( 212, 175, 55, 0 ); }
}
/* MLDP Suite -> Stile -> "Bagliore sui pulsanti" toggles this off (adds
   body.mldp-suite-no-glow) for admins who find the pulse distracting. */
body:not( .mldp-suite-no-glow ) .mldp-player-toggle.is-playing {
	animation: mldp-player-pulse 2.4s ease-out infinite;
}

.mldp-player-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	justify-content: center;
}

.mldp-player-title {
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.01em;
	overflow: hidden;
	/* Centered so it lines up with the seek bar below, which is also
	   centered within the same-width info column (see
	   .mldp-player-seek-wrap's margin:0 auto) - short titles that fit stay
	   put; long ones switch to the marquee below, which takes over
	   positioning via its own transform instead of text-align. */
	text-align: center;
}

.mldp-player-title-inner {
	display: inline-block;
	white-space: nowrap;
}

/* Long titles scroll into view and back rather than getting cut off mid-
   word - a soft mask fades the text out at both edges instead of a hard
   clip, so it reads as "sliding past a window" rather than glitching in
   and out. Only engaged when player.js measures real overflow (see
   updateMarquee()); short titles never get the mask or the animation. */
.mldp-player-title.is-marquee {
	text-align: left;
	mask-image: linear-gradient( to right, transparent 0, black 16px, black calc( 100% - 16px ), transparent 100% );
	-webkit-mask-image: linear-gradient( to right, transparent 0, black 16px, black calc( 100% - 16px ), transparent 100% );
}
.mldp-player-title.is-marquee .mldp-player-title-inner {
	animation: mldp-player-marquee var( --marquee-duration, 10s ) ease-in-out infinite;
}

@keyframes mldp-player-marquee {
	0%, 12% { transform: translateX( 0 ); }
	45%, 55% { transform: translateX( var( --marquee-distance, 0px ) ); }
	88%, 100% { transform: translateX( 0 ); }
}

.mldp-player--no-title .mldp-player-scrub {
	margin-top: 0;
}

/* Stacked (seek bar, then time), not side by side: a time label sitting
   only on one side of the seek bar pulled its centered position off to
   one side too (margin:auto only centers within the space left over
   AFTER a sibling like that, which isn't the same as centering within
   the row as a whole) - splitting them into their own centered rows
   removes that asymmetry, so the seek bar's center genuinely lines up
   with the title's center above it instead of just approximately. */
.mldp-player-scrub {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;
}

.mldp-player-time {
	flex: 0 0 auto;
	font-size: 0.72em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: rgba( 242, 244, 248, 0.85 );
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.mldp-player-seek,
.mldp-player-volume-slider {
	--progress: 0%;
	appearance: none;
	height: 5px;
	border-radius: 3px;
	background: linear-gradient( to right, var( --mldp-player-gold ) 0%, var( --mldp-player-gold-light ) var( --progress ), rgba( 255, 255, 255, 0.2 ) var( --progress ), rgba( 255, 255, 255, 0.2 ) 100% );
	outline-offset: 4px;
	cursor: pointer;
}

/* The seek input lives inside a positioned wrapper so the drag-time
   tooltip (a separate sibling element, not a native range feature) has
   something to anchor to. Centered via the parent's align-items:center
   (see .mldp-player-scrub) rather than margin:auto - width:100% up to
   max-width lets it size intrinsically so that centering actually has
   something to center. */
.mldp-player-seek-wrap {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	max-width: 260px;
	display: flex;
	align-items: center;
}

.mldp-player-seek {
	width: 100%;
}

.mldp-player-seek-tooltip {
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 0;
	transform: translateX( -50% );
	background: var( --mldp-player-navy-deep );
	border: 1px solid rgba( 212, 175, 55, 0.5 );
	color: var( --mldp-player-gold-light );
	font-size: 0.7em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	padding: 0.25em 0.55em;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.12s ease;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.3 );
}
.mldp-player-seek-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	border: 5px solid transparent;
	border-top-color: var( --mldp-player-navy-deep );
}
.mldp-player-seek-tooltip.is-visible {
	opacity: 1;
}

.mldp-player-seek::-webkit-slider-thumb,
.mldp-player-volume-slider::-webkit-slider-thumb {
	appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --mldp-player-gold-light ), var( --mldp-player-gold ) );
	box-shadow: 0 0 6px rgba( 212, 175, 55, 0.7 ), 0 0 0 2px rgba( 20, 39, 68, 0.5 );
	cursor: pointer;
	transition: transform 0.12s ease;
}
.mldp-player-seek:hover::-webkit-slider-thumb,
.mldp-player-volume-slider:hover::-webkit-slider-thumb {
	transform: scale( 1.2 );
}

.mldp-player-seek::-moz-range-thumb,
.mldp-player-volume-slider::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --mldp-player-gold-light ), var( --mldp-player-gold ) );
	box-shadow: 0 0 6px rgba( 212, 175, 55, 0.7 );
	cursor: pointer;
}
.mldp-player-seek::-moz-range-track,
.mldp-player-volume-slider::-moz-range-track {
	background: transparent;
}

/* --- Volume control --- */
.mldp-player-volume {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.mldp-player-mute .mldp-player-icon-muted {
	display: none;
}
.mldp-player-mute.is-muted .mldp-player-icon-vol {
	display: none;
}
.mldp-player-mute.is-muted .mldp-player-icon-muted {
	display: block;
}

.mldp-player-mute .mldp-player-icon-vol,
.mldp-player-mute .mldp-player-icon-muted {
	transition: transform 0.15s ease;
}

/* Muted is a state worth noticing, not just a swapped icon: a slightly
   larger icon (still smaller than the play/pause button's) plus a lit-up
   border and glow make it read clearly at a glance instead of blending
   into the row of otherwise-identical circular buttons. */
.mldp-player-mute.is-muted {
	background: rgba( 255, 255, 255, 0.16 );
	border-color: rgba( 212, 175, 55, 0.55 );
	box-shadow: 0 0 9px rgba( 212, 175, 55, 0.3 );
}
.mldp-player-mute.is-muted .mldp-player-icon-muted {
	transform: scale( 1.1 );
}

.mldp-player-volume-slider {
	width: 80px;
}

/* A wide bar has room for the volume slider to stay visible at all times.
   Floating/inline are compact by design, so they reveal it only on
   hover/focus instead. */
.mldp-player--floating .mldp-player-volume-slider,
.mldp-player--inline .mldp-player-volume-slider {
	width: 0;
	opacity: 0;
	overflow: hidden;
	transition: width 0.18s ease, opacity 0.18s ease;
}
.mldp-player--floating .mldp-player-volume.is-open .mldp-player-volume-slider,
.mldp-player--inline .mldp-player-volume.is-open .mldp-player-volume-slider {
	width: 70px;
	opacity: 1;
}

/* At medium widths the bar itself is no longer guaranteed to have room -
   e.g. once the "Tocca per ascoltare" prompt is also showing, the always-on
   slider plus prev/next plus the prompt no longer fit and used to overflow
   the bar's edge. Give the bar's slider the same hover-reveal treatment as
   the compact variants below that width. */
@media ( max-width: 900px ) {
	.mldp-player--bar .mldp-player-volume-slider {
		width: 0;
		opacity: 0;
		overflow: hidden;
		transition: width 0.18s ease, opacity 0.18s ease;
	}
	.mldp-player--bar .mldp-player-volume.is-open .mldp-player-volume-slider {
		width: 60px;
		opacity: 1;
	}
}

/* --- "Attiva audio" / "Tocca per ascoltare" prompt (muted-autoplay or
   first-interaction autoplay modes) --- */
.mldp-player-start-prompt {
	/* Shrinkable (unlike the icon buttons) and allowed to truncate - the
	   longest label ("🔊 Tocca per ascoltare") is the element most likely
	   to not fit when the bar is narrow, so it degrades gracefully with an
	   ellipsis instead of forcing the bar to overflow its own box.
	   overflow is !important because the theme's own stylesheet ships
	   `button:not(.components-button) { overflow: visible }`, whose
	   :not() argument gives it higher specificity (0,1,1) than a plain
	   single class here (0,1,0) - without this it silently wins the
	   cascade and the ellipsis never engages, letting the text spill
	   past the pill's edge (confirmed live via getComputedStyle). */
	flex: 0 1 auto;
	min-width: 0;
	max-width: 45vw;
	overflow: hidden !important;
	text-overflow: ellipsis;
	border: 1px solid rgba( 212, 175, 55, 0.45 );
	border-radius: 999px;
	background: linear-gradient( 135deg, rgba( 212, 175, 55, 0.22 ), rgba( 212, 175, 55, 0.08 ) );
	color: #f9edc9;
	font-size: 0.78em;
	font-weight: 600;
	padding: 0.4em 0.9em;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
body:not( .mldp-suite-no-glow ) .mldp-player-start-prompt {
	animation: mldp-player-pulse-soft 2.4s ease-out infinite;
}
.mldp-player-start-prompt:hover {
	background: linear-gradient( 135deg, rgba( 212, 175, 55, 0.34 ), rgba( 212, 175, 55, 0.14 ) );
	box-shadow: 0 0 14px rgba( 212, 175, 55, 0.4 );
}

@keyframes mldp-player-pulse-soft {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 212, 175, 55, 0.35 ); }
	50% { box-shadow: 0 0 0 6px rgba( 212, 175, 55, 0 ); }
}

/* A two-row wrapped layout was tried here and reverted - it made the bar
   noticeably taller and left awkward empty space around the row-1 buttons
   on real phones, worse than the tight single row it replaced. Back to one
   row: the seek track just gets narrower to make room for the time
   readout, and the prompt gets a shorter label (set from player.js based
   on viewport width) instead of more space to spell out the long one. */
@media ( max-width: 640px ) {
	.mldp-player--bar {
		gap: 0.5em;
		padding: 0.5em 0.6em 0;
	}
	.mldp-player--bar .mldp-player-prev,
	.mldp-player--bar .mldp-player-next {
		display: none;
	}
	.mldp-player--bar .mldp-player-seek-wrap {
		max-width: 70px;
	}
	.mldp-player--bar .mldp-player-time {
		font-size: 0.64em;
	}
	.mldp-player--bar .mldp-player-start-prompt {
		/* Fixed rather than shrinkable here: the short mobile label
		   (player.js swaps to "🔊 Ascolta" / "🔈 Audio" below 640px) is sized
		   to fit this exactly - letting it shrink like .mldp-player-info
		   does put it right back into the same silent-truncation problem
		   this whole label swap was meant to solve. */
		flex: 0 0 auto;
		max-width: none;
		min-width: 0;
		font-size: 0.72em;
		padding: 0.35em 0.6em;
	}
	.mldp-player--floating {
		right: 0.6em;
		bottom: 0.6em;
		left: 0.6em;
		width: auto;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.mldp-player-toggle,
	.mldp-player-prev,
	.mldp-player-next,
	.mldp-player-mute,
	.mldp-player-volume-slider,
	.mldp-player-start-prompt,
	.mldp-player-seek-tooltip {
		transition: none;
	}
	.mldp-player-toggle.is-playing,
	.mldp-player-start-prompt {
		animation: none;
	}
	/* A moving title is exactly the kind of motion this setting asks to
	   avoid - fall back to a plain static ellipsis instead of scrolling. */
	.mldp-player-title.is-marquee {
		text-align: left;
		mask-image: none;
		-webkit-mask-image: none;
	}
	.mldp-player-title.is-marquee .mldp-player-title-inner {
		animation: none;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transform: none !important;
	}
}