/**
 * Uplift site header.
 *
 * Matches the Uplift Bank header: a white bar in Poppins and Uplift Dark Blue
 * with pill-shaped hover states, and a utility row on a subtle surface. The
 * header is fixed from the start and morphs in place, flush with the top of
 * the page at first and a rounded floating card once the page scrolls
 * (header-menu.js toggles .is-floating). .sp-site-header-spacer holds its
 * place in the page, so nothing jumps. On phones the header also expands
 * downward, in either state, to show the menu or search over a dimmed page.
 *
 * Colours are custom properties on the header, declared with light-dark() so
 * they follow the colour mode.
 */

/* Layout of the header rows, logo, nav and utility row. The Uplift look
   (colours, type, the floating card) follows below. */

.sp-site-header__bar {
	display: grid;
	gap: 1rem;
	min-height: 4rem;
	padding: 0;
}

.sp-site-header__brand {
	display: flex;
	align-items: center;
	min-width: 0;
}

.sp-brand-logo-link {
	display: inline-flex;
	align-items: center;
}

.sp-brand-logo {
	display: block;
	width: auto;
	max-width: none;
}

.sp-site-header__brand .sp-brand-logo {
	height: 3.25rem;
}

.sp-site-header__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	min-width: 0;
	position: relative;
}

.sp-site-header__nav > .sp-primary-navigation {
	flex: 0 1 auto;
	min-width: 0;
	order: 1;
}

.sp-site-header__nav > .wp-block-buttons,
.sp-site-header__nav > .sp-search-toggle,
.sp-site-header__nav > *:not(.sp-primary-navigation) {
	flex-shrink: 0;
}

.sp-site-header__nav > .wp-block-buttons {
	order: 2;
	margin-left: 0;
}

.sp-site-header__nav > .sp-search-toggle {
	order: 3;
}

.sp-site-header__nav .wp-block-button,
.sp-site-header__nav .wp-block-button__link {
	flex-shrink: 0;
}

.sp-site-header__nav .wp-block-button__link,
.sp-search-toggle {
	white-space: nowrap;
}

.sp-site-header__nav .wp-block-button__link {
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: var(--uplift-radius-sm);
	background: var(--sp-color-action-highlight-bg);
	color: var(--sp-color-action-highlight-text);
	font-size: 1rem;
	font-weight: var(--sp-type-weight-semibold);
	line-height: 0.875rem;
	box-shadow: none;
	transition: opacity var(--sp-motion-duration-standard) ease, border-radius var(--sp-motion-duration-standard) ease;
}

.sp-site-header__nav .wp-block-button__link:hover,
.sp-site-header__nav .wp-block-button__link:focus-visible {
	transform: none;
	opacity: 0.8;
	border-radius: 0.5rem;
	color: var(--sp-color-action-highlight-text);
	outline: none;
}

.sp-site-header__utility-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.25rem 0;
}

.sp-site-header__utility-copy {
	margin: 0;
	font-size: 0.85rem;
	font-weight: var(--sp-type-weight-medium);
	color: var(--sp-color-text-strong);
}

.sp-site-header__breadcrumbs {
	background: var(--sp-color-layer-canvas);
}

.sp-site-header__breadcrumbs-inner {
	padding: 0.45rem 0;
}

@media (max-width: 580px) {
	.sp-site-header__breadcrumbs-inner {
		padding-block: 0.35rem;
	}
}


@media (min-width: 861px) {
	.sp-site-header__bar {
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		align-items: center;
	}

	.sp-site-header__nav {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		justify-content: end;
		align-items: center;
	}

	.sp-site-header__nav > .wp-block-buttons {
		justify-self: end;
	}
}

