/*
 * Partial: site-header. Fixed, overlays the first section of every page.
 * SiteHeader (global.js) hides it while scrolling down (--hidden) and gives it a background
 * once the page is scrolled (--scrolled). Visible state is transform: none, not translateY(0):
 * any transform would make the fixed mobile menu panel position against the header.
 * --header-offset (set by SiteHeader) = visible height of the WP admin bar: fixed 32px on desktop,
 * scrolls away below 600px.
 */
.sw-site-header {
	--header-ease: cubic-bezier(0.65, 0, 0.35, 1);
	position: fixed;
	inset-block-start: var(--header-offset, var(--wp-admin--admin-bar--height, 0px));
	inset-inline: 0;
	z-index: var(--z-header);
	transition: transform 400ms var(--header-ease), background-color 300ms var(--header-ease);
}

.sw-site-header--scrolled { background: var(--color-bg-alt); }
.sw-site-header--hidden { transform: translateY(calc(-100% - var(--header-offset, var(--wp-admin--admin-bar--height, 0px)))); }

@media (prefers-reduced-motion: reduce) {
	.sw-site-header { transition-duration: 1ms; }
}

.sw-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
	min-block-size: var(--header-height);
	padding-block: var(--space-16);
	border-block-end: var(--border);
}

.sw-site-header__logo { position: relative; z-index: 2; margin-inline-end: auto; }
.sw-site-header__logo .sw-site-logo { inline-size: 8rem; block-size: auto; }

/* Burger: three lines that turn into an X */
.sw-site-header__toggle {
	--menu-ease: cubic-bezier(0.65, 0, 0.35, 1);
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: var(--space-48);
	block-size: var(--space-48);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-heading);
}

/* Closer to the language switcher: the 48px button already has 12px of air around the icon */
.sw-language-switcher + .sw-site-header__toggle { margin-inline-start: calc(-1 * var(--space-16)); }

.sw-site-header__burger {
	position: relative;
	display: block;
	inline-size: var(--space-24);
	block-size: var(--space-16);
}

.sw-site-header__burger-line {
	position: absolute;
	inset-inline: 0;
	block-size: 1.5px;
	background: currentColor;
	transition: transform 400ms var(--menu-ease), opacity 200ms var(--menu-ease), inset-block-start 400ms var(--menu-ease);
}
.sw-site-header__burger-line:nth-child(1) { inset-block-start: 0; }
.sw-site-header__burger-line:nth-child(2) { inset-block-start: calc(50% - 0.75px); }
.sw-site-header__burger-line:nth-child(3) { inset-block-start: calc(100% - 1.5px); }

.sw-site-header__toggle--active .sw-site-header__burger-line:nth-child(1) { inset-block-start: calc(50% - 0.75px); transform: rotate(45deg); }
.sw-site-header__toggle--active .sw-site-header__burger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sw-site-header__toggle--active .sw-site-header__burger-line:nth-child(3) { inset-block-start: calc(50% - 0.75px); transform: rotate(-45deg); }

/* Mobile: panel slides down from the top; the hero stays visible below it */
.sw-site-header__nav {
	--menu-ease: cubic-bezier(0.65, 0, 0.35, 1);
	position: fixed;
	inset-block-start: var(--header-offset, var(--wp-admin--admin-bar--height, 0px));
	inset-inline: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--gap-l);
	max-block-size: calc(100svh - var(--header-offset, var(--wp-admin--admin-bar--height, 0px)));
	padding: calc(var(--header-height) + var(--gap-l)) var(--gutter) var(--gap-l);
	overflow-y: auto;
	background: var(--color-bg-alt);
	border-block-end: var(--border);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 500ms var(--menu-ease), visibility 0s linear 500ms;
}

.sw-site-header__nav--open {
	transform: none;
	visibility: visible;
	transition: transform 500ms var(--menu-ease), visibility 0s;
}

/*
 * Menu links and the plus staircase: after the panel has slid in, each link moves straight
 * down from 8px above into place (ease-out, no overshoot) while fading in, one after another.
 */
.sw-site-header__nav .sw-menu__item,
.sw-site-header__pattern .sw-plus-pattern__plus {
	opacity: 0;
	transition: opacity 200ms ease, transform 200ms ease;
}
.sw-site-header__nav .sw-menu__item { transform: translateY(calc(-1 * var(--space-8))); }

.sw-site-header__nav--open .sw-menu__item {
	opacity: 1;
	transform: none;
	transition: opacity 450ms ease-out, transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sw-site-header__nav--open .sw-menu__item:nth-child(1) { transition-delay: 450ms; }
.sw-site-header__nav--open .sw-menu__item:nth-child(2) { transition-delay: 540ms; }
.sw-site-header__nav--open .sw-menu__item:nth-child(3) { transition-delay: 630ms; }
.sw-site-header__nav--open .sw-menu__item:nth-child(4) { transition-delay: 720ms; }
.sw-site-header__nav--open .sw-menu__item:nth-child(n + 5) { transition-delay: 810ms; }

.sw-site-header__pattern { align-self: flex-end; margin-block-start: calc(-1 * var(--space-64)); }
.sw-site-header__nav--open .sw-site-header__pattern .sw-plus-pattern__plus {
	opacity: 1;
	transition: opacity 300ms ease-out;
	transition-delay: calc(750ms + var(--plus-index) * 30ms);
}

.sw-menu {
	display: grid;
	gap: var(--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-heading);
	font-size: var(--text-h3);
	line-height: var(--leading-h3);
}
.sw-menu__link { color: var(--color-heading); text-decoration: none; }
.sw-menu__link:hover,
.sw-menu__link--active { color: var(--color-primary); }

@media (min-width: 62em) { /* 992px */
	.sw-site-header__logo .sw-site-logo { inline-size: 10rem; }
	.sw-site-header__toggle { display: none; }

	.sw-site-header__nav {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: var(--space-40);
		max-block-size: none;
		padding: 0;
		overflow: visible;
		background: none;
		border: 0;
		transform: none;
		visibility: visible;
		transition: none;
	}

	.sw-site-header__nav .sw-menu__item { opacity: 1; transform: none; }
	.sw-site-header__pattern { display: none; }

	/* Divider between the menu and the language switcher: 40px on both sides */
	.sw-site-header__nav:has(+ .sw-language-switcher) {
		padding-inline-end: var(--space-40);
		border-inline-end: var(--border);
	}
	.sw-site-header__nav + .sw-language-switcher { margin-inline-start: var(--space-16); }

	.sw-menu {
		display: flex;
		gap: var(--space-48);
		font-size: var(--text-body);
		line-height: var(--leading-h4);
	}
}