/**
 * TITLE SECTION NAVBAR FIX
 * Ensures title sections stay below navbar and are never affected by sidebar
 * Sidebar opens/closes as overlay without affecting title section position
 */

/* Navbar - Always at top, never moves */
.navbar,
nav,
#navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Never affected by sidebar */
    transform: none !important;
    transition: none !important;
}

@media (max-width: 768px) {
    .navbar,
    nav,
    #navigation {
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }
}

/* Sidebar - True overlay, never affects layout */
.sidebar {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 280px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    z-index: 10001 !important;
    /* Never affects document flow */
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    /* Never shifts navbar or content */
    transform: none !important;
}

.sidebar.open,
.sidebar.active {
    right: 0 !important;
    pointer-events: auto !important;
    /* Still doesn't affect layout */
    transform: none !important;
}

/* Title Sections - Always below navbar, never affected by sidebar */
.section-title,
section h2.section-title,
section .section-title,
.container .section-title,
section > h2:first-child {
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 16px !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;
    text-align: center !important;
    /* Never shift when sidebar opens/closes */
    transform: none !important;
    transition: none !important;
    left: auto !important;
    right: auto !important;
    /* Always below navbar */
    z-index: 1 !important;
}

/* Sections - Proper spacing from navbar */
section,
.section-with-graphics,
section[id],
section[class*="-section"] {
    position: relative !important;
    margin-top: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    /* Account for fixed navbar */
    margin-top: 0 !important;
    /* Never shift when sidebar opens */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
}

/* First section - Account for navbar height */
section:first-of-type,
.hero-section:first-of-type,
#home:first-of-type,
main > section:first-child,
.hero {
    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,
    .hero {
        margin-top: 56px !important;
        padding-top: 30px !important;
    }
}

/* Ensure sidebar state never affects sections or titles */
body.sidebar-open,
body:has(.sidebar.active),
body:has(.sidebar.open) {
    /* Body can have overflow hidden, but content doesn't shift */
    overflow-x: hidden !important;
}

body.sidebar-open section,
body:has(.sidebar.active) section,
body:has(.sidebar.open) section,
body.sidebar-open .section-title,
body:has(.sidebar.active) .section-title,
body:has(.sidebar.open) .section-title {
    /* Never shift */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    transform: none !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
}

/* Container - Never shifts */
.container {
    position: relative !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    max-width: 1200px !important;
    /* Never affected by sidebar */
    transform: none !important;
    transition: none !important;
}

body.sidebar-open .container,
body:has(.sidebar.active) .container,
body:has(.sidebar.open) .container {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: 100% !important;
    transform: none !important;
}

/* Main content - Never shifts */
main,
#main-content {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    /* Never affected by sidebar */
    transform: none !important;
    transition: none !important;
}

body.sidebar-open main,
body:has(.sidebar.active) main,
body:has(.sidebar.open) main,
body.sidebar-open #main-content,
body:has(.sidebar.active) #main-content,
body:has(.sidebar.open) #main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    transform: none !important;
}

/* Overlay - Never affects layout */
.overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s, visibility 0.3s !important;
    pointer-events: none !important;
    /* Never affects content */
    margin: 0 !important;
    padding: 0 !important;
}

.overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    section,
    .section-with-graphics {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    .section-title {
        margin-bottom: 12px !important;
    }
}