/* Stack Host — mobile navigation, static-site fix. Pairs with sh-mobile-nav.js.
 *
 * Three separate things broke when the WordPress/Elementor site was
 * exported to static HTML, and all three had to be fixed for the MENU
 * button to work:
 *
 *  1. The toggle handler never bound. The export encoded "?" as "%3F" in
 *     asset filenames (jquery.min.js%3Fver=…), which breaks Elementor's
 *     dynamic widget import. The button rendered and did nothing.
 *     → sh-mobile-nav.js adds the .elementor-active class itself.
 *
 *  2. The open state relied on a keyframe animation that never runs here.
 *     With `backwards` fill it pinned max-height at its from-value of 0,
 *     so the menu "opened" — class flipped, aria-expanded flipped — and
 *     rendered zero pixels tall.
 *     → the animation is dropped and the open height declared outright.
 *
 *  3. The dropdown is position:absolute, and its positioned ancestor is
 *     now the 33px-wide toggle wrapper. It laid out from x=276 to x=497
 *     on a 375px phone — hanging off the right edge, invisible.
 *     → it is pinned full-width; the JS sets `top` under the header.
 *
 * !important throughout: these have to beat both the stuck animation and
 * Elementor's own :not(.elementor-active) rule at equal specificity.
 */
.elementor-nav-menu--dropdown {
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

.elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(100vh - 60px) !important; /* tall menus scroll */
  overflow-y: auto !important;
  animation: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9998;
}

.elementor-menu-toggle {
  cursor: pointer;
}

/* Phone-sized tap targets (§11 mobile-first). */
.elementor-nav-menu--dropdown .elementor-item {
  padding-top: 14px;
  padding-bottom: 14px;
}