/* ============================================================
   MB-NAV — shared hamburger navigation system, MidBank Tipping
   Full variant: marketing / owner / employee surfaces.
   (Minimal variant lives in mb-nav-minimal.css — guest surfaces.)
   ============================================================ */

:root{
  --mbnav-base:#0B0B14;
  --mbnav-primary:#6366f1;
  --mbnav-primary-press:#4f46e5;
  --mbnav-accent:#818cf8;
  --mbnav-ink:#ffffff;
  --mbnav-ink-2:rgba(255,255,255,.72);
  --mbnav-ink-3:rgba(255,255,255,.55);
  --mbnav-ink-4:rgba(255,255,255,.38);
  --mbnav-hairline:rgba(255,255,255,.08);
  --mbnav-hairline-strong:rgba(255,255,255,.14);
  --mbnav-font-ui:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mbnav-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --mbnav-ease-out:cubic-bezier(.22,1,.36,1);
  --mbnav-ease-in:cubic-bezier(.4,0,1,1);
  --mbnav-dur-fast:180ms;
  --mbnav-dur-base:350ms;
  --mbnav-dur-slow:450ms;
}

/* Self-contained box model: pages differ on whether they ship a
   `*{box-sizing:border-box}` reset (tipping-product ships none), which
   otherwise makes the same component render at different sizes. */
.mb-nav-header, .mb-nav-header *,
.mb-nav-scrim,
.mb-nav-panel, .mb-nav-panel *{
  box-sizing:border-box;
}

/* ---------- HEADER BAR ---------- */
/* z-index sits ABOVE the scrim (950) and panel (960) so the centred logo
   stays visible and the close (X) stays clickable while the menu is open. */
