/*
 * Header search trigger and its full-focus overlay.
 *
 * Core's Search block only expands its field in place, which pushes the
 * navigation aside on a masthead this tight. This replaces it with a native
 * <dialog>, so the focus trap, Escape handling, and backdrop come from the
 * browser rather than from theme code.
 *
 * Breakpoint used: 64rem (desktop), only to scale the trigger icon. The
 * overlay itself is centred and capped by a max-width, so it needs none. See
 * the canonical scale in style.css.
 */
.site-search__trigger {
	align-items: center;
	color: var(--wp--preset--color--crimson);
	display: flex;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	transition: color 180ms ease;
}

.site-search__trigger:hover {
	color: var(--wp--preset--color--crimson-hover);
}

.site-search__icon,
.site-search__close svg {
	fill: currentColor;
}

.site-search__overlay {
	background: transparent;
	border: 0;
	height: 100%;
	max-height: 100vh;
	max-width: 100vw;
	padding: 0;
	width: 100%;
}

.site-search__overlay::backdrop {
	background: rgba(9, 9, 9, 0.94);
}

.site-search__close {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	display: flex;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0;
	position: absolute;
	right: var(--wp--preset--spacing--40);
	top: var(--wp--preset--spacing--40);
	transition: color 180ms ease;
}

.site-search__close:hover {
	color: var(--wp--preset--color--crimson-hover);
}

.site-search__form {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--40);
	left: 50%;
	max-width: 44rem;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 3rem);
}

.site-search__field {
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--crimson);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	flex: 1 1 auto;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-large);
	min-width: 0;
	padding: 0.5rem 0;
}

.site-search__field::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.site-search__field:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--crimson-hover);
}

.site-search__submit {
	background: var(--wp--preset--color--crimson);
	border: 0;
	border-radius: 0.25rem;
	color: var(--wp--preset--color--paper);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	min-height: 2.75rem;
	padding: 0.75rem 1rem;
	transition: background-color 180ms ease;
}

.site-search__submit:hover {
	background: var(--wp--preset--color--crimson-hover);
}

/*
 * The desktop masthead carries a 240px logo, against which a 24px icon reads
 * as an afterthought. The tap target stays 44px at every size; only the glyph
 * grows.
 */
@media (min-width: 64rem) {
	.site-search__icon {
		height: 2rem;
		width: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-search__trigger,
	.site-search__close,
	.site-search__submit {
		transition: none;
	}
}