/* ==============================================================
   Mega Menu — Tablet drop-down fix (768–1024px)
   --------------------------------------------------------------
   PROBLEM
   The hamburger drop-down (#wds-nav-drawer) works at 0–767px but
   not at 768–1024px (iPad portrait). Two Luma behaviours kick in
   at min-width:768px against the SAME .navigation that lives inside
   the drawer:
     1. CSS: `.lib-main-navigation-desktop()` turns submenus into
        `position:absolute; display:none` flyouts and level0 items
        into inline-block.
     2. JS: the jQuery-UI `menu` widget (mage/menu.js) switches to
        DESKTOP mode (its mediaBreakpoint is max-width:767px). It
        `.hide()`s submenus inline and binds its own click/hover
        handlers that fight the accordion — so the level-1 children
        stay at inline `display:none` even after a tap.

   FIX
   - CSS (this file): re-assert a vertical accordion for the drawer
     only, using `#wds-nav-drawer` (ID) + `!important` so it beats
     both Luma's desktop CSS and the widget's inline styles. The
     collapse rule is kept at LOWER specificity than the `.is-open`
     reveal so the reveal always wins when a parent is open.
   - JS (js/mega-menu-fix.js): in the 768–1024px range only, handle
     the parent tap in the capture phase, toggle `.is-open`, and stop
     the event so the Luma widget never sees it.

   Separate from custom.css / responsive.css; registered after
   responsive.css in Magento_Theme/layout/default.xml.
   ============================================================== */

@media only screen and (min-width: 768px) and (max-width: 1024px) {

    /* ---- Top-level list: force vertical stack (kill desktop inline-block/flex/float) ---- */
    #wds-nav-drawer .navigation,
    #wds-nav-drawer .navigation > ul {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    #wds-nav-drawer .navigation li.level0 {
        display: block !important;
        float: none !important;
        position: relative !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* ---- Submenu layout: flatten Luma's absolute flyout into an in-flow panel ---- */
    #wds-nav-drawer .navigation .submenu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        background: #fff !important;
        transform: none !important;
    }

    /* Collapsed by default. !important beats Luma desktop CSS AND any inline
       display the widget sets on hover/expand. Specificity (1,3,1) is kept
       BELOW the reveal rule below (1,4,1). */
    #wds-nav-drawer .navigation li.parent > .submenu,
    #wds-nav-drawer .navigation li.parent > ul {
        display: none !important;
    }

    /* Expanded when .is-open is set (by mega-menu-fix.js at 768–1024px, or by
       mobile-nav.js below 768px). Higher specificity than the collapse rule,
       so it wins; works at every nesting level. */
    #wds-nav-drawer .navigation li.parent.is-open > .submenu,
    #wds-nav-drawer .navigation li.parent.is-open > ul {
        display: block !important;
    }

    /* Ensure the revealed child rows are visible even if the widget left an
       inline display on the list items. */
    #wds-nav-drawer .navigation li.parent.is-open > .submenu > li,
    #wds-nav-drawer .navigation li.parent.is-open > ul > li {
        display: block !important;
    }

    /* Hide Luma's desktop caret/arrow icons and flyout arrow pseudo-elements
       (responsive.css supplies the +/- indicator). */
    #wds-nav-drawer .navigation .ui-menu-icon,
    #wds-nav-drawer .navigation li.level0 > a > .ui-menu-icon {
        display: none !important;
    }
    #wds-nav-drawer .navigation .submenu:before,
    #wds-nav-drawer .navigation .submenu:after {
        display: none !important;
        content: none !important;
    }
}