/*
 * Merz Office Closure Banner
 *
 * Colours, font, and spacing below are estimated from the reference
 * screenshots (Figma Dev Mode was not accessible when this was built).
 * Swap the custom properties in .merz-ocb-banner for exact brand values
 * if/when they're confirmed.
 */

.merz-ocb-banner {
	--merz-ocb-black: #000000;
	--merz-ocb-white: #ffffff;
	--merz-ocb-grey-text: #6b6b6b;
	--merz-ocb-grey-divider: #d9d9d9;
	--merz-ocb-duration: 20s;

	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	background: var(--merz-ocb-white);
	color: var(--merz-ocb-black);
	border-bottom: 2px solid var(--merz-ocb-black);
	/* position: relative (not fixed/sticky — stays in normal flow) so z-index takes effect at all. */
	position: relative;
	z-index: 99999;
	font-family: 'proxima_nova_rgregular', 'Proxima Nova', Arial, Helvetica, sans-serif;
	font-size: var(--merz-ocb-font-size, 13px);
	line-height: 1.3;
	box-sizing: border-box;
}

.merz-ocb-banner *,
.merz-ocb-banner *::before,
.merz-ocb-banner *::after {
	box-sizing: border-box;
}

.merz-ocb-zone {
	display: flex;
	align-items: center;
	padding: 10px 20px;
}

.merz-ocb-zone-a {
	order: 1;
	flex: 0 0 auto;
	gap: 10px;
	border-right: 1px solid var(--merz-ocb-grey-divider);
	white-space: nowrap;
}

.merz-ocb-zone-b {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	border-right: 1px solid var(--merz-ocb-grey-divider);
}

.merz-ocb-zone-b--static {
	overflow: visible;
	padding-top: 10px;
	padding-bottom: 10px;
}

.merz-ocb-message-static {
	margin: 0;
	white-space: normal;
	word-wrap: break-word;
}

.merz-ocb-message-static strong,
.merz-ocb-message-static b {
	font-weight: 700;
}

.merz-ocb-message-static a {
	color: var(--merz-ocb-grey-text);
	text-decoration: underline;
}

.merz-ocb-zone-c {
	order: 3;
	flex: 0 0 auto;
	justify-content: flex-end;
	text-align: right;
	white-space: nowrap;
}

.merz-ocb-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--merz-ocb-black);
	color: var(--merz-ocb-white);
	font-weight: 700;
	font-size: 1em;
	line-height: 1;
}

.merz-ocb-label-text,
.merz-ocb-compliance-text {
	display: flex;
	flex-direction: column;
}

.merz-ocb-compliance-text {
	align-items: flex-end;
}

.merz-ocb-label-heading,
.merz-ocb-compliance-code {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.merz-ocb-label-subline,
.merz-ocb-compliance-subline {
	color: var(--merz-ocb-grey-text);
	font-size: 0.9em;
}

/* Visually-hidden static copy of the message for assistive tech, read once. */
.merz-ocb-message-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.merz-ocb-marquee {
	overflow: hidden;
	width: 100%;
}

.merz-ocb-track {
	display: inline-flex;
	width: max-content;
	animation: merz-ocb-scroll var(--merz-ocb-duration) linear infinite;
	will-change: transform;
}

.merz-ocb-banner.is-paused .merz-ocb-track {
	animation-play-state: paused;
}

.merz-ocb-message-copy {
	display: inline-block;
	padding-right: 40px;
	white-space: nowrap;
}

.merz-ocb-message-copy strong,
.merz-ocb-message-copy b {
	font-weight: 700;
}

.merz-ocb-message-copy a {
	color: var(--merz-ocb-grey-text);
	text-decoration: underline;
}

@keyframes merz-ocb-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Mobile: Zone A + Zone C share row 1, Zone B drops to a full-width row 2. */
@media (max-width: 768px) {
	.merz-ocb-banner {
		flex-wrap: wrap;
	}

	.merz-ocb-zone-a {
		order: 1;
		flex: 1 1 50%;
	}

	.merz-ocb-zone-c {
		order: 2;
		flex: 1 1 50%;
		border-right: none;
	}

	.merz-ocb-zone-b {
		order: 3;
		flex: 1 1 100%;
		border-right: none;
		border-top: 1px solid var(--merz-ocb-grey-divider);
	}
}

/* Respect prefers-reduced-motion: show the message statically instead. */
@media (prefers-reduced-motion: reduce) {
	.merz-ocb-track {
		animation: none;
		display: block;
		width: 100%;
	}

	.merz-ocb-message-copy {
		white-space: normal;
		padding-right: 0;
	}

	.merz-ocb-message-copy:nth-of-type(2) {
		display: none;
	}
}