/*
 * sidebar-fix.css
 * Add this AFTER main.css in your HTML <head>.
 * Keeps the left sidebar menu visible at 1025px–1280px
 * without modifying main.css.
 */

@media screen and (min-width: 1025px) and (max-width: 1280px) {

    /* Revert sidebar from fixed/overlay back to normal in-flow position */
    #sidebar {
        position: relative !important;
        height: auto !important;
        top: auto !important;
        left: auto !important;
        z-index: auto !important;
        box-shadow: none !important;
        width: 20em !important;
        flex-shrink: 0 !important;
    }

    /* Make sure sidebar is never pushed off-screen (inactive state) */
    #sidebar.inactive {
        margin-left: 0 !important;
        box-shadow: none !important;
    }

    /* Inner scroll container should be normal flow, not absolute */
    #sidebar > .inner {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
        width: 20em !important;
    }

    /* Hide the hamburger toggle button — sidebar is always visible */
    #sidebar .toggle {
        display: none !important;
    }

    /* Restore the flex wrapper so sidebar and main sit side by side */
    #wrapper {
        display: flex !important;
        flex-direction: row-reverse !important;
    }

    /* Ensure .hidden_mobile elements (like the sidebar itself) are shown */
    .hidden_mobile {
        display: block !important;
    }

    /* Header top padding: keep the smaller mobile value since toggle is gone */
    #header {
        padding-top: 2em !important;
    }

}