/*--------------------------------------------------------*\
	Announcements (kbd-announcements plugin)
	The plugin ships structure only; look lives here.
\*--------------------------------------------------------*/

:root {
	--hp-announcement-bg: #003A5D;
	--hp-announcement-fg: #fff;
	--hp-header-height: 4.5rem;
}

/* Fixed header sits below the hello bar while it is open. */
.header {
	top: var(--kbd-hello-bar-height, 0px);
}

/* Hello bar */
.kbd-hello-bar__inner {
	background-color: var(--hp-announcement-bg);
	color: var(--hp-announcement-fg);
}

/* Banner: .wrapper is a wrapping flex row, so force a full-width row. */
.wrapper > .kbd-banner {
	flex: 0 0 100%;
	width: 100%;
	background-color: var(--hp-announcement-bg);
	color: var(--hp-announcement-fg);
}

/*
 * The header is fixed and transparent over the first section, so pad the
 * banner content below it. Padding goes on the inner (not the section) so the
 * close animation collapses all the way to zero and the hero does not jump.
 */
.kbd-banner__inner {
	padding-top: calc(var(--kbd-hello-bar-height, 0px) + var(--hp-header-height));
}

/* Keep the close control clear of the header nav. */
.kbd-banner__close {
	top: calc(var(--kbd-hello-bar-height, 0px) + var(--hp-header-height) + 0.5rem);
}

/* Takeover: black 60% + blur behind every takeover (Figma overlay). */
.kbd-takeover::backdrop {
	background-color: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* In Memoriam layout brings its own panels (announcements-memoriam.css); the card is just a frame. */
.kbd-takeover__card:has(.kbd-takeover__layout--memoriam) {
	width: min(1122px, 100%);
	padding: 0;
	background: transparent;
}

/* Close sits in the grey margin top-right of the white card. */
.kbd-takeover__card:has(.kbd-takeover__layout--memoriam) .kbd-takeover__close {
	top: 13px;
	right: 6px;
	color: #333;
}

@media (max-width: 960px) {
	.kbd-takeover__card:has(.kbd-takeover__layout--memoriam) .kbd-takeover__close {
		top: 8px;
		right: 8px;
		color: #fff;
	}
}

.kbd-banner h1,
.kbd-banner h2,
.kbd-banner h3,
.kbd-banner p {
	color: inherit;
}