/*
 * Global header navigation component.
 * Kept separate from WooCommerce's reserved `.button` component so commerce
 * styles cannot alter the site-wide header.
 */
#header .header-nav-button {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	margin: 0;
	padding: 16px;
	border: 1px solid #000;
	border-radius: 48px;
	background: transparent;
	color: #000;
	font-family: "Area Normal", sans-serif;
	font-size: 12px;
	font-weight: 900;
	line-height: 14px;
	letter-spacing: .15em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: normal;
	cursor: pointer;
	transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;
}

#header .header-nav-button:hover,
#header .header-nav-button:focus,
#header .header-nav-button:active {
	outline: none;
	background: #000;
	color: #fff;
	text-decoration: none;
}

body.nav-on #header .header-nav-button,
body.white-nav:not(.scrolled):not(.nav-on) #header .header-nav-button {
	border-color: #fff;
	color: #fff;
}

body.nav-on #header .header-nav-button:hover,
body.nav-on #header .header-nav-button:focus,
body.nav-on #header .header-nav-button:active,
body.white-nav:not(.scrolled):not(.nav-on) #header .header-nav-button:hover,
body.white-nav:not(.scrolled):not(.nav-on) #header .header-nav-button:focus,
body.white-nav:not(.scrolled):not(.nav-on) #header .header-nav-button:active {
	background: #fff;
	color: #000;
}

/*
 * The full navigation only has enough room in the 1176px-wide container tier.
 * Switch to the compact navigation before the pill links can wrap and increase
 * the header height. The buttons must leave layout entirely; visually hiding
 * them would preserve their wrapped height and still cover page content.
 */
@media (max-width: 1175px) {
	#header .main-container {
		flex-wrap: nowrap;
	}

	#header .header-buttons-wrapper {
		display: none;
	}

	#header .menu-toggle-wrapper .header-buttons {
		display: none;
	}
}

@media (max-width: 767px) {
	/* Keep mobile browser chrome changes from recropping the opening hero. */
	body.home .section-homepage-banner {
		min-height: 100svh;
	}

	/* Maintain white-nav contrast over light areas of user-selected hero art. */
	body.home.white-nav:not(.scrolled):not(.nav-on) #header::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0));
		pointer-events: none;
	}
}

/* The transparent homepage header must sit over the hero from first paint.
 * The default main-content padding otherwise leaves white controls on a white
 * 50px strip until that strip scrolls out of view. */
body.home.first-section-dark #page-content {
	padding-top: 0;
}

/* Preserve the legacy homepage flex stack inside the semantic main wrapper.
 * Block siblings collapse the hero clearance and intro margins, causing the
 * animated headline to overlap the following announcement. */
body.home #page-content {
	display: flex;
	flex-direction: column;
}