/* ExpoBaristi homepage nav -> floating capsule.
   ============================================================
   GROUND-UP REBUILD for butter-smooth motion.

   Why this approach: the real Webflow navbar is deeply nested
   (nav-menu-wrapper > nav-menu > menu-item > nav-button-wrap > a).
   Collapsing it means hiding the links/phone, which forces the
   button's flow position to recompute -> animating that reflow
   ALWAYS hiccups (the stranded-button-mid-left problem).

   Fix: do NOT morph the nested navbar. Keep the full navbar and
   a SEPARATE, purpose-built capsule, and cross-fade between them.
   Both layers animate ONLY opacity + transform (compositor-only,
   never layout), so the motion is smooth in BOTH directions by
   construction. Desktop only; mobile keeps the normal Webflow nav.
   ============================================================ */

/* the capsule never exists on mobile */
.eb-capsule{display:none;}

@media (min-width:992px){
  /* Pin the full navbar so it can cross-fade in place. It was
     position:absolute (and scrolled away); it is out of flow either
     way, so pinning it causes no content jump. */
  .header{
    position:fixed;top:0;left:0;right:0;width:100%;z-index:1000;
    transition:opacity .3s ease, transform .42s cubic-bezier(.4,0,.2,1);
    will-change:opacity,transform;
  }
  .header.eb-hide{opacity:0;transform:translateY(-12px);pointer-events:none;}

  /* The floating capsule (markup is built + toggled by navmorph.js). */
  .eb-capsule{
    display:flex;align-items:center;justify-content:space-between;
    position:fixed;top:14px;left:50%;z-index:1001;
    box-sizing:border-box;
    width:min(720px,calc(100% - 36px));height:56px;
    padding:0 10px 0 24px;border-radius:999px;
    background:rgba(255,255,255,.74);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
            backdrop-filter:saturate(180%) blur(14px);
    box-shadow:0 14px 38px -10px rgba(25,25,25,.30),0 2px 8px rgba(25,25,25,.10);
    opacity:0;
    transform:translateX(-50%) translateY(-8px) scale(.96);
    pointer-events:none;
    transition:opacity .4s ease, transform .5s cubic-bezier(.34,1.24,.4,1);
    will-change:opacity,transform;
  }
  .eb-capsule.eb-show{
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
    pointer-events:auto;
  }
  .eb-capsule a{text-decoration:none;}
  .eb-cap-logo{flex:0 0 auto;display:inline-flex;align-items:center;}
  .eb-cap-logo .eb-mark{font-size:1.18rem;line-height:1;}
  /* phone is absolutely centred on the capsule, independent of logo/CTA widths */
  .eb-cap-phone{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;
    color:#1f1f1f;font-family:'BDO Grotesk',Intertight,Arial,sans-serif;
    font-size:.95rem;font-weight:500;
  }
  .eb-cap-phone svg{flex:0 0 auto;}
  .eb-cap-cta{
    flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    height:44px;padding:0 22px;border-radius:999px;
    background:#D1142C;color:#fff;
    font-family:'BDO Grotesk',Intertight,Arial,sans-serif;font-weight:600;
    font-size:.95rem;white-space:nowrap;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .eb-cap-cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px -6px rgba(209,20,44,.5);}
}

@media (min-width:992px) and (prefers-reduced-motion:reduce){
  .header,.eb-capsule{transition-duration:.01ms !important;}
}