/**
 * Search popup (inc/search/popup.php): the header's search icon opens the search field as a
 * full-window popup with a Close button. Loads where the header Search block
 * ("os-header__search") renders. Also the icon's place beside the hamburger.
 */

/* ---------- Popup: takes over the window ---------- */
html:has(dialog.os-search-popup[open]) { overflow: hidden; }
dialog.os-search-popup {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow-y: auto;
	/* The blog hero's two soft glows on white. */
	background:
		radial-gradient(circle at calc(50% + 572px) 117px, color-mix(in srgb, var(--wp--preset--color--electric) 16%, transparent) 0, transparent 307px),
		radial-gradient(circle at calc(50% - 537px) 673px, color-mix(in srgb, var(--wp--preset--color--teal) 16%, transparent) 0, transparent 257px),
		var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}
dialog.os-search-popup::backdrop { background: var(--wp--preset--color--white); }

.os-search-popup__bar {
	display: flex;
	justify-content: flex-end;
	padding: 20px var(--wp--custom--gutter);
}
.os-search-popup__close {
	/* A round button with the close icon alone: white X on the blue gradient (user, 2026-10-11). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--gradient--navy-band);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.os-search-popup__close:hover { transform: scale(1.08); box-shadow: var(--wp--preset--shadow--brand); }
.os-search-popup__close:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }

.os-search-popup__form {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(860px + var(--wp--custom--gutter) * 2);
	margin: 0 auto;
	padding: clamp(24px, 12vh, 140px) var(--wp--custom--gutter) 48px;
}
.os-search-popup__label {
	display: block;
	margin-bottom: 28px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--ink-deep);
}
.os-search-popup__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}
/* Magnifier inside the field. */
.os-search-popup__field::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	width: 24px;
	height: 24px;
	background-color: var(--wp--custom--color--tertiary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='9' cy='9' r='6.25' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='m13.6 13.6 4 4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='9' cy='9' r='6.25' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='m13.6 13.6 4 4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateY(-50%);
	pointer-events: none;
}
.os-search-popup__input {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 64px;
	padding: 12px 20px 12px 58px;
	border: 1px solid var(--wp--custom--color--field-border);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	font: 400 var(--wp--preset--font-size--large) var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	outline: none;
	transition: border-color var(--os-fast) var(--os-ease), box-shadow var(--os-fast) var(--os-ease);
}
.os-search-popup__input::placeholder { color: rgb(28 28 28 / 0.7); opacity: 1; }
.os-search-popup__input:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand) 14%, transparent);
}
/* The theme's primary button, without the arrow (user, 2026-10-11). */
.os-search-popup__submit {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 64px;
	padding-inline: 28px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}
.os-search-popup__hint {
	margin: 16px 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--color--tertiary);
}

/* Opening: the popup fades in and its parts rise one after the other; closing fades it out
   (os-search-popup.js adds is-closing, then closes the dialog). */
@media (prefers-reduced-motion: no-preference) {
	dialog.os-search-popup[open] { animation: os-search-popup-in var(--os-base) var(--os-ease) both; }
	dialog.os-search-popup[open] :is(.os-search-popup__label, .os-search-popup__field, .os-search-popup__hint) { animation: os-search-popup-rise var(--os-slow) var(--os-ease) both; }
	dialog.os-search-popup[open] .os-search-popup__field { animation-delay: 70ms; }
	dialog.os-search-popup[open] .os-search-popup__hint { animation-delay: 140ms; }
	dialog.os-search-popup.is-closing { animation: os-search-popup-out var(--os-fast) var(--os-ease-in, ease-in) both; }
}
@keyframes os-search-popup-in { from { opacity: 0; } }
@keyframes os-search-popup-out { to { opacity: 0; } }
@keyframes os-search-popup-rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- The header icon: left of the hamburger while the menu is one (<1340px) ---------- */
/* A flex box, so the button's line box doesn't make the phone header taller than its 72px. */
.os-header form.os-header__search { display: flex; align-items: center; margin: 0; }
@media (max-width: 1339px) {
	/* Beside the hamburger and the same size as it (user, 2026-10-11): a 24px glyph like the
	   hamburger's, 16px between the two glyphs (the 38px hit area overlaps the row's 24px gap). */
	.os-header form.os-header__search { order: -1; margin-right: -15px; }
	.os-header form.os-header__search .wp-block-search__button svg { width: 24px; height: 24px; }
}

@media (max-width: 880px) {
	.os-search-popup__label { font-size: var(--wp--preset--font-size--title); }
}
@media (max-width: 540px) {
	.os-search-popup__bar { padding-block: 14px; }
	.os-search-popup__label { margin-bottom: 20px; font-size: var(--wp--preset--font-size--xx-large); }
	/* Phones: the field and the button stay on one row, at the theme's field height; the
	   button is never full width. */
	.os-search-popup__field::before { left: 16px; width: 20px; height: 20px; }
	.os-search-popup__input { height: 45px; padding: 10px 14px 10px 44px; border-radius: 8px; font-size: var(--wp--preset--font-size--medium); }
	.os-search-popup__submit { min-height: 45px; padding-inline: 18px; }
}
/* No keyboard, no keyboard hint. */
@media (hover: none) {
	.os-search-popup__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.os-search-popup__close:hover { transform: none; }
	.os-search-popup__close,
	.os-search-popup__input,
	.os-search-popup__submit { transition: none; }
}