/**
 * Header search v2 (2026-10-07, tech lead: "the header is grey and it suddenly changes colour to
 * white and suddenly there is a dark outline"). Loaded after the header CSS only while
 * `eupepsia_header_search_v2` is `yes` (inc/enqueue-header-v4.php, body class `eup-hd-search2`).
 *
 * WHAT HAPPENED ON FOCUS (measured on staging, 1440, 2026-10-07)
 *   - The field turned white: the parent theme's input focus style (#fff over 0.3 s), inside the
 *     transparent pill.
 *   - A 3 px charcoal outline appeared at once round the field (header-v2.css `.eup-hd input:focus-
 *     visible`), drawn on the field's own 12 px corners, so its right end showed as a clipped
 *     half-pill against the magnifier.
 *   - A second 3 px charcoal outline appeared at once round the whole form, 2 px outside it
 *     (header-v3.css `.eup-hd3__search:focus-within`). Two rings, a white slab, no motion.
 *
 * NOW
 *   One capsule, drawn by the form's two pseudo-elements so nothing in the layout moves:
 *   ::before  the fill: a soft light tint over the pill grey that opens from the magnifier
 *             leftwards (clip-path) while it fades in;
 *   ::after   the ring: 2 px dark teal (#00796d; 4.3:1 on the pill grey, 4.9:1 on the tint), fades in.
 *   The placeholder fades back; the suggestions list drops in with a short fade and rise.
 *   Escape on an empty field (no list open) closes the capsule with the reverse motion and keeps
 *   focus, so the ring stays as the focus indicator (header-search-v2.js); click or tab away closes
 *   everything. Reduced motion: no clip or fade, the states switch at once.
 *   Phone drawer: the same ring and tint inside the drawer's pill.
 */

body.eup-hd-search2 .eup-hd3 .eup-hd3__search {
	isolation: isolate;
	position: relative;
}

/* The two old rings. */
body.eup-hd-search2 .eup-hd3 .eup-hd3__search:focus-within {
	outline: 0;
}

body.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field,
body.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field:focus,
body.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field:focus-visible {
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	transition: none;
}

/* The capsule. */
body.eup-hd-search2 .eup-hd3 .eup-hd3__search::before,
body.eup-hd-search2 .eup-hd3 .eup-hd3__search::after {
	border-radius: 999px;
	box-sizing: border-box;
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

body.eup-hd-search2 .eup-hd3 .eup-hd3__search::before {
	background: rgba(255, 255, 255, 0.66);
	box-shadow: inset 0 0 0 1px rgba(61, 57, 53, 0.06);
	clip-path: inset(0 0 0 42% round 999px);
	transition:
		opacity var(--eup3-dur-med, 0.35s) var(--eup3-ease-smooth, ease),
		clip-path var(--eup3-dur-slow, 0.5s) var(--eup3-ease-reveal, ease);
}

body.eup-hd-search2 .eup-hd3 .eup-hd3__search::after {
	border: 2px solid var(--eup3-accent-text, #00796d);
	transition: opacity var(--eup3-dur-fast, 0.25s) var(--eup3-ease-smooth, ease);
}

body.eup-hd-search2 .eup-hd3 .eup-hd3__search:focus-within::before {
	clip-path: inset(0 0 0 0 round 999px);
	opacity: 1;
}

body.eup-hd-search2 .eup-hd3 .eup-hd3__search:focus-within::after {
	opacity: 1;
}

/* Escape on an empty field: the fill closes (reverse motion), the ring stays while focus does. */
body.eup-hd-search2 .eup-hd3 .eup-hd3__search.is-closed:focus-within::before {
	clip-path: inset(0 0 0 42% round 999px);
	opacity: 0;
}

/* The placeholder steps back while the field is open. */
body.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field::placeholder {
	opacity: 1;
	transition: opacity var(--eup3-dur-med, 0.35s) var(--eup3-ease-smooth, ease);
}

body.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field:focus::placeholder {
	color: var(--eup3-muted, #a99787);
	opacity: 0.6;
}

/* Tab from the field to the magnifier: a ring round the icon, inside the capsule. */
body.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-submit:focus-visible {
	border-radius: 999px;
	outline: 2px solid var(--eup3-accent-text, #00796d);
	outline-offset: -6px;
}

/* Mouse: a hint of the capsule on hover. */
@media (hover: hover) and (pointer: fine) {
	body.eup-hd-search2 .eup-hd3 .eup-hd3__search:not(.is-closed):hover::before {
		clip-path: inset(0 0 0 0 round 999px);
		opacity: 0.45;
	}

	body.eup-hd-search2 .eup-hd3 .eup-hd3__search:not(.is-closed):focus-within:hover::before {
		opacity: 1;
	}
}

/* Desktop: the field reads from the magnifier leftwards; a little room at the capsule's left end
   while it is open (the text is right-aligned, so nothing visible moves). */
@media (min-width: 1024px) {
	body.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field:focus {
		padding-left: 16px;
	}
}

/* Phone drawer: the pill keeps its grey; the tint and ring sit inside it. */
@media (max-width: 1023.98px) {
	body.eup-hd-search2 .eup-hd3 .eup-hd3__nav .eup-hd3__search::before {
		clip-path: inset(0 0 0 0 round 999px);
	}
}

/* Suggestions (Advanced Woo Search, audit-fixes): a short fade and rise each time the list opens. */
@keyframes eup-hd-search2-drop {
	from {
		opacity: 0;
		transform: translate3d(0, -6px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

body.eup-hd-search2 .aws-search-result.eup-afx-aws-result {
	animation: eup-hd-search2-drop var(--eup3-dur-med, 0.35s) var(--eup3-ease-reveal, ease) both;
}

@media (prefers-reduced-motion: reduce) {
	body.eup-hd-search2 .eup-hd3 .eup-hd3__search::before,
	body.eup-hd-search2 .eup-hd3 .eup-hd3__search::after,
	body.eup-hd-search2 .eup-hd3 .eup-hd3__search .eup-hd3__search-field::placeholder {
		transition: none;
	}

	body.eup-hd-search2 .aws-search-result.eup-afx-aws-result {
		animation: none;
	}
}