/**
 * Metbee Masaüstü Menü Sütunları
 * Elementor'un masaüstü ana menüsündeki doğrudan alt menüleri sütunlara böler.
 */

@media (min-width: 1025px) {
    .elementor-nav-menu--main > ul.elementor-nav-menu > li.metbee-submenu-columns-2 {
        --metbee-menu-columns: 2;
        --metbee-menu-width: 560px;
    }

    .elementor-nav-menu--main > ul.elementor-nav-menu > li.metbee-submenu-columns-3 {
        --metbee-menu-columns: 3;
        --metbee-menu-width: 840px;
    }

    .elementor-nav-menu--main > ul.elementor-nav-menu > li.metbee-submenu-columns-4 {
        --metbee-menu-columns: 4;
        --metbee-menu-width: 1120px;
    }

    .elementor-nav-menu--main > ul.elementor-nav-menu > li.metbee-submenu-columns-5 {
        --metbee-menu-columns: 5;
        --metbee-menu-width: 1400px;
    }

    /*
     * Çok sütunlu menü doğal olarak üst menü öğesinin solundan açılır.
     * JS yalnızca ekranın sağından veya solundan taşma olduğunda gerekli kadar
     * --metbee-submenu-shift uygular; ekrana sığıyorsa kaydırma 0 kalır.
     */
    .elementor-nav-menu--main > ul.elementor-nav-menu > li[class*="metbee-submenu-columns-"] {
        position: relative !important;
    }

    .elementor-nav-menu--main > ul.elementor-nav-menu > li[class*="metbee-submenu-columns-"] > ul.sub-menu.elementor-nav-menu--dropdown {
        box-sizing: border-box;
        left: 0 !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: min(var(--metbee-menu-width), calc(100vw - 32px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        transform: translateX(var(--metbee-submenu-shift, 0px)) !important;
        column-count: var(--metbee-menu-columns);
        column-gap: 0;
        white-space: normal;
    }

    .elementor-nav-menu--main > ul.elementor-nav-menu > li[class*="metbee-submenu-columns-"] > ul.sub-menu.elementor-nav-menu--dropdown > li {
        box-sizing: border-box;
        width: 100%;
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    .elementor-nav-menu--main > ul.elementor-nav-menu > li[class*="metbee-submenu-columns-"] > ul.sub-menu.elementor-nav-menu--dropdown > li > a.elementor-sub-item {
        box-sizing: border-box;
        width: 100%;
        white-space: normal;
    }
}