/* =============================================================================
   Wijkkrant Core — read-aloud player
   Contrast checked: ink on paper 16.5:1; white on #3B7320 5.7:1.
   Compact: buttons 32 px high (WCAG 2.5.8 AA requires ≥ 24 × 24 px).
   ========================================================================== */

.wk-voorlezen {
	margin-block: 0.75rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var( --wp--preset--color--lijn, #DCDAD2 );
	border-left: 4px solid var( --wk-a11y-groen, #3B7320 );
	border-radius: 6px;
	background: var( --wp--preset--color--wit, #fff );
	font-family: var( --wp--preset--font-family--ui, system-ui, sans-serif );
	color: var( --wp--preset--color--inkt, #1B1B18 );
}

.wk-voorlezen[hidden] {
	display: none;
}

.wk-voorlezen__kop:not( .screen-reader-text ) {
	margin: 0 0 0.5rem;
	font-size: var( --wp--preset--font-size--klein, 0.875rem );
	font-weight: 700;
}

.wk-voorlezen__knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
}

.wk-voorlezen__knop {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 32px;
	min-width: 32px;
	padding: 0.2rem 0.75rem;
	border: 1.5px solid var( --wk-a11y-groen, #3B7320 );
	border-radius: 999px;
	background: var( --wk-a11y-groen, #3B7320 );
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.wk-voorlezen__knop--stop {
	background: transparent;
	color: var( --wp--preset--color--inkt, #1B1B18 );
}

.wk-voorlezen__knop:hover {
	background: #2F5C19;
	border-color: #2F5C19;
	color: #fff;
}

.wk-voorlezen__knop:focus-visible,
.wk-voorlezen select:focus-visible {
	outline: 3px solid var( --wp--preset--color--inkt, #1B1B18 );
	outline-offset: 3px;
}

.wk-voorlezen__icoon {
	width: 1rem;
	height: 1rem;
	flex: none;
}

/* Playing: a small wave next to the icon, only when motion is allowed. */
.wk-voorlezen__knop.is-bezig .wk-voorlezen__icoon {
	animation: wk-vl-puls 1.2s ease-in-out infinite;
}

@keyframes wk-vl-puls {
	50% { opacity: 0.45; }
}

.wk-voorlezen__snelheid {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8125rem;
	line-height: 1.2;
}

.wk-voorlezen__snelheid select {
	min-height: 32px;
	padding: 0.15rem 0.4rem;
	border: 1px solid var( --wp--preset--color--grijs, #6B6B64 ); /* 5.1:1 — meets 1.4.11 */
	border-radius: 4px;
	background: #fff;
	color: inherit;
	font: inherit;
	line-height: 1.2;
}

.wk-voorlezen__status:empty {
	display: none;
}

.wk-voorlezen__status {
	margin: 0.3rem 0 0;
	font-size: 0.8125rem;
	color: var( --wp--preset--color--grijs, #6B6B64 );
}

.wk-voorlezen__audio {
	width: 100%;
	max-width: 36rem;
}

/* Paragraph currently being read aloud: colour and border (not colour alone). */
.wk-voorlezen-actief {
	background: var( --wp--preset--color--krant-groen-licht, #E4EDC9 );
	box-shadow: -0.6rem 0 0 var( --wp--preset--color--krant-groen-licht, #E4EDC9 ), -0.85rem 0 0 var( --wk-a11y-groen, #3B7320 );
	border-radius: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.wk-voorlezen__knop.is-bezig .wk-voorlezen__icoon {
		animation: none;
	}
}

@media ( forced-colors: active ) {
	.wk-voorlezen-actief {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
	.wk-voorlezen__knop {
		border-color: ButtonText;
	}
}

@media print {
	.wk-voorlezen {
		display: none !important;
	}
}