:root {
    --gblue: #4889F4;
    --gred: #EB493B;
    --gyellow: #FBBE0D;
    --ggreen: #3AAB58;
    --cblue: #005073;
    --charcoal: #333;
    --darkgray: #808080;
  }

/* Navigation styles */
header {
    position: fixed;
    top:0;
    border-bottom: solid;
    border-width: thin;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    width: 100%;
    background: white;
    z-index: 99;
}

.logo {
    height:3.5rem;
}

.mobile-menu {
    display: none;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 200px;
    background-color: var(--charcoal);
    color: #fff;
    padding-top: 20px;
    margin-top: 3.8rem;
    z-index: 1; /* Ensure sidebar is behind the mobile menu toggle */
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    border-bottom: solid;
    border-width: thin;
    border-color: #555;
}

.sidebar li a, .sidebar .nav-drawer-toggle {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    transition: background-color 0.3s;
}

.sidebar li a:hover, .sidebar .nav-drawer-toggle:hover {
    background-color: #555;
}

.sidebar li a.active {
    background-color: var(--gblue);
    color: white;
}

.subactive {
    background-color: #555;
    color: white;
}

/* Nav Drawer (Collapsible) */
.sidebar .nav-drawer {
    display: none;
}

.sidebar .nav-drawer.open {
    background-color: #28292A;
    display: block;
}


.sidebar .nav-drawer li a {
    padding-left: 30px; /* Indent submenu items */
}

.nav-drawer-toggle {
    cursor: pointer;
}

/* Content area
.content {
    margin-left: 250px;
    padding: 20px;
    margin-top: 20px;
} */

/* Mobile styles */
@media (max-width: 768px) {
    .logo {
        height:2.5rem;
    }
    .sidebar {
        display: none;
        width: 100%;
        height: auto;
        position: relative;
    }

    /* .content {
        margin-left: 0;
    } */

    /* Mobile menu toggle */
    .mobile-menu-toggle {
        font-size: 2rem !important;
        font-weight: 600;
        display: block;
        position: fixed;
        top: 0.5rem;
        left: 0.5rem;
        z-index: 100; 
        background: none;
        border: none;
        font-size: 24px;
    }

    /* Fullscreen mobile menu */
    .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--charcoal);
        color: #fff;
        z-index: 5000; /* Ensure menu is on top of everything */
        padding-top: 80px;
        text-align: center;
    }

    .mobile-menu.open {
        display: block;
        overflow: scroll;
        scrollbar-width: thin;;
    }

    .mobile-menu ul {
        list-style: none;
        padding: 0;
    }

    .mobile-menu li {
        border-bottom: solid;
        border-width: thin;
        border-color: #555;
    }

    
    .mobile-menu li a, .mobile-menu .nav-drawer-toggle {
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 10px 15px;
        transition: background-color 0.3s;
    }
    
    .mobile-menu li a:hover, .mobile-menu .nav-drawer-toggle:hover {
        background-color: #555;
    }
    
    .mobile-menu li a.active {
        background-color: var(--gblue);
        color: white;
    }
    
    .subactive {
        background-color: #555;
        color: white;
    }

    .mobile-menu li a, .mobile-menu .nav-drawer-toggle {
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 15px;
        font-size: 2em;
    }
    .mobile-menu .nav-drawer {
        display: none;
    }

    .mobile-menu .nav-drawer.open {
        background-color: #28292A;
        display: block;
    }

    /* Close button for mobile menu */
    .mobile-menu-close {
        font-size: 3rem !important;
        font-weight: 600;
        position: absolute;
        top: 0;
        left: 20px;
        font-size: 2em;
        color: #fff;
        cursor: pointer;
    }
}