/* ========================================
   VTX Navigation System v1.3

   Mobile Offcanvas Navigation
   Blocksy Compatible

======================================== */


/* =====================================================
   Container
===================================================== */


.ct-panel-content-inner {

    padding-left:0 !important;
    padding-right:0 !important;

}


.ct-panel-content .mobile-menu,
.ct-panel-content .mobile-menu > ul {

    width:100%;

}


/* =====================================================
   First Level Structure
===================================================== */


.ct-panel-content 
.mobile-menu > ul > li {

    width:100%;

}


/* Normal first level item */


.ct-panel-content 
.mobile-menu > ul > li > .ct-menu-link {

    display:block;
    width:100%;

    padding-left:25px;
    padding-right:25px;

}



/* Parent item */


.ct-panel-content 
.mobile-menu > ul > li > .ct-sub-menu-parent {


    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;


}



/*
   Parent link
*/


.ct-panel-content 
.mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link {


    flex:1;

    padding-left:25px;

    padding-right:25px;


}



/*
   Dropdown button

   keep same background area
*/


.ct-panel-content 
.mobile-menu > ul > li > .ct-sub-menu-parent 
.ct-toggle-dropdown-mobile {


    padding-left:25px;

    padding-right:25px;


}



/* =====================================================
   First Level Hover

   Only direct hover
===================================================== */


.ct-panel-content 
.mobile-menu > ul > li > .ct-menu-link:hover,
.ct-panel-content 
.mobile-menu > ul > li > .ct-menu-link:focus-visible {


    background-color:
        var(--theme-palette-color-6);

}



/*
 Parent hover

Whole row including arrow
*/


.ct-panel-content 
.mobile-menu > ul > li > .ct-sub-menu-parent:hover {


    background-color:
        var(--theme-palette-color-6);

}



/*
 IMPORTANT:

 When submenu item hover,
 remove parent background

*/

/* =====================================================
   Submenu Hover Control

   Only remove parent hover background
   when parent itself is NOT active
===================================================== */


/*
   Normal parent:
   submenu hover should not highlight parent
*/

.ct-panel-content 
.mobile-menu > ul > li:not(.current-menu-item):not(.current-menu-ancestor)
:has(.sub-menu li:hover)
> .ct-sub-menu-parent {


    background-color:transparent;

}



/*
   Current parent page:
   keep parent background
*/

.ct-panel-content 
.mobile-menu > ul > li.current-menu-item
:has(.sub-menu li:hover)
> .ct-sub-menu-parent {


    background-color:
        var(--theme-palette-color-6);

}



/*
   Child page active:
   parent hover allowed
*/

.ct-panel-content 
.mobile-menu > ul > li.current-menu-ancestor:not(.current-menu-item)
> .ct-sub-menu-parent:hover {

    background-color:
        var(--theme-palette-color-6);

}



/* =====================================================
   First Level Current
===================================================== */


/*
 Actual current parent page only
*/


.ct-panel-content 
.mobile-menu > ul > li.current-menu-item 
> .ct-menu-link {


    background-color:
        var(--theme-palette-color-6);

}



/*
 Parent current page only

NOT child page
*/


.ct-panel-content 
.mobile-menu > ul > li.current-menu-item 
> .ct-sub-menu-parent {


    background-color:
        var(--theme-palette-color-6);

}



/*
 Remove parent background
when child page active
*/
/* =====================================================
   Current Child Page Parent

   Default:
   no background

   Hover:
   use hover background
===================================================== */


.ct-panel-content 
.mobile-menu > ul > li.current-menu-ancestor:not(.current-menu-item)
> .ct-sub-menu-parent {


    background-color:transparent;

}


/*
   Allow hover when child page is active
*/

.ct-panel-content 
.mobile-menu > ul > li.current-menu-ancestor:not(.current-menu-item)
> .ct-sub-menu-parent:hover {


    background-color:
        var(--theme-palette-color-6);

}



/* =====================================================
   Submenu
===================================================== */


.ct-panel-content 
.mobile-menu .sub-menu {


    width:100%;

    padding-inline-start:0 !important;

    padding-inline-end:0 !important;

    padding-right:0 !important;


}



/* =====================================================
   Submenu Items
===================================================== */


.ct-panel-content 
.mobile-menu .sub-menu > li > .ct-menu-link {


    display:block;

    width:100%;


    padding-left:50px;

    padding-right:25px;


    transition:

    background-color 180ms ease;


}



/* Submenu hover */


.ct-panel-content 
.mobile-menu .sub-menu > li:hover > .ct-menu-link,
.ct-panel-content 
.mobile-menu .sub-menu > li > .ct-menu-link:hover,
.ct-panel-content 
.mobile-menu .sub-menu > li > .ct-menu-link:focus-visible {


    background-color:

        var(--theme-palette-color-6);


}



/* Submenu current */


.ct-panel-content 
.mobile-menu .sub-menu > li.current-menu-item > .ct-menu-link {


    background-color:

        var(--theme-palette-color-6);


}

/* =====================================================
   Mobile Dropdown Toggle Spacing Fix
   Keep arrow away from viewport edge
===================================================== */


.ct-panel-content 
.mobile-menu > ul > li > .ct-sub-menu-parent 
.ct-toggle-dropdown-mobile {


    width:50px;

    height:48px;


    display:flex;

    align-items:center;

    justify-content:center;


    padding:0 !important;


    margin-right:25px;


}



/*
   Parent container remains full width
*/

.ct-panel-content 
.mobile-menu > ul > li > .ct-sub-menu-parent {


    padding-right:0 !important;

}

/* ========================================
   Desktop Dropdown Navigation
   Blocksy Header Only

   Breakpoint:
   Blocksy Default Desktop >= 1000px

   Important:
   Keep isolated from:
   .ct-panel-content .mobile-menu

======================================== */


@media (min-width:1000px) {


    /*
       Dropdown hover
    */

    .ct-header
    .sub-menu
    .ct-menu-link:hover,
    .ct-header
    .sub-menu
    .ct-menu-link:focus-visible {


        background-color:
            var(--theme-palette-color-6);


    }



    /*
       Dropdown current page
    */

    .ct-header
    .sub-menu
    .current-menu-item
    > .ct-menu-link {


        background-color:
            var(--theme-palette-color-6);


    }


}