/* Navbar Styling */
.navbar {
    background-color: #6A4C39; /* Deep brown for navbar background */
    height: 75px;
    z-index: 10;
}

.navbar .navbar-brand {
    color: #FFD166; /* Soft yellow for the logo text */
    font-family: 'Lora', serif;
    font-weight: bold;
}

.navbar .nav-link {
    color: #FFD166; /* Soft yellow for links */
    font-family: 'IBM Plex Serif', serif;
    margin-right: 1.5rem; /* Space between links */
    transition: color 0.3s ease-in-out, background-color 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #FF8C42; /* Warm orange for hover */
}

.navbar-toggler {
    border: none;
    color: #FFD166;
}

.navbar-toggler i {
    font-size: 1.25rem;
}

.navbar .nav-item.active .nav-link {
    color: #6A4C39; /* Brown for active link */
    font-weight: bold;
}


.navbar-collapse {
    background-color: #6A4C39; /* Matches the navbar background */
    width: 100%; /* Full width for the collapsible menu */
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
}

@media (min-width: 992px) {
    .navbar-collapse {
        position: static; /* Reset for desktop view */
    }
}

@media (max-width: 992px) { /* Only for screens below Bootstrap's `lg` breakpoint */
    .navbar-collapse {
        position: absolute; /* Detach the collapsible menu from the flow */
        top: 75px; /* Matches the navbar height */
        left: 0;
        right: 0;
        z-index: 1; /* Ensure it appears above other content */
    }

}