/*
Theme Name: 1800 Cabins Custom Theme
Theme URI: https://1800cabins.au/
Author: Custom Build
Description: Custom lightweight WordPress theme built from the approved 1800 Cabins HTML mockup.
Version: 1.0.0
Text Domain: cabins1800
*/
@import url("css/style.css");

/* =========================================================
   MOBILE MENU - FORCE WORDPRESS SUBMENU TO DISPLAY
   ========================================================= */

@media (max-width: 1050px) {

    /* Make sure submenu is hidden initially */
    .nav .menu-item-has-children > .sub-menu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        min-width: 100% !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        background: #f7f7f7 !important;
        padding: 8px 0 !important;
        margin: 0 !important;
    }

    /* SHOW submenu when Range is opened */
    .nav .menu-item-has-children.submenu-open > .sub-menu,
    .nav .menu-item-has-children.open > .sub-menu,
    .nav .menu-item-has-children > .sub-menu.active {
        display: block !important;
    }

    /* Submenu items */
    .nav .sub-menu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    /* Submenu links */
    .nav .sub-menu li a {
        display: block !important;
        width: 100% !important;
        padding: 14px 25px 14px 45px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: #222 !important;
        line-height: 1.4 !important;
    }

    /* Remove desktop hover behaviour */
    .nav .menu-item-has-children:hover > .sub-menu {
        display: none !important;
    }

    /* But keep it visible when clicked/open */
    .nav .menu-item-has-children.submenu-open:hover > .sub-menu,
    .nav .menu-item-has-children.open:hover > .sub-menu {
        display: block !important;
    }

    /* Position Range item correctly */
    .nav .menu-item-has-children {
        position: relative !important;
    }

    /* Mobile + / - button */
    .submenu-toggle {
        display: flex !important;
        position: absolute !important;
        right: 25px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 50px !important;
        height: 50px !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 1px solid #ddd !important;
        color: #222 !important;
        z-index: 100 !important;
        cursor: pointer !important;
    }

}

/* =========================================
   MOBILE MENU - FIX RANGE SUBMENU + BUTTON
   ========================================= */

@media (max-width: 1050px) {

    .nav .submenu-toggle {
        position: absolute !important;
        top: 50% !important;
        right: 40px !important;
        transform: translateY(-50%) !important;

        width: 52px !important;
        height: 52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        line-height: 1 !important;
        z-index: 5 !important;
    }

    .nav .submenu-toggle span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 100% !important;

        line-height: 1 !important;
        transform: translateY(-1px);
    }

    .nav li.menu-item-has-children {
        position: relative !important;
    }

}