/* Custom CSS for the responsive menu */
/* Targeting the nav element which is now inside the header */
header .navbar-css {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute space */
    padding: 1rem;
    background-color: #f8f9fa; /* Light background, typical Bootstrap */
    border-bottom: 1px solid #dee2e6; /* Light border */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.navbar-brand-css {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
}

    .navbar-brand-css .logo {
        height: 70px; /* Adjust logo size */
        margin-right: 10px;
    }

    .navbar-brand-css .site-title {
        font-size: 1.5rem; /* Adjust title size */
        font-weight: bold;
    }

.navbar-nav-css {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Desktop: display as a row */
}

.nav-item-css {
    margin-left: 15px; /* Spacing between menu items */
}

.nav-link-css {
    text-decoration: none;
   /* color: #007bff;*/ /* Bootstrap primary color */
    padding: 0.5rem 1rem;
    display: block;
    font-size:1.1rem;
}

    .nav-link-css:hover {
        color: #0056b3;
    }

/* Mobile Toggle Styles */
.navbar-toggler-css {
    display: none; /* Hide by default on desktop */
    background: none;
    border: 1px solid #007bff;
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: 0.25rem;
    cursor: pointer;
}

.navbar-toggler-icon-css {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    /* Updated SVG color to a fully opaque blue (#007bff) */
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23007bff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Checkbox Hack */
#navbar-toggle-input {
    display: none; /* Hide the actual checkbox */
}

/* Mobile View - Apply styles below this breakpoint */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    header .navbar-css {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align items to the start */
    }

    .navbar-brand-css {
        width: 100%; /* Brand takes full width */
        justify-content: space-between; /* Logo and title on one side, toggle on the other */
        margin-bottom: 1rem; /* Space below brand */
    }

    .navbar-toggler-css {
        display: block; /* Show toggle button on mobile */
    }

    .navbar-nav-css {
        display: none; /* Hide menu by default on mobile */
        flex-direction: column; /* Stack menu items vertically */
        width: 100%; /* Menu takes full width */
    }

    .nav-item-css {
        margin-left: 0; /* Remove left margin */
        margin-bottom: 10px; /* Add space between stacked items */
    }

    /* Show menu when checkbox is checked */
    #navbar-toggle-input:checked ~ .navbar-nav-css {
        display: flex; /* Show the menu */
    }
}