/* ================================================================
   1. STOP BLOCKSY & WORDPRESS GAPS (Force Edge-to-Edge)
   ================================================================ */

/* 1A. Break out of Blocksy's "Normal" inherited container */
.site-main .ct-container-full[data-content="normal"],
.site-main .ct-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important; 
    padding-bottom: 0 !important;
    --theme-content-vertical-spacing: 0px !important;
}

/* 1B. Destroy WordPress Gutenberg's internal layout constraints */
.entry-content.is-layout-constrained,
.entry-content.is-layout-constrained > * {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

/* 1C. Reset the block editor columns wrapping your shortcode */
.wp-block-columns,
.wp-block-column {
    margin: 0 !important; 
    padding: 0 !important;
    max-width: 100% !important; 
    flex-basis: 100% !important;
}

/* ================================================================
   1D. FULL BLEED BREAKOUT (Force Edge-to-Edge Screen Width)
   ================================================================ */
#gp-page {
    /* Break out of all WordPress/Theme centered containers */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 0 !important;
    
    /* Keep the strict flexbox layout */
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

/* ================================================================
   2. DESKTOP BASE LAYOUT (Strict Flexbox)
   ================================================================ */
#gp-page {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 !important; 
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

/* Strict Sidebar Lock (Div instead of Aside) */
#gp-page-sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    flex: 0 0 250px !important; /* Forces it to stay exactly 250px */
    background-color: #2c3e50 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 100 !important;
}

/* Ensure the left menu container takes full width of the sidebar */
.gp-left-menu-container {
    width: 100% !important;
    min-width: 100% !important;
}

/* Strict Right Panel Lock */
#gp-page-right {
    width: calc(100% - 250px) !important;
    flex: 1 1 auto !important;
    min-width: 0 !important; /* Prevents right panel from pushing sidebar out */
    display: flex !important;
    flex-direction: column !important;
    background: #f8fafc;
}

/* ================================================================
   3. HEADER ALIGNMENT FIX
   ================================================================ */
#gp-page-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #fff !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.gp-header-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
}

.gp-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.gp-header-left h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

/* Hide Mobile Buttons on Desktop */
.gp-mobile-toggle, .gp-sidebar-close-btn { 
    display: none !important; 
}

        /* ================================================================
   4. MOBILE LAYOUT (Menu Pushes Header & Content Down)
   ================================================================ */
@media (max-width: 768px) {
    #gp-page {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    /* 1. SIDEBAR (Menu) - Sits at the absolute top when opened */
    #gp-page-sidebar {
        display: none !important; 
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; 
        
        /* THE MAGIC FIX: This removes the 250px height lock from desktop! */
        flex: none !important; 
        
        position: relative !important; /* Normal flow, takes up physical space */
        background-color: #2c3e50 !important;
        z-index: 100 !important;
        order: 1 !important; /* Force to be the first item vertically */
    }

    #gp-page-sidebar.active {
        display: block !important;
    }

    /* Release the internal scrollbar so the menu fully expands */
    .gp-left-menu-container {
        max-height: none !important;
        overflow: visible !important;
    }

    /* 2. RIGHT PANEL - Sits directly below the Menu */
    #gp-page-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        position: relative !important;
        order: 2 !important; /* Force to be the second item vertically */
        flex: 1 1 auto !important;
    }

    /* 3. HEADER (Logout Bar) - Guaranteed Visibility */
    #gp-page-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
        width: 100% !important;
        min-height: 65px !important; 
        background: #ffffff !important;
        border-bottom: 2px solid #e2e8f0 !important;
        z-index: 50 !important;
        padding: 10px 15px !important;
        flex-shrink: 0 !important; /* Forbids the browser from squishing it */
    }

    /* 4. MAIN CONTENT - Bottom layer */
    #gp-page-main {
        display: block !important;
        width: 100% !important;
        flex-grow: 1 !important;
        padding-top: 20px !important;
        background: #f8fafc !important;
    }

    /* Mobile Buttons */
    .gp-mobile-toggle { 
        display: inline-flex !important; 
        background: transparent !important; 
        color: #333 !important;
        border: none !important; 
        font-size: 22px !important; 
        cursor: pointer !important;
    }

    .gp-sidebar-close-btn { 
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        text-align: left !important;
        padding: 15px 20px !important;
        background: #1e2b3a !important;
        color: #ef4444 !important; /* Red X */
        border: none !important;
        font-size: 18px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }
}