/* =============================================================================
   Brand Benefits Banner
   Thin orange highlight strip under the nav. Desktop: single evenly-distributed
   row with separators. Mobile: one benefit at a time, auto-rotating (JS adds
   .benefits-banner--rotate). No-JS / reduced-motion falls back to a static list.
   ============================================================================= */

.benefits-banner {
	background: #e74111;
	color: #fff;
}

.benefits-banner__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 24px;
	min-height: 44px;
}

.benefits-banner__item {
	position: relative;
	flex: 1 1 auto;
	text-align: center;
	padding: 10px 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

/* Vertical separators between items (desktop) */
.benefits-banner__item + .benefits-banner__item::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 16px;
	background: rgba(255, 255, 255, 0.4);
}

.benefits-banner__link,
.benefits-banner__text {
	display: inline-block;
	color: #fff;
	text-decoration: none;
}

.benefits-banner__link:hover,
.benefits-banner__link:focus {
	color: #fff;
	text-decoration: underline;
}

/* ── Mobile ─────────────────────────────────────────────────────────────────
   ≤ 800px matches the site-wide mobile section breakpoint. */
@media (max-width: 800px) {

	.benefits-banner__list {
		justify-content: center;
		gap: 0;
		min-height: 40px;
	}

	.benefits-banner__item + .benefits-banner__item::before {
		display: none;
	}

	/* Rotation mode: only the active benefit is visible. */
	.benefits-banner--rotate .benefits-banner__item {
		display: none;
		flex-basis: 100%;
	}

	.benefits-banner--rotate .benefits-banner__item.is-active {
		display: block;
	}

	/* Static fallback (no JS / prefers-reduced-motion): all items wrap inline. */
	.benefits-banner:not(.benefits-banner--rotate) .benefits-banner__item {
		flex: 0 0 auto;
		padding: 8px 10px;
	}
}