/* ============================================================================
   MBANC mobile polish — additive overrides, loaded LAST on every page.
   2026-06-12 (Ishara). Reversible: remove the <link> to this file.
   Fixes: small logo, missing hamburger, hero watermark overlap, oversized
   floating widgets, 2-column calculator on phones. Uniform across all pages.
   ============================================================================ */

/* ---- nav hides at 1100px (existing). Match it: bigger logo + hamburger. ---- */
@media (max-width: 1100px){
  /* The default header logo PNG is heavily padded (glyph fills ~31% of its
     height) so it reads tiny on mobile. Swap to the trimmed wordmark (same
     asset the city pages use) at a real, legible height. */
  .site-header .logo{ height:auto !important; }
  .site-header .logo img{
    content:url('https://mbanc.com/redesign-assets/mbanc-logo-trim.png') !important;
    height:32px !important; width:auto !important;
  }

  .site-header .primary-nav{ display:none !important; }
  .site-header .nav-cta .phone{ display:none !important; }
  .site-header .nav-cta{ gap:10px !important; }
  .site-header .nav-cta .btn{ padding:10px 16px !important; font-size:14px !important; }

  /* burger lives in .nav (NOT .nav-cta — the page sets .nav-cta{display:none}
     ≤1100, which would hide the burger). Absolute so it ignores the grid. */
  .site-header .nav{ position:relative !important; }
  .mb-burger{ display:inline-flex !important; position:absolute !important;
    right:5% !important; top:50% !important; transform:translateY(-50%) !important; }

  /* decorative hero stamps are absolutely-positioned and collide with the H1 */
  .hero .hero-ticker-mark, .hero .hero-doc-mark{ display:none !important; }

  /* calculator: force single column (beats a duplicate-block ordering bug
     where a later unconditional .calc-body{1fr 1fr} overrides the media rule) */
  .calc-body{ grid-template-columns:1fr !important; min-height:0 !important; }
  .calc-inputs{ border-right:0 !important; border-bottom:1px solid var(--rule,#E9EEEE) !important; }
}

/* ---- phones: shrink the two floating widgets to clean corner icons ---- */
@media (max-width: 720px){
  .fab-banker{
    left:14px !important; right:auto !important; bottom:14px !important;
    width:56px !important; height:56px !important; max-width:56px !important;
    min-width:0 !important; padding:0 !important; gap:0 !important;
    border-radius:50% !important; overflow:hidden !important;
    align-items:center !important; justify-content:center !important;
  }
  .fab-banker .fab-banker-body{ display:none !important; }
  /* clean single circle to match the Liora widget (drop the nested white
     avatar disc + offset pulse dot; center the M icon directly on navy) */
  .fab-banker .fab-banker-avatar{ margin:0 !important; width:auto !important; height:auto !important; background:transparent !important; }
  .fab-banker .fab-banker-avatar img{ width:32px !important; height:32px !important; }
  .fab-banker .fab-banker-avatar::after{ display:none !important; }

  .fab-chat{
    right:14px !important; left:auto !important; bottom:14px !important;
    width:56px !important; height:56px !important; min-width:0 !important;
    padding:0 !important; gap:0 !important; border-radius:50% !important;
    align-items:center !important; justify-content:center !important;
  }
  /* hide the "Chat with Liora" text label, keep the L badge + live dot */
  .fab-chat > span:not(.badge):not(.live-dot){ display:none !important; }
  .fab-chat .badge{ margin:0 !important; }

  /* corner placement — element+class selectors beat the page's own
     a.fab-banker{right:16px!important}; banker LEFT, Liora RIGHT */
  a.fab-banker{ left:14px !important; right:auto !important; bottom:14px !important; max-width:56px !important; }
  button.fab-chat{ right:14px !important; left:auto !important; bottom:14px !important; }

  /* calc tab strip: 2-up so labels don't crush */
  .calc-tabs{ grid-template-columns:1fr 1fr !important; }
}

/* ============================ Hamburger UI ============================= */
.mb-burger{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; background:none; border:0; cursor:pointer;
  flex-shrink:0; color:var(--orange,#FF3300); gap:0;
}
.mb-burger span{ display:block; width:22px; height:2px; background:currentColor;
  margin:2.5px 0; border-radius:2px; transition:transform .25s,opacity .25s; }
.mb-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mb-burger.open span:nth-child(2){ opacity:0; }
.mb-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mb-scrim{ position:fixed; inset:0; background:rgba(9,22,56,.5); z-index:2147482999;
  opacity:0; visibility:hidden; transition:opacity .28s,visibility .28s; }
.mb-scrim.open{ opacity:1; visibility:visible; }

.mb-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px);
  background:#fff; z-index:2147483000; transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-12px 0 40px rgba(9,22,56,.18);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:20px 20px 44px; }
.mb-drawer.open{ transform:translateX(0); }
.mb-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.mb-drawer-head img{ height:34px; width:auto; display:block; }
.mb-drawer-close{ background:none; border:0; font-size:30px; line-height:1; cursor:pointer;
  color:var(--navy,#091638); padding:4px 8px; }
.mb-group{ font-family:var(--mono,ui-monospace,monospace); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--orange,#FF3300);
  margin:16px 0 4px; padding-top:14px; border-top:1px solid #E9EEEE; }
.mb-drawer a.mb-link{ display:block; padding:11px 8px; border-radius:8px; text-decoration:none;
  color:var(--navy,#091638); font-family:var(--sans,system-ui,sans-serif); font-weight:600; font-size:15px; line-height:1.25; }
.mb-drawer a.mb-link:active, .mb-drawer a.mb-link:hover{ background:#F5F7FA; }
.mb-drawer a.mb-link em{ display:block; font-style:normal; font-weight:400; font-size:12px; color:#5a6478; margin-top:2px; }
.mb-cta{ display:block; margin-top:20px; padding:15px; border-radius:8px; text-align:center;
  background:var(--orange,#FF3300); color:#fff !important; font-weight:800; text-decoration:none; }
.mb-cta-phone{ display:block; margin-top:10px; padding:13px; border-radius:8px; text-align:center;
  border:1.5px solid #cfd6e4; color:var(--navy,#091638) !important; font-weight:700; text-decoration:none; }
body.mb-noscroll{ overflow:hidden; }