/**
 * RCO MP3-spelare – stilmall
 *
 * Lugn, minimalistisk och tillgänglig HTML5-spelare i en kompakt rad:
 * play till vänster, tidslinje med tider i mitten, spol-/klippknappar till
 * höger. På smal skärm radar tidslinjen om överst och knapparna centreras under.
 * Knapparna är ikon-knappar; etiketterna döljs visuellt men finns kvar för
 * skärmläsare. Färger styrs via CSS-variabler och kan överstyras per projekt.
 */

.rco-mp3 {
	/* Färger – kan överstyras per sida/projekt */
	--rco-mp3-accent: #0170B9;        /* RCO-blå – play, ikoner, spelad del */
	--rco-mp3-accent-mork: #015a93;   /* mörkare blå för hover */
	--rco-mp3-yta: #ffffff;           /* spelarens bakgrund */
	--rco-mp3-kant: #d6dade;          /* tunn neutral kant */
	--rco-mp3-spar: #ccd2d7;          /* ospelad del (spelad/ospelad ≥3:1, WCAG 1.4.11) */
	--rco-mp3-text: #1f2933;          /* nära-svart – etiketter */
	--rco-mp3-text-svag: #51616d;     /* sekundär text – tider (≥4.5:1 mot vit) */

	display: block;
	width: 100%;
	padding: 12px 16px;
	background: var(--rco-mp3-yta);
	border: 1px solid var(--rco-mp3-kant);
	border-radius: 14px;
	/* Diskret lyft – ger djup utan att kännas tung */
	box-shadow: 0 1px 2px rgba(16, 42, 67, 0.04), 0 4px 14px rgba(16, 42, 67, 0.05);
	font-family: inherit;
	color: var(--rco-mp3-text);
	box-sizing: border-box;
}

.rco-mp3 *,
.rco-mp3 *::before,
.rco-mp3 *::after {
	box-sizing: border-box;
}

.rco-mp3__titel {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.3;
}

/* ---- Titelrad (titel + språkväxlare) ---- */
.rco-mp3__topp {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

/*
 * Språkväxlare – pill högerställd. Selektorerna prefixas med .rco-mp3 (högre
 * specificitet än temats vanliga knapp-/länkstilar som t.ex. .entry-content button)
 * och färg/bakgrund/kant sätts uttryckligen i ALLA lägen så att temat inte
 * överskrider dem. -webkit-text-fill-color motverkar teman som sätter den.
 */
.rco-mp3 .rco-mp3__sprak,
.rco-mp3 .rco-mp3__sprak:link,
.rco-mp3 .rco-mp3__sprak:visited {
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid var(--rco-mp3-accent);
	border-radius: 999px;
	background: #ffffff;
	color: var(--rco-mp3-accent);
	-webkit-text-fill-color: var(--rco-mp3-accent);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rco-mp3 .rco-mp3__sprak:hover,
.rco-mp3 .rco-mp3__sprak:focus {
	background: #e8f1f9;
	border-color: var(--rco-mp3-accent);
	color: var(--rco-mp3-accent);
	-webkit-text-fill-color: var(--rco-mp3-accent);
}

.rco-mp3 .rco-mp3__sprak:active {
	background: #d6e8f6;
	border-color: var(--rco-mp3-accent);
	color: var(--rco-mp3-accent);
	-webkit-text-fill-color: var(--rco-mp3-accent);
}

.rco-mp3 .rco-mp3__sprak:focus-visible {
	outline: 3px solid var(--rco-mp3-accent);
	outline-offset: 2px;
}

.rco-mp3 .rco-mp3__sprak-ikon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--rco-mp3-accent);
}

/* Den inbyggda audio-taggen döljs – vi bygger egna kontroller */
.rco-mp3__audio {
	display: none;
}

/* Dold text som ändå läses av skärmläsare (ikon-knapparnas namn) */
.rco-mp3__etikett {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Kontrollrad ---- */
.rco-mp3__rad {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

/* Tidslinjeblock (aktuell tid · reglage · total tid) – fyller mitten */
.rco-mp3__tidslinje {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 220px;
	min-width: 0;
}

.rco-mp3__spar {
	flex: 1 1 auto;
	min-width: 0;
}

.rco-mp3__aktuell,
.rco-mp3__total {
	flex: 0 0 auto;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--rco-mp3-text-svag);
}

/*
 * Range-inputen byggs om helt så att den ser likadan ut i alla webbläsare.
 * Spåret är den färgade gradienten (spelad accent + ospelad grå), helt platt
 * och rundat. Selektorerna prefixas med .rco-mp3 (högre specificitet) och
 * nollar border/box-shadow så att temats egna input[type=range]-stilar inte
 * läcker in. Handtaget centreras manuellt på det tunna spåret.
 */
.rco-mp3 .rco-mp3__progress {
	--rco-mp3-andel: 0%;
	width: 100%;
	height: 6px;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	background: linear-gradient(
		to right,
		var(--rco-mp3-accent) 0%,
		var(--rco-mp3-accent) var(--rco-mp3-andel),
		var(--rco-mp3-spar) var(--rco-mp3-andel),
		var(--rco-mp3-spar) 100%
	);
	border: none;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	vertical-align: middle;
}

/* WebKit/Blink: spåret kommer från inputens bakgrund ovan */
.rco-mp3 .rco-mp3__progress::-webkit-slider-runnable-track {
	height: 6px;
	border: none;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
}

.rco-mp3 .rco-mp3__progress::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	margin-top: -5px; /* centrerar 16 px-handtaget på 6 px-spåret */
	border-radius: 50%;
	background: var(--rco-mp3-accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 2px rgba(16, 42, 67, 0.20);
	cursor: pointer;
}

/* Firefox: spåret målas separat → samma gradient här */
.rco-mp3 .rco-mp3__progress::-moz-range-track {
	height: 6px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--rco-mp3-accent) 0%,
		var(--rco-mp3-accent) var(--rco-mp3-andel),
		var(--rco-mp3-spar) var(--rco-mp3-andel),
		var(--rco-mp3-spar) 100%
	);
	box-shadow: none;
}

