/*
 * Directory header menu
 *
 * The parent JusDial header makes normal submenus a narrow, single-column
 * dropdown and gives the mobile off-canvas menu no scroll container. These
 * overrides are intentionally scoped to the Directory item.
 */

/* Desktop: turn the Directory submenu into a wide, responsive mega menu. */
@media only screen and (min-width: 1281px) {
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.sub-menu,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.children {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: clamp(18px, 2vw, 36px);
        row-gap: 0;
        width: min(1120px, calc(100vw - 40px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 40px) !important;
        left: 50% !important;
        right: auto !important;
        padding: 24px 30px !important;
        box-sizing: border-box;
        transform: translateX(-50%) scaleY(0);
        transform-origin: top center;
    }

    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu:hover > ul.sub-menu,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu:focus > ul.sub-menu,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu.focus > ul.sub-menu,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu:hover > ul.children,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu:focus > ul.children,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu.focus > ul.children {
        transform: translateX(-50%) scaleY(1);
    }

    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.sub-menu > li,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.children > li {
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* The walker adds these three empty controls to every submenu for the
       mobile drill-down navigation. They must stay available to mobile, but
       should not become empty columns in the desktop mega menu. */
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu ul li.close-nav,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu ul li.go-back,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu ul li.see-all {
        display: none !important;
    }

    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.sub-menu > li > a,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.children > li > a {
        display: block;
        border-bottom: 0;
        padding: 0 0 9px;
        font-weight: 500;
    }

    /* Keep nested Directory groups in their grid column instead of opening
       another flyout outside the mega menu. */
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.sub-menu > li > ul,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.children > li > ul {
        display: block !important;
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.sub-menu > li > ul > li,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.children > li > ul > li {
        display: block !important;
        width: auto !important;
        padding: 0 !important;
        list-style: none !important;
    }
}

/* Use three columns when the desktop menu has less horizontal space. */
@media only screen and (min-width: 1281px) and (max-width: 1450px) {
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.sub-menu,
    .wdt-header-menu .wdt-primary-nav > li.zawzor-directory-menu > ul.children {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(1000px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* Mobile/tablet: the cloned off-canvas menu must be its own scroll region. */
@media only screen and (max-width: 1280px) {
    .mobile-menu.nav-is-visible {
        width: min(92vw, 380px) !important;
        max-width: min(92vw, 380px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        overscroll-behavior: contain;
    }

    .mobile-menu.nav-is-visible > ul,
    .mobile-menu.nav-is-visible ul.sub-menu,
    .mobile-menu.nav-is-visible ul.children {
        height: 100% !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .mobile-menu.nav-is-visible > ul {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
    }
}