/* ==========================================================================
   Hero property search

   Compass's own search is the reference: a small tab row, then one wide field
   with a dark square button on its right end, sitting under the hero line.
   The structure is theirs; the colour, type and radius are Yaritza's, so it
   reads as part of this site rather than as a Compass widget dropped into it.

   Everything here is scoped under .yp-hero-search. The form sits inside
   .yp-hero-inner, which is centred, so the block centres with it.
   ========================================================================== */

.yp-hero-search {
  --yp-hs-h: 58px;
  width: 100%;
  max-width: 620px;
  margin: clamp(22px, 3.2vw, 40px) auto 0;
  text-align: left;
}

/* The field's real label. There is no site-wide visually-hidden utility
   (contact.css defines its own scoped .yp-contact-vh), so this one is scoped
   here the same way. The placeholder is not a label: it disappears on the
   first keystroke and screen readers should not depend on it. */
.yp-hero-search .yp-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* ---- tabs ---------------------------------------------------------------- */

.yp-hero-search-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 -1px;      /* the active tab sits on the field, not above it */
  padding: 0;
  list-style: none;
}

.yp-hero-search-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 11px 26px;
  font-family: var(--yp-serif);
  font-size: clamp(13px, 0.9vw + 6px, 15px);
  letter-spacing: 0.04em;
  color: var(--yp-white);
  /* Over a photograph, so it needs its own ground to stay legible. */
  background: rgb(var(--yp-ink-rgb) / 0.42);
  backdrop-filter: blur(6px);
  border-radius: 6px 6px 0 0;
  transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-hero-search-tab:hover { background: rgb(var(--yp-ink-rgb) / 0.6); }

.yp-hero-search-tab.is-on {
  background: var(--yp-shell);
  color: var(--yp-ink);
}

.yp-hero-search-tab:focus-visible {
  outline: 2px solid var(--yp-white);
  outline-offset: 2px;
  z-index: 1;
}

/* ---- field --------------------------------------------------------------- */

.yp-hero-search-field {
  display: flex;
  align-items: stretch;
  background: var(--yp-shell);
  border-radius: 0 6px 6px 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgb(var(--yp-ink-rgb) / 0.45);
}

.yp-hero-search-input {
  flex: 1 1 auto;
  min-width: 0;          /* flex items refuse to shrink below min-content */
  height: var(--yp-hs-h);
  padding: 0 18px;
  border: 0;
  background: transparent;
  color: var(--yp-ink);
  font-family: var(--yp-serif);
  font-size: clamp(14px, 0.7vw + 9px, 16px);
  letter-spacing: 0.01em;
}

/* The default placeholder grey fails contrast on this near-white ground. */
.yp-hero-search-input::placeholder {
  color: rgb(var(--yp-ink-rgb) / 0.62);
  opacity: 1;
}

.yp-hero-search-input:focus { outline: 0; }

.yp-hero-search-field:focus-within {
  box-shadow: 0 18px 40px -18px rgb(var(--yp-ink-rgb) / 0.45),
              0 0 0 2px rgb(var(--yp-white-rgb) / 0.85);
}

.yp-hero-search-go {
  flex: 0 0 auto;
  width: var(--yp-hs-h);
  height: var(--yp-hs-h);
  display: grid;
  place-items: center;
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--yp-ink);
  color: var(--yp-white);
  transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-hero-search-go:hover { background: rgb(var(--yp-ink-rgb) / 0.82); }
.yp-hero-search-go:focus-visible { outline: 2px solid var(--yp-white); outline-offset: -4px; }
.yp-hero-search-go svg { width: 19px; height: 19px; display: block; }

/* Empty submit. A nudge rather than an error: nothing has gone wrong, the
   field just has nothing in it yet. */
@keyframes yp-hs-nudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

.yp-hero-search.is-empty .yp-hero-search-field {
  animation: yp-hs-nudge 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ---- selling ------------------------------------------------------------- */

/* Compass's sell flow asks for the address itself, so the field has nothing
   to carry. It stays visible for layout stability and goes quiet. */
.yp-hero-search.is-selling .yp-hero-search-input {
  pointer-events: none;
  opacity: 0.62;
}

.yp-hero-search-note {
  margin: 10px 0 0;
  color: rgb(var(--yp-white-rgb) / 0.86);
  font-size: clamp(11.5px, 0.5vw + 8px, 13px);
  letter-spacing: 0.03em;
  text-shadow: 0 1px 10px rgb(var(--yp-ink-rgb) / 0.5);
}

/* ---- narrow -------------------------------------------------------------- */

@media (max-width: 560px) {
  .yp-hero-search { --yp-hs-h: 52px; max-width: none; }
  .yp-hero-search-tab { padding: 10px 0; flex: 1 1 0; text-align: center; }
  .yp-hero-search-input { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .yp-hero-search-tab,
  .yp-hero-search-go { transition: none; }
  .yp-hero-search.is-empty .yp-hero-search-field { animation: none; }
}

/* A ZIP outside the bundled market needs a lookup before the destination is
   known. Brief, but not instant, so the button should not look idle. */
.yp-hero-search.is-busy .yp-hero-search-go { opacity: 0.6; pointer-events: none; }