/**
 * core/search — site-wide structural styling (auto-loaded per-block).
 *
 * Deliberately surface-neutral: works on light content surfaces and under
 * scheme sections. The header's white-pill-on-blue treatment layers on top
 * in patterns/header/header.css (scoped to .site-header__search) — keep
 * band-specific fills OUT of this file.
 */

.wp-block-search__inside-wrapper {
	border: 1px solid var(--color-border, var(--wp--custom--color--neutral--500));
	border-radius: var(--wp--custom--radius--md, 10px);
	overflow: hidden;
}

.wp-block-search__input {
	font-size: var(--wp--preset--font-size--body-large);
	padding: var(--wp--preset--spacing--xsmall) var(--wp--preset--spacing--normal);
}

.wp-block-search__input:focus-visible {
	outline: var(--focus-width, 3px) var(--focus-style, solid) var(--color-focus, currentColor);
	outline-offset: calc(-1 * var(--focus-width, 3px)); /* keep the ring inside the radius */
}

.wp-block-search__button {
	cursor: pointer;
	transition: opacity var(--wp--custom--duration--fast, 150ms) var(--wp--custom--easing--standard, ease);
}

.wp-block-search__button:hover {
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-search__button {
		transition: none;
	}
}

/*
 * ------------------------------------------------------------------
 * ICON SUBMIT — the FRAME'S magnifier, not core's.
 *
 * G07 (Gary, 2026-09-14): "search icon appears backwards". It is neither a
 * flipped asset nor a CSS transform. `buttonUseIcon` makes core emit its OWN
 * inline SVG (wp/wp-includes/blocks/search.php:123, path `M13 5c-3.3…`), which
 * draws the lens top-RIGHT and the handle bottom-LEFT. Every frame that shows
 * this control draws the mirror of that — lens top-LEFT, handle bottom-RIGHT.
 *
 * Measured at 1920 before this change: the button and the svg both compute
 * `transform: none` and `direction: ltr`, and the only transform anywhere in
 * the theme's CSS is `scale(1.02)` in motion.css. The pill's
 * `flex-direction: row-reverse` (header.css) moves the BUTTON to the leading
 * edge; it never touches the glyph. So the artwork itself was the defect, and
 * counter-flipping it with `scaleX(-1)` would only have mirrored the wrong
 * artwork into the right pose.
 *
 * ⚠ THE PATH BELOW IS THE FIGMA EXPORT, NOT A REDRAW. Node `Icon L`,
 * `I43772:26940;27301:23045`, inside Input Field `43772:26940` — pulled with
 * download_assets and transcribed unchanged. The export is in the 288 x 48
 * Input Field's coordinates and the icon's own origin is (16, 12) there, so
 * the translate is what puts it in a 24 x 24 box; the numbers are Figma's.
 * Redrawing is what put three other icons in this theme off-frame — see
 * docs/reports/icon-audit.md.
 *
 * ⚠ THIS WAS THE ONE HEADER ICON OUTSIDE THE THEME'S ICON LAYER.
 * build-knowledge §6 says the icon layer is "all in patterns/header/header.css".
 * The search glyph never was, because it arrives from core's render rather than
 * from a CSS mask. This brings it onto the same contract as the other thirteen
 * slugs — `var(--ftps-icon-search, var(--tc-icon-search))` — with the theme's
 * artwork pinned over the design system's in assets/css/theme-tokens.css, per
 * the 2026-08-06 decision that the theme's glyphs are the ones that ship.
 *
 * SCOPE: `.wp-block-search__button.has-icon` matches ONE control in this build.
 * `wp:search` appears once in the whole theme (patterns/header/header.php:507)
 * and the User Guides search is a hand-built GET form that paints its own
 * `--tc-icon-search` directly, so it cannot collide with this.
 *
 * The box is unchanged: core's svg is a fixed 24 x 24 and so is this, so
 * header-verify's `search icon width/height 24` and the 8px icon-to-input gap
 * measure exactly what they did before.
 * ------------------------------------------------------------------
 */
.wp-block-search__button.has-icon {
	--tc-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cg transform='translate(-16 -12)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29.7929 25.7929C30.1834 25.4024 30.8166 25.4024 31.2071 25.7929L36.7071 31.2929C37.0976 31.6834 37.0976 32.3166 36.7071 32.7071C36.3166 33.0976 35.6834 33.0976 35.2929 32.7071L29.7929 27.2071C29.4024 26.8166 29.4024 26.1834 29.7929 25.7929Z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26 17C23.2386 17 21 19.2386 21 22C21 24.7614 23.2386 27 26 27C28.7614 27 31 24.7614 31 22C31 19.2386 28.7614 17 26 17ZM19 22C19 18.134 22.134 15 26 15C29.866 15 33 18.134 33 22C33 25.866 29.866 29 26 29C22.134 29 19 25.866 19 22Z'/%3E%3C/g%3E%3C/svg%3E");

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * Core's svg stays in the DOM and stops painting. Removing it would mean a
 * `render_block` filter rewriting core's own markup, which is a much larger
 * surface to own across core updates than one `display: none`.
 */
.wp-block-search__button.has-icon .search-icon {
	display: none;
}

.wp-block-search__button.has-icon::before {
	content: "";
	display: block;
	inline-size: 24px; /* core's own width/height attributes on the svg */
	block-size: 24px;
	flex: none;
	background-color: currentcolor;
	-webkit-mask: var(--ftps-icon-search, var(--tc-icon-search)) no-repeat center / contain;
	mask: var(--ftps-icon-search, var(--tc-icon-search)) no-repeat center / contain;
}