/* Main orange navigation */

    nav
    {
        background-color: #FF8003;
        margin: 0;
        padding: 0 2rem;
    }

    nav ul
    {
        display: flex;
        flex-wrap: wrap; /* Allow list items to wrap */
        font-size: 0.8rem;
        gap: 0.8rem;
        list-style-type: none;
        margin: 0;
        padding: 0.6rem 0;
    }

    nav ul li a
    {
        /* background: yellow; */
        color: #921000;
        display: inline-block;
        padding: 0;
        text-decoration: none;
        transition: color 0.3s ease-in-out;
        white-space: nowrap; /* Prevent text from wrapping */
    }

    /* nav ul li:last-child { margin-left: auto; } */
    nav ul li:last-child a { color: white; font-weight: bold; }
    nav ul li:last-child a:hover { color: #921000; }
    nav ul li a:hover, nav ul li a.on { color: white; }

    /* Red login / logout navigation */

    div.red { background-color: #921000; display: flex;  font-size: 0.8rem; }
    div.red ul { display: inline-flex; gap: 1rem; justify-content: space-between; list-style: none; }
    div.red ul li a { color: white; font-weight: normal; }
    div.red ul li:first-child a { padding-right: 0.8rem; }
    div.red ul li a:hover { color: #FF8003;}
    div.red ul:last-child { justify-content: flex-end; }

    /* Mobile Navigation */
    @media screen and (max-width: 768px) {
        .red {
            flex-direction: column;
            /*align-items: stretch;*/
            position: relative;
        }

        .red ul {
            display: none; /* Hide menu initially */
            flex-direction: column;
            width: 100%;
            padding: 0;
            background-color: #921000;
        }

        .red ul.show {
            display: flex; /* Show menu when toggled */
        }

        .red ul li {
            text-align: center;
            padding: 0.5rem 0;
        }

        .red ul li a {
            display: block;
            padding: 0.5rem 0;
        }

        .menu-toggle {
            display: block;
            width: 100%;
            text-align: center;
            background-color: #FF8003;
            color: white;
            padding: 0.8rem;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            border: none;
        }
    }

    /* Hide Choose Logs button on larger screens */
    @media screen and (min-width: 769px) {
        .menu-toggle {
            display: none;
        }
        .red ul {
            display: none;
        }

    }

    @media screen and (max-width: 769px)
    {
        div.red ul
        {
            gap: 0 !important;
            margin: 0;
        }

        div.red ul li
        {
            margin: 0 !important;
            padding: 0 !important;
        }
    }