/*
 * Make MeNu — m-menu-mobile.css
 * Mobile styles เขียนใหม่ทั้งหมด
 * Breakpoint ใช้ค่าจาก Settings (default 768px)
 * หมายเหตุ: CSS variables ไม่รองรับใน @media query โดยตรง
 * breakpoint จึงใช้ค่า default ไว้ก่อน — JS จะ inject ถ้าต้องการ dynamic breakpoint
 */

/*---------------------------------------------*/
/*************** Tablet (max-width: 768px) ***************/
/*---------------------------------------------*/

@media (max-width: 768px) {

    .m-menu .menu {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .m-menu .menu > .menu-item {
        padding: 2px 4px;
    }

    /* Dropdown ทุกประเภท — reset position */
    .m-menu .sub-menu-wrapper {
        position: absolute;
        left: 50% !important;
        transform: translateX(0) !important;
    }

    /* Mega Menu 3 Columns → accordion (rail เต็มกว้าง + panel ตกลงล่าง) */
    .m-menu .menu-item.mega-menu-cols-3 > .sub-menu-wrapper {
        position: absolute;
        left: 0 !important;
        transform: translateX(0) !important;
        width: 92vw !important;
        min-height: 0 !important;
    }

    .m-menu .menu-item.mega-menu-cols-3 > .sub-menu-wrapper > .menu-item {
        width: 100%;
    }

    /* panel: จากขวา → ตกลงใต้แท็บ, คอลัมน์เดียว */
    .m-menu .menu-item.mega-menu-cols-3 > .sub-menu-wrapper > .menu-item > .sub-menu-wrapper {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        column-width: auto;
        columns: 1;
        border-left: 0;
        border-top: 1px solid var(--make-mmenu-border-color, #e0e0e0);
    }

    /* Nested Mega Menu */
    .m-menu .menu-item.mega-menu-nested:hover > .sub-menu-wrapper {
        display: block;
    }

    .m-menu .menu-item.mega-menu-nested .sub-menu-wrapper > .menu-item > .sub-menu-wrapper {
        left: 0% !important;
        transform: translateX(0%) !important;
    }
}

/*---------------------------------------------*/
/*************** Mobile (max-width: 425px) ***************/
/*---------------------------------------------*/

@media (max-width: 425px) {

    .m-menu .menu {
        justify-content: center;
        flex-wrap: wrap;
    }

    .m-menu .menu > .menu-item {
        font-size: 85%;
        padding: 2px 4px;
    }

    /* Home button ขนาดเล็กลงตาม */
    .m-menu .make-home-btn {
        font-size: 14px;
    }

    /* Dropdown */
    .m-menu .sub-menu-wrapper {
        position: absolute;
        left: 50% !important;
        transform: translateX(0) !important;
    }

    /* Mega Menu 3 Columns → accordion (จอเล็ก) */
    .m-menu .menu-item.mega-menu-cols-3 > .sub-menu-wrapper {
        position: absolute;
        left: 0 !important;
        transform: translateX(0) !important;
        width: 94vw !important;
        min-height: 0 !important;
    }

    /* Nested Mega Menu */
    .m-menu .menu-item.mega-menu-nested > .sub-menu-wrapper {
        position: absolute;
        left: -50% !important;
        transform: translateX(-50%) !important;
    }

    .m-menu .menu-item.mega-menu-nested:hover > .sub-menu-wrapper {
        display: block;
    }

    /* Right-aligned dropdown */
    .m-menu .menu-item.mega-menu-right > .sub-menu-wrapper {
        position: absolute;
        right: -200% !important;
        transform: translateX(-100%) !important;
        width: 170px;
    }
}