/*************************************
* MENU MODULE
*************************************/
@mixin dropdown-menu-base {
    position: static;
    float: none;
    list-style: none;
    border-radius: 0;
    border:0;
    margin: 0;
    padding: 0;
    font-size: inherit;

    //mobile up breakpoint -> min-width:768px
    @include media-breakpoint-up( 'md' ) {
        position: absolute;
        display: none;
        top: 100%;
        @if ( true == $is_rtl ) {
            right: 0;
        }
        @else {
            left: 0;
        }
        z-index: 1000;
        min-width: 10rem;
        max-width: 50vw;
    }
}


.sek-nav-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: .5rem 0;

    // https://github.com/presscustomizr/nimble-builder/issues/368
    .sek-mobile-menu-expanded-below & {
        padding: 0;
    }
}
.sek-nav-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    // justify-content property should be consistent with the default value in sek_get_module_params_for_czr_menu_content_child()
    // justify-content: flex-start;
    // -webkit-box-pack: start;
    // -ms-flex-pack: start;
}
.sek-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    .sek-module .sek-module-inner & {
        &,
        & ul {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }
        margin-right: -10px !important;
        margin-left: -10px !important;
        li {
            list-style: none;
            padding: 0;
            & > ul li {
                padding: 0;
            }
        }
    }

    li {
        font-size: 16px;// consistent with defaults
        a {
            line-height: 1.5em;// consistent with default registration params
            padding: .6em .8em;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: inherit;
            overflow:hidden;
            .sek-nav-wrap & {
                text-decoration: none;
            }
            &:hover {
                .sek-nav__title {
                    text-decoration: underline;
                }
            }
        }

        &:not(:last-of-type) {
            border-bottom: 1px solid;
            //customizable
            border-color: rgba(49,49,49,.09);
        }
    }

    .menu-item-has-children,
    .page_item_has_children {
        position: relative;
        & > a::after {
            // Feb 2020 => replaced font awesome by a unicode character well supported
            // see https://github.com/presscustomizr/nimble-builder/issues/602
            content: "\203A";//https://unicode-table.com/en/203A/
            font-family: "Arial Unicode MS", Arial;//<= https://www.fileformat.info/info/unicode/char/203A/fontsupport.htm
            moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            display: none;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            font-weight: 900;
            transition: all 0.3s ease;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            perspective: 1000px;
            padding: 0 .45em;
            font-size: 1em;
            position: relative;
            transform: translateZ(0) rotate(90deg);
            -ms-transform: rotate(90deg);
        }
        &.show > a::after {
            @if ( true == $is_rtl ) {
                transform: translateZ(0) rotate(90deg) !important;
                -ms-transform: rotate(90deg)!important;
            }
            @else {
                transform: translateZ(0) rotate(-90deg)!important;
                -ms-transform: rotate(-90deg)!important;
            }
        }
    }
    & .sub-menu,
    & .children {
        @include dropdown-menu-base();
    }
}





