/**
 * Modal behaviour for the Ollie Menu Designer mega menu.
 *
 * Ollie Menu Designer's Dropdown Menu opens as an ordinary dropdown: the page
 * behind it keeps scrolling, so a visitor who tries to scroll the menu scrolls
 * the page instead. This file makes the open menu behave like a modal by
 * locking the page behind it. The other half of "modal" – a tall menu that
 * scrolls inside itself instead of running off the screen – is measured in
 * js/modal.js, because only the script knows the space left below the menu.
 *
 * The plugin targets Ollie Menu Designer's own block classes
 * (`wp-block-ollie-mega-menu*`). They are an upstream contract, not ours: if
 * OllieWP renames them the selectors here stop matching. That is by design –
 * the plugin patches that block and nothing else.
 */

/* Lock the page behind an open mega menu. Keyed to *any* open toggle, so the
   lock is on whenever at least one menu is open and lifts the moment the last
   one closes. Both the root element and the body are targeted because either
   can be the scroll container depending on the theme; naming both is what makes
   the lock hold on either kind of site.

   `clip`, never `hidden`. `overflow: hidden` turns the element into a scroll
   container. On the ROOT element, while the page is scrolled, that reparents
   the scrollport that every `position: sticky` descendant sticks to, and the
   header drops from its pinned position to its in-flow one – off the top of the
   screen by the current scroll amount, taking a mega menu panel hung off its
   bottom edge with it (Ollie makes its header sticky, so this bites here). The
   frozen page can't be scrolled to reach the stranded menu; only closing it
   (Esc) lifts the lock and restores the header. `overflow: clip` locks the
   scroll identically but establishes NO scroll container, so the sticky header
   keeps sticking and the menu opens where it should. */
html:has(.wp-block-ollie-mega-menu__toggle[aria-expanded="true"]),
body:has(.wp-block-ollie-mega-menu__toggle[aria-expanded="true"]) {
  overflow: clip;
}