:root {
	--nst-announcement-height: 2.25rem;
}

.nst-announcement {
	align-items: center;
	background: var(--nst-brand-yellow, #dcff59);
	color: var(--nst-header-ink, #17171d);
	display: flex;
	font-family: var(--nst-font-sans);
	height: var(--nst-announcement-height);
	justify-content: center;
	overflow: hidden;
	padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
	position: relative;
	z-index: 2;
}

.nst-announcement__viewport {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-width: 0;
	width: 100%;
}

.nst-announcement__slide {
	align-items: center;
	display: flex;
	font-size: 0.6875rem;
	font-weight: 800;
	justify-content: center;
	letter-spacing: 0.09em;
	line-height: 1.25;
	margin: 0;
	padding: 0.0625rem 0.75rem;
	text-align: center;
	text-transform: uppercase;
}

.nst-announcement__surface {
	appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: none;
	inset: 0;
	padding: 0;
	position: absolute;
	z-index: 3;
}

.nst-announcement-js .nst-announcement__viewport {
	display: grid;
	grid-template-areas: "slide";
	height: 100%;
}

.nst-announcement-js .nst-announcement__slide {
	grid-area: slide;
	height: 100%;
	opacity: 0;
	transform: translateY(100%);
	visibility: hidden;
}

.nst-announcement-js .nst-announcement__slide.is-active,
.nst-announcement-js .nst-announcement__slide.is-exiting {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.nst-announcement-js .nst-announcement__slide.is-entering {
	animation: nst-announcement-enter-up 400ms ease both;
}

.nst-announcement-js .nst-announcement__slide.is-exiting {
	animation: nst-announcement-exit-up 400ms ease both;
}

.nst-announcement-js .nst-announcement__surface:not([hidden]) {
	display: block;
}

.nst-announcement-js.is-static .nst-announcement__viewport {
	display: flex;
	height: 100%;
}

.nst-announcement-js.is-static .nst-announcement__slide {
	height: auto;
	opacity: 1;
	transform: none;
	visibility: visible;
}

.nst-announcement__surface:focus-visible {
	outline: 2px solid var(--nst-header-ink, #17171d);
	outline-offset: -3px;
}

@keyframes nst-announcement-exit-up {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(-100%); }
}

@keyframes nst-announcement-enter-up {
	from { opacity: 0; transform: translateY(100%); }
	to { opacity: 1; transform: translateY(0); }
}

.nst-site-header:has(.nst-announcement),
.nst-site-header--transparent:not(.is-scrolled):has(.nst-announcement),
.nst-site-header.is-scrolled:has(.nst-announcement),
body.is-cart-open .nst-site-header:has(.nst-announcement),
body.is-menu-open .nst-site-header:has(.nst-announcement) {
	min-height: calc(var(--nst-header-height-scrolled) + var(--nst-announcement-height));
}

.nst-site-header--transparent:not(.is-scrolled):has(.nst-announcement) {
	min-height: calc(var(--nst-header-height) + var(--nst-announcement-height));
}

body:not(.home) .nst-site-header-part:has(.nst-announcement) + main,
body:not(.home) .nst-site-header-part:has(.nst-announcement) + .wp-block-group,
body:not(.home) .wp-site-blocks > header.wp-block-template-part:first-child:has(.nst-announcement) + main,
body:not(.home) .wp-site-blocks > header.wp-block-template-part:first-child:has(.nst-announcement) + .wp-block-group {
	margin-top: calc(var(--nst-header-height-scrolled) + var(--nst-announcement-height)) !important;
}

body:has(.nst-site-header [data-nst-announcement]) .nst-tennis-buy {
	top: calc(var(--nst-header-height-scrolled, 68px) + var(--nst-announcement-height) + 2rem);
}

@media (max-width: 620px) {
	:root {
		--nst-announcement-height: 3.25rem;
	}

	.nst-announcement {
		padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
	}

	.nst-announcement__slide {
		font-size: 0.625rem;
		padding-inline: 0.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nst-announcement-js .nst-announcement__slide {
		animation: none;
	}
}

@media print {
	body:not(.home) .nst-site-header-part:has(.nst-announcement) + main,
	body:not(.home) .nst-site-header-part:has(.nst-announcement) + .wp-block-group,
	body:not(.home) .wp-site-blocks > header.wp-block-template-part:first-child:has(.nst-announcement) + main,
	body:not(.home) .wp-site-blocks > header.wp-block-template-part:first-child:has(.nst-announcement) + .wp-block-group {
		margin-top: 0 !important;
	}
}