.mb-nav-header{
  position:fixed; top:0; left:0; right:0; z-index:970;
  height:calc(56px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:rgba(11,11,20,.72);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid var(--mbnav-hairline);
  transition:background var(--mbnav-dur-base) var(--mbnav-ease-out);
}
/* While open, the bar goes solid so it reads as one sheet with the panel. */
body.mb-nav-locked .mb-nav-header{
  background:var(--mbnav-base);
  border-bottom-color:var(--mbnav-hairline-strong);
}
.mb-nav-bar{
  max-width:1120px; margin:0 auto; height:56px; padding:0 16px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.mb-nav-toggle{
  justify-self:start;
  width:44px; height:44px; min-height:44px; flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; background:none; border:0; padding:0; cursor:pointer; border-radius:8px;
}
.mb-nav-toggle span{
  display:block; width:20px; height:2px; border-radius:1px; background:rgba(255,255,255,.86);
  transition:transform var(--mbnav-dur-fast) var(--mbnav-ease-out), opacity var(--mbnav-dur-fast) var(--mbnav-ease-out);
}
.mb-nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.mb-nav-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }
.mb-nav-toggle:focus-visible{ outline:2px solid var(--mbnav-accent); outline-offset:2px; }

.mb-nav-logo{
  justify-self:center;
  display:flex; align-items:center; min-height:44px; padding:12px 6px;
}
.mb-nav-logo img{
  width:156px; height:26px; display:block; opacity:1; image-rendering:auto;
}
@media (max-width:340px){
  .mb-nav-logo img{ width:132px; height:22px; }
}
.mb-nav-logo:focus-visible{ outline:2px solid var(--mbnav-accent); outline-offset:3px; border-radius:6px; }

.mb-nav-cta-rail{ justify-self:end; }
.mb-nav-cta{
  display:none;
  height:36px; min-height:36px; flex:0 0 auto;
  padding:0 18px; border-radius:999px; align-items:center;
  background:linear-gradient(135deg,var(--mbnav-primary),var(--mbnav-primary-press));
  font:600 13px/1 var(--mbnav-font-ui); color:#fff; text-decoration:none;
}
@media (min-width:600px){
  .mb-nav-cta{ display:inline-flex; }
}
.mb-nav-cta:focus-visible{ outline:2px solid var(--mbnav-accent); outline-offset:2px; }

/* ---------- SCRIM ---------- */
.mb-nav-scrim{
  position:fixed; inset:0; z-index:950;
  background:rgba(3,3,8,.72);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  backdrop-filter:blur(20px) saturate(120%);
  opacity:0; transition:opacity var(--mbnav-dur-base) var(--mbnav-ease-out);
}
.mb-nav-scrim[hidden]{ display:none; }
.mb-nav-scrim.mb-nav-open{ opacity:1; }

/* ---------- PANEL ---------- */
.mb-nav-panel{
  position:fixed; z-index:960;
  background-color:var(--mbnav-base);
  background-image:radial-gradient(120% 90% at 50% -12%, rgba(99,102,241,.16), transparent 62%);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.mb-nav-panel[hidden]{ display:none; }

.mb-nav-panel-inner{
  height:100%; display:flex; flex-direction:column;
  padding:20px 24px calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.mb-nav-group{ margin-bottom:28px; }
.mb-nav-group:first-child{ margin-top:0; }
.mb-nav-group + .mb-nav-group{ border-top:1px solid var(--mbnav-hairline); padding-top:16px; }
.mb-nav-group-label{
  font:500 11px/1 var(--mbnav-font-ui); text-transform:uppercase; letter-spacing:.14em;
  color:var(--mbnav-ink-4); margin-bottom:8px; height:18px;
}
/* height + min-height + flex are pinned so host-page blanket rules
   (e.g. mobile-first-apple.css `a,button{min-height:48px}`) cannot
   inflate items and push the panel into an inner scrollbar. */
.mb-nav-item{
  position:relative;
  height:44px; min-height:44px; max-height:44px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:flex-start; text-align:left;
  margin:0 -24px; padding:0 24px;
  font:400 17px/1 var(--mbnav-font-ui); color:var(--mbnav-ink-2); text-decoration:none;
  border-radius:8px;
}
.mb-nav-item:hover{ color:var(--mbnav-ink); }
.mb-nav-item[aria-current="page"]{ color:var(--mbnav-ink); }
.mb-nav-item[aria-current="page"]::before{
  content:''; position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:3px; height:16px; border-radius:2px; background:var(--mbnav-primary);
}
.mb-nav-item:focus-visible{ outline:2px solid var(--mbnav-accent); outline-offset:-2px; }

.mb-nav-panel-cta{
  margin-top:24px; height:52px; min-height:52px; flex:0 0 auto;
  border-radius:999px; padding:0 32px;
  display:flex; align-items:center; justify-content:center; white-space:nowrap;
  background:linear-gradient(135deg,var(--mbnav-primary),var(--mbnav-primary-press));
  font:600 15px/1 var(--mbnav-font-ui); color:#fff; text-decoration:none;
  box-shadow:0 0 40px -12px rgba(99,102,241,.55);
}
.mb-nav-panel-cta:focus-visible{ outline:2px solid var(--mbnav-accent); outline-offset:2px; }

/* Item stagger reveal */
.mb-nav-panel.mb-nav-open .mb-nav-item,
.mb-nav-panel.mb-nav-open .mb-nav-group-label{
  animation:mbNavItemIn var(--mbnav-dur-base) var(--mbnav-ease-out) both;
}
.mb-nav-panel.mb-nav-open .mb-nav-panel-cta{ animation:mbNavItemIn var(--mbnav-dur-base) var(--mbnav-ease-out) both; animation-delay:220ms; }
@keyframes mbNavItemIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
.mb-nav-group:nth-child(1) .mb-nav-item, .mb-nav-group:nth-child(1) .mb-nav-group-label{ animation-delay:20ms; }
.mb-nav-group:nth-child(2) .mb-nav-item, .mb-nav-group:nth-child(2) .mb-nav-group-label{ animation-delay:80ms; }
.mb-nav-group:nth-child(3) .mb-nav-item, .mb-nav-group:nth-child(3) .mb-nav-group-label{ animation-delay:140ms; }

@media (prefers-reduced-motion:reduce){
  .mb-nav-toggle span, .mb-nav-scrim, .mb-nav-panel.mb-nav-open .mb-nav-item,
  .mb-nav-panel.mb-nav-open .mb-nav-group-label, .mb-nav-panel.mb-nav-open .mb-nav-panel-cta{
    animation:none !important; transition:none !important;
  }
}

/* ---------- PHONE (<768px): full-bleed sheet ---------- */
@media (max-width:767px){
  .mb-nav-panel{
    top:calc(56px + env(safe-area-inset-top)); left:0; right:0; bottom:0;
  }
}

/* The trailing group's bottom margin is dead space above the CTA on phone —
   the CTA carries its own margin-top. Reclaiming it buys 28px of fit. */
@media (max-width:767px){
  .mb-nav-group:last-of-type{ margin-bottom:0; }
}

/* Short-viewport compression, phone only.
   Tier 1 at <=800px tall: 390x844 (the stated target) stays fully spaced;
   anything shorter tightens rather than scrolling. */
@media (max-width:767px) and (max-height:800px){
  .mb-nav-panel-inner{ padding-top:12px; }
  .mb-nav-group{ margin-bottom:16px; }
  .mb-nav-group + .mb-nav-group{ padding-top:12px; }
  .mb-nav-group-label{ height:14px; margin-bottom:6px; }
  .mb-nav-panel-cta{ margin-top:14px; }
  /* Item heights are pinned at 44px for tap-target compliance, so on a short
     phone (e.g. 360x640) the stack can still exceed the sheet. Pin the CTA so
     the primary action can never scroll out of reach; the list scrolls under it. */
  .mb-nav-panel-cta{
    position:sticky; bottom:0;
    box-shadow:0 0 40px -12px rgba(99,102,241,.55), 0 -14px 22px -6px var(--mbnav-base);
  }
}
/* Tier 2 at <=700px tall (iPhone SE 375x667 and shorter): the group labels
   go, the hairline dividers keep the grouping legible. */
@media (max-width:767px) and (max-height:700px){
  .mb-nav-group-label{ display:none; }
  .mb-nav-panel-inner{ padding-top:10px; padding-bottom:calc(20px + env(safe-area-inset-bottom)); }
  .mb-nav-group{ margin-bottom:10px; }
  .mb-nav-group + .mb-nav-group{ border-top:1px solid var(--mbnav-hairline); padding-top:10px; }
  .mb-nav-panel-cta{ margin-top:10px; }
}

/* ---------- TABLET (768–1023px): centred sheet, 3-col ---------- */
/* 3 groups into 2 columns left an empty bottom-right quadrant — a visible
   dead void in an otherwise tight card. Three columns matches the desktop
   layout exactly, so the menu reads as one shape from 768px up. At the
   narrowest tablet width the columns are still ~197px, wider than the
   longest label ("Set up my tip page", ~152px at 17px Inter). */
@media (min-width:768px) and (max-width:1023px){
  .mb-nav-panel{
    top:calc(68px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
    width:100%; max-width:720px; border-radius:16px;
    box-shadow:0 24px 80px -24px rgba(0,0,0,.8);
  }
  .mb-nav-panel-inner{
    display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:32px; row-gap:0;
    padding:28px 32px 32px; max-height:calc(100vh - 100px); overflow-y:auto;
  }
  .mb-nav-group{ margin-bottom:0; }
  .mb-nav-group + .mb-nav-group{ border-top:0; padding-top:0; }
  .mb-nav-panel-cta{ grid-column:1 / -1; width:100%; max-width:320px; margin-left:auto; margin-right:auto; }
}

/* ---------- DESKTOP (>=1024px): centred sheet, 3-col ---------- */
@media (min-width:1024px){
  .mb-nav-panel{
    top:calc(68px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
    width:100%; max-width:860px; border-radius:16px;
    box-shadow:0 24px 80px -24px rgba(0,0,0,.8);
  }
  .mb-nav-panel-inner{
    display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:56px; row-gap:0;
    padding:32px 40px 36px; max-height:calc(100vh - 120px); overflow-y:auto;
  }
  .mb-nav-group{ margin-bottom:0; }
  .mb-nav-group + .mb-nav-group{ border-top:0; padding-top:0; }
  .mb-nav-panel-cta{ grid-column:1 / -1; width:100%; max-width:320px; margin-left:auto; margin-right:auto; }
}

/* Body scroll lock helper */
body.mb-nav-locked{ position:fixed; left:0; right:0; width:100%; }

/* Float-above-everything page widgets (Mira chat FAB, z-index 99998) must
   not sit on top of the open menu panel. */
body.mb-nav-locked [id^="mira-"],
body.mb-nav-locked #mira-fab{
  visibility:hidden !important;
  pointer-events:none !important;
}

@media print{
  .mb-nav-header, .mb-nav-scrim, .mb-nav-panel{ display:none !important; }
}