/**
 * SIDEBAR OVERLAY FIX
 * Ensures sidebar is a true overlay that doesn't take up space
 * Main content should never shift when sidebar opens
 */

/* Ensure sidebar is always an overlay - never affects layout */
.sidebar {
    position: fixed !important;
    /* Ensure it doesn't affect document flow */
    margin: 0 !important;
    padding: 0 !important;
    /* Don't take up space when closed */
    pointer-events: none !important;
}

.sidebar.open,
.sidebar.active {
    pointer-events: auto !important;
}

/* Ensure main content never shifts */
body,
main,
.content,
.container,
.wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transition: none !important;
}

/* Ensure body doesn't get overflow hidden that affects layout */
body.sidebar-open,
body:has(.sidebar.active),
body:has(.sidebar.open) {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Overlay should never affect layout */
.overlay {
    position: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.overlay.active {
    pointer-events: auto !important;
}

/* Ensure navbar doesn't shift */
.navbar,
.nav-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
}

/* Ensure hero section doesn't shift */
.hero,
#home {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* All sections should never shift */
section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    position: relative !important;
    /* Ensure sections stay in place regardless of sidebar */
    transform: none !important;
    transition: none !important;
}

/* Section titles - Always below navbar, never affected by sidebar */
.section-title,
section h2.section-title,
section .section-title,
.container .section-title {
    position: relative !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    /* Never shift when sidebar opens */
    transform: none !important;
    transition: none !important;
    left: auto !important;
    right: auto !important;
}

/* First section after navbar - Account for fixed navbar */
section:first-of-type,
.hero-section:first-of-type,
#home:first-of-type,
main > section:first-child {
    margin-top: 60px !important;
    padding-top: 40px !important;
}

@media (max-width: 768px) {
    section:first-of-type,
    .hero-section:first-of-type,
    #home:first-of-type,
    main > section:first-child {
        margin-top: 56px !important;
        padding-top: 30px !important;
    }
}

/* Ensure sidebar state doesn't affect any content */
body.sidebar-open section,
body:has(.sidebar.active) section,
body:has(.sidebar.open) section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    transform: none !important;
    position: relative !important;
}

body.sidebar-open .section-title,
body:has(.sidebar.active) .section-title,
body:has(.sidebar.open) .section-title {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    position: relative !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    body,
    main,
    .content,
    .container,
    .wrapper,
    .hero,
    #home,
    section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    body.sidebar-open section,
    body:has(.sidebar.active) section,
    body:has(.sidebar.open) section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
}