/* ── header-2026.css ───────────────────────────────────────────────────────
   Shared structural CSS for the header-2026 desktop sidebar.
   Include in both GoBrik and Buwana — no brand colours here.

   On viewports ≥ 1201px the main-menu overlay becomes a fixed 360px sidebar
   that slides in from the left and pushes #page-content to the right.
   Below 1201px the existing full-screen overlay behaviour is preserved.
-------------------------------------------------------------------------- */

@media screen and (min-width: 1201px) {

    /* The menu panel itself */
    #main-menu-overlay.sidebar-panel {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 360px !important;        /* fixed width, not 100% */
        display: flex !important;       /* always rendered; visibility driven by transform */
        flex-direction: column;
        transform: translateX(-360px);  /* hidden off-screen to the left */
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: hidden;
        overflow-x: hidden;
        z-index: 200;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    }

    #main-menu-overlay.sidebar-panel.sidebar-open {
        transform: translateX(0);       /* slides in */
    }

    /* Push the page content to the right when the sidebar is open */
    #page-content.sidebar-pushed {
        margin-left: 360px;
        max-width: calc(100vw - 360px);
        overflow-x: clip; /* clip does not create a scroll container — avoids double-scroll */
        transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Compress #main to fit within the remaining viewport width */
    #page-content.sidebar-pushed #main {
        max-width: 100%;
        box-sizing: border-box;
    }

    #page-content {
        transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Slide the fixed header to match the remaining viewport space */
    #header {
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    top 0.3s ease, height 0.3s ease, transform 0.3s ease;
    }

    body.sidebar-is-open #header {
        left: 360px;
        width: calc(100vw - 360px);
    }

    /* Remove the hamburger from layout (not just hidden) so logo fills the space */
    body.sidebar-is-open .side-menu-button {
        display: none;
    }

    /* Center the logo SVG within the remaining header space */
    body.sidebar-is-open #logo-title {
        justify-content: center;
    }

    /* X close button — top-right corner of the sidebar */
    #main-menu-overlay.sidebar-panel .sidebar-close-btn {
        display: flex;
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 201;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.4rem;
        line-height: 1;
        color: var(--text-color);
        padding: 6px 8px;
        border-radius: 6px;
        opacity: 0.7;
        transition: opacity 0.2s, background 0.2s;
    }

    #main-menu-overlay.sidebar-panel .sidebar-close-btn:hover {
        opacity: 1;
        background: rgba(128,128,128,0.15);
    }

    /* Hide the original overlay-style X button on desktop */
    #main-menu-overlay.sidebar-panel > .x-button:not(.sidebar-close-btn) {
        display: none;
    }

    /* Make the logo holder & content fill the column layout */
    #main-menu-overlay.sidebar-panel .overlay-content-settings {
        flex: 1;
        overflow-y: hidden;
        padding-top: 10px;
    }
}