/**
 * Waterwheel header search block.
 *
 * Colour rule mirrors the mega-nav (assets/css/header.css):
 *   - default (over dark hero) → white ink
 *   - body.home2-nav-on-light  → dark ink (#1a1613)
 * The open-input keeps a translucent backdrop that reads on both modes.
 */

.wwh-header-search {
	display: inline-flex;
	align-items: center;
}

.wwh-header-search__form {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.wwh-header-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: inherit; /* inherits from .site-header (#fff over hero) */
	cursor: pointer;
	transition: background-color 0.35s cubic-bezier(.2,.8,.2,1), color 0.35s cubic-bezier(.2,.8,.2,1);
}

/* Default (over dark hero) — match mega-nav link colour */
.site-header .wwh-header-search__toggle {
	color: #ffffff;
}

/* Light-section inversion (sticky-header.js toggles body.home2-nav-on-light) */
body.home2-nav-on-light .site-header .wwh-header-search__toggle {
	color: #1a1613;
}

.wwh-header-search__toggle:hover,
.wwh-header-search__toggle:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
}

body.home2-nav-on-light .site-header .wwh-header-search__toggle:hover,
body.home2-nav-on-light .site-header .wwh-header-search__toggle:focus-visible {
	background-color: rgba(26, 22, 19, 0.08);
}

.wwh-header-search__toggle:focus-visible {
	box-shadow: 0 0 0 2px currentColor;
}

.wwh-header-search__icon {
	display: block;
}

/*
 * The input is an OVERLAY, not an in-flow item (core 2.83.2).
 *
 * It used to sit in the header row and be toggled with the `hidden` attribute.
 * Two faults came from that. `hidden` flips `display`, so the max-width
 * transition never ran and the field snapped open and shut. And because it
 * took up space in the row, opening it shoved every nav item 280px to the
 * left. It was also a 14% white pill with white text, which disappeared on
 * a bright hero sky.
 *
 * Now:
 *  - Desktop (>640px): the field is absolutely positioned against
 *    .wwh-header-search and slides out LEFTWARD from the magnifier. The
 *    top-level menu fades out underneath it (the :has() rule below), so the
 *    field takes the menu's place instead of overlapping half-visible labels.
 *  - Phones (<=640px): .wwh-header-search is left static, so the field's
 *    containing block is the header template-part wrapper (it is
 *    `position: absolute` in the theme's header.css). The field drops down
 *    as a full-width bar just under the header. That also lets it escape
 *    .site-header's `overflow-x: clip` at <=600px, which would otherwise
 *    cut it off.
 *  - The reveal is clip-path + opacity + a small translate. The element stays
 *    rendered at all times, and `visibility` (delayed on close) keeps it out
 *    of the tab order while shut.
 *  - It is always dark glass with white text, over photos and cream sections
 *    alike: 78% ink with a blur, about 9:1 even over pure white. A soft dark
 *    halo (box-shadow) matches the home nav glow in the theme's header.css.
 *
 * .wwh-header-search is not an ancestor of the megamenu panels, so
 * positioning it is safe. Positioning a NAV ancestor would not be: see
 * header.css.
 */
.wwh-header-search {
	position: relative;
}

.wwh-header-search__input {
	position: absolute;
	top: 50%;
	right: calc(100% + 0.25rem);
	z-index: 210; /* above the megamenu panels (200) */
	width: min(360px, 60vw);
	box-sizing: border-box;
	margin: 0;
	padding: 0.55rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(20, 17, 13, 0.78);
	-webkit-backdrop-filter: blur(12px) saturate(1.1);
	backdrop-filter: blur(12px) saturate(1.1);
	box-shadow: 0 0 22px 6px rgba(20, 17, 13, 0.28);
	color: #ffffff;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	opacity: 0;
	visibility: hidden;
	clip-path: inset(0 0 0 100% round 999px);
	transform: translate(12px, -50%);
	transition:
		clip-path 0.38s cubic-bezier(.2,.8,.2,1),
		opacity 0.25s ease,
		transform 0.38s cubic-bezier(.2,.8,.2,1),
		visibility 0s linear 0.38s;
}

.wwh-header-search.is-open .wwh-header-search__input {
	opacity: 1;
	visibility: visible;
	/* The negative outset keeps the halo from being clipped once open. */
	clip-path: inset(-40px round 999px);
	transform: translate(0, -50%);
	transition:
		clip-path 0.38s cubic-bezier(.2,.8,.2,1),
		opacity 0.2s ease,
		transform 0.38s cubic-bezier(.2,.8,.2,1),
		visibility 0s;
}

.wwh-header-search__input::placeholder {
	color: rgba(255, 255, 255, 0.78);
}

.wwh-header-search__input:focus,
.wwh-header-search__input:focus-visible {
	outline: none;
	border-color: rgba(255, 255, 255, 0.85);
}

/* WebKit's native clear button is bright blue, off-palette on dark glass. Redrawn in white. */
.wwh-header-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	margin-left: 0.5rem;
	cursor: pointer;
	background: no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	opacity: 0.85;
}

/* Browsers without backdrop-filter: go near-opaque rather than lose contrast. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wwh-header-search__input {
		background: rgba(20, 17, 13, 0.92);
	}
}

/* The open toggle reads as pressed. */
.wwh-header-search.is-open .wwh-header-search__toggle {
	background-color: rgba(255, 255, 255, 0.16);
}

body.home2-nav-on-light .site-header .wwh-header-search.is-open .wwh-header-search__toggle {
	background-color: rgba(26, 22, 19, 0.1);
}

/* Desktop: the top-level menu steps aside while the field is out. */
.wwh-mega-nav__menu {
	transition: opacity 0.25s ease;
}

.site-header__nav-wrap:has(.wwh-header-search.is-open) .wwh-mega-nav__menu {
	opacity: 0;
	pointer-events: none;
}

/* Below the hamburger breakpoint the menu is an overlay, and the rule above
   must not hide it if someone opens the burger while search is out. */
@media (max-width: 1250px) {
	.site-header__nav-wrap:has(.wwh-header-search.is-open) .wwh-mega-nav__menu {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Phones: a full-width bar that drops down under the header. */
@media (max-width: 640px) {
	.wwh-header-search {
		position: static;
	}

	.wwh-header-search__input {
		top: 100%;
		right: 0.75rem;
		left: 0.75rem;
		width: auto;
		margin-top: -0.25rem;
		font-size: 16px; /* 16px stops iOS zooming the page on focus */
		clip-path: inset(0 0 100% 0 round 999px);
		transform: translateY(-8px);
	}

	.wwh-header-search.is-open .wwh-header-search__input {
		clip-path: inset(-40px round 999px);
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wwh-header-search__input,
	.wwh-header-search.is-open .wwh-header-search__input,
	.wwh-mega-nav__menu {
		transition: opacity 0.15s ease, visibility 0s linear 0.15s;
	}

	.wwh-header-search.is-open .wwh-header-search__input {
		transition: opacity 0.15s ease, visibility 0s;
	}
}