.content-area {
    margin-left: 220px;
    padding: 2rem;
}
/* Mobile layout */

@media (max-width: 768px) {
    .content-area {
        margin-left: 0;
    }
}
/* Default: sidebar on the left */ .navbar-container {
    height: 100vh;
    width: 220px;
    position: fixed;
    left: 0;
    top: 0;
    padding: 1rem;
}
/* Hide mobile top bar on desktop */

.mobile-nav {
    display: none;
}
/* Mobile styles */

@media (max-width: 768px) { /* Turn navbar into a top bar */

    .navbar-container {
        position: relative;
        width: 100%;
        height: auto;
    }
    /* Show mobile top bar */

    .mobile-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    /* Hide menu list by default */

    .menu-list {
        display: none;
        margin-top: 1rem;
    }
        /* Show when Alpine toggles it */

        .menu-list.open {
            display: block;
        }
    /* Hamburger button styling */

    .hamburger {
        background: none;
        border: none;
        font-size: 1.8rem;
        cursor: pointer;
    }
}