// RULES FOR HORIZONTAL DESKTOP MENU
//mobile up breakpoint -> min-width:768px
@include media-breakpoint-up( 'md' ) {
    .sek-nav {
        flex-direction: row;
        .menu-item-has-children,
        .page_item_has_children {
            & > a::after {
                display:inline-block;
            }
        }
        & > li:not(:last-of-type) {
            border-bottom: none;
        }
        & > li > a {
            padding: 5px;
        }
        .sek-module .sek-module-inner & {
            li {
                margin: 0 5px;
                & > ul li {
                    @if ( true == $is_rtl ) {
                        padding: 0 .9rem 0 0;
                    } @else {
                        padding: 0 0 0 .9rem;
                    }
                }
            }
        }
    }
    .sek-nav-collapse {
        display: flex!important;// <= !important because the php template sets this selector to display:none with inline style. This hack allows us to prevent a Content Layout Shift on page load
        flex-basis: auto;
        // justify-content property should be consistent with the default value in sek_get_module_params_for_czr_menu_content_child()
        justify-content: flex-end;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
    }
    // https://github.com/presscustomizr/nimble-builder/issues/368
    .sek-mobile-menu-expanded-below {
        display: none!important;
    }
    .sek-nav-toggler {
        display: none;
    }

    .sek-dropdown-menu {

        .sek-nav & li {
            padding: 0 10px !important;
            margin: 0 !important;
            a {
                padding: 10px 12px;
            }
        }

        // following two should be customizable...
        background: white;
        box-shadow: 1px 2px 2px 2px rgba(0,0,0,.15);

        ul {
            @if ( true == $is_rtl ) {
                right: 100%;
            }
            @else {
                left: 100%;
            }
        }

        .sek-menu-link__row-reverse {
            flex-direction: row-reverse !important;
        }


        .sek-nav__title {
            word-break:  normal;
            white-space: nowrap;
        }

        .sek-dropdown-submenu & {
            top: 15px;
        }
    }

    @at-root .sek-submenu-fade .sek-dropdown-menu a {
        transition: all 0.25s ease;
        transform: translate(0, 0);
        &:hover {
            transform: translate(3px, 0);
        }
    }

    // submenu revealing fade effect
    // lets use a trick to make this not impact on the snake
    // basically we know that assigning a perspective to an element
    // plus position:relative creates a new system
    // where fixed elements behave like absolute elements relative to the parent
    // this way the actual visual position of the dropdown will not be impacted
    // though, as fixed element, even if overflowing the tc-page-wrap, will not
    // make the orizontal scrollbar appear!
    @at-root .sek-submenu-fade {
        .page_item_has_children,
        .menu-item-has-children {
            perspective: 1000px;
            > ul {
                position: fixed;
                opacity: 0;
                visibility: hidden;
                display: block;
                transition: all 0.25s ease-in-out;
                transform: translate( 0, -10px );
            }

            &:not(.show) {
                //temporary fix for Firefox : https://github.com/presscustomizr/customizr/issues/1083
                //the perspective thing seems to not work with this browser
                //need further investigation
                overflow: hidden;

                //because of the fact the submenu is displayed
                //it might still grab the the hover while fading out
                //let's avoid this resetting its pointer-events
                //when the li parent hasn't the show class
                ul {
                    pointer-events: none;
                    cursor: $cursor-disabled;
                }
            }
        }

        li.show {
            perspective: none;
            > ul {
                position: absolute;
                visibility: visible;
                opacity: 1;
                transform: translate( 0, 0);
            }
        }
     }
     // end fade effect

     .nb-collapsible-mobile-menu .nb-dd-mm-toggle-wrapper {
        display: none;
    }
}//@include media-breakpoint-up( 'md' )








// ANIMATION : ROTATING ARROWS FOR SUBMENU PARENTS
.sek-dropdown-submenu {
    & > a{
        &::after {
            @if ( true == $is_rtl ) {
                transform: translateZ(0) rotate(0deg)!important;
                -ms-transform: rotate(0deg)!important;
            }
            @else {
                transform: translateZ(0) rotate(0deg)!important;
                -ms-transform: rotate(0deg)!important;
            }
        }
        //TODO: row reverse
        &[class*=-reverse]::after {
            top: .1em;
            @if ( true == $is_rtl ) {
                transform: translateZ(0) rotate(180deg)!important;
                -ms-transform: rotate(180deg)!important;
            }
            @else {
                transform: translateZ(0) rotate(-180deg)!important;
                -ms-transform: rotate(-180deg)!important;
            }
        }
    }
}


