/**
 * Villa name search (.lvc-vns) — header type-ahead, ported 2026-08-21 from
 * the Punta Mita pilot (capsule styling from pmvr 1912ce3), restated on the
 * lvc_ token contract (brand.css owns the values; fallbacks mirror them).
 * 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. `.lvc-vns .lvc-vns__go` is (0,2,0), hovers
 * (0,3,0). Do not flatten.
 *
 * Hover fill takes WHITE ink — the copper accent #A94A35 is fill-only
 * and dark ink measures 1.9:1 on it (D-030; the old D-018 dark-ink rule
 * was a per-pitahaya measurement). Focus indicators draw from the TINT
 * family (--lvc-accent-text*): the fill accent is 1.8:1 as a border and
 * disappears as a ring on near-black.
 */
.lvc-vns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  position: relative;
  border: 1px solid var(--lvc-border, #232326);
  border-radius: 4px;
  background: var(--lvc-bg-alt, #0a0a0a);
  font-family: var(--lvc-font-ui, inherit);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lvc-vns:focus-within {
  border-color: var(--lvc-accent-text, #D79A86);
  /* --lvc-accent-text-rgb is SPACE-separated channels (brand.css) — slash
     syntax, not the comma rgba() form, or the ring silently fails to parse. */
  box-shadow: 0 0 0 1px rgb(var(--lvc-accent-text-rgb, 215 154 134) / 0.25);
}

.lvc-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;
}

.lvc-vns .lvc-vns__input {
  background: transparent;
  color: var(--lvc-text, #f4f3f1);
  border: none;
  border-radius: 4px 0 0 4px;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 9px 12px;
  width: 100%;
  min-width: 0;
}

.lvc-vns .lvc-vns__input::placeholder {
  color: var(--lvc-muted, #8f8d8f);
  opacity: 0.8;
}

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

.lvc-vns .lvc-vns__go {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--lvc-accent-text, #D79A86);
  border: none;
  border-left: 1px solid var(--lvc-border, #232326);
  border-radius: 0 4px 4px 0;
  padding: 9px 12px;
  cursor: pointer;
  align-self: stretch;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.lvc-vns .lvc-vns__go:hover,
.lvc-vns .lvc-vns__go:focus-visible {
  color: #fff;
  background: var(--lvc-accent, #A94A35);
  border-left-color: var(--lvc-accent, #A94A35);
  outline: none;
}

/* Desktop header variant: compact, widens on focus. Hidden ≤980px, where
   brand.css hides .lvc-header__actions and the drawer takes over.
   The widening animates the CAPSULE's grid columns, never the input's
   width — width transitions are the layout-thrash class (D-034). Same
   .25s feel, same 120→185px end states. */
.lvc-vns--header {
  grid-template-columns: 120px auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, grid-template-columns 0.25s ease;
}

.lvc-vns--header:focus-within {
  grid-template-columns: 185px auto;
}

@media (prefers-reduced-motion: reduce) {
  .lvc-vns--header { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
}

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

/* Mobile variant: full width at the top of the drawer. Taller targets.
   The drawer itself is [hidden] until toggled, so the capsule needs no
   open/closed state of its own — but it must not render on desktop. */
.lvc-vns--mobile {
  margin: 0.75rem 1rem 0.25rem;
}

.lvc-vns--mobile .lvc-vns__input {
  width: 100%;
  min-width: 0;
  font-size: 0.95rem;
  padding: 13px 14px;
}

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

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