/* Desktop: Sidebar always visible, content pushed right */
@media (min-width: 768px) {
    .sidebar {
        left: 0;
        width: 240px;
        padding: 30px 20px;
        overflow-y: auto;
    }
    .hero-full-wrapper {
        margin-left: 240px;
        transition: margin-left 0.2s linear;
    }
    .sidebar .nav,
    .sidebar .nav-footer {
        margin-top: 20px;
    }
    .sidebar .nav li,
    .sidebar .nav-footer p {
        margin-bottom: 10px;
    }
}

/* Mobile: Sidebar hidden by default, content not pushed */
@media (max-width: 767px) {
    .sidebar {
        left: -240px;
        transition: left 0.2s linear;
        width: 240px;
        padding: 20px;
        overflow-y: auto;
    }
    .sidebar.open {
        left: 0;
    }
    body.sidebar-open .hero-full-wrapper {
        margin-left: 240px;
        transition: margin-left 0.2s linear;
    }
    body .hero-full-wrapper {
        margin-left: 0;
        transition: margin-left 0.2s linear;
    }
}

/* Additional fix to ensure proper z-index layering */
.sidebar {
    z-index: 1000;
}

.hero-full-wrapper {
    z-index: 1;
}