/*
 * Dhee Indic Transcriber — the reader's bar.
 *
 * Colours and height are custom properties, so a theme can restyle the bar
 * without a single !important:
 *   #indic-transcriber-bar { --itx-bg: #7c2d12; --itx-accent: #fde68a; }
 * The id in every selector is deliberate: themes style select, label and
 * input broadly, and an id outranks those rules.
 */

:root {
	--itx-height: 44px;
}

/*
 * Malayalam with its traditional conjuncts (സ്കൃ, ഷ്ണ, സ്ത്രീ stacked, not
 * spelt out with a visible chandrakkala). Which of the two a reader sees is
 * the font's choice, not the text's: the letters are the same either way,
 * and Noto Sans Malayalam, the usual fallback on Android and Linux, draws the
 * reformed style. Gayathri (SIL Open Font License, Swathanthra Malayalam
 * Computing) draws the traditional one, three levels deep where needed:
 * Manjari, its sibling, splits സ്ക again as soon as a vowel sign joins it,
 * which is exactly സംസ്കൃതം. The range keeps it to Malayalam letters, so
 * English beside them keeps the theme's font; the file is only fetched once a
 * reader chooses Malayalam and the script applies the family.
 */
@font-face {
	font-family: "ITX Malayalam";
	src: url("../fonts/gayathri/Gayathri-Regular.woff2") format("woff2");
	font-weight: 100 599;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC;
}

@font-face {
	font-family: "ITX Malayalam";
	src: url("../fonts/gayathri/Gayathri-Bold.woff2") format("woff2");
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC;
}

#indic-transcriber-bar {
	--itx-bg: #1f2937;
	--itx-fg: #f9fafb;
	--itx-muted: #cbd5e1;
	--itx-accent: #f59e0b;
	--itx-control-bg: #ffffff;
	--itx-control-fg: #111827;
	--itx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;

	position: fixed;
	left: 0;
	right: 0;
	z-index: 99990; /* under the WordPress admin bar (99999) */
	height: var(--itx-height);
	margin: 0;
	padding: 0 12px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background: var(--itx-bg);
	color: var(--itx-fg);
	font: 14px/1.2 var(--itx-font);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

#indic-transcriber-bar.itx-bar--top {
	top: 0;
}

#indic-transcriber-bar.itx-bar--bottom {
	bottom: 0;
	box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
}

/* Logged in: sit under the admin bar, which is 32px tall, 46px from 782px down. */
body.admin-bar #indic-transcriber-bar.itx-bar--top {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar #indic-transcriber-bar.itx-bar--top {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* From 600px down the admin bar scrolls away with the page; follow it. */
@media screen and (max-width: 600px) {
	body.admin-bar #indic-transcriber-bar.itx-bar--top {
		position: absolute;
	}
}

/* Keeps the page's first and last lines out from under the bar. */
.itx-spacer {
	display: block;
	height: var(--itx-height);
	margin: 0;
	padding: 0;
}

html.itx-bar-top-page {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--itx-height));
}

#indic-transcriber-bar .itx-bar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	min-width: 0;
}

#indic-transcriber-bar .itx-field,
#indic-transcriber-bar .itx-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	white-space: nowrap;
	cursor: pointer;
}

#indic-transcriber-bar .itx-field {
	min-width: 0;
}

#indic-transcriber-bar .itx-field__label {
	color: var(--itx-muted);
}

#indic-transcriber-bar .itx-select {
	display: inline-block;
	width: auto;
	max-width: 52vw;
	height: 32px;
	margin: 0;
	padding: 0 28px 0 10px;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--itx-control-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23374151' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;
	color: var(--itx-control-fg);
	font: 15px/30px var(--itx-font);
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	cursor: pointer;
}

#indic-transcriber-bar .itx-select:focus-visible,
#indic-transcriber-bar .itx-check__box:focus-visible {
	outline: 2px solid var(--itx-accent);
	outline-offset: 2px;
}

#indic-transcriber-bar .itx-check__box {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--itx-accent);
	cursor: pointer;
}

#indic-transcriber-bar .itx-check.is-disabled {
	opacity: 0.5;
	cursor: default;
}

#indic-transcriber-bar .itx-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Phones: drop the "Read in" words (screen readers still hear them). */
@media screen and (max-width: 480px) {
	#indic-transcriber-bar {
		padding: 0 8px;
		font-size: 13px;
	}

	#indic-transcriber-bar .itx-bar__inner {
		justify-content: space-between;
		gap: 10px;
	}

	#indic-transcriber-bar .itx-field__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	#indic-transcriber-bar .itx-select {
		max-width: 60vw;
		font-size: 14px;
	}
}

@media print {
	#indic-transcriber-bar,
	.itx-spacer {
		display: none;
	}
}