/**
 * Search overlay — full-screen panel opened from the header search icon.
 * Content of parts/search-overlay.html is fully editable in the Site
 * Editor; this file only handles the show/hide mechanics and chrome.
 */

.tpf-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var( --wp--preset--spacing--50, 2rem );
	background: var( --wp--preset--color--base, #fff );
	color: var( --wp--preset--color--contrast, #111 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -8px );
	transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.tpf-search-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

body.tpf-search-overlay-open {
	overflow: hidden;
}

.tpf-search-overlay__close {
	position: absolute;
	top: var( --wp--preset--spacing--50, 2rem );
	right: var( --wp--preset--spacing--50, 2rem );
}

.tpf-search-overlay__close .wp-block-button__link {
	font-size: 2rem;
	line-height: 1;
	padding: 0.25em 0.5em;
	background: none;
	color: inherit;
}

.tpf-blueprint-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0.5em;
	cursor: pointer;
	color: inherit;
}

.tpf-blueprint-search-toggle svg {
	width: 1.25em;
	height: 1.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}