@use '../utilities' as *;

.navbar {
    padding: 0 !important;
    margin-top: 10px;

    .container {
        border: none;
        box-shadow: 0 0 2px 0 #333;
        @include flexBox(center, space-between, row);
        padding: 0;
        padding-left: 10px;
        padding-right: 10px;

        @media(max-width: 992px) {
            padding-left: 5px;
            padding-right: 5px;
        }
    }

    .navbar-collapse {
        margin-top: 0;
    }
}

.navbar-toggler {
    height: 35px;
    width: 40px;
    text-align: center;
    @include flexBox(center, center, row);
    border: 1px solid $secondary_black;
    
    .menu-toggler-icon {
        font-weight: weight(bold);
        font-size: 1.6rem;
    }
}

.site-navigation {
    margin-left: auto;
    border: none;
    box-shadow: none;

    @media(max-width: 992px) {
        margin-top: 10px;
        border-top: 1px solid $secondary_black;
    }
}

.site-navigation > li {
    padding: 0;
    margin: 0;
    border: none;

    a {
        font-size: .72rem;
        text-transform: uppercase;
    }
}

.site-navigation > li > a,
.site-navigation > li > a:hover,
.site-navigation > li > a:focus,
.site-navigation > li > a.highlighted {
    padding: 20px 18px;
    transform: none;
    font-size: 0.75rem;
}

@media(max-width: 992px) {
    
    .site-navigation > li > a,
    .site-navigation > li > a:hover,
    .site-navigation > li > a:focus,
    .site-navigation > li > a.highlighted {
        padding-left: 0;
        padding-top: 15px;
        padding-bottom: 15px;
        transform: none;
    }
}

@media(min-width: 992px) {
    .sm-simple a .sub-arrow {
        display: none !important;
    }

    .sm-simple > a.has-submenu {
        padding-right: 20px 18px !important;
    }

    .site-navigation > .menu-item-has-children > a {
        padding: 20px 18px;
    }

    .site-navigation .menu-item-has-children > a::after {
        content: "\f107";
        font-family: "Font Awesome 5 Free";
        font-weight: 550;
        font-style: normal;
        font-size: .75rem;
        position: absolute;
        right: 5px;
        top: 50%;
        margin-top: -3px;
        transform: translate(0, -50%);
        display: inline-block;
        background: transparent;
        color: #333;
    }

    .site-navigation .menu-item-has-children > .sub-menu .menu-item-has-children > a::after {
        content: "\f067";
        font-size: .5rem;
    }
}

.site-navigation .menu-item-has-children .sub-menu {
    border-top: 1px solid $secondary_black;

    a {
        font-size: .8rem;
        text-transform: unset;
    }

    @media(max-width: 992px) {
        a {
            padding-left: 0;
        }
    }
}

// SITE BRANDING
.site-branding {
    display: block;
}

.site-branding .navbar-brand img {
    width: 170px;
    max-width: 90%;
}

.site-branding .site-title {
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}

.site-branding .site-title a {
    font-size: 1.3rem;
    font-weight: bold;
    color: $secondary_black;
    display: block;
    text-decoration: none;
}

.site-branding .site-title a:hover {
    color: $secondary_black;
}

.site-branding .site-description {
    margin: 0;
    padding: 0;
    font-size: .7rem;
}