/*
 * Top message bar (templates/parts/announce.php). Self-contained: it sits above the theme
 * header, outside .vatsa-homepage, and may load on any page.
 * Colours: maroon → sindoor red → deep saffron, all with white text at 4.5:1 or better.
 */

.vh-topbar {
	position: relative;
	z-index: 20;
	overflow: hidden;
	background: linear-gradient(90deg, #5c1222 0%, #a3151f 48%, #b4501a 100%);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
	font-family: "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: .9375rem;
	line-height: 1.5;
	color: #fff;
}

.vh-topbar *,
.vh-topbar *::before,
.vh-topbar *::after {
	box-sizing: border-box;
}

.vh-topbar__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 1200px;
	margin-inline: auto;
	padding: 8px 16px;
}

.vh-topbar__badge {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f6c97a;
	box-shadow: 0 0 0 3px rgba(246, 201, 122, .25);
	font-family: "Noto Serif Devanagari", serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	color: #681c2b;
}

/* Every message occupies the same cell: the bar is as tall as the longest one, so rotating never moves the page. */
.vh-topbar__track {
	display: grid;
	flex: 1;
	min-width: 0;
	/* Clip the sliding messages; the 3px inset keeps focus outlines visible. */
	margin: -3px;
	padding: 3px;
	overflow: hidden;
	list-style: none;
}

.vh-topbar__item {
	grid-area: 1 / 1;
	align-self: center;
	margin: 0;
	padding: 0;
	visibility: hidden;
	opacity: 0;
	transform: translateX(48px);
	filter: blur(2px);
	transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .2, 1), filter .5s ease, visibility 0s linear .55s;
}

/* The outgoing message slides out to the left while the next one slides in from the right. */
.vh-topbar__item.is-leaving {
	transform: translateX(-48px);
}

.vh-topbar__item.is-active {
	visibility: visible;
	opacity: 1;
	transform: none;
	filter: none;
	transition: opacity .5s ease .12s, transform .55s cubic-bezier(.2, .8, .2, 1) .12s, filter .5s ease .12s, visibility 0s;
}

.vh-topbar__tag {
	display: inline-block;
	margin-right: 8px;
	padding: 1px 9px;
	border-radius: 999px;
	background: #f6c97a;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.6;
	color: #681c2b;
	vertical-align: 1px;
}

/* The ॐ badge gives a small glow each time the message changes. */
.vh-topbar.is-ready .vh-topbar__badge {
	animation: vh-topbar-glow 5s ease-out infinite;
}

.vh-topbar.is-paused .vh-topbar__badge,
.vh-topbar:hover .vh-topbar__badge,
.vh-topbar:focus-within .vh-topbar__badge {
	animation-play-state: paused;
}

@keyframes vh-topbar-glow {
	0% {
		box-shadow: 0 0 0 0 rgba(246, 201, 122, .8);
	}
	25%,
	100% {
		box-shadow: 0 0 0 8px rgba(246, 201, 122, 0);
	}
}

.vh-topbar__item > :is(a, span) {
	display: inline;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
}

.vh-topbar__item a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 4px;
}

.vh-topbar__item a span {
	text-decoration: underline;
	text-decoration-color: rgba(246, 201, 122, .7);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.vh-topbar__item a:hover span {
	text-decoration-color: #fff;
}

.vh-topbar__arrow {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: #f6c97a;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s ease;
}

.vh-topbar__item a:hover .vh-topbar__arrow {
	transform: translateX(3px);
}

.vh-topbar :focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Controls are laid out from the start (no shift) and shown once the script is running. */
.vh-topbar__controls {
	display: flex;
	flex: none;
	gap: 4px;
	visibility: hidden;
}

.vh-topbar.is-ready .vh-topbar__controls {
	visibility: visible;
}

.vh-topbar__btn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.vh-topbar__btn:hover {
	border-color: #f6c97a;
	background: rgba(255, 255, 255, .2);
}

.vh-topbar__btn svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vh-topbar__play {
	display: none;
}

.vh-topbar.is-paused .vh-topbar__pause {
	display: none;
}

.vh-topbar.is-paused .vh-topbar__play {
	display: block;
	fill: currentColor;
}

/* The progress line fills as the 5-second timer in the script runs. */
.vh-topbar__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #f6c97a;
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform .1s linear;
}

@media (max-width: 600px) {
	.vh-topbar {
		font-size: .875rem;
	}

	.vh-topbar__inner {
		gap: 8px;
		padding-inline: 12px 8px;
	}

	.vh-topbar__badge {
		display: none;
	}

	.vh-topbar__controls {
		gap: 2px;
	}
}

/* No automatic rotation and no movement: readers step through with the buttons. */
@media (prefers-reduced-motion: reduce) {
	.vh-topbar__item,
	.vh-topbar__item.is-leaving,
	.vh-topbar__item.is-active,
	.vh-topbar__arrow {
		transition: none;
		transform: none;
		filter: none;
	}

	.vh-topbar.is-ready .vh-topbar__badge {
		animation: none;
	}

	.vh-topbar__progress {
		display: none;
	}

	.vh-topbar__toggle {
		display: none;
	}
}