/*
 * Sound control for the Rooted hero videos. The button itself is built by
 * assets/js/hero-video.js, so this is the one place its look is defined.
 *
 * Sits top-right. Bottom-left, where Renton had it, runs into Covington's own
 * buttons: its text block sits lower in the hero. The top-right corner is clear
 * on every Rooted page, below the header and above the seal.
 *
 * Styled after the pill Renton's hero already had; the speaker icons come
 * from Maple Valley's old button, because emoji render differently on every
 * device and SVG doesn't.
 */
:is(.cov, .isq) .tb-hero-sound {
	position: absolute;
	z-index: 5;
	top: 24px;
	right: max(24px, calc((100vw - 1400px) / 2));
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, .75);
	background: rgba(0, 24, 48, .78);
	color: #fff;
	padding: 11px 16px;
	font: 800 .72rem/1 Montserrat, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: .07em;
	text-transform: uppercase;
	cursor: pointer;
	backdrop-filter: blur(7px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

:is(.cov, .isq) .tb-hero-sound:hover {
	background: var(--mustard, #E49C00);
	color: var(--navy, #001830);
}

:is(.cov, .isq) .tb-hero-sound:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

:is(.cov, .isq) .tb-hero-sound svg {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 700px) {
	:is(.cov, .isq) .tb-hero-sound {
		top: 16px;
		right: 16px;
	}
}