/* ── Announcement Banner ──────────────────────────────────────────────────── */

@keyframes cf-banner-expand {
	from { grid-template-rows: 0fr; }
	to   { grid-template-rows: 1fr; }
}

/* Outer wrapper: grid row expands from 0 → natural height, pushing content down */
.cf-announcement-banner-outer {
	display: grid;
	grid-template-rows: 0fr;
	animation: cf-banner-expand 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	margin-block-start: 0 !important; /* prevent block-gap from appearing above banner */
}

.cf-announcement-banner {
	width: 100%;
	padding: 0.65rem 1.5rem;
	margin: 0;
	overflow: hidden; /* required so content is clipped while row height is 0 */
	min-height: 0;    /* required for grid 0fr to actually collapse to zero */
}

.cf-announcement-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.cf-announcement-banner__text {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.5;
}

/* ── Button ───────────────────────────────────────────────────────────────── */

.cf-banner-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.35rem 0.75rem;
	border-radius: 6px;
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 900;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1;
}

.cf-banner-btn__arrow {
	display: block;
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.cf-banner-btn:hover .cf-banner-btn__arrow {
	animation: cf-banner-arrow-pulse 0.65s ease infinite;
}

@keyframes cf-banner-arrow-pulse {
	0%   { transform: translateX(0); }
	50%  { transform: translateX(4px); }
	100% { transform: translateX(0); }
}

/* ── Kill the theme block-gap that appears between the header template part
   (which contains the banner) and the next block (main content).
   Only applies when the banner is actually rendered inside the header. ────── */
header.wp-block-template-part:has(.cf-announcement-banner-outer) + * {
	margin-block-start: 0 !important;
}