.rco-mp3 .rco-mp3__progress::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--rco-mp3-accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 2px rgba(16, 42, 67, 0.20);
	cursor: pointer;
}

/* ---- Knappar (ikon-knappar) ---- */
.rco-mp3__knapp,
.rco-mp3__play {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	color: var(--rco-mp3-text);
	font: inherit;
	cursor: pointer;
}

/*
 * Skydd mot temats knapp-stilar (t.ex. button:hover { background: #000 }).
 * Håll knappen själv transparent i alla lägen; färgen ligger på ikonytan.
 */
.rco-mp3__knapp,
.rco-mp3__play,
.rco-mp3__knapp:hover,
.rco-mp3__knapp:focus,
.rco-mp3__knapp:active,
.rco-mp3__play:hover,
.rco-mp3__play:focus,
.rco-mp3__play:active {
	background: none;
	box-shadow: none;
}

/* Rund ikonyta */
.rco-mp3__ikonyta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #e8f1f9;
	color: var(--rco-mp3-accent);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.rco-mp3__knapp svg,
.rco-mp3__play svg {
	width: 20px;
	height: 20px;
}

.rco-mp3__knapp:hover .rco-mp3__ikonyta {
	background: #d6e8f6;
}

.rco-mp3__knapp:active .rco-mp3__ikonyta,
.rco-mp3__play:active .rco-mp3__ikonyta {
	transform: scale(0.94);
}

/* Stor play/paus-knapp – fylld accent med mjuk lyft-skugga */
.rco-mp3__play .rco-mp3__ikonyta {
	width: 48px;
	height: 48px;
	background: var(--rco-mp3-accent);
	color: #fff;
	box-shadow: 0 3px 8px rgba(1, 112, 185, 0.22);
}

.rco-mp3__play:hover .rco-mp3__ikonyta {
	background: var(--rco-mp3-accent-mork);
}

/*
 * Animerad play/paus-ikon byggd med borders.
 * Triangel (play) i viloläge → två staplar (paus) när .is-spelar sätts.
 */
.rco-mp3__ikon {
	box-sizing: border-box;
	width: 0;
	height: 16px;
	margin-left: 3px;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #fff;
	transition: border-width 0.18s ease, margin-left 0.18s ease;
}

.rco-mp3__play.is-spelar .rco-mp3__ikon {
	margin-left: 0;
	border-style: double;
	border-width: 0 0 0 14px;
}

/* Avstängd i ändarna (föregående/nästa klipp) */
.rco-mp3__knapp:disabled {
	opacity: 0.4;
	cursor: default;
}

.rco-mp3__knapp:disabled:hover .rco-mp3__ikonyta {
	background: #e8f1f9;
}

/* Tydlig fokusmarkering (WCAG 2.4.7) */
.rco-mp3__knapp:focus-visible,
.rco-mp3__play:focus-visible,
.rco-mp3 .rco-mp3__progress:focus-visible {
	outline: 3px solid var(--rco-mp3-accent);
	outline-offset: 3px;
	border-radius: 999px;
}

/* Felmeddelande för inloggade redaktörer */
.rco-mp3-fel {
	padding: 10px 14px;
	background: #fdeaea;
	border-left: 4px solid #ED7354;
	border-radius: 4px;
	font-size: 0.9rem;
}

/* Större träffyta på handtaget för pekskärmar */
@media (pointer: coarse) {
	.rco-mp3 .rco-mp3__progress::-webkit-slider-thumb {
		width: 22px;
		height: 22px;
		margin-top: -8px; /* centrera större handtag på 6 px-spåret */
	}

	.rco-mp3 .rco-mp3__progress::-moz-range-thumb {
		width: 22px;
		height: 22px;
	}
}

/*
 * Smal skärm: tidslinjen läggs överst på egen rad och knapparna
 * centreras under. Mobil-först-vänligt utan att något krymper för mycket.
 */
@media (max-width: 560px) {
	.rco-mp3__rad {
		justify-content: center;
		gap: 8px;
	}

	.rco-mp3__tidslinje {
		order: -1;
		flex-basis: 100%;
	}
}

/* Respektera reducerad rörelse */
@media (prefers-reduced-motion: reduce) {
	.rco-mp3__ikonyta,
	.rco-mp3__ikon,
	.rco-mp3__sprak {
		transition: none;
	}
}