.sek-dropdown-menu {
    @include dropdown-menu-base();

    .show > & {
        display: block;
    }

    .sek-nav .sek-nav__title {
        //the sidemenu and mobile menu should NOT break lines
        word-break: break-word;// was break-all; Fixed in dec-2017 @see https://github.com/presscustomizr/customizr/issues/1339
        white-space: normal;
    }
    //SNAKE
    &.open-right {
        left: 0;
        right: auto;
    }
    @at-root &.open-right ul:not(.open-left),
    & ul.open-right {
        left: 100%;
        right: auto;
        top: 0;
    }

    &.open-left {
        left: auto;
        right: 0;
    }
    @at-root &.open-left ul:not(.open-right),
    & ul.open-left {
        right: 100%;
        left: auto;
    }
    // progressive background filling on hover not activated when releasing the menu module initial version, in v1.4.0
    // li {
    //     position: relative;
    //     &::before {
    //         content: '';
    //         position: absolute;
    //         width: 0%;
    //         height: 100%;
    //         top: 0;
    //         left: 0;
    //         transition-delay: 0s;
    //         transition-duration: .6s;
    //         transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    //         transform-origin: 0 100%;
    //         background-color: rgba(0, 0, 0, 0.045);
    //     }
    //     &:hover::before {
    //         width: 100%;
    //     }
    // }
}
















// Janv 2021 NEW COLLAPSIBLE MOBILE MENU
// June 2020 for https://github.com/presscustomizr/nimble-builder/issues/721
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
nav.nb-collapsible-mobile-menu {
    [data-sek-mm-state="expanded"] {
        overflow: auto;
        max-height: 80vh;
        padding-bottom: 10px;
        //background: #ffffff;
    }
    li .sub-menu {
        li a { font-size: 0.88em; }
        li > a { padding: .6em 32px; }
        li li > a { padding: .6em 60px; }
        li li li > a { padding: .6em 80px; }
        li li li li > a { padding: .6em 100px; }
    }
}


nav.nb-collapsible-mobile-menu [data-sek-mm-state] { display: none }
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] { display: block; }

nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"],
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] li,
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] ul { background: #ffffff; }

nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .sub-menu,
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] li {
    position: relative;
}

[data-sek-is-mobile-vertical-menu="yes"] .sek-nav li a {
    min-height: 45px;//<= which is also the height if the toggle button when there are children items ( .nb-dd-mm-toggle )
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    // Janv 2021 : default alignment of vertical mobile menu items
    // consistent with registration params
    // see in sek_get_module_params_for_czr_menu_content_child()
    justify-content: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
}
// nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] > li > a {
//     min-height: 43px;
// }
// Hide sub-menus for mobile vertical menu
// show sub-menus when .expanded class is added
[data-sek-is-mobile-vertical-menu="yes"] .sub-menu { display: none; }
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .sub-menu { display: none; }
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .sub-menu.expanded { display: block; }








// MOBILE MENU ARROW TOGGLE WHEN THERE IS A SUBMENU
/*
* Mobile dropdown on click
*/
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .page_item_has_children > a,
nav.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .menu-item-has-children  > a {
    // this padding gives the necessary space for the toggle arrow button
    padding-right: 60px;
}
.nb-dd-mm-toggle-wrapper {
    position: absolute;
    top: 1px;
    right: 0;
    text-align: center;
    line-height: 1;
    bottom: 1px;
    height: 45px;
    width: 60px;
}

.nb-collapsible-mobile-menu [data-sek-mm-state="expanded"] .nb-dd-mm-toggle-wrapper {
    display: block;
}

