:root {
  --bz-header-h: 88px; /* fallback only; JS overwrites this with the measured height */
}

.mobile-nav__trigger { display: none; }

@media (max-width: 900px) { /* was 768px: the new header needs the room (see bz-header.css) */

  /* Hide BOTH existing Max Mega Menu mobile renders. The live site currently
     outputs id="mega-menu-wrap-mobile" / id="mega-menu-mobile" twice: once in
     the header bar (the one that actually opens) and once inside Twenty
     Twenty's .menu-modal overlay. Duplicate IDs are invalid HTML and a
     likely source of the flaky behavior, so both get hidden here. */
  .mobile-menu-custom.mobile-only,
  .menu-modal {
    display: none !important;
  }

  /* Hide the theme's own native mobile toggle button (class "toggle
     nav-toggle mobile-nav-toggle", targets .menu-modal above). This is a
     separate, pre-existing system from Max Mega Menu, discovered after
     the fact. It renders its own icon in the header and has to be hidden,
     or it sits there doing nothing once .menu-modal above is hidden. */
  #site-header .toggle.nav-toggle.mobile-nav-toggle {
    display: none !important;
  }

  .mobile-nav__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* Prevents the button from being squeezed toward zero width once it's
       relocated into the header's flex row (see .header-titles-wrapper in
       mobile-nav.js), flex children shrink by default. */
    flex: none;
    background: none;
    border: none;
    /* Fallback only, used if mobile-nav.js can't find .header-titles-wrapper
       to relocate this button into (see js/mobile-nav.js). A constant
       top offset here on purpose, not a calc() against header height,
       that math breaks once the header shrinks into its scrolled state. */
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
  }
  .mobile-nav__trigger.is-relocated {
    /* Once JS has moved this into #site-header .header-titles-wrapper,
       let it sit inline and inherit that container's own flex alignment,
       correct at every header height automatically. */
    position: static;
    top: auto;
    right: auto;
  }
  .mobile-nav__bars {
    display: block;
    width: 24px;
    height: 18px;
    position: relative;
    flex: none;
  }
  .mobile-nav__bars span {
    display: block;
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--color-444);
    transition: transform .25s ease, opacity .25s ease;
  }
  .mobile-nav__bars span:nth-child(1) { top: 0; }
  .mobile-nav__bars span:nth-child(2) { top: 8px; }
  .mobile-nav__bars span:nth-child(3) { top: 16px; }
  .mobile-nav__trigger.is-active .mobile-nav__bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .mobile-nav__trigger.is-active .mobile-nav__bars span:nth-child(2) { opacity: 0; }
  .mobile-nav__trigger.is-active .mobile-nav__bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .mobile-nav__panel {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--color-gray-lighter);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav__panel.is-open {
    opacity: 1;
    visibility: visible;
  }
  .mobile-nav__panel-inner {
    /* A small fixed top padding, not header-height based. The panel is an
       opaque full-screen overlay, so there's no header visible underneath
       to leave room for. This also puts Close at roughly the same spot
       the hamburger icon sat at, per feedback. */
    padding: 20px 24px 40px;
  }

  /* Defensive reset: browsers apply default padding/margin to ul/li (and
     some themes add their own list styles that can leak in here), which
     was showing up as an unexplained extra left offset making the whole
     panel look shifted right instead of centered. Resetting broadly by
     element, not just by class, closes that gap regardless of the cause. */
  #mobile-nav-panel ul,
  #mobile-nav-panel li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-nav__close {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-444);
  }
  .mobile-nav__close-icon {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
  }
  .mobile-nav__close-icon span {
    position: absolute;
    top: 50%; left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-444);
  }
  .mobile-nav__close-icon span:nth-child(1) { transform: rotate(45deg); }
  .mobile-nav__close-icon span:nth-child(2) { transform: rotate(-45deg); }

  .mobile-nav__list { list-style: none; margin: 0; padding: 0; }
  .mobile-nav__item { position: relative; }
  .mobile-nav__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 40px 16px 4px;
    text-decoration: none;
  }
  .mobile-nav__link-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-444);
  }
  .mobile-nav__link-desc {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-888);
  }
  .screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }

  /* Image grid submenu style, opt-in per parent via ACF "Mobile Submenu Display" */
  .mobile-nav__grid-wrap {
    background: var(--color-white);
    border-radius: 12px;
    padding: 25px;
    margin: 4px 0 8px;
    box-shadow: 0 5px 20px rgb(0 0 0 / .02);
  }
  .mobile-nav__explore-all {
    display: block;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-orange);
    text-decoration: none;
    margin-bottom: 12px;
  }
  .mobile-nav__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .mobile-nav__grid-item { margin: 0; }
  .mobile-nav__grid-link {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background: var(--color-white);
    border: 1px solid var(--color-eee);
    border-radius: 10px;
    padding: 8px;
  }
  .mobile-nav__grid-icon {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .mobile-nav__toggle {
    position: absolute;
    right: 0;
    top: 0;
    /* Fixed to match the row's own height, not 100%. The <button> and its
       submenu are siblings inside the same <li>, so height: 100% was
       stretching this to match the LI's full height once expanded,
       taller by however tall the now-visible submenu was, which is why
       the chevron looked like it drifted down into the submenu on open. */
    height: 56px;
    width: 44px;
    background: none;
    border: none;
  }
  .mobile-nav__chevron {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-444);
    border-bottom: 2px solid var(--color-444);
    transform: rotate(45deg);
    margin: 0 auto;
    transition: transform .2s ease;
  }
  .mobile-nav__item--parent.is-expanded .mobile-nav__chevron {
    transform: rotate(-135deg);
  }
  #mobile-nav-panel .mobile-nav__submenu {
      margin: 0 0 8px;
      padding: 20px 25px;
      background-color: var(--color-white);
      box-shadow: 0 5px 20px rgb(0 0 0 / .02);
      border-radius: 12px;
  }
  .mobile-nav__submenu .mobile-nav__link {
    padding: 10px 4px;
    gap: 1px;
  }
  .mobile-nav__submenu .mobile-nav__link-title {
    font-size: 15px;
    font-weight: 600;
  }
  .mobile-nav__submenu .mobile-nav__link-desc {
    font-size: 12px;
  }
  .mobile-nav__cta {
    display: block;
    text-align: center;
    margin-top: 24px;
    padding: 15px 30px;
    background: var(--color-orange);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
  }

  body.mobile-nav-open { overflow: hidden; }
}