@media (max-width: 980px) {
	.wp-site-blocks .sp-site-header__bar {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.sp-site-header__bar {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		min-height: 4rem;
		padding: 0 1rem 0 0.5rem;
	}

	.sp-site-header__brand .sp-brand-logo {
		height: 2.75rem;
	}

	.sp-site-header__nav {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: var(--uplift-space-1);
	}

	.sp-site-header__nav > .wp-block-buttons,
	.sp-site-header__nav > .sp-primary-navigation {
		display: none;
	}

	.sp-site-header__nav > .sp-search-toggle {
		min-height: 0;
		padding: 0;
		background: transparent;
		border: 0;
		order: 1;
	}

	.sp-search-toggle > span:not(.sp-search-toggle__icon) {
		display: none;
	}

	.sp-search-toggle__icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.sp-search-toggle__icon svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	.sp-search-toggle {
		display: inline-flex;
		flex: 0 0 2.5rem;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.wp-site-blocks .sp-site-header__utility-inner {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.sp-site-header__utility-inner {
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 0.5rem;
		gap: 0.75rem;
		min-height: 2.25rem;
	}

	.sp-site-header__utility-copy {
		flex: 1 1 auto;
		text-align: left;
		font-size: 0.875rem;
		font-weight: var(--sp-type-weight-medium);
		line-height: 1.2;
	}

	.sp-site-header__utility .sp-language-segmented-control {
		margin-left: auto;
		flex: 0 0 auto;
		width: auto;
	}
}

@media (max-width: 580px) {
	.sp-site-header__utility-inner {
		flex-direction: column;
	}

	.sp-site-header__utility-inner {
		align-items: center;
		text-align: center;
	}

	.sp-site-header__utility-copy {
		text-align: center;
	}

	.sp-site-header__utility .sp-language-segmented-control {
		margin-left: 0;
		width: 100%;
	}
}

/* Uplift look */

/* Motion shared by the header and its backdrop. */
.sp-site-header,
.sp-header-backdrop {
	--sp-header-morph: 220ms cubic-bezier(0.22, 1, 0.36, 1);
	--sp-header-expand: 260ms;
	--sp-header-slide: 220ms;
	--sp-header-press: 140ms;
	--sp-header-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--sp-header-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

.sp-site-header {
	--sp-header-ink: var(--sp-color-text-heading);
	--sp-header-accent: var(--sp-color-text-accent);
	--sp-header-pill: light-dark(color-mix(in srgb, var(--uplift-light-blue) 10%, transparent), color-mix(in srgb, var(--uplift-light-blue-300) 16%, transparent));
	--sp-header-bg: var(--sp-color-layer-2);
	--sp-header-bg-floating: light-dark(rgb(255 255 255 / 0.9), rgb(22 25 29 / 0.88));
	--sp-header-shadow-floating: 0 4px 5px color-mix(in srgb, var(--sp-color-shadow) 4%, transparent),
		0 8px 15px color-mix(in srgb, var(--sp-color-shadow) 4%, transparent),
		0 30px 50px color-mix(in srgb, var(--sp-color-shadow) 10%, transparent),
		0 0 0 1px light-dark(transparent, var(--uplift-night-rule));
	--sp-header-rule: light-dark(color-mix(in srgb, var(--uplift-dark-blue) 12%, transparent), var(--uplift-night-rule));
	--sp-header-utility-bg: light-dark(var(--uplift-gray-50), var(--uplift-night-bg));
	--sp-header-utility-bg-floating: light-dark(color-mix(in srgb, var(--uplift-gray-50) 75%, transparent), rgb(13 15 18 / 0.7));
	--sp-header-language-track: light-dark(color-mix(in srgb, var(--uplift-dark-blue) 8%, transparent), rgb(255 255 255 / 0.05));
	--sp-header-language-track-ring: light-dark(transparent, var(--uplift-night-rule));
	--sp-header-language-text: light-dark(var(--uplift-gray-600), var(--uplift-night-muted));
	--sp-header-language-active-bg: light-dark(var(--uplift-white), rgb(255 255 255 / 0.16));
	--sp-header-language-active-text: light-dark(var(--uplift-dark-blue), var(--uplift-white));
	--sp-header-language-active-shadow: 0 1px 3px light-dark(rgb(0 0 0 / 0.1), transparent), 0 0 0 1px light-dark(transparent, rgb(255 255 255 / 0.14));

	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: var(--sp-z-header);
	/* Sized by its insets, not the alignfull block width. */
	width: auto;
	max-width: none;
	margin: 0;
	border-bottom: 0;
	border-radius: 0;
	background: var(--sp-header-bg);
	box-shadow: 0 0 0 transparent;
	color: var(--sp-header-ink);
	font-family: var(--sp-type-family-heading);
	transition: left var(--sp-header-morph), right var(--sp-header-morph), top var(--sp-header-morph),
		border-radius var(--sp-header-morph), box-shadow var(--sp-header-morph), background-color var(--sp-header-morph);
}

.sp-site-header-spacer {
	height: 119px;
}

/* Space that in-page jumps leave above their target so it clears the header. */
html {
	scroll-padding-top: 154px;
}

.admin-bar .sp-site-header {
	top: 32px;
}

.sp-site-header.is-floating {
	/* 8px wider than the 75rem content column on each side. Percentages are
	   of the viewport without its scrollbar, like the flush header's width. */
	top: 24px;
	right: max(48px, calc((100% - 75rem) / 2 - 8px));
	left: max(48px, calc((100% - 75rem) / 2 - 8px));
	border-radius: var(--uplift-radius-xl);
	-webkit-backdrop-filter: blur(20px) saturate(1.25);
	backdrop-filter: blur(20px) saturate(1.25);
	background: var(--sp-header-bg-floating);
	box-shadow: var(--sp-header-shadow-floating);
}

.admin-bar .sp-site-header.is-floating {
	top: 56px;
}

/* Bar */

/* The logo and the tagline sit 16px inside the content column, as on Uplift
   Bank: 24px in from the floating card's edge, with no sideways shift as the
   header morphs. */
.sp-site-header__bar {
	min-height: 80px;
	padding-left: var(--uplift-space-4);
}

.sp-site-header__utility-inner {
	padding-left: var(--uplift-space-4);
}

.sp-site-header__nav > .sp-search-toggle {
	width: 40px;
	height: 40px;
	justify-content: center;
	border-radius: var(--uplift-radius-md);
	color: var(--sp-header-ink);
	transition: background-color var(--sp-motion-duration-fast) ease;
}

/* The Uplift Bank search glyph, at its 20px size in both layouts. */
.sp-site-header .sp-search-toggle__icon,
.sp-site-header .sp-search-toggle__icon svg {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

.sp-site-header .sp-mega-menu__top-level {
	gap: var(--uplift-space-1, 0.25rem);
}

.sp-site-header .sp-mega-menu__trigger,
.sp-site-header .sp-mega-menu__link {
	padding: 0.5rem 0.75rem;
	border-radius: var(--uplift-radius-md);
	color: var(--sp-header-ink);
	font-family: var(--sp-type-family-heading);
	font-weight: var(--sp-type-weight-medium);
	transition: background-color var(--sp-motion-duration-fast) ease, color var(--sp-motion-duration-fast) ease;
}

.sp-site-header .sp-mega-menu__link svg {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
}

.sp-site-header .sp-mega-menu__trigger:hover,
.sp-site-header .sp-mega-menu__trigger:focus-visible,
.sp-site-header .sp-mega-menu__link:hover,
.sp-site-header .sp-mega-menu__link:focus-visible,
.sp-site-header .sp-mega-menu__item.is-open > .sp-mega-menu__trigger,
.sp-site-header .sp-mega-menu__link[aria-current="page"] {
	background-color: var(--sp-header-pill);
	color: var(--sp-header-accent);
	opacity: 1;
}

.sp-site-header .sp-mega-menu__trigger:focus-visible,
.sp-site-header .sp-mega-menu__link:focus-visible,
.sp-site-header__nav > .sp-search-toggle:focus-visible,
.sp-site-header .sp-brand-logo-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.sp-site-header__nav > .sp-search-toggle:hover,
.sp-site-header__nav > .sp-search-toggle:focus-visible {
	background-color: var(--sp-header-pill);
	color: var(--sp-header-ink);
}

/* The Customizer's Login action takes the Uplift yellow button. */
.sp-site-header__nav .wp-block-button__link {
	padding: 0.75rem 22px;
	border-radius: var(--uplift-radius-md);
	background: var(--sp-color-action-highlight-bg);
	color: var(--sp-color-action-highlight-text);
	font-family: var(--sp-type-family-heading);
	font-weight: var(--sp-type-weight-semibold);
	line-height: 20px;
	transition: background-color var(--sp-motion-duration-fast) ease;
}

.sp-site-header__nav .wp-block-button__link:hover,
.sp-site-header__nav .wp-block-button__link:focus-visible {
	border-radius: var(--uplift-radius-md);
	background: var(--sp-color-action-highlight-hover-bg);
	color: var(--sp-color-action-highlight-text);
	opacity: 1;
}

/* Utility row: tagline and language switch */

.sp-site-header__utility {
	border-top: 1px solid var(--sp-header-rule);
	border-bottom: 1px solid var(--sp-header-rule);
	background: var(--sp-header-utility-bg);
	color: var(--sp-header-ink);
	transition: border-radius var(--sp-header-morph), background-color var(--sp-header-morph);
}

.sp-site-header__utility-copy {
	color: var(--sp-header-ink);
	font-family: var(--sp-type-family-heading);
	font-size: 0.8125rem;
	font-weight: var(--sp-type-weight-medium);
}

.sp-site-header.is-floating .sp-site-header__utility {
	border-bottom-color: transparent;
	border-radius: 0 0 var(--uplift-radius-xl) var(--uplift-radius-xl);
	background: var(--sp-header-utility-bg-floating);
}

.sp-site-header__utility .sp-language-segmented-control {
	gap: 2px;
	padding: 2px;
	border: 0;
	border-radius: var(--uplift-radius-sm);
	background-color: var(--sp-header-language-track);
	box-shadow: inset 0 0 0 1px var(--sp-header-language-track-ring);
	transition: border-radius var(--sp-header-morph);
}

.sp-site-header__utility .sp-language-segment {
	border-radius: var(--uplift-radius-xs);
	color: var(--sp-header-language-text);
	font-family: var(--sp-type-family-heading);
	font-size: 0.875rem;
	text-decoration: none;
}

.sp-site-header__utility .sp-language-segment:hover,
.sp-site-header__utility .sp-language-segment:focus-visible {
	background-color: transparent;
	color: var(--sp-header-language-active-text);
}

.sp-site-header__utility .sp-language-segment.is-active,
.sp-site-header__utility .sp-language-segment[aria-current="true"] {
	background-color: var(--sp-header-language-active-bg);
	color: var(--sp-header-language-active-text);
	box-shadow: var(--sp-header-language-active-shadow);
}

/* While the header floats, the language switch sits in the card's
   bottom-right corner, so that corner rounds to follow the card. These radii
   and paddings are hand-tuned to the card, so they stay literal. */
.sp-site-header.is-floating .sp-language-segmented-control {
	border-radius: 6px 6px 10px 6px;
}

.sp-site-header.is-floating .sp-language-segment:last-child {
	border-radius: 4px 4px 8px 4px;
}

/* Front page: the hero runs up under the header instead of starting below a
   spacer, so once the header shrinks into the floating card its blue, not
   white page, shows around the card. header-menu.js publishes the flush
   header's height as --sp-header-height. */
.home .sp-site-header-spacer {
	display: none;
}

.home .sp-home-front-hero {
	padding-top: var(--sp-header-height, 119px);
}

/* A site message comes first in the page, so it takes the header's offset
   and the hero starts directly under it. */
.home .wp-site-blocks .sp-site-main.sp-home-front > .sp-home-banner {
	margin-block-start: var(--sp-header-height, 119px);
}

.home .sp-home-banner + .sp-home-front-hero {
	padding-top: 0;
}

/* Breadcrumbs scroll with the page below the header. */
.sp-site-header__breadcrumbs {
	border-bottom: 1px solid var(--sp-color-border-subtle);
}

@media (min-width: 981px) {
	/* Breadcrumbs start where the logo and tagline do, 16px inside the
	   content column. */
	.sp-site-header__breadcrumbs-inner {
		padding-left: var(--uplift-space-4);
	}

	/* Inside the card the rows keep only the 8px inset, so the logo and nav
	   stay exactly where they are in the flush header. */
	.wp-site-blocks .sp-site-header.is-floating .sp-site-header__bar {
		width: min(calc(100% - 16px), var(--sp-layout-wide-width));
	}

	/* The language switch tucks into the card's bottom-right corner. */
	.wp-site-blocks .sp-site-header.is-floating .sp-site-header__utility-inner {
		width: auto;
		margin-inline: 8px 5px;
	}
}

@media (max-width: 980px) {
	/* Clips the menu and search while the header grows to show them. */
	.sp-site-header {
		overflow: hidden;
	}

	.sp-site-header-spacer {
		height: 101px;
	}

	html {
		scroll-padding-top: 148px;
	}

	.sp-site-header__bar {
		min-height: 64px;
		padding-left: var(--uplift-space-4);
	}

	.sp-site-header__utility-inner {
		padding-inline: var(--uplift-space-4);
	}

	/* Inside the floating card, which is already inset 12px. */
	.sp-site-header.is-floating .sp-site-header__bar {
		padding-left: var(--uplift-space-2);
	}

	.sp-site-header.is-floating .sp-site-header__utility-inner {
		padding-left: var(--uplift-space-2);
	}

	.sp-site-header__nav > .sp-search-toggle {
		width: 2.5rem;
		height: 2.5rem;
		border-radius: var(--uplift-radius-md);
	}

	.sp-site-header.is-floating {
		top: 12px;
		right: 12px;
		left: 12px;
		border-radius: var(--uplift-radius-lg);
	}

	.sp-site-header.is-floating .sp-site-header__utility {
		border-radius: 0 0 var(--uplift-radius-lg) var(--uplift-radius-lg);
	}

	.admin-bar .sp-site-header.is-floating {
		top: 44px;
	}
}

@media (max-width: 782px) {
	.admin-bar .sp-site-header {
		top: 46px;
	}

	.admin-bar .sp-site-header.is-floating {
		top: 58px;
	}
}

/* Logged in on phones: below 600px WordPress lets the admin bar scroll away,
   which would leave a gap above the fixed header. Keep it fixed instead. */
@media screen and (max-width: 600px) {
	#wpadminbar {
		position: fixed;
	}
}

/* Phones: the tagline and language switch stack, so tighten them while the
   header floats to keep the card short. */
@media (max-width: 580px) {
	.sp-site-header.is-floating .sp-site-header__utility-inner {
		gap: 0.25rem;
		padding: 5px 0.25rem 0.25rem;
	}

	.sp-site-header.is-floating .sp-language-segment {
		padding-block: 2px;
	}

	/* Full width along the card's bottom edge: round both bottom corners. */
	.sp-site-header.is-floating .sp-language-segmented-control {
		border-radius: 6px 6px 10px 10px;
	}

	.sp-site-header.is-floating .sp-language-segment:first-child {
		border-radius: 4px 4px 4px 8px;
	}
}

/* Menu button (phones only). Its three lines fold into a close X while the
   menu or, on phones, search is open, and unfold when it closes. */
.sp-site-header__nav > .sp-mobile-toggle {
	order: 4;
}

.sp-mobile-toggle {
	display: none;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--uplift-radius-md);
	background: none;
	color: var(--sp-header-ink);
	cursor: pointer;
	transition: background-color var(--sp-motion-duration-fast) ease,
		transform var(--sp-header-press) var(--sp-header-ease-out);
}

.sp-mobile-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.sp-mobile-toggle__icon {
	display: block;
	width: 20px;
	height: 20px;
	overflow: visible;
}

.sp-mobile-toggle__line {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--sp-header-expand) var(--sp-header-ease-drawer),
		opacity var(--sp-motion-duration-fast) ease;
}

.sp-mobile-toggle[aria-expanded="true"] .sp-mobile-toggle__line--top,
.sp-site-header.is-search-open .sp-mobile-toggle__line--top {
	transform: translateY(6px) rotate(45deg);
}

.sp-mobile-toggle[aria-expanded="true"] .sp-mobile-toggle__line--middle,
.sp-site-header.is-search-open .sp-mobile-toggle__line--middle {
	opacity: 0;
	transform: scaleX(0.2);
}

.sp-mobile-toggle[aria-expanded="true"] .sp-mobile-toggle__line--bottom,
.sp-site-header.is-search-open .sp-mobile-toggle__line--bottom {
	transform: translateY(-6px) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
	.sp-mobile-toggle:hover {
		background-color: var(--sp-header-pill);
	}
}

html[data-input-modality="pointer"] .sp-site-header button:active,
html[data-input-modality="pointer"] .sp-site-header__nav .wp-block-button__link:active,
html[data-input-modality="pointer"] .sp-mobile-menu a:active {
	transform: scale(0.97);
}

/* Dims the page under the expanded header. It sits below the lifted header
   and above everything else on the page. */
.sp-header-backdrop {
	position: fixed;
	inset: 0;
	z-index: var(--sp-z-overlay);
	margin: 0;
	background: var(--sp-color-layer-overlay);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--sp-header-expand) var(--sp-header-ease-out),
		visibility 0s linear var(--sp-header-expand);
}

@media (max-width: 980px) {
	.sp-mobile-toggle {
		display: flex;
	}

	/* While the header is expanded for the menu or search it rises above the
	   page on a solid surface, and the flush header rounds its new bottom
	   corners. */
	.sp-header-lifted .sp-site-header {
		z-index: var(--sp-z-header-expanded);
	}

	.sp-header-expanded .sp-header-backdrop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity var(--sp-header-expand) var(--sp-header-ease-out), visibility 0s;
	}

	.sp-header-expanded .sp-site-header {
		background: var(--sp-header-bg);
	}

	.sp-header-expanded .sp-site-header:not(.is-floating) {
		border-radius: 0 0 var(--uplift-radius-lg) var(--uplift-radius-lg);
	}

	/* The utility row sits mid-card while the header is expanded, so it
	   drops the floating card's bottom corners until it closes; so does the
	   language switch tucked into them. */
	.sp-header-expanded .sp-site-header.is-floating .sp-site-header__utility {
		border-radius: 0;
	}

	.sp-header-expanded .sp-site-header.is-floating .sp-language-segmented-control {
		border-radius: var(--uplift-radius-sm);
	}

	.sp-header-expanded .sp-site-header.is-floating .sp-language-segment:first-child,
	.sp-header-expanded .sp-site-header.is-floating .sp-language-segment:last-child {
		border-radius: var(--uplift-radius-xs);
	}

	/* Search moves into the header on phones (header-menu.js), and the bar
	   changes as one piece: the search button becomes the field and grows
	   left to just past the logo, which shrinks to make room; the menu
	   button folds into the close X; results open below the bar like the
	   menu. Everything keys off .is-search-open, which header-menu.js drops
	   first on close so these moves run in reverse before the plugin resets
	   the field and results. */
	.sp-site-header .search-overlay,
	.admin-bar .sp-site-header .search-overlay {
		position: static;
		inset: auto;
		display: grid;
		grid-template-rows: 0fr;
		height: auto;
		padding: 0;
		z-index: auto;
		opacity: 1;
		visibility: hidden;
		pointer-events: none;
		transition: grid-template-rows var(--sp-header-expand) var(--sp-header-ease-drawer),
			visibility 0s linear var(--sp-header-expand);
	}

	.sp-site-header.is-search-open .search-overlay {
		grid-template-rows: 1fr;
		visibility: visible;
		pointer-events: auto;
		transition: grid-template-rows var(--sp-header-expand) var(--sp-header-ease-drawer), visibility 0s;
	}

	.sp-site-header .search-overlay__backdrop,
	.sp-site-header .search-overlay__close {
		display: none;
	}

	/* Static and untransformed (even an identity transform would hold the
	   field), so the field is placed against the header bar rather than the
	   results area, which clips while it grows. */
	.sp-site-header .search-overlay .search-overlay__dialog,
	.sp-site-header .search-overlay.is-visible .search-overlay__dialog {
		position: static;
		min-height: 0;
		height: auto;
		max-width: none;
		max-height: none;
		overflow: hidden;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* The field sits over the bar: on the search button's box when closed,
	   reaching just past the logo when open. It stays up while it shrinks
	   back into the button, which only then takes its place again. */
	.sp-site-header .search-overlay__top {
		position: absolute;
		top: var(--sp-search-field-top, 12px);
		right: var(--sp-search-field-right, 60px);
		left: var(--sp-search-field-from, calc(100% - 100px));
		z-index: 2;
		margin: 0;
		visibility: hidden;
		transition: left var(--sp-header-expand) var(--sp-header-ease-drawer),
			visibility 0s linear var(--sp-header-expand);
	}

	.sp-site-header.is-search-open .search-overlay__top {
		left: var(--sp-search-field-to, 8px);
		visibility: visible;
		transition: left var(--sp-header-expand) var(--sp-header-ease-drawer), visibility 0s;
	}

	.sp-site-header__nav > .sp-search-toggle {
		transition: background-color var(--sp-motion-duration-fast) ease,
			transform var(--sp-header-press) var(--sp-header-ease-out),
			visibility 0s linear var(--sp-header-expand);
	}

	.sp-site-header.is-search-open .sp-site-header__nav > .sp-search-toggle {
		visibility: hidden;
		transition: background-color var(--sp-motion-duration-fast) ease,
			transform var(--sp-header-press) var(--sp-header-ease-out),
			visibility 0s;
	}

	/* At the button's size the field is just the button's own search icon in
	   the same spot (header-menu.js gives it the button's icon); its frame
	   and text fade in as it grows and out as it shrinks. The 1px border
	   plus 9px padding centres the 20px icon where the button's sits. */
	.sp-site-header .search-overlay__input-wrapper {
		height: 40px;
		margin: 0;
		padding: 0 10px 0 9px;
		overflow: hidden;
		border-radius: var(--uplift-radius-md);
		transition: background-color var(--sp-header-expand) var(--sp-header-ease-out),
			border-color var(--sp-header-expand) var(--sp-header-ease-out),
			box-shadow var(--sp-header-expand) var(--sp-header-ease-out);
	}

	.sp-site-header:not(.is-search-open) .search-overlay__input-wrapper {
		border-color: transparent;
		background-color: transparent;
		box-shadow: none;
	}

	.sp-site-header .search-overlay__icon,
	.sp-site-header .search-overlay__input-wrapper:focus-within .search-overlay__icon {
		flex-shrink: 0;
		color: var(--sp-header-ink);
	}

	.sp-site-header .search-overlay__icon svg {
		display: block;
		width: 20px;
		height: 20px;
	}

	.sp-site-header .search-overlay__input,
	.sp-site-header .search-overlay__meta {
		opacity: 0;
		transition: opacity var(--sp-motion-duration-fast) ease;
	}

	.sp-site-header.is-search-open .search-overlay__input,
	.sp-site-header.is-search-open .search-overlay__meta {
		opacity: 1;
		transition: opacity var(--sp-motion-duration-standard) var(--sp-header-ease-out) 80ms;
	}

	/* Results take the room left on screen and settle in like the menu. */
	.sp-site-header .search-overlay__results {
		flex: none;
		height: calc(100vh - var(--sp-header-bottom, 101px) - 12px);
		height: calc(100dvh - var(--sp-header-bottom, 101px) - 12px);
		min-height: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity var(--sp-motion-duration-fast) ease,
			transform var(--sp-header-expand) var(--sp-header-ease-drawer);
	}

	.sp-site-header.is-search-open .search-overlay__results {
		opacity: 1;
		transform: none;
		transition: opacity var(--sp-motion-duration-standard) var(--sp-header-ease-out) 40ms,
			transform var(--sp-header-expand) var(--sp-header-ease-drawer);
	}

	/* header-menu.js reads the logo scale and the gap (plain px) to end the
	   field just after the shrunken logo. */
	.sp-site-header {
		--sp-search-logo-scale: 0.7;
		--sp-search-logo-gap: 16px;
	}

	.sp-site-header__brand .sp-brand-logo-link {
		transform-origin: left center;
		transition: transform var(--sp-header-expand) var(--sp-header-ease-drawer);
	}

	.sp-site-header.is-search-open .sp-site-header__brand .sp-brand-logo-link {
		transform: scale(var(--sp-search-logo-scale));
	}
}

/* Keyboard-triggered state changes are intentionally immediate. */
html[data-input-modality="keyboard"] .sp-header-backdrop,
html[data-input-modality="keyboard"] .sp-mobile-menu,
html[data-input-modality="keyboard"] .sp-mobile-menu__inner,
html[data-input-modality="keyboard"] .sp-mobile-menu__level,
html[data-input-modality="keyboard"] .sp-mobile-toggle__line,
html[data-input-modality="keyboard"] .sp-site-header .search-overlay,
html[data-input-modality="keyboard"] .sp-site-header .search-overlay__top,
html[data-input-modality="keyboard"] .sp-site-header__brand .sp-brand-logo-link,
html[data-input-modality="keyboard"] .sp-site-header__nav > .sp-search-toggle,
html[data-input-modality="keyboard"] .sp-site-header .search-overlay__input-wrapper,
html[data-input-modality="keyboard"] .sp-site-header .search-overlay__input,
html[data-input-modality="keyboard"] .sp-site-header .search-overlay__meta,
html[data-input-modality="keyboard"] .sp-site-header .search-overlay__results {
	transition-duration: 0ms !important;
	transition-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
	.sp-site-header,
	.sp-site-header__utility,
	.sp-site-header__utility .sp-language-segmented-control {
		transition: none;
	}

	.sp-mobile-menu__level,
	.sp-mobile-menu__level.is-active,
	.sp-mobile-menu__level.is-prev {
		transform: none;
	}

	.sp-header-backdrop,
	.sp-mobile-menu__inner,
	.sp-mobile-menu__level {
		transition-property: opacity, visibility;
		transition-duration: var(--sp-motion-duration-fast);
		transition-timing-function: ease;
	}

	html[data-input-modality="pointer"] .sp-site-header button:active,
	html[data-input-modality="pointer"] .sp-site-header__nav .wp-block-button__link:active,
	html[data-input-modality="pointer"] .sp-mobile-menu a:active {
		transform: none;
	}

	/* The header opens and closes without growing. */
	.sp-mobile-menu,
	.sp-mobile-toggle__line,
	.sp-site-header .search-overlay,
	.sp-site-header .search-overlay__top,
	.sp-site-header__brand .sp-brand-logo-link {
		transition-duration: 0ms !important;
	}
}