/* res/style_mobile.css */

@media screen and (max-width: 920px) {
    /* 1. Break the 900px lock on mobile */
    div#content, div#about, #header ul {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ============================================== */
    /* FLEXBOX MAGIC: REORDER THE HTML FOR MOBILE     */
    /* ============================================== */
    div#main-bis {
        display: flex !important;
        flex-direction: column !important;
    }

    /* ORDER 1: Articles and Content jump to the very top! */
    div#page {
        order: 1 !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* ORDER 2: Right Menu (Actualités list & Login) comes second */
    div#menu_droit {
        order: 2 !important;
        float: none !important;
        width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* ORDER 3: Left Menu (Main links) drops to the bottom */
    div#menu {
        order: 3 !important;
        float: none !important;
        width: 100% !important;
        margin: 0 auto 20px auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* ============================================== */
    /* HIDE UNNECESSARY MOBILE ELEMENTS               */
    /* ============================================== */
    #calendrier {
        display: none !important; /* Hides Calendar on mobile */
    }

    /* ============================================== */
    /* HEADER & IMAGE FIXES                           */
    /* ============================================== */
    #header ul {
        height: auto !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;

        padding-top: 16% !important;
        padding-bottom: 10px !important;
        /* Kills the browser's default 40px bullet-point indent */
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center;
    }

    #header_menu li {
        float: none !important;
        display: inline-block !important;
        /* Creates even 3px spacing between all buttons */
        margin: 5px 3px !important;
    }

    /* Kills the legacy 50px right-margin on Clan M. */
    li#morsultimaratio {
        margin: 5px 3px !important;
    }

    img, textarea, pre.code, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
}