/**
 * Villa name search (.ablv-vns) — header type-ahead, ported 2026-09-07 from
 * the stbarts-repo / cayman-repo lvc_ theme-core implementation
 * (inc/conversion/villa-name-search.php is shared verbatim; this stylesheet
 * is the per-brand skin, matching the pattern the St Barts -> Cayman port
 * already established: same structural CSS, different token family).
 *
 * Class prefix is `.ablv-` here, NOT `.lvc-`, because header.php — where
 * every instance of this form lives — declares its OWN `:root` block of
 * `--ablv-*` custom properties (header.php ~line 105) and every existing
 * header rule consumes THOSE, not brand.css's `--lvc-*` family. This repo
 * runs two live template families side by side; a `.lvc-vns` class here
 * would style correctly in isolation but read as the wrong family to the
 * next person editing header.php next to it.
 *
 * No importance-flagged overrides, no inline style blocks.
 *
 * One capsule, not two boxes: the wrapper owns the border and focus ring
 * (:focus-within), the controls sit transparent inside it.
 * CONTROL SELECTORS ARE PARENT-SCOPED (the ChaletLux/RRC D-002 class):
 * hello-elementor's reset.css styles `[type=submit]` pink at (0,1,0) — a
 * dead tie with a single class. `.ablv-vns .ablv-vns__go` is (0,2,0), hovers
 * (0,3,0). Do not flatten.
 */
.ablv-vns {
	display: flex;
	align-items: center;
	position: relative;
	border: 1px solid var(--ablv-border, rgba(245, 247, 244, 0.06));
	border-radius: 4px;
	background: var(--ablv-bg2, #0b1817);
	font-family: var(--ablv-fb, inherit);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ablv-vns:focus-within {
	border-color: var(--ablv-accent, #7cc8c0);
	box-shadow: 0 0 0 1px var(--ablv-border-h, rgba(124, 200, 192, 0.25));
}

.ablv-vns__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ablv-vns .ablv-vns__input {
	background: transparent;
	color: var(--ablv-text, #f5f7f4);
	border: none;
	border-radius: 4px 0 0 4px;
	font-family: inherit;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	padding: 9px 12px;
	transition: width 0.25s ease;
	min-width: 0;
}

.ablv-vns .ablv-vns__input::placeholder {
	color: var(--ablv-soft, #a9bab4);
	opacity: 0.8;
}

.ablv-vns .ablv-vns__input:focus {
	outline: none;
}

.ablv-vns .ablv-vns__go {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--ablv-accent, #7cc8c0);
	border: none;
	border-left: 1px solid var(--ablv-border, rgba(245, 247, 244, 0.06));
	border-radius: 0 4px 4px 0;
	padding: 9px 12px;
	cursor: pointer;
	align-self: stretch;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.ablv-vns .ablv-vns__go:hover,
.ablv-vns .ablv-vns__go:focus-visible {
	color: #06100f;
	background: var(--ablv-accent-h, #92dad2);
	border-left-color: var(--ablv-accent-h, #92dad2);
	outline: none;
}

/* Desktop header variant: compact, widens on focus.
 *
 * ⚠️ NOT hidden at this repo's own 1024px nav-collapse point, and that is
 * deliberate, not copied from another repo. Measured directly against the
 * live header (screenshots + injected markup, 2026-09-07): the six-link nav
 * plus its "Browse" mega-menu toggle leaves the wordmark and "VILLAS"
 * overlapping this widget anywhere from 1024px up to roughly 1320px, and it
 * stays touching through ~1340px even at rest — this header has six nav
 * links plus a mega-menu toggle, busier than St Barts/Cayman's two-to-three
 * item nav, and simply has no free width in that band. 1400px is clean with
 * real margin at BOTH the resting (118px) and focus-expanded (185px) input
 * widths, and matches rmoceanfrontrentals.com's own header-search breakpoint
 * — there, the mega-menu collapses at the SAME 1400px value
 * (assets/css/nav.css:285), so the search hide-point and the nav-collapse
 * point coincide with no gap. Here they do NOT coincide: 1024–1400px is a
 * known, deliberate gap where the header shows no search, matching what
 * every viewport width shows TODAY (nothing regresses) rather than forcing
 * an overlapping widget into a header that has no room for it. The mobile
 * drawer variant below covers every width the site's own hamburger reaches
 * (≤1024px); closing the 1024–1400px gap would need shrinking the search
 * itself or the nav, which is a design call for Luis, not a silent one to
 * make here. */
.ablv-vns--header .ablv-vns__input {
	width: 118px;
}

.ablv-vns--header .ablv-vns__input:focus {
	width: 185px;
}

@media (max-width: 1400px) {
	.ablv-vns--header {
		display: none;
	}
}

/* Mobile variant: full width near the top of the mobile nav. Taller
   targets. The drawer container owns its own open/closed state. */
.ablv-vns--mobile {
	margin: 0 0 1rem;
}

.ablv-vns--mobile .ablv-vns__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	font-size: 0.95rem;
	padding: 13px 14px;
}

.ablv-vns--mobile .ablv-vns__go {
	padding: 13px 16px;
}

@media (min-width: 1025px) {
	.ablv-vns--mobile {
		display: none;
	}
}