/* ==========================================================================
   GOLAZO — Nav search (liquid-glass expanding capsule)
   Lives INSIDE the glass navbar, to the left of the cart icon. The collapsed
   state is the round glass search icon-button; pressing it morphs the circle
   into a glass pill that grows LEFTWARD. Logo, menu and cart never disappear —
   the pill absorbs flexible nav space (menu gap compresses slightly).

   MODE-MATCHING (always matches the navbar):
   it inherits the nav's color context. Over the hero (dark glass nav) the
   capsule is white-tint glass with white text; when the nav flips light
   (.nav.scrolled — or .nav--light on light pages) the capsule flips with it.
   Same blur, same sheen, same border language as the nav pill.

   Motion: width 44 → 320px, 300ms cubic-bezier(.2,.7,.2,1); input content
   fades/slides in 80ms later (sequenced, premium). Collapse reverses with the
   content fading FIRST. Reduced-motion: instant toggle, opacity only.

   Verified contrast (alpha-composite, no blur — same method as buttons.css):
   typed text white on white-glass-over-dark ≥ 5.5:1 · ink on light glass ≥ 14:1.
   Placeholder is a supplementary hint (disappears on typing), tuned ≥ ~3.5:1.
   ========================================================================== */

.nsearch{
  position:relative; display:flex; align-items:center;
  width:44px; height:44px; border-radius:var(--radius-pill);
  border:1px solid transparent; overflow:hidden; flex:0 0 auto;
  transition:width .3s var(--ease-out), background .3s, border-color .3s, box-shadow .3s;
}
.nsearch.open{
  width:min(320px, 42vw);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 8px 20px -10px rgba(0,0,0,.35);
}
/* sheen, same language as buttons */
.nsearch.open::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%); opacity:.8}

/* --- mode: DARK nav (over hero/photo) — white-tint glass, white text --- */
.nav .nsearch.open{
  background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  border-color:rgba(255,255,255,.45);
}
.nav .nsearch.open .nsearch__input{color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35)}
.nav .nsearch.open .nsearch__input::placeholder{color:rgba(255,255,255,.78); text-shadow:none}

/* --- mode: LIGHT nav (.scrolled, or .nav--light pages) — light glass, ink text --- */
.nav.scrolled .nsearch.open, .nav--light .nsearch.open{
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(237,239,234,.75));
  border-color:rgba(13,98,57,.25);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8), 0 8px 20px -12px rgba(0,0,0,.18);
}
.nav.scrolled .nsearch.open .nsearch__input, .nav--light .nsearch.open .nsearch__input{color:var(--ink); text-shadow:none}
.nav.scrolled .nsearch.open .nsearch__input::placeholder, .nav--light .nsearch.open .nsearch__input::placeholder{color:var(--neutral-600)}

/* --- toggle (the search icon) ---
   Collapsed: it IS the round glass icon-button (reuse .btn--icon styles on it).
   Open: its own circle dissolves — it becomes the capsule's leading glyph. */
.nsearch__toggle{flex:0 0 44px; transition:background .25s, border-color .25s}
.nsearch.open .nsearch__toggle{background:transparent !important; border-color:transparent !important; box-shadow:none}

/* --- input: sequenced entrance (after the capsule grows) --- */
.nsearch__form{display:flex; align-items:center; flex:1; min-width:0}
.nsearch__input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:var(--font-ka); font-size:14.5px; font-weight:500; line-height:1; padding:0 2px;
  opacity:0; transform:translateX(-8px);
  transition:opacity .2s ease .08s, transform .25s var(--ease-out) .08s;
}
.nsearch.open .nsearch__input{opacity:1; transform:none}
.nsearch__input::-webkit-search-cancel-button{display:none}

/* --- clear (✕) — appears only while there is text --- */
.nsearch__clear{
  flex:0 0 30px; height:30px; margin-right:7px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:transparent; color:inherit; opacity:0; pointer-events:none; transition:opacity .2s, background .2s;
}
.nsearch.has-text .nsearch__clear{opacity:.85; pointer-events:auto}
.nsearch__clear:hover{background:rgba(127,127,127,.18)}
.nsearch__clear svg{width:14px; height:14px}

/* collapse: content fades first (overrides delays) */
.nsearch:not(.open) .nsearch__input{transition:opacity .12s ease, transform .15s ease}

/* focus ring — same white-gap + green ring as the button system */
.nsearch.open:focus-within{box-shadow:0 0 0 2px var(--pitch-white), 0 0 0 5px var(--golazo-green)}

/* while searching, give the pill room: gently compress the menu */
.nav.searching .nav__menu{gap:var(--s4)}
.nav.searching .nav__menu a{font-size:13.5px}

/* mobile: menu is hidden anyway — let the capsule take the middle */
@media (max-width:980px){ .nsearch.open{width:min(58vw, 300px)} }

@media (prefers-reduced-motion:reduce){
  .nsearch,.nsearch__input{transition:opacity .15s ease !important; transform:none !important}
}