/**
 * ED Front Office — optional Warehouse mobile menu toggle presentation.
 *
 * Scope: Warehouse 4.8.2 mobile header only.
 * Behavior stays native: the existing menu button and aria-expanded state are
 * the source of truth. No navigation or open/close JavaScript is added.
 */
@media (max-width: 991.98px) {
  #mobile-header .js-m-nav-btn-menu > i.fa-bars {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    -webkit-mask: none !important;
    mask: none !important;
    background:
      linear-gradient(currentColor, currentColor)
      center / 0.72em 1.5px no-repeat !important;
  }

  #mobile-header .js-m-nav-btn-menu > i.fa-bars::before,
  #mobile-header .js-m-nav-btn-menu > i.fa-bars::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 0.72em;
    height: 1.5px;
    margin: 0;
    background: currentColor !important;
    -webkit-mask: none !important;
    mask: none !important;
    transform-origin: center;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  #mobile-header .js-m-nav-btn-menu > i.fa-bars::before {
    transform: translate(-50%, calc(-50% - 0.25em));
  }

  #mobile-header .js-m-nav-btn-menu > i.fa-bars::after {
    transform: translate(-50%, calc(-50% + 0.25em));
  }

  #mobile-header .js-m-nav-btn-menu[aria-expanded="true"] > i.fa-bars {
    background-size: 0 1.5px !important;
  }

  #mobile-header .js-m-nav-btn-menu[aria-expanded="true"] > i.fa-bars::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  #mobile-header .js-m-nav-btn-menu[aria-expanded="true"] > i.fa-bars::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* Root level uses the real Warehouse header above the drawer while this
     enhancement is enabled. IQIT's submenu header remains for Back + title. */
  #iqitmegamenu-mobile:not(.mobile-menu--active)
  .mobile-menu__header-wrapper {
    display: none !important;
  }

  /* The enhanced Warehouse toggle is the visible close control. IQIT's native
     internal close button remains in the DOM and automatically returns when
     this optional module stylesheet is not loaded. */
  #iqitmegamenu-mobile .mobile-menu__close {
    display: none !important;
  }
}

@media (max-width: 991.98px) and (hover: none) and (pointer: coarse) {
  #mobile-header .js-m-nav-btn-menu {
    color: var(--edfo-mobile-menu-toggle-color, #2b2a28) !important;
  }
}