/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Fix for menu dropdowns not showing on hover */
li.has-dropdown:hover>.nav-dropdown,
li.has-dropdown:hover>.sub-menu {
    left: -15px !important;
    /* typical flatsome offset */
    max-height: 2000px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
}

/* Fix for full-width or container-width dropdowns if they exist */
li.menu-item-design-full-width:hover>.nav-dropdown,
li.menu-item-design-container-width:hover>.nav-dropdown {
    left: 0 !important;
    width: 100% !important;
}

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/

    /* Mobile Sidebar visibility fix */
    .mobile-sidebar.mfp-ready {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100%;
        z-index: 100000;
        background: #fff;
        visibility: visible !important;
        overflow-y: auto;
        transition: transform 0.3s ease;
        transform: translateX(-100%);
    }

    .has-off-canvas-left .mobile-sidebar.mfp-ready {
        transform: translateX(0);
    }

    /* Overlay background */
    .mfp-bg.mfp-ready {
        opacity: 1 !important;
        display: block !important;
    }

    /* Close button styling */
    .mobile-sidebar .mfp-close {
        color: #333;
        opacity: 0.65;
        transition: opacity 0.2s;
    }

    .mobile-sidebar .mfp-close:hover {
        opacity: 1;
    }

    /* Mobile sub-menu toggle icon */
    .mobile-sidebar .menu-item-has-children>a:after {
        content: "\f107";
        font-family: "fl-icons";
        float: right;
        transition: transform 0.3s;
    }

    .mobile-sidebar .menu-item-has-children.active>a:after {
        transform: rotate(180deg);
    }

    /* Hide all submenus by default */
    .mobile-sidebar .nav-sidebar .sub-menu,
    .mobile-sidebar .nav-sidebar ul.children {
        display: none !important;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
    }

    /* Show submenu when parent has active class */
    .mobile-sidebar .nav-sidebar .menu-item-has-children.active>.sub-menu,
    .mobile-sidebar .nav-sidebar .menu-item-has-children.active>ul.children {
        display: block !important;
        max-height: 1000px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Add left padding to mobile menu items */
    .mobile-sidebar .nav-sidebar>li>a {
        padding-left: 20px !important;
    }

    .mobile-sidebar .sub-menu li a {
        padding-left: 35px !important;
    }
}