/*
 * The live radio player.
 *
 * Logical properties throughout, so Arabic and French share this file. The
 * native <audio> control is left alone rather than restyled: its own controls
 * are the ones a phone already knows, and a hand-built play button would have
 * to reimplement buffering, volume and the lock-screen controls to be no
 * better.
 *
 * ---------------------------------------------------------------------------
 * Update log
 * ---------------------------------------------------------------------------
 * 0.49.0 — 2026-08-29 — First build.
 * ---------------------------------------------------------------------------
 */

.bk-radio {
	--bk-rd-sea: var( --bk-palette1, #1B6B70 );
	--bk-rd-clay: var( --bk-palette2, #B8432B );
	--bk-rd-ink: var( --bk-palette3, #14252A );
	--bk-rd-soft: var( --bk-palette4, #3A4E53 );
	--bk-rd-sand: var( --bk-palette8, #EEF1F0 );
	--bk-rd-line: var( --bk-palette7, #E3E9E8 );
	--bk-rd-white: var( --bk-palette9, #FFFFFF );

	max-inline-size: 36rem;
	padding: 1.25rem 1.35rem;
	border: 1px solid var( --bk-rd-line );
	border-radius: 14px;
	background: var( --bk-rd-white );
}

.bk-radio__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
	margin-block-end: 0.9rem;
}

.bk-radio__name {
	color: var( --bk-rd-ink );
	font-size: 1.15rem;
	font-weight: 700;
}

.bk-radio__tag {
	padding: 0.12rem 0.55rem;
	border-radius: 999px;
	background: var( --bk-rd-clay );
	color: var( --bk-rd-white );
	font-size: 0.72rem;
	font-weight: 700;
}

/* A dot that breathes, so "live" reads without being read. */
.bk-radio__live {
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-radius: 50%;
	background: var( --bk-rd-clay );
	animation: bk-radio-pulse 2s ease-in-out infinite;
}

@keyframes bk-radio-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

@media ( prefers-reduced-motion: reduce ) {
	.bk-radio__live { animation: none; }
}

.bk-radio__audio {
	inline-size: 100%;
	block-size: 2.6rem;
}

.bk-radio__note {
	margin-block-start: 0.8rem !important;
	color: var( --bk-rd-soft );
	font-size: 0.85rem;
	text-align: start;
}

.bk-radio__note a {
	color: var( --bk-rd-sea ) !important;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * The play button in the navigation — 0.49.1
 *
 * Sits in the menu as a real <li>, so it inherits whatever the theme does to
 * menu items and needs no theme-specific rule. It is a soft tile rather than
 * an outlined pill: with «سجّل» filled beside it, a third outline in the same
 * row was clutter. Colours are named from the palette, never inherited — an
 * inherited border took the theme's link blue and fought everything near it.
 * ---------------------------------------------------------------------- */

/*
 * The button lived inside the menu until 0.51.0 and had to fight it: the menu
 * is a flex row, and without `flex: 0 0 auto` the item shrank to its minimum
 * content width — for the French «La radio», the width of one letter, so the
 * label stacked vertically. It sits in the bar above the header now, where
 * nothing squeezes it, but `nowrap` stays because that lesson was cheap to
 * keep and expensive to relearn.
 */

.bk-radiobtn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border: 0;
	border-radius: 999px;
	/*
	 * White, not sand: the bar it sits on IS sand, so a sand tile vanished
	 * into it and stopped looking pressable.
	 */
	background: var( --bk-palette9, #FFFFFF );
	color: var( --bk-palette1, #1B6B70 );
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bk-radiobtn:hover,
.bk-radiobtn:focus-visible {
	background: var( --bk-palette7, #E3E9E8 );
	color: var( --bk-palette1, #1B6B70 );
}

.bk-radiobtn svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
}

.bk-radiobtn__label {
	white-space: nowrap;
}

.bk-radiobtn__dot {
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-radius: 50%;
	background: var( --bk-palette2, #B8432B );
	flex: 0 0 auto;
}

.bk-radiobtn.is-playing {
	background: var( --bk-palette2, #B8432B );
	color: var( --bk-palette9, #FFFFFF );
}

.bk-radiobtn.is-playing .bk-radiobtn__dot {
	background: currentColor;
	animation: bk-radio-pulse 2s ease-in-out infinite;
}

.bk-radiobtn.is-loading {
	opacity: 0.55;
	cursor: progress;
}

/* The audio element itself is only a carrier — never shown. */
.bk-radiobtn__audio {
	display: none !important;
}

/*
 * Hidden to the eye, never to a screen reader: this text IS the button's
 * accessible name, so display:none would leave the button nameless on a phone.
 */
@media ( max-width: 420px ) {
	.bk-radiobtn__label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
		border: 0;
	}

	.bk-radiobtn { padding: 0.3rem 0.5rem; }
}