/* global-banner v1.0.0 — frontend styles */

.global-banner-wrapper {
	position: sticky;
	top: var(--global-banner-top, 0px);
	z-index: 500;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 44px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	overflow: hidden;
}

.global-banner-wrapper.align-center { text-align: center; }
.global-banner-wrapper.align-left   { text-align: left; }

/* ── Track / items ───────────────────────────────────────────────── */
.global-banner-track {
	position: relative;
}

.global-banner-item {
	display: none;
}
.global-banner-item.is-active {
	display: block;
}

/* Carousel crossfade for the active item */
.is-carousel .global-banner-item {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.35s ease;
	display: block;
	pointer-events: none;
}
.is-carousel .global-banner-item.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.is-carousel .global-banner-item {
		transition: none;
	}
}

.global-banner-link,
.global-banner-text {
	color: inherit;
}
.global-banner-link {
	text-decoration: none;
	display: inline-block;
}
.global-banner-link:hover,
.global-banner-link:focus {
	text-decoration: underline;
}
/* Small discoverability affordance for whole-item links */
.global-banner-link::after {
	content: "\2192";
	margin-left: 6px;
	display: inline-block;
	transition: transform 0.15s ease;
}
.global-banner-link:hover::after {
	transform: translateX(2px);
}

/* ── Controls (pause / prev / next) ─────────────────────────────── */
.global-banner-controls {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
}
.align-left .global-banner-controls {
	right: 10px;
}

.global-banner-pause,
.global-banner-prev,
.global-banner-next {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.global-banner-pause:hover,
.global-banner-prev:hover,
.global-banner-next:hover,
.global-banner-pause:focus,
.global-banner-prev:focus,
.global-banner-next:focus {
	opacity: 1;
}

.global-banner-prev,
.global-banner-next {
	width: 22px;
	height: 22px;
	font-size: 16px;
	line-height: 1;
	padding: 0;
}

.global-banner-pause {
	width: 22px;
	height: 22px;
	padding: 0;
}
.global-banner-pause-icon {
	position: relative;
	width: 8px;
	height: 8px;
}
.global-banner-pause-icon::before,
.global-banner-pause-icon::after {
	content: "";
	position: absolute;
	top: 0;
	width: 2px;
	height: 8px;
	background: currentColor;
}
.global-banner-pause-icon::before { left: 1px; }
.global-banner-pause-icon::after  { right: 1px; }
.global-banner-pause.is-paused .global-banner-pause-icon::before,
.global-banner-pause.is-paused .global-banner-pause-icon::after {
	/* Turns into a "play" triangle when paused */
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent currentColor;
	background: transparent;
	top: 0;
}
.global-banner-pause.is-paused .global-banner-pause-icon::after {
	display: none;
}
.global-banner-pause.is-paused .global-banner-pause-icon::before {
	left: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.global-banner-wrapper {
		padding: 8px 60px 8px 12px;
		font-size: 12.5px;
	}
	.global-banner-controls {
		right: 6px;
	}
}