/*
 * Search overlay — full-screen takeover with a big input + recent queries.
 */

.liv-search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10,10,10,0.96);
	backdrop-filter: blur(8px);
	z-index: var(--z-search-overlay);
	display: flex;
	flex-direction: column;
	padding: clamp(1.5rem, 4vw, 4rem);
	color: var(--liv-paper);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--liv-transition);
}
.liv-search-overlay[data-open="true"] {
	opacity: 1;
	pointer-events: auto;
}

.liv-search-overlay__close {
	align-self: flex-end;
	background: transparent;
	border: 0;
	color: var(--liv-paper);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: var(--r-pill);
}
.liv-search-overlay__close:hover { background: rgba(255,255,255,0.08); }
.liv-search-overlay__close svg { width: 20px; height: 20px; }

.liv-search-overlay__form {
	max-width: 960px;
	margin: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.liv-search-overlay__label {
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--liv-ink-300);
}
.liv-search-overlay__input {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 2px solid var(--liv-ink-500);
	color: var(--liv-paper);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 6vw, 4rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	padding: 0.5rem 0;
	outline: none;
	transition: border-color var(--liv-transition);
}
.liv-search-overlay__input:focus { border-bottom-color: var(--liv-leaf-500); }
.liv-search-overlay__input::placeholder { color: var(--liv-ink-500); }

.liv-search-overlay__suggestions {
	margin-top: 2rem;
}
.liv-search-overlay__suggestions-title {
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--liv-ink-300);
	margin-bottom: 0.75rem;
}
.liv-search-overlay__suggestions ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.liv-search-overlay__suggestions a {
	display: inline-flex;
	padding: 0.4rem 0.875rem;
	border: 1px solid var(--liv-ink-500);
	border-radius: var(--r-pill);
	color: var(--liv-paper);
	font-size: 0.8125rem;
	transition: border-color var(--liv-transition), color var(--liv-transition);
}
.liv-search-overlay__suggestions a:hover {
	border-color: var(--liv-leaf-500);
	color: var(--liv-leaf-300);
}