/**
 * Read Aloud control (single posts). Loaded by inc/read-aloud.php.
 * The accent colour comes from the theme's link colour (--om-ra-accent, set inline by PHP).
 * Mobile-first: the three buttons ALWAYS stay on one line. On phones each button is a narrow
 * column (icon, Odia word, English word); from 600px up they become wider "icon + label" buttons.
 */

/* Hidden until js/read-aloud.js confirms the browser can speak (no JS = no dead buttons). */
.om-read-aloud {
	display: none;
	clear: both;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 24px;
	padding: 8px;
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-family: 'Montserrat', 'Noto Sans Oriya', 'Noto Sans Odia', sans-serif;
	line-height: 1.3;
}

.om-ra-supported .om-read-aloud {
	display: block;
}

.om-ra-marker,
.om-read-aloud[hidden] {
	display: none !important;
}

/* One line, never wraps. */
.om-ra-buttons {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	margin: 0 -3px;
}

/* ---- Buttons: same look as the theme's own buttons (white, accent border, 5px radius). ---- */

.om-ra-btn {
	-webkit-appearance: none;
	appearance: none;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	box-sizing: border-box;
	min-width: 0;                   /* lets three buttons share a 320px screen */
	min-height: 64px;               /* comfortable tap target */
	margin: 0 3px;
	padding: 8px 3px;
	background: #fff;
	border: 1px solid #333;
	border: 1px solid var(--om-ra-accent, #333);
	border-radius: 5px;
	color: #222;
	cursor: pointer;
	font-family: inherit;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-transition: background-color .2s, color .2s, border-color .2s;
	transition: background-color .2s, color .2s, border-color .2s;
}

.om-ra-btn .om-ra-ico {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto;
	margin: 0 0 4px;
}

/* Phones: Odia word on one line, English word below it. */
.om-ra-label,
.om-ra-or,
.om-ra-en {
	display: block;
}

.om-ra-sep {
	display: none;
}

.om-ra-btn:hover {
	background: #333;
	background: var(--om-ra-accent, #333);
	color: #fff;
	color: var(--om-ra-on-accent, #fff);
}

/* Visible keyboard focus. */
.om-ra-btn:focus {
	outline: 3px solid #333;
	outline: 3px solid var(--om-ra-accent, #333);
	outline-offset: 2px;
}

/* Browsers that support :focus-visible do not show the ring for mouse / touch clicks. */
.om-ra-btn:focus:not(:focus-visible) {
	outline: none;
}

.om-ra-btn:disabled {
	background: #f1f1f1;
	border-color: #ccc;
	color: #767676;
	cursor: not-allowed;
}

/* ---- Play button while reading / paused: filled "active" state. ---- */

.om-ra-play.is-active,
.om-ra-play.is-active:hover {
	background: #333;
	background: var(--om-ra-accent, #333);
	border-color: #333;
	border-color: var(--om-ra-accent, #333);
	color: #fff;
	color: var(--om-ra-on-accent, #fff);
	cursor: default;
}

.om-ra-play .om-ra-ico-bars,
.om-ra-play.is-active .om-ra-ico-play {
	display: none;
}

.om-ra-play.is-active .om-ra-ico-bars {
	display: block;
}

/* Little equaliser animation while the article is being read. */
[data-state="playing"] .om-ra-ico-bars path {
	-webkit-animation: om-ra-pulse 1s ease-in-out infinite;
	animation: om-ra-pulse 1s ease-in-out infinite;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	transform-box: fill-box;
}

@-webkit-keyframes om-ra-pulse {
	0%, 100% { -webkit-transform: scaleY(1); }
	50% { -webkit-transform: scaleY(.55); }
}

@keyframes om-ra-pulse {
	0%, 100% { transform: scaleY(1); }
	50% { transform: scaleY(.55); }
}

@media (prefers-reduced-motion: reduce) {
	[data-state="playing"] .om-ra-ico-bars path {
		-webkit-animation: none;
		animation: none;
	}

	.om-ra-btn {
		-webkit-transition: none;
		transition: none;
	}
}

/* ---- Pause / Resume toggle: the right icon and label for the current state. ---- */

.om-ra-pause .om-ra-ico-resume,
.om-ra-pause .om-ra-lbl-resume {
	display: none;
}

[data-state="paused"] .om-ra-pause .om-ra-ico-pause,
[data-state="paused"] .om-ra-pause .om-ra-lbl-pause {
	display: none;
}

[data-state="paused"] .om-ra-pause .om-ra-ico-resume,
[data-state="paused"] .om-ra-pause .om-ra-lbl-resume {
	display: block;
}

/* ---- Status line and "not supported" note ---- */

.om-ra-status {
	display: block;
	min-height: 1.3em;
	margin: 6px 3px 0;
	color: #555;
	font-size: .75rem;
	font-weight: 400;
}

.om-ra-status:empty {
	min-height: 0;
	margin: 0;
}

/*
 * The note is only for browsers without speech synthesis. "!important" because the theme has a
 * very specific rule for paragraphs inside the post ("#content-main p { display: block }").
 */
.om-read-aloud .om-ra-note {
	display: none !important;
	margin: 0;
	color: #555;
	font-size: .85rem;
	font-weight: 400;
}

.om-ra-unsupported .om-read-aloud {
	display: block;
	padding: 6px 10px;
	background: none;
	border: 0;
}

.om-ra-unsupported .om-read-aloud .om-ra-buttons,
.om-ra-unsupported .om-read-aloud .om-ra-status {
	display: none;
}

.om-ra-unsupported .om-read-aloud .om-ra-note {
	display: block !important;
}

/* ---- 600px and wider: side-by-side icon + "Odia / English" label, still one line. ---- */
@media (min-width: 600px) {
	.om-read-aloud {
		padding: 10px;
	}

	.om-ra-buttons {
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}

	.om-ra-btn {
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex: 0 1 auto;
		flex: 0 1 auto;
		min-height: 48px;
		min-width: 150px;
		margin: 0 6px 0 0;
		padding: 10px 16px;
		font-size: .8rem;
	}

	.om-ra-btn .om-ra-ico {
		margin: 0 8px 0 0;
	}

	.om-ra-label {
		display: inline-block;
	}

	.om-ra-or,
	.om-ra-en,
	.om-ra-sep {
		display: inline;
	}

	[data-state="paused"] .om-ra-pause .om-ra-lbl-resume {
		display: inline-block;
	}

	.om-ra-play.is-active .om-ra-ico-bars {
		display: inline-block;
	}

	[data-state="paused"] .om-ra-pause .om-ra-ico-resume {
		display: inline-block;
	}
}