/*
 * CPM Pump — mobile/tablet navbar responsiveness fix
 * The Elementor burger dropdown lives inside a narrow 1/3-width column, so the
 * JS-injected inline width/left/top leave it cramped and misaligned on small
 * screens. Here we break it out into a full-viewport-width fixed panel.
 * Scoped to the burger breakpoint (<=1024px, Elementor "dropdown-tablet").
 */
@media (max-width: 1024px) {

  /* The mobile/tablet dropdown panel — full width, fixed, escaping its column. */
  nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
    position: fixed !important;
    top: var(--cpm-header-bottom, 60px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
  }

  /* Drop the 25px top margin Elementor sets on the panel (post-94.css tablet +
     mobile). Selector mirrors theirs (5 classes) plus `nav` so it wins the
     !important cascade; we anchor the panel via `top` instead. */
  .elementor-94 .elementor-element.elementor-element-6a1ee086 nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
    margin-top: 0 !important;
  }

  /* Open state only: cap height to 70% of the screen and scroll if taller.
     Padding lives here too, so the closed (max-height:0) panel stays invisible. */
  .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 15px 30px !important;
  }

  /* Roomier, easier-to-tap menu items. */
  nav.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item,
  nav.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-sub-item {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
}