/**
 * Header: full-screen search overlay — Deepak Sales.
 *
 * Mobile-first. Depends on tokens.css + base.css. Same z-index layer and
 * open/close animation pattern as the mobile nav drawer (header.css's
 * `.ds-mobile-nav`) for consistency — scrim fade + panel transition, driven
 * by the `.is-open` class that navigation.js's initSearch() toggles.
 */

.ds-search-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--ds-z-drawer);
}

.ds-search-overlay[hidden] {
	display: none;
}

.ds-search-overlay__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: var(--ds-scrim);
	opacity: 0;
	transition: opacity var(--ds-dur) var(--ds-ease);
}

.ds-search-overlay.is-open .ds-search-overlay__scrim {
	opacity: 1;
}

.ds-search-overlay__panel {
	position: relative;
	z-index: 1;
	height: 100%;
	overflow-y: auto;
	background-color: var(--ds-paper);
	box-shadow: var(--ds-shadow-lg);
	opacity: 0;
	transform: translateY(-14px);
	transition:
		opacity var(--ds-dur-slow) var(--ds-ease),
		transform var(--ds-dur-slow) var(--ds-ease);
}

.ds-search-overlay.is-open .ds-search-overlay__panel {
	opacity: 1;
	transform: translateY(0);
}

.ds-search-overlay__inner {
	padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* ---- Head: input + close ---------------------------------------------- */
.ds-search-overlay__head {
	display: flex;
	align-items: center;
	gap: var(--ds-space-md);
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.ds-search-overlay__field {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
}

.ds-search-overlay__field-ic {
	position: absolute;
	left: 1.1rem;
	color: var(--ds-muted);
	pointer-events: none;
}

.ds-search-overlay__input {
	width: 100%;
	padding: 1rem 1.25rem 1rem 3rem;
	border: 1px solid var(--ds-line-strong);
	border-radius: var(--ds-radius-pill);
	background-color: var(--ds-surface);
	font-family: var(--ds-font-display);
	font-size: var(--ds-fs-h3);
	color: var(--ds-ink);
	transition: border-color var(--ds-dur-fast) var(--ds-ease);
}

.ds-search-overlay__input:focus {
	outline: 2px solid var(--ds-focus);
	outline-offset: 2px;
	border-color: var(--ds-gold);
}

.ds-search-overlay__close {
	flex: none;
}

/* ---- Body: sections + chips -------------------------------------------- */
.ds-search-overlay__body {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.ds-search-overlay__section[hidden] {
	display: none;
}

.ds-search-overlay__label {
	margin-bottom: var(--ds-space-sm);
	font-family: var(--ds-font-mono);
	font-size: var(--ds-fs-eyebrow);
	font-weight: var(--ds-fw-label);
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
	color: var(--ds-oxblood);
}

.ds-search-overlay__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-sm);
}

.ds-search-overlay__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid var(--ds-line-strong);
	border-radius: var(--ds-radius-pill);
	background-color: var(--ds-surface);
	font-size: var(--ds-fs-small);
	color: var(--ds-body);
	transition:
		border-color var(--ds-dur-fast) var(--ds-ease),
		color var(--ds-dur-fast) var(--ds-ease);
}

.ds-search-overlay__chip:hover,
.ds-search-overlay__chip:focus-visible {
	border-color: var(--ds-gold);
	color: var(--ds-oxblood);
}

/* ---- Live results (populated by search.js) ----------------------------- */
.ds-search-overlay__results[hidden] {
	display: none;
}

.ds-search-overlay__result-group + .ds-search-overlay__result-group {
	margin-top: var(--ds-space-lg);
}

.ds-search-overlay__result-heading {
	margin-bottom: var(--ds-space-sm);
	font-family: var(--ds-font-mono);
	font-size: var(--ds-fs-eyebrow);
	font-weight: var(--ds-fw-label);
	letter-spacing: var(--ds-ls-wide);
	text-transform: uppercase;
	color: var(--ds-muted);
}

.ds-search-overlay__result-list {
	display: flex;
	flex-direction: column;
}

.ds-search-overlay__result-link {
	display: flex;
	align-items: center;
	gap: var(--ds-space-md);
	padding: 0.65rem 0.1rem;
	border-top: 1px solid var(--ds-line);
	color: var(--ds-body);
	transition: color var(--ds-dur-fast) var(--ds-ease);
}

.ds-search-overlay__result-list li:first-child .ds-search-overlay__result-link {
	border-top: none;
}

.ds-search-overlay__result-link:hover,
.ds-search-overlay__result-link:focus-visible {
	color: var(--ds-oxblood);
}

.ds-search-overlay__result-thumb {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--ds-radius-sm);
	object-fit: cover;
	background-color: var(--ds-paper-2);
}

.ds-search-overlay__result-name {
	font-size: var(--ds-fs-body);
}

.ds-search-overlay__result-empty {
	padding-block: var(--ds-space-md);
	color: var(--ds-muted);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ds-search-overlay__scrim,
	.ds-search-overlay__panel {
		transition: none;
	}
}