/* ===========================================================
   JD_Boston (Helix3) — CLEAN FIX
   Phone hamburger visible + Off-canvas above header
   =========================================================== */

/* Header: sane stacking (below menu, above content) */
#sp-header, .site-header, header[role="banner"]{
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* Remove earlier vertical offset tricks */
body, .body-innerwrapper{ padding-top: 0 !important; }

/* --- PHONE ONLY (keep iPad/desktop unchanged) --- */
@media (max-width: 767.98px){

  /* Hide the desktop mega menu list on phones (prevents the big vertical stack) */
  .sp-megamenu-parent{
    display: none !important;
    visibility: hidden !important;
  }

  /* Force the hamburger toggle (.off-canvas-menu-init) to show and be tappable */
  .off-canvas-menu-init{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px; min-height: 44px;
    position: absolute !important;     /* pin it in the header corner */
    top: 12px !important; right: 12px !important;
    z-index: 2100 !important;           /* above header content */
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #111 !important;             /* change to #fff if header is dark */
  }

  /* Fallback icon if the font icon is hidden/missing */
  .off-canvas-menu-init i,
  .off-canvas-menu-init .fa,
  .off-canvas-menu-init .icon-bar{ display:none !important; }
  .off-canvas-menu-init::before{
    content: "";
    display: inline-block;
    width: 22px; height: 2px;
    background: currentColor;
    box-shadow: 0 6px 0 0 currentColor, 0 12px 0 0 currentColor; /* three bars */
  }
}

/* Off-canvas panel must cover the header at all sizes */
#offcanvas-menu, .offcanvas-menu, .offcanvas{
  position: fixed !important;
  inset: 0 !important;                 /* top/right/bottom/left: 0 */
  z-index: 2001 !important;            /* above #sp-header (100) and toggle (2100 still ok) */
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

/* Backdrop just under the panel, still above the header */
.offcanvas-overlay, .offcanvas-backdrop, .modal-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  background: rgba(0,0,0,.35) !important;
}

/* Lock background scroll when Helix flags off-canvas open */
body.offcanvas, body.offcanvas-open, body.offcanvas-active{
  overflow: hidden !important;
}

/* Typical “rogue stacking” offenders near the top – neutralize */
.sp-megamenu-wrapper, .sp-megamenu-parent{
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* ===========================================================
   END
   =========================================================== */
#offcanvas-menu, .offcanvas-menu, .offcanvas{ z-index: 9999 !important; }
.offcanvas-overlay, .offcanvas-backdrop, .modal-backdrop{ z-index: 9998 !important; }