/* The desktop header has full navigation, so the mobile menu button is hidden there. */
@media (min-width: 1025px) {
  .elementor-menu-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* On mobile/tablet keep the button compact and keep it as a burger, not a close icon. */
@media (max-width: 1024px) {
  .elementor-menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    border: 1px solid #d7e8ee !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #101828 !important;
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.08) !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  .elementor-menu-toggle.elementor-active,
  .elementor-menu-toggle[aria-expanded="true"] {
    background: #ffffff !important;
    border-color: #bfe8ee !important;
    color: #101828 !important;
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.1) !important;
  }

  .elementor-menu-toggle .elementor-menu-toggle__icon--open,
  .elementor-menu-toggle .elementor-menu-toggle__icon--close,
  .elementor-menu-toggle .e-font-icon-svg,
  .elementor-menu-toggle svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex: 0 0 22px !important;
  }

  .elementor-menu-toggle .elementor-menu-toggle__icon--open {
    display: block !important;
  }

  .elementor-menu-toggle .elementor-menu-toggle__icon--close {
    display: none !important;
  }

  .elementor-menu-toggle svg {
    fill: currentColor !important;
  }
}