/* =============================================
   Main Navigation Bar
   ============================================= */
.navbar {
    border-bottom: 3px solid var(--secondColor);
    background-color: var(--mainWhite);
}

.navbar-brand {
    margin-left: 1rem;
}

    .navbar-brand img {
        max-height: 120px;
        height: auto;
        width: auto;
    }

/* =============================================
   Hamburger Toggle Button
   ============================================= */
.navbar-toggler {
    color: var(--primeColorText);
    padding: 0.5rem 0.65rem;
    min-width: 48px;
    min-height: 48px;
}

    .navbar-toggler:focus-visible {
        outline: 2px solid var(--primeColor);
        outline-offset: 2px;
        box-shadow: none;
    }

    .navbar-toggler .fa-bars {
        color: var(--primeColorText);
        font-size: 1.75rem;
    }

/* =============================================
   Nav Links - Desktop
   ============================================= */
.navbar-nav {
    margin-right: 2rem;
}

    .navbar-nav .nav-link {
        position: relative;
        font-weight: 600;
        font-size: 1.8rem;
        padding: 0.5rem 1rem;
        margin: 0 0.25rem;
        color: var(--primeColorText);
        transition: color 0.2s ease-in-out;
    }

        /* Underline animation */
        .navbar-nav .nav-link::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -3px;
            width: 0%;
            height: 3px;
            background-color: var(--secondColor);
            transition: width 0.3s ease;
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link:focus-visible {
            color: var(--mainBlack);
        }

            .navbar-nav .nav-link:hover::after,
            .navbar-nav .nav-link:focus-visible::after,
            .navbar-nav .nav-link.active::after {
                width: 100%;
            }

        /* Keyboard focus ring */
        .navbar-nav .nav-link:focus-visible {
            outline: 2px solid var(--primeColor);
            outline-offset: 4px;
            border-radius: 2px;
        }

        /* Active link styling */
        .navbar-nav .nav-link.active {
            color: var(--mainBlack);
        }

/* =============================================
   Responsive - Tablet & Below (992px)
   ============================================= */
@media (max-width: 991.98px) {
    .navbar-brand img {
        max-height: 90px;
    }

    .navbar-nav {
        margin-right: 0;
        padding: 1rem 0;
        background-color: var(--mainWhite);
        border-top: 1px solid var(--outlineColor);
    }

        .navbar-nav .nav-link {
            font-size: 1.15rem;
            padding: 0.75rem 1.25rem;
            margin: 0;
            border-bottom: 1px solid var(--outlineColor);
        }

            /* Hide the underline animation on mobile */
            .navbar-nav .nav-link::after {
                display: none;
            }

            /* Active link gets a left border instead */
            .navbar-nav .nav-link.active {
                border-left: 4px solid var(--primeColor);
                background-color: rgba(107, 166, 107, 0.08);
            }
}

/* =============================================
   Responsive - Mobile (480px and below)
   ============================================= */
@media (max-width: 480px) {
    .navbar-brand {
        margin-left: 0.5rem;
    }

        .navbar-brand img {
            max-height: 70px;
        }

    .navbar-nav .nav-link {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
}