/*=NAVIGATION MAIN */
.navi-main {
    li {
        border-bottom: rem(1px) solid $border;

        &:hover, &:focus, &:active, &.active, &.hovering {
            > a, > span {
                background:$primary;
                color: $light;
            }
        }

        &:hover, &.hovering {
            .sub {
                opacity: 1;
                visibility: visible;
                max-height: 30rem;

                .sub {
                    opacity: 0;
                    visibility: hidden;
                    max-height:0;
                }
            }
        }

        &.hasSub {
            position: relative;

            &:after {
                @extend %icon-right;
                color: $primary;
                font-family: $icon-font;
                position: absolute;
                right: rem($base-gap);
                top: rem($base-line-height / 2);
            }

            &:hover, &:focus, &:active, &.active, &.hovering {
                &:after {
                    @extend %icon-down;
                    color:$light;
                }
            }
        }
    }

    a, span {
        color:$primary;
        display: block;
        font-size: rem(13px);
        padding:rem(12px) rem($base-gap);
        text-decoration: none;
        text-transform: uppercase;
        @extend %animation;

        &:before{
            @extend %animation;
        }
    }

    .sub {
        background:$medium;
        max-height:0;
        margin-bottom: 0;
        transition:.3s;
        opacity: 0;
        visibility: hidden;

        li {
            border-color:$secondary;
        }

        a {
            color:$primary;

            &:hover, &:focus, &:active, &.active {
                color:$light;
            }
        }

        .hasSub {
            &:after {
                @extend %icon-right;
                color: $primary;
                font-family: $icon-font;
                position: absolute;
                right: rem($base-gap);
                top: rem($base-line-height / 2);
            }
            &:hover {
                &:after {
                    @extend %icon-down;
                    color:$light;
                }
            }
            &:hover, &.hovering {
                color: $light;
                .sub {
                    opacity: 1;
                    visibility: visible;
                    max-height: 30rem;
                }
            }

            .sub {
                li {
                    background-color: #f0f8e6;
                }
            }
        }
    }

    @include breakpoint(large) {
        text-align: right;
        display:inline-block;
        float:right;

        > li {
            display: inline-block;
        }

        li {
            border:none;

            &.hasSub {
                &:after {
                    display: none;
                }
            }

            a{
                padding:1.5rem .5rem;
                position:relative;
                &:before{
                    height:0;
                    width:rem(1px);
                    background:$alert;
                    left:50%;
                    bottom:0;
                    content:'';
                    position:absolute;
                }
            }

            &:hover, &.active{
                a{
                    color:$alert;
                    background:none;
                    &:before{
                        height:1.5rem;
                    }
                }
            }
        }

        .sub {
            position: absolute;
            min-width:rem(211px);
            z-index: 2;
        }
    }
}

// Off-canvas navigation
.page-navi {
    background: $light;
    border-bottom:$base-border;
    min-height: 100%;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    @extend %animated-transform;
    left: 0;
    position: absolute;
    top: 0;
    width: 80%;
    z-index: 100;

    .branding{
        display:none;
    }

    @include breakpoint(medium) {
        width:50%;
    }

    @include breakpoint(large) {
        left:0;
        min-height: inherit;
        position: fixed;
        top:0;
        transform: none;
        transition: none;
        width: 100%;
        padding:0 .5rem;

        .branding{
            display:inline-block;
        }
    }
}

.navi-buttons {
    position: fixed;
    right:rem($base-gap);
    top:rem($base-gap);
    z-index: 110;

    a {
        background:$light;
        color: $primary;
        font-size: rem(32px);
        line-height: 1;
        text-decoration: none;

        &:before {
            font-family: $icon-font;
            @extend %icon-menu;
            line-height: 1;
            padding:0 rem(6px);
            transition: content 300ms;
        }

        &:hover {
            background:$alert;
        }

        @include breakpoint(large) {
            display: none;
        }
    }
}

.close-navi {
    display: none;
}

#navi-toggled:target {
    .page-navi {
        transform: translateX(0);
    }

    .page-wrap {
        transform: translateX(80%);
        position: fixed;
    }

    .close-navi {
        display: block;

        &:before {
            @extend %icon-cancel;
        }
    }

    .toggle-navi {
        display: none;
    }

    @include breakpoint(medium) {
        .page-wrap {
            transform: translateX(50%);
        }
    }

    @include breakpoint(large) {
        .close-navi {
            display: none;
        }

        .page-wrap {
            transform: none;
            position: relative;
        }
    }
}

// Footer navigation
.navi-add {
    margin-top:2rem;
    background:$secondary;

    li {
        border-bottom: rem(1px) solid $border;
    }

    a {
        color:$light;
        display: block;
        line-height: 1;
        padding:rem(14px) rem($base-gap);
        text-decoration: none;
        @extend %animation;

        &:hover, &:active, &:focus, &.active {
            background:$primary;
        }
    }
    @include breakpoint(tiny){
        background:none;
        margin-top:1rem;
        padding-top:1rem;
        border-top:$base-border;
        li{
            display:inline-block;
            border:none;
            a{
                color:$secondary;

                 &:hover, &.active{
                    color:$alert;
                    background:none;
                }
            }
        }
    }
    @include breakpoint(large) {
        text-align: left;
        background:none;
        padding:0;
        border:none;
        margin:0;

        li {
            border:none;
            width:auto;
            display:block;
            padding:0 0 .8rem 0;
        }

        a {
            padding:0;
            line-height:1rem;
        }
    }
}