/* Only Astra's existing mobile dropdown is affected. */
@media (max-width: 921px) {
  /* One scrolling element. The inner nav must not scroll independently. */
  #ast-mobile-header .ast-mobile-header-content.content-align-flex-start {
    box-sizing: border-box;
    max-height: var(--me-mobile-menu-height, 60vh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
    scroll-behavior: auto;
  }

  #ast-mobile-header #ast-mobile-site-navigation {
    max-height: none !important;
    overflow: visible !important;
  }

  @supports (height: 1svh) {
    #ast-mobile-header .ast-mobile-header-content.content-align-flex-start {
      max-height: var(--me-mobile-menu-height, 60svh) !important;
    }
  }

  /* Keep Astra's buttons and click handlers; draw the chevron without SVG. */
  #ast-hf-mobile-menu .menu-item-has-children > .ast-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 3em;
    top: 0;
    right: 8px;
    padding: 0;
    transform: none;
  }

  #ast-hf-mobile-menu .menu-item-has-children > .menu-link {
    padding-right: 64px;
  }

  #ast-hf-mobile-menu .ast-menu-toggle > .ast-icon.icon-arrow {
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 1;
    pointer-events: none;
  }

  #ast-hf-mobile-menu .ast-menu-toggle > .ast-icon.icon-arrow svg {
    display: none;
  }

  #ast-hf-mobile-menu .ast-menu-toggle > .ast-icon.icon-arrow::after {
    content: "";
    display: block;
    box-sizing: border-box;
    width: 9px;
    height: 9px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
  }

  /* Astra closes sibling menus without resetting their aria-expanded value.
     The class is the state used by its actual submenu visibility handler. */
  #ast-hf-mobile-menu .ast-submenu-expanded > .ast-menu-toggle > .ast-icon.icon-arrow::after {
    transform: translateY(2px) rotate(225deg);
  }
}