/**
 * Strata Toolkit — Instant Search dialog (inc/search.php).
 * Colours and sizes are the theme's tokens (tokens.css), so the dialog
 * follows the palette and dark mode. A full-screen frosted overlay with
 * the Carousel control bar's shapes (blocks/latest-posts-carousel/
 * style.css): pill field, round 44px buttons that take a light tint on
 * hover, rounded results.
 */

/* One layer over the whole screen: the dialog itself is the frosted
   overlay (no dimmed backdrop under it, no second panel on it). The
   field, results and hints sit in one centred column near the top; the
   close button is in the top right corner. */
.st-instant-search {
	position: fixed;
	inset: 0;
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: clamp(4.5rem, 12vh, 9rem) var(--st-toolkit-space-md) var(--st-toolkit-space-lg);
	overflow: hidden;
	border: none;
	box-sizing: border-box;
	background: color-mix(in srgb, var(--st-toolkit-color-background) 82%, transparent);
	color: var(--st-toolkit-color-foreground);
	-webkit-backdrop-filter: blur(var(--st-toolkit-glass-blur)) saturate(var(--st-toolkit-glass-saturate));
	backdrop-filter: blur(var(--st-toolkit-glass-blur)) saturate(var(--st-toolkit-glass-saturate));
}

/* Without backdrop-filter, or when the visitor asked the system for less
   transparency, the overlay is solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.st-instant-search {
		background: var(--st-toolkit-color-background);
	}
}

@media (prefers-reduced-transparency: reduce) {

	.st-instant-search {
		background: var(--st-toolkit-color-background);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

.st-instant-search[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--st-toolkit-space-md);
	animation: st-instant-search-in var(--st-toolkit-transition-base);
}

/* The overlay is the only layer. */
.st-instant-search::backdrop {
	background: transparent;
}

.st-instant-search > * {
	width: min(720px, 100%);
}

@keyframes st-instant-search-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.st-instant-search[open] {
		animation: none;
	}
}

@media (max-width: 600px) {

	.st-instant-search {
		padding-top: 4.5rem;
	}
}

/* The field: a large pill on the page's own background with a soft
   shadow. */
.st-instant-search__form {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--st-toolkit-space-sm);
	min-height: 3.75rem;
	padding: var(--st-toolkit-space-2-xs) var(--st-toolkit-space-lg);
	border: 1px solid var(--st-toolkit-color-divider);
	border-radius: var(--st-toolkit-radius-full);
	background-color: var(--st-toolkit-color-background);
	box-shadow: var(--st-toolkit-shadow-lg);
	transition: border-color var(--st-toolkit-transition-fast), box-shadow var(--st-toolkit-transition-fast);
}

.st-instant-search__form:focus-within {
	border-color: var(--st-toolkit-color-brand-text);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-toolkit-color-brand-text) 22%, transparent), var(--st-toolkit-shadow-lg);
}

.st-instant-search__icon {
	flex: none;
	color: var(--st-toolkit-color-foreground-muted);
}

.st-instant-search__input {
	flex: 1;
	min-width: 0;
	padding: var(--st-toolkit-space-xs) 0;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--st-toolkit-font-size-xl);
	outline: none;
}

.st-instant-search__input::-webkit-search-cancel-button {
	display: none;
}

.st-instant-search__close {
	position: absolute;
	top: var(--st-toolkit-space-md);
	right: var(--st-toolkit-space-md);
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: var(--st-toolkit-radius-full);
	background-color: transparent;
	color: var(--st-toolkit-color-foreground);
	cursor: pointer;
	transition: background-color var(--st-toolkit-transition-fast);
}

.st-instant-search__close:hover {
	background-color: color-mix(in srgb, var(--st-toolkit-color-foreground) 10%, transparent);
}

.st-instant-search__close:focus-visible {
	outline: 2px solid var(--st-toolkit-color-brand-text);
	outline-offset: 2px;
}

.st-instant-search kbd {
	display: inline-block;
	min-width: 1.75em;
	padding: 0.1em 0.5em;
	border: 1px solid var(--st-toolkit-color-divider);
	border-radius: var(--st-toolkit-radius-full);
	background-color: var(--st-toolkit-color-background);
	color: var(--st-toolkit-color-foreground-muted);
	font: inherit;
	font-size: var(--st-toolkit-font-size-xs);
	line-height: 1.4;
	text-align: center;
}

/* Results: straight on the overlay, rounded, a light tint on the one
   under the pointer or the arrow keys — like the Carousel bar's buttons. */
.st-instant-search__body {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.st-instant-search__body:has(.st-instant-search__results:empty):has(.st-instant-search__status:empty) {
	display: none;
}

.st-instant-search__results {
	margin: 0;
	padding: var(--st-toolkit-space-2-xs);
	list-style: none;
}

.st-instant-search__results:empty {
	display: none;
}

.st-instant-search__group {
	padding: var(--st-toolkit-space-sm) var(--st-toolkit-space-sm) var(--st-toolkit-space-2-xs);
	color: var(--st-toolkit-color-foreground-muted);
	font-size: var(--st-toolkit-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--st-toolkit-letter-spacing-wider);
	text-transform: uppercase;
}

.st-instant-search__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--st-toolkit-space-sm);
	padding: var(--st-toolkit-space-sm) var(--st-toolkit-space-md);
	border-radius: var(--st-toolkit-radius-full);
	cursor: pointer;
	transition: background-color var(--st-toolkit-transition-fast);
}

.st-instant-search__option[aria-selected="true"],
.st-instant-search__option:hover {
	background-color: color-mix(in srgb, var(--st-toolkit-color-foreground) 8%, transparent);
}

.st-instant-search__option-arrow {
	flex: none;
	color: var(--st-toolkit-color-foreground-muted);
	opacity: 0;
	transition: opacity var(--st-toolkit-transition-fast);
}

.st-instant-search__option[aria-selected="true"] .st-instant-search__option-arrow,
.st-instant-search__option:hover .st-instant-search__option-arrow {
	opacity: 1;
}

.st-instant-search__option--all {
	margin-top: var(--st-toolkit-space-2-xs);
	color: var(--st-toolkit-color-brand-text);
	font-weight: 600;
}

.st-instant-search mark {
	border-radius: 3px;
	background-color: var(--st-toolkit-color-brand-subtle);
	color: inherit;
}

.st-instant-search__status {
	margin: 0;
	padding: var(--st-toolkit-space-sm) var(--st-toolkit-space-md);
	color: var(--st-toolkit-color-foreground-muted);
	font-size: var(--st-toolkit-font-size-sm);
}

.st-instant-search__status:empty {
	display: none;
}

.st-instant-search__hint {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--st-toolkit-space-2-xs) var(--st-toolkit-space-xs);
	margin: 0;
	padding: var(--st-toolkit-space-2-xs) var(--st-toolkit-space-md);
	color: var(--st-toolkit-color-foreground-muted);
	font-size: var(--st-toolkit-font-size-xs);
}

/* Touch screens have no keyboard hints to give. */
@media (hover: none) {

	.st-instant-search__hint {
		display: none;
	}
}