.announcement-bar {
	--promotion-text-color: var(--core-promotion-text);
	--promotion-button-background: var(--core-promotion-button-background);
	--promotion-button-color: var(--core-promotion-button-color);

	display: grid;
	align-items: center;
	gap: var(--spacing-7);
	width: calc(var(--container--width) + var(--layout--offset) * 2);
	max-width: calc(100vw - (var(--layout--padding) - var(--layout--offset)) * 2);
	margin: var(--spacing-7) auto 0;
	padding: 10px var(--spacing-7);
	border-radius: var(--radius-4);
	background: var(--branding-accent-color, var(--ghost-accent-color));
	color: var(--promotion-text-color);
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.announcement-bar-status {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	font-size: .625rem;
	font-weight: var(--font-bold);
	letter-spacing: .04em;
	white-space: nowrap;
}

.announcement-bar-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--promotion-text-color);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--promotion-text-color) 15%, transparent);
}

.announcement-bar > p {
	min-width: 0;
	overflow: hidden;
	color: var(--promotion-text-color);
	font-size: .6875rem;
	font-weight: var(--font-medium);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.announcement-bar > a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-3);
	min-height: 24px;
	padding: var(--spacing-1) var(--spacing-4);
	border-radius: 2rem;
	background-color: var(--promotion-button-background);
	color: var(--promotion-button-color);
	font-size: .625rem;
	font-weight: var(--font-medium);
	white-space: nowrap;
	transition: opacity .2s ease, transform .2s ease;
}

.announcement-bar > a:hover {
	color: var(--promotion-button-color);
	opacity: .9;
	transform: translateY(-1px);
}

.announcement-bar > a > span:last-child {
	display: flex;
	font-size: 1.15em;

	> svg {
		width: 1em;
		height: 1em;
	}
}

/* Keep the homepage carousel visually connected to the announcement. */
.navbar + .main > .section-featured:first-child,
.announcement-bar + .main > .section-featured:first-child {
	margin-top: var(--spacing-9);
}

@media (width < 640px) {
	.announcement-bar {
		align-items: center;
		gap: var(--spacing-5) var(--spacing-7);
		padding: 10px var(--spacing-7);
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.announcement-bar > p {
		grid-column: 1 / -1;
		grid-row: 2;
		overflow: visible;
		line-height: 1.4;
		text-overflow: clip;
		white-space: normal;
	}

	.announcement-bar-status {
		grid-column: 1;
		grid-row: 1;
	}

	.announcement-bar > a {
		grid-column: 2;
		grid-row: 1;
		min-height: 24px;
		padding-right: var(--spacing-4);
		padding-left: var(--spacing-4);
	}
}

@media (width < 420px) {
	.announcement-bar > a {
		width: 24px;
		padding-right: 0;
		padding-left: 0;
	}

	.announcement-bar > a > span:first-child {
		display: none;
	}
}