// HEADER
@keyframes fadeIn {

    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.header{

    @include mobile{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: white;
    }

    @include desktop{
        z-index: 100; // highest
        position: relative;
    }
}
.header__top{

    @include mobile{
        padding: 1.5rem 0;
        padding-top: calc(1.5rem - 1px);
        border-top: 1px solid $grey--light;
    }
    @include desktop{
        background: $grey--dark;

        .container{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
    }
}
.header__bottom{

    @include mobile{
        order: -1; // move first
        padding: 1.5rem 0;
    }

    @include desktop{

        .container{
            display: flex;
            justify-content: space-between;
        }
    }
}

// transparent (for home)
.header--transparent .header__bottom{

    @include desktop{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        .main-nav > ul > li > a {
            color: white;
        }
        // gradient background
        .main-nav > ul > li > a:before {
            background: linear-gradient(rgba(white, 0.15), rgba(white, 0));
        }
    }
}

// active (for mobile)
.header--active{

    @include mobile{
        z-index: 99; // highest - 1
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        // max screen height size
        height: 100vh;
        overflow: auto;

        // show elements
        .main-nav{
            display: block;
        }

        // animate elements
        .logo,
        .main-nav ul,
        .contact-nav ul,
        .lang-nav ul{
            animation-timing-function: $easing--long;
            animation-duration: 0.9s;
            animation-name: fadeIn;
        }
    }
}



// CONTACT NAV
.contact-nav{
    font-size: 0.75rem;

    // general
    ul{
        // reset list style
        margin: 0;
        padding: 0;
        list-style: none;

        display: flex;
    }
    a{
        display: flex;
        padding: 0.75rem;
    }
    svg{
        flex-grow: 0;
        flex-shrink: 0;
        margin-top: 0.25rem;
        margin-right: 0.25rem;
        width: 1rem;
        height: 1rem;
        fill: $main;
    }
    span{

    }

    @include mobile{

        ul{
            flex-wrap: wrap;
            justify-content: center;
        }
        a{
            color: $main;
        }
    }

    @include desktop{

        a{
            color: white;
            @include transition(background);
        }
        a:hover{
            background: lighten($grey--dark, 10%);
        }
    }
}



// LANG NAV
.lang-nav{
    font-size: 0.75rem;

    // general
    ul{
        // reset list style
        margin: 0;
        padding: 0;
        list-style: none;

        display: flex;
    }
    a{
        display: block;
        padding: 0.75rem;
    }

    @include mobile{

        ul{
            flex-wrap: wrap;
            justify-content: center;
        }
        a{
            color: $grey--dark;
        }

        li.current-lang a{
            background: $grey--light;
        }
    }

    @include desktop{

        a{
            color: white;
            @include transition(background);
        }
        li.current-lang a,
        a:hover{
            background: lighten($grey--dark, 10%);
        }
    }
}



// LOGO
.logo{
    display: block;

    img{
        display: block;
        height: 100%;
        max-width: 100%;
    }

    @include mobile{
        height: 4.5rem;
        margin-right: 6rem;
        padding: 0.375rem 0 1.125rem 0;
    }

    @include desktop{
        height: 6rem;
        padding: 1.25rem 0.75rem 1.75rem 0.75rem;
    }
}



// MAIN NAV
.main-nav{

    // general
    ul{
        // reset list style
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a{
        display: block;
        color: $grey--dark;
    }

    // current
    li.current_page_item > a{
        color: $main;
    }

    @include mobile{
        display: none;
        margin-top: 0.75rem;

        // general
        a{
            padding: 0.75rem 0;
        }

        // first level
        > ul > li{
            padding-top: 0.75rem;
        }
        > ul > li:not(:last-of-type){
            padding-bottom: 0.75rem;
            border-bottom: 1px solid $grey--medium;
        }
        > ul > li > a{
            font-family: $font-family--heading;
            font-weight: 700;
            font-size: 1 * $font-scale * 1rem; // same as h3
        }

        // second level
        ul ul{
            display: flex;
            flex-wrap: wrap;
        }
        ul ul li:not(:last-of-type){
            margin-right: 1.5rem;
        }
        ul ul a{
            font-size: 0.75rem;
        }
    }

    @include desktop{
        padding-top: 1.5rem;

        // first level
        > ul {
            display: flex;
        }
        > ul > li {
            position: relative;
        }
        > ul > li > a{
            position: relative;
            padding: 0.75rem 0.75rem 2.25rem 0.75rem;
            white-space: nowrap; // don't break lines

            // background
            &:before{
                content: '';
                pointer-events: none;
                z-index: -1;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: $grey--light;
                // hide
                opacity: 0;
                transform: translate3d(0, 0.25rem, 0);
                @include transition;
            }
        }

        // second level
        > ul > li:hover{
            z-index: 2; // higher than previous hovered element
        }
        > ul > li:hover > a:before{
            // show
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
        > ul > li:hover ul{
            // show
            visibility: visible;
            opacity: 1;
            transform: translate3d(0, 0, 0);

            // arrow
            &:before{
                transform: scale(1);
            }
        }
        ul ul{
            position: absolute;
            top: 100%;
            left: -1.5rem;
            right: -1.5rem;
            padding: 0.75rem 0;
            font-size: 0.875rem;
            text-align: center;
            background: white;
            @include box-shadow--extra;
            // hide
            visibility: hidden;
            opacity: 0;
            transform: translate3d(0, 0.75rem, 0);
            @include transition;

            // arrow
            &:before{
                content: '';
                pointer-events: none;
                z-index: -1;
                position: absolute;
                top: -0.5rem;
                left: 50%;
                width: 1.5rem;
                height: 1.5rem;
                margin-left: -0.75rem;
                background: white;
                border-radius: 50%;
                // hide
                transform: scale(0.5);
                @include transition(transform);
            }
        }
        ul ul li:not(:last-of-type){
            position: relative;

            // bottom border
            &:after{
                pointer-events: none;
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 1px;
                background: $grey--light;
            }
        }
        ul ul a{
            padding: 0.75rem;
            padding-bottom: calc(0.75rem - 1px);
            @include transition(background);
        }
        // hover
        ul ul a:hover{
            background: $grey--light;
        }
    }

    @include desktop--small{

        // first level
        > ul > li > a{
            padding-left: 0.375rem;
            padding-right: 0.375rem;
            font-size: 0.875rem;
        }
        // second level
        ul ul a{
            font-size: 0.75rem;
        }
    }
}



// HEADER TRIGGER
.header-trigger{

    @include mobile{
        cursor: pointer;
        z-index: 100; // highest
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        width: 4.5rem;
        height: 4.5rem;
        // background: $main;
        background: linear-gradient(45deg, adjust-hue($main, -10%), adjust-hue($main, 10%));
        @include box-shadow--extra;

        // active background
        &:before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: $error;
            transform: scaleY(0);
            transform-origin: top;
            transition: transform 0.45s $easing--medium;
            will-change: transform;
        }

        // icon
        span{
            z-index: 2;
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            width: 1.5rem;
            height: 2px;
            margin-left: -0.75rem;
            margin-top: -1px;
            background: white;
            @include transition;
        }
        span:nth-of-type(1){
            transform: translate3d(0, -0.5rem, 0);
        }
        span:nth-of-type(2){

        }
        span:nth-of-type(3){
            transform: translate3d(0, 0.5rem, 0);
        }
    }

    @include desktop{
        display: none;
    }
}
.header-trigger--active{

    @include mobile{

        // active background
        &:before{
            transform-origin: bottom;
            transform: scaleY(1);
        }

        // icon
        span:nth-of-type(1){
            transform: translate3d(0, 0, 0) rotate(45deg);
        }
        span:nth-of-type(2){
            opacity: 0;
        }
        span:nth-of-type(3){
            transform: translate3d(0, 0, 0) rotate(-45deg);
        }
    }
}