/*******************************
 * Generic Styling Classes
 ******************************/




/*******************************
 * Nav Toggle Button
 *  target :
 *  z-index: 
 ******************************/


/*******************************
 * Nav Menu (Desktop)
 ******************************/
/* Main menu and all sub-menus */
.cxe-nav-menu .cxe-nm-main ul {
    display         : flex;
    align-items     : center;
    padding-left    : 0;
    list-style      : none;
}

/* First-level menu items - text/link elements */
.cxe-nav-menu .cxe-nm-main ul.cxe-nm li.menu-item {
    display         : block;
    transition      : .2s;
}
.cxe-nav-menu .cxe-nm-main ul.cxe-nm li.menu-item > a {
    display         : inline-block;
}

/* First-level menu items with a sub-menu list - text/link element */
.cxe-nav-menu .cxe-nm-main ul.cxe-nm > li.menu-item-has-children > a {
    padding-right   : 5px;
}

/* FontAwesome indicator beside first-level items with sub-menus */
.cxe-nav-menu .cxe-nm-main ul.cxe-nm > li.menu-item-has-children:after {
    content         : '\f107';  /* TODO: This icon should be an Elementor option */
    padding-right   : 10px;

    font-family     : "Font Awesome 5 Free";
    font-weight     : 900;
}

/*******************************
 * Sub-Menu (Desktop)
 ******************************/
@media only screen and (min-width: 1025px) {
    /* Hovered first-level menu items */
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm > li.menu-item:hover > a {
        color           : rgba(255, 255, 255, 0.75);
    }


    /* Hiding sub-menus and their contents by default */
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm > li.menu-item-has-children ul.sub-menu,
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm > li.menu-item-has-children ul.sub-menu > li.menu-item {
        display         : none;
    }

    /* All sub-menu items - text/link elements */
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm li.menu-item-has-children ul.sub-menu li.menu-item > a {
        display         : block;
        width           : 100%;
        white-space     : nowrap;
    }

    /* First-level sub-menus */
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm > li.menu-item-has-children > ul.sub-menu {
        display         : none;
        flex-direction  : column;

        position        : absolute;

        /*margin-top      : 5px;     /* TODO: Elementor setting */

        z-index         : 9;
    }

    /* The first-level sub-menus when they are open (due to hover on the main item) */
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm > li.menu-item-has-children:hover > ul.sub-menu {
        display         : flex;
    }

    /* All sub-menu list items */
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm li.menu-item-has-children > ul.sub-menu > li.menu-item {
        display         : none;
        align-items     : center;
        justify-content : space-between;
    }

    /* All sub-menu list items on hover */
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm li.menu-item-has-children:hover > ul.sub-menu > li.menu-item {
        display         : flex;
        width           : 100%;

        text-align      : center;
    }

    /* List items with children that are lower than the first level */
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children {
        position        : relative;
    }

    /* Any subsequent sub-menus after the first-level (these open to the right) */
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children > ul.sub-menu {
        display         : none;
        position        : absolute;
        top             : 0;
        left            : 100%;

        /* You COULD add Elementor settings for padding and colors just for deeper sub-menus here...but nah */
    }
    .cxe-nav-menu .cxe-nm-main ul.cxe-nm > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu {
        display         : block;
    }

}

/*******************************
 * 
 ******************************/

/*******************************
 * 
 ******************************/

/*******************************
 * Mobile/Tablet Styling
 ******************************/
@media only screen and (max-width: 1024px) {

    /*******************************
     * Nav Toggle Button
     ******************************/


    /*******************************
     * Overall Menu Container
     ******************************/
    .cxe-nav-menu .cxe-nm-container {
        position        : fixed;
        top             : 0;
        bottom          : 0;
        left            : 0;
        right           : 0;

        z-index         : 10;
    }


    /*******************************
     * Background Overlay
     ******************************/
    .cxe-nav-menu .cxe-nm-container .cxe-nm-overlay {
        position        : fixed;
        top             : 0;
        bottom          : 0;
        left            : 0;
        right           : 0;

        opacity         : 0.7;  /* TODO: Elementor setting */
        background-color: #000; /* TODO: Elementor setting */

        transition      : opacity .5s, visibility .5s;

        z-index         : 9;
    }


    /*******************************
     * Menu Section (above overlay)
     ******************************/
    .cxe-nav-menu .cxe-nm-container .cxe-nm-main {
        display         : flex;
        flex-direction  : column;

        position        : fixed;
        top             : 0;
        bottom          : 0;
        left            : 0;

        width           : 70vw;                 /* TODO: Elementor setting */
        max-width       : calc(-50px + 100vw);  /* TODO: Elementor setting */

        background-color: #FFF; /* TODO: Elementor setting */

        z-index         : 15;
    }


    /* Actual list element */
    .cxe-nav-menu .cxe-nm-container .cxe-nm-main ul.cxe-nm {
        display         : flex;
        flex-direction  : column;

        height          : 100%;

    }


    /* All menu items */
    .cxe-nav-menu .cxe-nm-container .cxe-nm-main ul.cxe-nm li.menu-item {
        display         : flex;
        align-items     : center;
        justify-content : space-between;

        width           : 100%;
    }


    /* All menu items - text/link elements */
    .cxe-nav-menu .cxe-nm-container .cxe-nm-main ul.cxe-nm li.menu-item > a {
        display         : inline-block;

        width           : 100%;

    }

    /*******************************
     * Sub-Menus
     *
     ******************************/


    .cxe-nav-menu .cxe-nm-container .cxe-nm-main ul.cxe-nm li.menu-item-has-children {
        position        : relative;
    }

    /* All sub-menus */
    .cxe-nav-menu .cxe-nm-container .cxe-nm-main ul.cxe-nm li.menu-item-has-children ul.sub-menu {
        display         : flex;
        flex-direction  : column;

        position        : absolute;
        top             : 0;
        left            : 100%;
    }
    
    /*
    .cxe-nav-menu .cxe-nm-container .cxe-nm-main ul.cxe-nm li.menu-item-has-children ul.sub-menu li.menu-item > a {
        display         : block;

        position        : absolute;
        top             : 0;
        bottom          : 0;
    }
    */

}

/*******************************
 * 
 ******************************/

/*******************************
 * 
 ******************************/

/*******************************
 * 
 ******************************/