/* css/navbar.css */

/* Header styling */
header {
    /* Using py-3 and mb-4 from Bootstrap, but adding a custom border-bottom color if needed */
    border-bottom: 1px solid #dee2e6; /* Bootstrap's default border color */
}

/* Navbar specific styling */
.navbar {
    /* Background color for the navbar itself */
    background-color: #ffffff; /* As set in your HTML */
    padding-top: 1vh; /* Equivalent to Bootstrap's py-2 for nav */
    padding-bottom: 1vh;
}

/* Company Name/Logo Styling */
.bg-brownx {
    background-color: #693c35 !important;
    color: White !important;
    padding: 10px; /* Adjust as needed */
    margin:10px;
    /* font-family: 'Georgia', serif; - Already in body, but can be specific here if needed */
}

/* Navbar Toggler Icon (for mobile) */
 .navbar-toggler {
   margin:1vh;
} 

/* Navbar Nav links for Desktop (and generally within the offcanvas too) */
.navbar-nav .nav-link {
    color: #212529 !important; /* Bootstrap's default text-dark color */
    text-decoration: none !important;
    /* me-lg-4 is applied by Bootstrap, so specific margin for desktop */
    transition: color 0.3s ease !important; /* Smooth transition for hover */
}

/* Only apply margin for desktop navigation */
@media (min-width: 992px) { /* Equivalent to Bootstrap's 'lg' breakpoint */
    .navbar-nav .nav-link {
        margin-right: 1.5rem !important;
    }
}


.navbar-nav .nav-link:hover {
    color: #693c35 !important; /* Example hover color */
}

/* Specific style for the Login button/link */
.navbar-nav .btn.btn-dark {
    background-color: #212529 !important; /* Bootstrap's default btn-dark background */
    color: white !important;
    border-radius: 0 !important; /* As per your custom style 'rad0' */
    padding: 10px 20px !important; /* Adjust padding as needed */
    border: 1px solid #212529 !important; /* Add border for consistency */
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

.navbar-nav .btn.btn-dark:hover {
    background-color: #000000 !important; /* Darker on hover */
    border-color: #000000 !important;
}

/* If you have a specific class for active link, define it here */
.navbar-nav .nav-item .nav-link.active {
    font-weight: bold !important;
    /* color: #693c35 !important; */ /* Example for active link */
}

/* Offcanvas specific styling */
.offcanvas-bottom {
    height: 50vh; /* Set height to 50% of the viewport height */
    max-height: none; /* Remove max-height to ensure 50vh is applied */
    --bs-offcanvas-height: none !important;
    border-top-left-radius: 10px; /* Optional: rounded corners for the top of the offcanvas */
    border-top-right-radius: 10px; /* Optional: rounded corners for the top of the offcanvas */
}

.offcanvas-body .navbar-nav {
    flex-direction: column; /* Stack links vertically in offcanvas */
    align-items: flex-start; /* Align links to the left */
}

.offcanvas-body .nav-item {
    width: 100%; /* Make each nav item take full width */
    margin-bottom: 10px; /* Add some spacing between items */
}

.offcanvas-body .nav-link {
    padding: 10px 15px; /* Adjust padding for better touch targets */
    width: 100%; /* Ensure links fill their parent item */
}

/* Hide desktop navbar collapse on smaller screens and vice-versa */
@media (max-width: 991.98px) { /* Below 'lg' breakpoint */
    #navbarNavDesktop {
        display: none !important;
    }
}

@media (min-width: 992px) { /* At 'lg' breakpoint and above */
    .navbar-toggler {
        display: none !important;
    }
    #offcanvasNavbar {
        display: none !important; /* Hide offcanvas on desktop */
    }
}