/**
 * Top Strip — Figma section 01 (node 1092:18989)
 * 1920x40, bg #333333, padding 10 top/bottom, right-aligned row.
 */

.top-strip {
	background-color: var(--strip-grey);
	color: var(--white);
}

.top-strip__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 40px;
}

/* Figma spaces the row with a hairline rule between items and 25px of clear
 * space either side of it, so adjacent labels sit 50 apart. Measured off the
 * node (1092:18989): the notice frame is 321 around a 296 text, the financing
 * frame 213 around 163, and each Call frame 251 around 25 + icon 20 + 10 + 171.
 * It had been 15, which ran the whole row 20px per gap tight. */
.top-strip__notice,
.top-strip__phone {
	padding-inline: var(--space-25);
	white-space: nowrap;
}

/* Deliberately NOT a flex container: the notice mixes <strong> with plain
 * text, and flex would drop the whitespace between them. */
.top-strip__notice {
	display: inline-block;
}

.top-strip__phone {
	display: flex;
	align-items: center;
}

.top-strip__notice + .top-strip__notice,
.top-strip__notice + .top-strip__phone,
.top-strip__phone + .top-strip__phone {
	border-left: 1px solid rgb(255 255 255 / 25%);
}

/* The row is right-aligned, and the design closes it on the last number's ink
 * and opens it on the first label's — no padding on either outer edge. */
.top-strip__inner > :first-child {
	padding-left: 0;
}

.top-strip__inner > :last-child {
	padding-right: 0;
}

.top-strip__notice {
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-16);
	font-weight: 400;
	line-height: var(--lh-tight);
}

.top-strip__notice strong,
.top-strip__notice b {
	font-weight: 700;
}

.top-strip__phone {
	gap: var(--space-10);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--fs-24);
	font-weight: 700;
	line-height: var(--lh-tight);
}

.top-strip__phone:hover,
.top-strip__phone:focus-visible {
	color: var(--primary-green);
}

.top-strip__phone svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* The notices are supporting copy — drop them before the phone numbers.
 * They reappear at the foot of the slide-in menu instead. */
@media (max-width: 991px) {

	.top-strip__notice {
		display: none;
	}

	/* `display: none` does not remove an element from adjacent-sibling
	 * matching, so the first phone kept the divider and the 25px inset that
	 * belonged between it and a notice that is no longer there — a rule
	 * hanging off the left edge with nothing before it. */
	.top-strip__notice + .top-strip__phone {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 567px) {

	.top-strip__inner {
		justify-content: center;
	}

	.top-strip__phone {
		padding-inline: var(--space-10);
	}

	.top-strip__phone svg {
		width: 16px;
		height: 16px;
	}
}