/* File: public/css/components/banner.css */

.site-banner {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 var(--banner-margin-bottom) 0;
	padding: var(--banner-padding-y) 0;
	overflow: hidden;
	text-decoration: none;

	border-top: 1px solid var(--banner-border-color);
	border-bottom: 1px solid var(--banner-border-color);
	border-left: none;
	border-right: none;
	border-radius: 0;

	background: var(--banner-bg);
	color: var(--banner-text-color);
	box-shadow: none;

	--banner-start-offset: 35vw;

	transition:
		transform var(--transition-fast) var(--easing-standard),
		background-color var(--transition-fast) var(--easing-standard),
		box-shadow var(--transition-fast) var(--easing-standard),
		opacity var(--transition-fast) var(--easing-standard);
}

.site-banner:hover {
	transform: translateY(var(--banner-hover-translate-y));
	background: var(--banner-bg-hover);
	box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.12);
}

.site-banner:focus-visible {
	outline: var(--banner-outline-width) solid var(--banner-outline-color);
	outline-offset: var(--banner-outline-offset);
}

.site-banner__viewport {
	display: block;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.site-banner__track {
	display: inline-flex;
	align-items: center;
	min-width: max-content;
	white-space: nowrap;
	will-change: transform;
	animation-name: site-banner-marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.site-banner__group {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.site-banner__group:first-child {
	padding-left: var(--banner-start-offset);
}

.site-banner__item,
.site-banner__static-text {
	display: inline-block;
	font-size: var(--banner-font-size);
	font-weight: var(--banner-font-weight);
	letter-spacing: var(--banner-letter-spacing);
	padding-left: var(--banner-item-gap);
}

.site-banner__group .site-banner__item:first-child {
	padding-left: 0;
}

.site-banner__separator {
	display: inline-block;
	padding-left: var(--banner-item-gap);
	font-size: var(--banner-separator-font-size);
	opacity: 0.7;
}

.banner-speed-slow .site-banner__track {
	animation-duration: var(--banner-speed-slow);
}

.banner-speed-normal .site-banner__track {
	animation-duration: var(--banner-speed-normal);
}

.banner-speed-fast .site-banner__track {
	animation-duration: var(--banner-speed-fast);
}

.site-banner__static-text {
	display: block;
	padding-left: var(--banner-item-gap);
	padding-right: var(--banner-item-gap);
}

@keyframes site-banner-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.home-top-banner {
	margin-bottom: var(--banner-home-margin-bottom);
}

@media (max-width: 768px) {
	.site-banner {
		border-radius: 0;
		padding: var(--banner-mobile-padding-y) 0;
		--banner-start-offset: 18vw;
	}

	.site-banner__item,
	.site-banner__static-text {
		font-size: var(--banner-font-size-mobile);
		padding-left: var(--banner-item-gap-mobile);
		padding-right: var(--banner-item-gap-mobile);
	}

	.site-banner__group .site-banner__item:first-child {
		padding-left: 0;
	}

	.site-banner__separator {
		padding-left: var(--banner-item-gap-mobile);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-banner {
		--banner-start-offset: 0;
	}

	.site-banner__track {
		animation: none;
	}

	.site-banner__group:first-child {
		padding-left: 0;
	}

	.site-banner__static-text {
		padding-left: var(--banner-item-gap);
		padding-right: var(--banner-item-gap);
	}
}