/* ── Mobile nav — behavior below 980px ──
   Two mutually exclusive strategies. Divi's hamburger with collapsible
   submenus (most of this file), or `.pa-open-mobile-menu` at the bottom, which
   skips the hamburger and renders the list stacked — a menu using that class
   uses none of the collapse rules.

   Collapse pairs with js/mobile-menu.js, which injects the `.mobile-toggle`
   anchor and flips `.dt-open` / `.visible`.

   `!important` is required: Divi ships
   `.et_pb_menu .et_mobile_menu li ul { display: block !important }`, which is
   what forces submenus open. The `#main-header` variants cover the legacy
   non-Theme-Builder header, whose Divi rule carries an ID.

   Collapse is scoped under `.eos-menu-js` (set by the script) so submenus stay
   expanded if the JS never runs, rather than hidden with no way to open them.
   The chevron is an inline SVG (injected by the script) so its stroke-width
   is controllable — thicker than an icon-font glyph allows.

   `transition: none` on the panel: Divi's own core CSS puts `transition: all`
   on `ul.et_mobile_menu`. The top-level open/close is a discrete display
   swap (untransitionable, unaffected), but a submenu toggling open changes
   the panel's auto height, and that inherited transition animates it —
   producing a mid-animation frame where content has already reflowed but
   the panel hasn't caught up, which reads as a broken/overlapping layout.
   Killing it makes the expand instant. */

/* Instant expand — see the file header note on Divi's inherited transition. */
ul.et_mobile_menu {
  transition: none !important;
}

/* Positioning context for the absolutely-placed toggle (nested items too). */
ul.et_mobile_menu li.menu-item-has-children,
ul.et_mobile_menu li.page_item_has_children {
  position: relative;
}

/* 44px minimum tap target, pinned right. The parent link keeps the rest of the
   row, so it still navigates. */
ul.et_mobile_menu li.menu-item-has-children > .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children > .mobile-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  height: 100%;
  padding: 0 !important;
  border: none;
  background-color: transparent;
}

.mobile-toggle__chevron {
  width: 0.875rem;
  height: auto;
  color: currentColor;
  transition: transform 0.2s ease;
}

ul.et_mobile_menu li.dt-open > .mobile-toggle .mobile-toggle__chevron {
  transform: rotate(180deg);
}

/* An expanded <li> grows to wrap its submenu, and `height: 100%` would grow the
   toggle with it — covering the nested rows and swallowing their taps. */
ul.et_mobile_menu li.dt-open > .mobile-toggle {
  height: auto;
}

/* Collapsed by default. `.children` covers page-based fallback menus. */
.eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .sub-menu,
.eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .children,
.eos-menu-js ul.et_mobile_menu li.page_item_has_children > .sub-menu,
.eos-menu-js ul.et_mobile_menu li.page_item_has_children > .children,
.eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .sub-menu,
.eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .children,
.eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .sub-menu,
.eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .children {
  display: none !important;
  visibility: hidden !important;
}

/* One class heavier than the rule above, so it wins on specificity rather than
   source order. */
.eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .sub-menu.visible,
.eos-menu-js ul.et_mobile_menu li.menu-item-has-children > .children.visible,
.eos-menu-js ul.et_mobile_menu li.page_item_has_children > .sub-menu.visible,
.eos-menu-js ul.et_mobile_menu li.page_item_has_children > .children.visible,
.eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .sub-menu.visible,
.eos-menu-js #main-header ul.et_mobile_menu li.menu-item-has-children > .children.visible,
.eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .sub-menu.visible,
.eos-menu-js #main-header ul.et_mobile_menu li.page_item_has_children > .children.visible {
  display: block !important;
  visibility: visible !important;
}

/* Divi tints parent rows to signal "has children" — the chevron says it now,
   and the tint clashes with custom menu backgrounds. Weight is left alone:
   the site's own nav styling sets it, and this used to flatten it to 400. */
ul.et_mobile_menu li.menu-item-has-children > a {
  background-color: transparent;
}

/* ── .pa-open-mobile-menu — always-open stacked list ──
   Put on any Divi Menu module (builder CSS-class field) whose links should stay
   visible ≤980px instead of collapsing to the hamburger. Used by the footer
   menu; a header nav omits it. Pairs with the footer rule in footer.css. */
@media (max-width: 980px) {
  .pa-open-mobile-menu .et_pb_menu__menu {
    display: flex !important;
    flex-direction: column !important;
  }
  .pa-open-mobile-menu .et_mobile_nav_menu {
    display: none !important;
  }
}