/* Notification Bar — full-width lime promo strip (design.md §notification-bar). */

.tt-notification-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 41px;
	padding-inline: 50px;
	overflow: hidden;
	background-color: var(--wp--preset--color--lime, #b0e33a);
}

.tt-notification-bar__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow, "Barlow", sans-serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.6;
	color: var(--wp--preset--color--black, #000);
	text-align: center;
	white-space: nowrap;
}

.tt-notification-bar__sep {
	margin-inline: 1em;
	color: var(--wp--preset--color--red, #cf2026);
}

/* ---- Mobile (≤767px) -----------------------------------------------------
   The desktop 50px gutter leaves only `viewport - 100` for a 408px nowrap
   string, so the strip clipped at both ends on any handset narrower than
   ~414px. Gutter drops to the design's 20px and the separator tightens to
   match the design's 395px string; the type steps down to 16px because the
   mobile canvas is 440 and real phones go to 360 — at 20px it cannot fit
   there without clipping. */
@media (max-width: 767px) {
	.tt-notification-bar {
		padding-inline: 20px;
	}

	.tt-notification-bar__text {
		font-size: 16px;
	}

	.tt-notification-bar__sep {
		margin-inline: 0.5em;
	}
}