@import 'lib';

/* STICKY HEADER
======================================================================================================================== */
.masthead--sticky .masthead__wrapper {
    transition: top .6s ease-out;
    position: static;
    top: -400px;
    
    /* this is to solve everything */
    &.before-sticky {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 999;
        background: white;
        border: 0 solid;

        // disable all component borders
        .header56__section,
        .header56__section > .container {
            border: 0;
        }

        .disable--sticky {
            display: none;
        }
    }
    &.is-sticky {
        top: 0;
        // animation: header_sticky_down .6s;
    }
}
.admin-bar .masthead--sticky .masthead__wrapper.is-sticky {
    top: 32px;
}

/* search
======================================================================================================================== */
.search-wrapper-modal {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99999999999;
    background: white;
    
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-out;
}
.search-modal-close-btn {
    position: absolute;
    top: 10%;
    right: 10%;
    z-index: 99;
    display: block;
    font-size: 28px;
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}
.search-wrapper-modal .container {
    display: flex;
    align-items: center;
    height: 100%;
}

html.in-modal-search56 {
    // overflow: hidden;
    
    .search-wrapper-modal {
        display: block;
        opacity: 1;
        visibility: visible;
    }
}

/* ------------------------------       modal search content */
.modal-search-content {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    flex: none;
}
.modal-search-content {
    .s {
        display: block;
        width: 100%;
        border: 1px solid transparent;
        border-width: 0 0 1px;
        
        background: none;
        font-size: 24px;
        line-height: 60px;
        padding: 0;
        background: none;
        
        &:focus {
            background: none;
            border-bottom-color: transparent;
        }
    }
    .searchform .submit {
        line-height: 60px;
        font-size: 20px;
        width: 60px;
        height: 60px;
        text-align: center;
    }
}
.search-suggestion {
    margin: 40px 0 0;
    h4 {
        margin: 0 0 10px;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 400;
        display: block;
    }
    nav {
        display: block;
    }
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
    }
    nav a {
        color: inherit;
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
    }
    nav li {
        display: inline-block;
        font-size: 1.1em;
    }
    nav li + li:before {
        content: "/";
        margin: 0 20px;
        opacity: .5;
    }
    
    // animation
    nav li,
    h4 {
        transition: all .5s cubic-bezier(.34, 1.56, .64, 1);
        
        transition-delay: .46s;
        opacity: 0;
        visibility: hidden;
        transform: translate(0,10px);
    }
    h4 {
        transition-delay: 0.25s;
    }
    nav li:first-child {
        transition-delay: .3s;
    }
    nav li:nth-child(2) {
        transition-delay: .35s;
    }
    nav li:nth-child(3) {
        transition-delay: .30s;
    }
    nav li:nth-child(4) {
        transition-delay: .42s;
    }
    nav li:nth-child(5) {
        transition-delay: .44s;
    }
}
.in-modal-search56 {
    .search-suggestion nav li,
    .search-suggestion h4 {
        transform: translate(0,0);
        opacity: 1;
        visibility: visible;
    }
}

/* OFF CANVAS
======================================================================================================================== */
.offcanvas56 {
    display: block;
    position: fixed;
    top: 0; // mobile header height
    left: 0;
    bottom: 0;
    z-index: 99999999;
    background: white;
    padding: 16px;
    width: 320px;
    
    transform: translate(-102%,0);
    // transition: all .3s ease-out;
    
    overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    
    @include media( mobile ) {
        top: 54px;
        width: 100%;
    }
}
.offcanvas56::-webkit-scrollbar {
    display: none;
}
.offcanvas56__overlay {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background: rgba(0,0,0,.5);
    
    visibility: hidden;
    opacity: 0;
    // transition: all .3s ease-out;
    transition: all .25s ease-out;
    display: block;
}
html.on-offcanvas,
html.in-offcanvas-permanent {
    .offcanvas56 {
        transform: translate(0,0);
        // display: block;
    }
    .offcanvas56__overlay {
        // visibility: visible;
        display: block;
        opacity: 1;
        visibility: visible;
        
        @include media( mobile ) {
            display: none;
        }
    }
    
    /*
    // fixed when open the offcanvas menu
    .mobile-header56-outer {
        position: fixed;
    }
    */
    
    .hamburger .icon-close {
        display: block;
    }
    .hamburger .icon-menu {
        display: none;
    }
}

/* offcanvas nav
------------------------------------------------------------ */
.offcanvasnav56 {
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block;
    }
    a {
        display: block;
        color: inherit;
        text-decoration: none;
        line-height: 46px;
        position: relative;
    }
    ul.sub-menu {
        display: none;
        margin-left: 24px;
        border-top: 0 solid;
    }
    li {
        border-top: 0 solid;
    }

    /* border top problem */
    li + li,
    ul.sub-menu {
        border-top: 1px solid;
    }

}
.offcanvas56__element + .offcanvas56__element {
    margin-top: 20px;
}

/* -----------------------      dropdown indicator */
.offcanvasnav56 {
    .mk {
        text-decoration: none;
        font-style: normal;
        display: none;

        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        z-index: 99;
        width: 32px;
        height: 32px;
        font-size: 24px;
        text-align: center;
        line-height: 32px;
        text-align: center;
        // background: #f0f00f; // background just for debug
        
        /* ic56- */
        font-family: 'icon56' !important;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        line-height: 32px;

        // .ic56-chevron-small-down
        &:before {
            content: "\e90a";
        }
    }
    li.menu-item-has-children > a > .mk {
        display: block;
    }
    li.active > a > .mk {
        // .ic56-chevron-small-up;
        &:before {
            content: "\e908";
        }
    }
}

/* -----------------------      2 columns */
.nav--cols-2 {
    ul.menu {
        display: flex;
        flex-flow: row wrap;
        > li {
            width: 50%;
        }
        > li:nth-child(2) {
            border-top: 0 !important;
        }
    }
}

/* offcanvas with animation
------------------------------------------------------------ */
.offcanvas56--hasanimation {
    .offcanvasnav56 ul.menu > li,
    .offcanvas56__social,
    .offcanvas56__search,
    .widget {
        display: block;
        transform: translate(0,20px);
        opacity: 0;
        visibility: hidden;
        transition: all .3s ease-out;
    }
}
html.on-offcanvas,
html.in-offcanvas-permanent {
    .offcanvasnav56 ul.menu > li,
    .offcanvas56__social,
    .offcanvas56__search,
    .widget {
        transform: translate(0,0);
        opacity: 1;
        visibility: visible;
    }
}