/* Inline notice inside the header meta strip — no box, no own background.
	The severity tints the whole strip (see the .site-header__meta rules). */
.sa-announcement {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9375rem;
	line-height: 1.4;
}

.sa-announcement__icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

.sa-announcement__title {
	font-weight: 600;
}

.sa-announcement__close {
	background: none;
	border: 0;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.8;
}

.sa-announcement__close:hover {
	opacity: 1;
}

/* Severity tints the entire header meta strip. announcements.js toggles the
	class from the most severe *visible* announcement and clears it when the last
	one is dismissed, so the strip returns to its default colour. Info adds no
	class — the strip keeps its default look. The doubled class outweighs the
	theme's base .site-header__meta rule regardless of stylesheet order. */
.site-header__meta.site-header__meta--warning {
	background-color: var(--sa-strip-warning-bg, #f6e6b8);
	color: var(--sa-strip-warning-fg, #4a3a00);
}

.site-header__meta.site-header__meta--critical {
	background-color: var(--sa-strip-critical-bg, #b3261e);
	color: var(--sa-strip-critical-fg, #fff);
}

/* Mobile: the notice becomes its own full-bleed centered band and the severity
	tint moves onto it, so the temperature row (which wraps below) keeps the
	strip's normal background. The band bleeds to the strip edges (no rounded box,
	no side margins). A little breathing room below separates it from the temps.
	Matches the theme's header breakpoint (600px). */
@media (max-width: 600px) {
	.site-header__meta.site-header__meta--warning,
	.site-header__meta.site-header__meta--critical {
		background-color: var(--wp--preset--color--dark);
		color: var(--wp--preset--color--primary-light);
	}

	.sa-announcement {
		display: flex;
		box-sizing: border-box;
		justify-content: center;
		text-align: center;
		/* Full-bleed: widen by the inner's horizontal padding (1rem each side)
			and pull out with matching negative side margins so the tint reaches
			the strip edges. The extra width makes the band's outer size equal the
			container, so the inner's justify-content:center has no free space to
			re-center it back inside the padding. Top margin bleeds to the strip
			top; bottom margin keeps the temperature row clear. */
		width: calc(100% + 2rem);
		margin: -0.625rem -1rem 0.6rem;
		padding: 0.45rem 1rem;
	}

	.sa-announcement[data-ann-severity='warning'] {
		background-color: var(--sa-strip-warning-bg, #f6e6b8);
		color: var(--sa-strip-warning-fg, #4a3a00);
	}

	.sa-announcement[data-ann-severity='critical'] {
		background-color: var(--sa-strip-critical-bg, #b3261e);
		color: var(--sa-strip-critical-fg, #fff);
	}
}

.sa-announcement-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.6);
}

.sa-announcement-overlay__box {
	max-width: 32rem;
	width: 100%;
	background: var(--sa-ann-overlay-bg, #fff);
	color: var(--sa-ann-overlay-fg, #1c2b33);
	border-radius: 0.75rem;
	padding: 1.5rem;
	text-align: center;
}

.sa-announcement-overlay__title {
	margin: 0 0 0.75rem;
}

.sa-announcement-overlay__ack {
	margin-top: 1rem;
	padding: 0.5rem 1.5rem;
	border: 0;
	border-radius: 0.5rem;
	cursor: pointer;
	background: var(--sa-ann-critical-bg, #b3261e);
	color: var(--sa-ann-critical-fg, #fff);
	font-weight: 600;
}