/*Refer::CoPilot_Blazor_Navbar_Centered_No_Bootstrap*/

/* Header container */
.site-header {
    display: flex;
    flex-direction: column; /* Stack logo above navbar */
    background-color: rgb(112, 114, 128); /*Blue 25, 4+, L2*/
}

/* Logo styling */
.logo-container {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem; /*MN*/
    margin-bottom: 0.5rem;
}

.logo {
    /*max-width: 175px;*/
    width: 175px;
    height: auto;
}



/*Refer::CoPilot_Blazor_Navbar_No_Bootstrap #2 */

/* Base menu styling */
.menu-bar {
    background-color: rgb(112, 114, 128); /*Blue 25, 4+, L2*/
    color: white;
    padding: 0;
    margin-top: 0.5rem; /*MN added this */
}

.menu-header {
    display: flex;
    justify-content: center; /* MN this centers the menubar on page */
    min-width: 100vw; /*MN*/
}

.menu-title {
    font-size: 1.2rem;
    font-weight: bold;
}

.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: none; /* Hidden on desktop */
}

/* Menu list */
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
}

    .menu-list li {
        margin: 0;
    }

    .menu-list a {
        display: block;
        padding: 14px 20px;
        color: #070707;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

        .menu-list a:hover {
            color: #f7f7f7;
        }

    .menu-list .active {
        color: #f7f7f7; /*active page*/
    }

/* Responsive styles - original 768px for max-width*/
/* Responsive styles - try 368px for max-width*/
/* max-width means only when the viewport width is 1024px  or less */
@media (max-width: 1024px) {

    .menu-toggle {
            /*display: block;*/ /* Show hamburger on mobile */
        }

        .menu-list {
            flex-direction: column;
            display: flex; /*none;*/ /* Hidden by default on mobile */
        }

            .menu-list.open {
                display: flex; /* Show when toggled */
            }

            .menu-list li {
                border-top: 1px solid #444;
            }
}

/* FOOTER */

.footer {
    text-align: center;
    padding: 1rem;
    background-color: rgb(112, 114, 128); /*Blue 25, 4+, L2*/
    border-top: 1px solid rgb(148, 155, 165);
    font-size: 0.9rem;
}

    .footer a {
        color: rgb(210,225,235);
        text-decoration: none;
        margin: 0 0.5rem;
    }

        .footer a:hover {
            text-decoration: underline;
            color: rgb(230,245,255);
        }