/* ETF Site: site search (Phase 21; markup inc/search.php, behaviour site-search.js and site-search-ui.js).
   The magnifying glass sits in the header's end group, before the language selector. From 64em the panel drops
   from the bar's bottom edge: a sheet in the bar's material with the field and results, over the blurred page
   (the same scrim as the mega panel). Below 64em it covers the whole screen with the field and Cancel at the
   top, like the system search on a phone. Role tokens only; effects on for everyone. */

/* ---- The button ---- */
.etf-site-search-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--stz-hit);
	height: var(--stz-hit);
	border-radius: var(--stz-radius-pill);
	color: var(--stz-nav);
	text-decoration: none;
	transition: color var(--stz-dur) var(--stz-ease), opacity var(--stz-dur) var(--stz-ease);
}

.etf-site-search-btn svg {
	width: 1.25rem;
	height: 1.25rem;
}

.etf-site-search-btn[aria-expanded="true"] {
	color: var(--stz-text);
}

@media (hover: hover) and (pointer: fine) {
	.etf-site-search-btn:hover {
		color: var(--stz-text);
	}
}

.etf-site-search-btn:active {
	opacity: 0.55;
	transition-duration: var(--stz-dur-press);
	transition-timing-function: var(--stz-ease-press);
}

/* Very small phones: with the glass in the bar, the language selector shows its globe only (its name stays in
   the summary's aria-label), so logo and controls keep one row */
@media (width < 23em) {
	.etf-site-header__end:has(.etf-site-search-btn) .etf-site-lang__summary > span {
		display: none;
	}
}

/* ---- The panel ---- */
.etf-site-search[hidden] {
	display: none;
}

.etf-site-search {
	position: fixed;
	inset: calc(var(--wp-admin--admin-bar--height, 0px) + var(--stz-bar)) 0 0;
	z-index: var(--stz-z-raised);
	overflow: hidden;
	background: var(--stz-scrim);
	-webkit-backdrop-filter: var(--stz-scrim-blur);
	backdrop-filter: var(--stz-scrim-blur);
	animation: etf-site-search-fade var(--stz-dur-fade-in) ease-out both;
}

.etf-site-search__sheet {
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--stz-chrome-menu);
	-webkit-backdrop-filter: var(--stz-chrome-blur);
	backdrop-filter: var(--stz-chrome-blur);
	border-bottom: 1px solid var(--stz-chrome-line);
	animation: etf-site-search-drop var(--stz-dur) var(--stz-ease) both;
}

.etf-site-search__inner {
	max-width: 44rem;
	margin-inline: auto;
	padding: var(--stz-space-4) var(--stz-space-5) var(--stz-space-7);
}

@keyframes etf-site-search-fade {
	from { opacity: 0; }
}

@keyframes etf-site-search-drop {
	from { opacity: 0; transform: translateY(-0.75rem); }
}

/* ---- Field ---- */
.etf-site-search__row {
	display: flex;
	align-items: center;
	gap: var(--stz-space-3);
}

.etf-site-search__input {
	flex: 1;
	min-width: 0;
	min-height: var(--stz-hit);
	padding: 0 var(--stz-space-4);
	border: 1px solid var(--stz-hairline);
	border-radius: var(--stz-radius-control);
	background: var(--stz-surface);
	color: var(--stz-text);
	font: inherit;
	font-size: var(--stz-fs-body); /* 17 px: no zoom on iOS (16 or more) */
	-webkit-appearance: none;
	appearance: none;
}

.etf-site-search__input::placeholder {
	color: var(--stz-text-2);
}

.etf-site-search__input:focus-visible {
	outline: 2px solid var(--stz-focus);
	outline-offset: -1px;
}

.etf-site-search__cancel {
	display: none;
	flex: none;
	min-height: var(--stz-hit);
	padding: 0 var(--stz-space-1);
	border: 0;
	background: none;
	color: var(--stz-link);
	font: inherit;
	font-size: var(--stz-fs-body);
	cursor: pointer;
}

/* ---- Messages, headings, quick links, other language ---- */
.etf-site-search__msg {
	margin: var(--stz-space-5) 0 var(--stz-space-2);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-callout);
}

.etf-site-search__heading {
	margin: var(--stz-space-6) 0 var(--stz-space-2);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-caption);
	font-weight: var(--stz-fw-semibold);
}

.etf-site-search__quick ul,
.etf-site-search__other ul,
.etf-site-search__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.etf-site-search__quick a,
.etf-site-search__other a {
	display: flex;
	align-items: center;
	min-height: var(--stz-hit);
	color: var(--stz-text);
	font-size: var(--stz-fs-body);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.etf-site-search__quick a:hover,
	.etf-site-search__other a:hover {
		color: var(--stz-link);
	}
}

/* ---- Results: one list in order of best match ---- */
.etf-site-search__list {
	margin-top: var(--stz-space-4);
}

.etf-site-search__item {
	border-radius: var(--stz-radius-item);
}

.etf-site-search__item[aria-selected="true"] {
	background: var(--stz-fill);
}

.etf-site-search__link {
	display: grid;
	gap: var(--stz-space-1);
	padding: var(--stz-space-3);
	color: var(--stz-text);
	text-decoration: none;
}

.etf-site-search__link:active {
	opacity: 0.55;
	transition: opacity var(--stz-dur-press) var(--stz-ease-press);
}

.etf-site-search__title {
	font-size: var(--stz-fs-body);
	font-weight: var(--stz-fw-semibold);
	line-height: var(--stz-lh-title);
}

.etf-site-search__desc {
	display: -webkit-box;
	overflow: hidden;
	color: var(--stz-text-2);
	font-size: var(--stz-fs-sub);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.etf-site-search__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--stz-space-2);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-caption);
}

.etf-site-search__section::before {
	content: "→ ";
}

/* A matched word: heavier and underlined, never colour alone */
.etf-site-search mark {
	background: none;
	color: inherit;
	font-weight: var(--stz-fw-semibold);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.etf-site-search__title mark {
	text-decoration-thickness: 2px;
}

/* The page behind does not scroll while the panel is open */
html[data-etf-site-search-open] {
	overflow: hidden;
}

/* ---- Phones and tablets: the whole screen, field and Cancel at the top ---- */
@media (width < 64em) {
	.etf-site-search {
		inset: 0;
		top: var(--wp-admin--admin-bar--height, 0px);
		bottom: auto;
		height: 100dvh;
		background: var(--stz-surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.etf-site-search__sheet {
		height: 100%;
		background: var(--stz-surface);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom: 0;
	}

	.etf-site-search__inner {
		padding-top: var(--stz-space-3);
	}

	.etf-site-search__cancel {
		display: inline-flex;
		align-items: center;
	}
}

@media (forced-colors: active) {
	.etf-site-search__sheet {
		border-bottom: 1px solid CanvasText;
	}

	.etf-site-search__input {
		border-color: CanvasText;
	}

	.etf-site-search__item[aria-selected="true"] {
		outline: 2px solid Highlight;
	}
}