/* LaRecipe custom styles to work with guest layout */

/* Account for guest navigation header height (approximately 80px with banner + nav) */
.fixed.pin-t.pin-x {
    top: 80px !important; /* Push down LaRecipe nav below guest nav */
}

/* Adjust sidebar positioning - make it sticky and scrollable */
.sidebar {
    position: fixed !important;
    /*top: 144px !important;  Below guest nav (80px) + LaRecipe nav (64px) */
    top: 120px !important;
    left: 0 !important;
    width: 280px !important; /* Set a fixed width for the sidebar */
    height: calc(100vh - 144px) !important; /* Full height minus both navs */
    overflow-y: auto !important; /* Add scrollbox to sidebar */
    overflow-x: hidden !important;
    z-index: 25 !important;
    background: white !important;
    border-right: 1px solid #e5e7eb !important;
    padding: 1rem !important;
}

/* Adjust main content area to account for fixed sidebar */
.documentation {
    margin-left: 280px !important; /* Match sidebar width */
    margin-top: 0 !important;
    padding-top: 120 !important; /* Account for both navs */
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    min-height: calc(100vh - 144px) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .fixed.pin-t.pin-x {
        top: 80px !important; /* Adjust for guest nav only */
    }
    
    /* Hide sidebar by default on mobile */
    .sidebar {
        position: fixed !important;
        top: 144px !important; /* Below guest nav + LaRecipe nav */
        left: -0px !important;
        transition: left 0.3s ease !important;
        z-index: 35 !important;
        height: calc(100vh - 144px) !important;
    }
    
    /* Show sidebar when LaRecipe toggle is active (Vue.js controlled) */
    .sidebar.is-visible,
    [v-cloak] .sidebar.is-visible {
        left: 0 !important;
    }
    
    /* Also handle the Vue.js sidebar state */
    body.sidebar-opened .sidebar {
        left: 0 !important;
    }
    
    .documentation {
        margin-left: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 144px !important; /* Account for both navs */
    }
    
    /* Make sure the toggle switch is visible on mobile */
    .switch {
        display: block !important;
    }
    
    /* Add overlay when sidebar is open on mobile */
    body.sidebar-opened::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 30;
        pointer-events: auto;
    }
}

/* Ensure proper z-index ordering */
.fixed.pin-t.pin-x {
    z-index: 30 !important; /* Below guest nav (z-40) but above content */
}

/* Fix any overflow issues */
body {
    overflow-x: hidden;
}

/* When sidebar is hidden via LaRecipe toggle */
.sidebar.is-hidden {
    left: -280px !important;
    transition: left 0.3s ease !important;
}

/* Adjust documentation area when sidebar is hidden */
.documentation.expanded {
    margin-left: 0 !important;
    transition: margin-left 0.3s ease !important;
}

/* Hide the right section/sidebar (help articles) */
.documentation > ul:first-of-type,
.documentation .right-section,
.documentation aside:last-child,
.documentation .toc,
.documentation .table-of-contents {
    display: none !important;
}

/* Adjust main documentation content width when right section is hidden */
.documentation .main-content,
.documentation > div:not(.sidebar) {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    padding-right: 2rem !important;
}

/* Ensure documentation content doesn't overlap with sidebar */
.documentation {
    margin-left: 300px !important; /* Adjust based on sidebar width */
}

@media (max-width: 768px) {
    .documentation {
        margin-left: 0 !important;
    }
}