/* ═══════════════════════════════════════════════════════════════════════════
   HOME — ANNOUNCEMENT BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.home-banner {
	background-color: #c0392b;
	padding: 0.75rem 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;

	/* position: relative, not sticky — the banner scrolls away with the page
	   like every other section.

	   It was briefly sticky, to stop the fixed header cutting through it as it
	   scrolled past. Pinning it fixed that but changed the behaviour: an
	   announcement bar that never leaves is not what this is. Scrolling under
	   a fixed header is ordinary, and the slice is transient — you only see it
	   while the page is actually moving.

	   relative is load-bearing, not decoration: .home-banner__close is
	   absolutely positioned against it. (Sticky happened to provide the same
	   containing block, which is why the × kept working while it was pinned.) */
	position: relative;
}

/* Hidden state — JS adds this after dismiss */
.home-banner[hidden] {
	display: none;
}

.home-banner__text {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	color: #ffffff;
	line-height: 1.5;
	margin: 0;
}

.home-banner__text--short {
	display: none;
}

.home-banner__link {
	color: #ffffff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity 0.15s ease;
}

.home-banner__link:hover {
	opacity: 0.8;
}

/* Dismiss button */
.home-banner__close {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 9999px;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 0.75rem;
	cursor: pointer;
	transition: background 0.15s ease;
	padding: 0;
	flex-shrink: 0;
}

.home-banner__close:hover {
	background: rgba(255, 255, 255, 0.32);
}

@media (max-width: 680px) {
	.home-banner {
		padding: 0.6rem 3rem 0.6rem 2rem;
	}

	.home-banner__text {
		line-height: 1.5;
	}

	.home-banner__text--full {
		display: none;
	}

	.home-banner__text--short {
		display: block;
	}

	.home-banner__close {
		right: 0.75rem;
	}
}