.nb-dd-mm-toggle {
    background: none!important;
    -webkit-appearance: none;
    outline: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: block;
    height: 45px;
    width: 60px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

.nb-dd-mm-toggle i {
    display: block;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 100%;
    color:#000000;
}

li.expanded > .nb-dd-mm-toggle-wrapper .nb-arrow-for-mobile-menu {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.nb-arrow-for-mobile-menu::after {
    content: "\25BE";//https://unicode-table.com/en/25BE/
    font-family: "Arial Unicode MS", Arial;//<= https://www.fileformat.info/info/unicode/char/203A/fontsupport.htm
    moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    // display: none;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-weight: 900;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
    padding: 0 .45em;
    font-size: 18px;
    line-height: 45px;
    position: relative;
}



// MOBILE : HAMBURGER BUTTON
//Hueman inspired nav toggler
.nb-loc .sek-module-inner nav .sek-nav-toggler {
    -webkit-appearance: none !important;
    cursor: pointer;
    &, &:hover, &:focus {
        //following 3 should be customizable
        background: 0 0;
        background-color: rgba(0, 0, 0, 0);
        color: black;
        outline: none;
        border: none;
    }

    height: 40px;
    width: 40px;
    padding: 0;
    vertical-align: middle;
    //align to the right (left when rtl)
    // @if ( true == $is_rtl ) {
    //     margin-right: auto;
    //     margin-left: -10px;
    // }
    // @else {
    //     margin-left: auto;
    //     margin-right: -10px;
    // }
    @at-root .sek-ham__span-wrapper {
        height: 12px;
        position: relative;
        display: block;
        .line {
            display: block;
            height: 1.5px;
            position: absolute;
            left: 10px;
            border-radius: 5px;
            background-clip: padding-box;
            transition: all ease .35s;
            backface-visibility: hidden;
            border-top: 1.5px solid;
        }
        .line-1 {
            top: 0;
        }
        .line-2 {
            top: 50%;
        }
        .line-3 {
            top: 100%;
        }

        @at-root .sek-nav-toggler {
            .line-1 {
                transform: translate(-3px, 6px) rotate(45deg);
                width: 28px;
            }
            .line-2 {
                opacity: 0;
            }
            .line-3 {
                transform: translate(-3px, -6px) rotate(-45deg);
                width: 28px;
            }
        }
        @at-root .sek-nav-toggler.sek-collapsed .line {
            width: 20px;
            transform: translate(0,0) rotate(0);
            opacity: 1;
        }
        @at-root .sek-nav-toggler.sek-collapsed.hovering .line {
            transform: translateX(-3px);
            width: 26px;
        }
    }
}








// PRO SEARCH ICON IN DESKTOP + SEARCH FIELD DESKTOP AND MOBILE
// June 2020 search icon + form in menu module for https://github.com/presscustomizr/nimble-builder-pro/issues/12
.nb-module-menu-search {
    position: relative;
  }
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
[data-sek-is-mobile-vertical-menu="yes"] .nb-module-menu-search {
    display: none;
}
.nb-svg-search-icon {
    cursor: pointer;
    padding: 0;
}
.nb-module-menu-search .nb-search-expand {
    display:none;
    background: #fff;
    position: absolute;
    z-index: 100;
    top: 49px;
    right: 0;
    left: 0;
    width: 340px;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1);
    box-shadow: 0 1px 0 rgba(255,255,255,.1);
}
.nb-search-expand .nb-search-expand-inner {
    border: 1px solid #eee;
    box-shadow: 0 0 5px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.15);
    transition: -webkit-transform .35s ease-in-out,height .25s ease-in-out,background-color .45s ease-in-out;
    transition: transform .35s ease-in-out,height .25s ease-in-out,background-color .45s ease-in-out;
    padding: 15px;
    // make sure NB cleans any icon printed ::after the label ( like in hueman theme for example )
    [role=search].search-form label::after {
        content: none;
    }
}

[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner [role=search].search-form {
    display: flex;
    float: none;
}

[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner label input[type=search] {
    max-width: 100%;
}
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=submit], [data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search form input[type=submit] {
    margin: 0;
    background: #808080!important;
    color: #fff;
    font-size: 16px;
    padding: 10px 10px;
    font-weight: normal;
    display: inline-block;
    border: none;
    cursor: pointer;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=search], [data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search input[type=search],
[data-sek-module-type="czr_menu_module"] .nb-search-expand .nb-search-expand-inner input[type=submit], [data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search form input[type=submit] {
    text-transform: none!important;
}
.nb-mobile-search {
    display: none;
}
// Note that [data-sek-is-mobile-vertical-menu] value is set on page load and dynamically on window resize
[data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search {
    display: block;
    padding: 6px 14px 15px;
}
[data-sek-is-mobile-vertical-menu="yes"] .nb-mobile-search input {
    font-size: 16px;
}
.nb-search-expand-inner, .nb-mobile-search {
    input {
        &[type="search"] {
            color: #000000!important;
        }
        &[type="submit"] {
            color: #ffffff!important;
        }
    }
}