/*
 * Design System - AELITA
 * components/search.css - site search surfaces.
 *
 * One canonical form (searchform.php, rendered via get_search_form()) is
 * reused by two surfaces:
 *   - .a-search-panel       desktop overlay under the header actions;
 *   - .a-mobile-nav__search mobile drawer block after the navigation.
 *
 * Uses only CSS variables from tokens.css. No hex values, no global
 * selectors, no `transition: all`.
 *
 * Focus note: the legacy theme ships `*:focus { outline: none !important; }`
 * (css/main.css), so the focus-visible rules below use a local `!important`
 * on the outline only.
 */

/* -------------------------------------------------------------------- */
/* Header trigger (desktop only)                                        */
/* -------------------------------------------------------------------- */
/* The slot once held the language switcher. Desktop only: on mobile the
 * drawer carries the search field, so no extra header button is added. */
.a-search-toggle {
	display: none;
}

/* -------------------------------------------------------------------- */
/* Form (shared)                                                        */
/* -------------------------------------------------------------------- */
.a-search {
	width: 100%;
	margin: 0;
}

.a-search__control {
	display: flex;
	align-items: stretch;
	min-height: calc(var(--space-6) + var(--space-3)); /* 44px */
	background-color: var(--bg);
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	transition:
		border-color var(--dur-popover) var(--ease-out),
		box-shadow var(--dur-popover) var(--ease-out);
}

/* The field carries no native outline (legacy reset); the control shows it. */
.a-search__control:focus-within {
	border-color: var(--focus-ring);
	box-shadow: 0 0 0 1px var(--focus-ring);
}

.a-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: calc(var(--space-6) + var(--space-3)); /* 44px */
	padding: var(--space-2) var(--space-3);
	border: 0;
	background-color: transparent;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-appearance: none;
	appearance: none;
}

.a-search__input::placeholder {
	color: var(--text-secondary);
	opacity: 1;
}

/* Hide the native WebKit clear control: the trailing magnifier is the
 * single, consistent affordance on both surfaces. */
.a-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.a-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(var(--space-6) + var(--space-3)); /* 44px */
	min-height: calc(var(--space-6) + var(--space-3));
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--text-secondary);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color var(--dur-popover) var(--ease-out);
}

.a-search__submit svg {
	display: block;
	width: var(--space-5);
	height: var(--space-5);
}

/* -------------------------------------------------------------------- */
/* Desktop overlay panel                                                */
/* -------------------------------------------------------------------- */
.a-search-panel {
	position: absolute;
	inset-block-start: 100%; /* directly under the header bar */
	inset-inline-end: 0;     /* aligned to the content container's edge */
	z-index: var(--z-dropdown);
	display: none;
	align-items: center;
	gap: var(--space-2);
	/* Compact panel composed from the space scale (96*4 + 32 = 416px). */
	width: calc(var(--space-9) * 4 + var(--space-6));
	max-width: calc(100vw - var(--space-6));
	padding: var(--space-3);
	background-color: var(--bg);
	color: var(--text-primary);
	box-shadow: var(--shadow-overlay);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition:
		opacity var(--dur-dropdown) var(--ease-out),
		transform var(--dur-dropdown) var(--ease-out),
		visibility 0s linear var(--dur-dropdown);
}

.a-search-panel.is-open {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0s;
}

/* With JS the panel stays "visible" (opacity handles the reveal) so focus
 * can be moved into the field immediately; the controller marks it inert
 * while closed to keep it out of the tab order. Without JS the base
 * visibility:hidden above keeps it fully hidden. */
.a-header--js .a-search-panel {
	visibility: visible;
}

.a-search-panel__form {
	flex: 1 1 auto;
	min-width: 0;
}

.a-search-panel__close {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------- */
/* Mobile drawer block                                                  */
/* -------------------------------------------------------------------- */
.a-mobile-nav__search {
	flex: 0 0 auto;
	padding: var(--space-4);
	border-block-start: var(--border-w) solid var(--border);
	background-color: var(--bg);
}

/* -------------------------------------------------------------------- */
/* States                                                               */
/* -------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.a-search__submit:hover {
		color: var(--link-hover);
	}
}

.a-search__submit:focus-visible {
	outline: 2px solid var(--focus-ring) !important;
	outline-offset: -2px;
}

/* -------------------------------------------------------------------- */
/* Desktop reveal - same breakpoint as the header (992px)               */
/* -------------------------------------------------------------------- */
@media (min-width: 992px) {
	.a-search-toggle {
		display: inline-flex;
	}

	.a-search-panel {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.a-search__control,
	.a-search__submit {
		transition-duration: 0.01ms;
	}

	/* Keep the opacity swap, drop the movement and the close delay. */
	.a-search-panel {
		transform: none;
		transition-duration: 0.01ms;
		transition-delay: 0s;
	}
}