/*
 * Herald Bar — front-end component.
 * Settings-dependent values arrive as custom properties from the inline CSS
 * printed after this file (see Herald_Bar_Settings::generated_css()).
 *
 * All slides share a single grid cell, so the component always takes the height
 * of its tallest announcement and never jumps while rotating.
 */

.hdb-bar {
	--hdb-fs: var(--hdb-fs-d, 14px);
	--hdb-py: var(--hdb-py-d, 10px);
	--hdb-px: var(--hdb-px-d, 16px);
	--hdb-mh: var(--hdb-mh-d, 0px);
	--hdb-align: var(--hdb-align-d, center);

	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	background: var(--hdb-bg, transparent);
	color: var(--hdb-color, inherit);
	font-size: var(--hdb-fs);
	font-weight: var(--hdb-fw, 400);
	line-height: 1.4;
}

.hdb-bar[hidden] {
	display: none !important;
}

.hdb-bar .hdb-viewport {
	position: relative;
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.hdb-bar .hdb-slide {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--hdb-mh);
	padding: var(--hdb-py) var(--hdb-px);
	background: var(--hdb-slide-bg, transparent);
	color: var(--hdb-slide-color, inherit);
	visibility: hidden;
	opacity: 0;
}

.hdb-bar .hdb-slide.is-active {
	visibility: visible;
	opacity: 1;
}

.hdb-bar .hdb-inner {
	flex: 1 1 auto;
	min-width: 0;
	text-align: var(--hdb-align);
	overflow-wrap: anywhere;
}

.hdb-bar .hdb-text {
	display: inline;
}

.hdb-bar .hdb-inner a {
	color: var(--hdb-slide-link, var(--hdb-link, currentColor));
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hdb-bar .hdb-inner a:hover,
.hdb-bar .hdb-inner a:focus-visible {
	text-decoration-thickness: 2px;
}

.hdb-bar .hdb-inner a:focus-visible,
.hdb-bar .hdb-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Optional CTA */
.hdb-bar .hdb-inner .hdb-cta {
	display: inline-block;
	margin-inline-start: 0.6em;
	color: var(--hdb-cta-color, currentColor);
	font-weight: 600;
	white-space: nowrap;
}

.hdb-bar.hdb-cta-button .hdb-inner .hdb-cta {
	padding: 0.2em 0.8em;
	border-radius: 3px;
	background: var(--hdb-cta-bg, transparent);
	line-height: 1.35;
	text-decoration: none;
}

.hdb-bar.hdb-cta-button .hdb-inner .hdb-cta:hover {
	opacity: 0.88;
}

/* Optional dismiss button */
.hdb-bar .hdb-close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	min-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
}

.hdb-bar .hdb-close:hover,
.hdb-bar .hdb-close:focus-visible {
	opacity: 1;
}

/* Transitions — enabled once the script has initialised (.hdb-ready) */
.hdb-bar.hdb-ready .hdb-slide {
	transition:
		opacity var(--hdb-speed, 500ms) ease,
		transform var(--hdb-speed, 500ms) ease,
		visibility 0s linear var(--hdb-speed, 500ms);
}

.hdb-bar.hdb-ready .hdb-slide.is-active {
	transition-delay: 0s, 0s, 0s;
}

.hdb-bar.hdb-anim-slide .hdb-slide {
	transform: translateX(100%);
}

.hdb-bar.hdb-anim-slide-up .hdb-slide {
	transform: translateY(100%);
}

.hdb-bar.hdb-anim-slide .hdb-slide.is-active,
.hdb-bar.hdb-anim-slide-up .hdb-slide.is-active {
	transform: none;
}

.hdb-bar.hdb-anim-slide .hdb-slide.is-leaving {
	transform: translateX(-100%);
}

.hdb-bar.hdb-anim-slide-up .hdb-slide.is-leaving {
	transform: translateY(-100%);
}

.hdb-bar .hdb-slide.hdb-no-anim {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.hdb-bar .hdb-slide {
		transition: none !important;
		transform: none !important;
	}
}