/*
Main navigation
==============================================
Custom styling for main navigation on larger screens.

Based on bootstrap nav:
https://getbootstrap.com/docs/5.2/components/navs-tabs
*/

.main-navigation-menu {
    font-size: $font-size-lg;
}

@include media-breakpoint-up(md) {
    .main-navigation-link {
        color: $body-color;
        padding-left: 0;
        padding-right: 32px;

        .main-navigation-link-text {
            border-bottom: 2px solid transparent;
            padding-bottom: 3px;
        }

        &:hover,
        &.is-open {
            color: $primary;
        }

        &.active {
            color: $gray-800;
            font-weight: $font-weight-bold;

            .main-navigation-link-text {
                border-color: $primary;
            }
        }
    }
}
