/* ============================================================
   CHMSU PRESS - OJS 3.3 HEADER
   ============================================================

   DESKTOP LAYOUT

   CHMSU PRESS LOGO                         Register | Login

   Journals   About                    [ Search ] [Search]

   ============================================================ */


/* ------------------------------------------------------------
   1. MAIN HEADER
   ------------------------------------------------------------ */

#headerNavigationContainer {
    position: relative !important;
}


/* ------------------------------------------------------------
   2. USER NAVIGATION
   Register / Login / Profile
   Positioned independently so it does not push logo downward
   ------------------------------------------------------------ */

#headerNavigationContainer > .container-fluid:first-child {
    position: absolute !important;
    top: 8px !important;
    right: 15px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 1000 !important;
}


/* Remove Bootstrap row margins */

#headerNavigationContainer > .container-fluid:first-child .row {
    margin: 0 !important;
}


/* User navigation list */

#headerNavigationContainer #navigationUser {
    float: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* User navigation links */

#headerNavigationContainer #navigationUser > li > a {
    margin: 0 !important;
}


/* ------------------------------------------------------------
   3. LOGO ROW
   ------------------------------------------------------------ */

#headerNavigationContainer .navbar-header {
    float: none !important;

    display: block !important;

    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* Site name / logo container */

#headerNavigationContainer .site-name {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    /*
     * Small top padding keeps logo from touching browser edge.
     * Right padding reserves room for Login/Register/Profile.
     */
    padding: 5px 220px 10px 0 !important;

    text-align: left !important;
}


/* Remove Bootstrap navbar-brand defaults */

#headerNavigationContainer .navbar-brand {
    float: none !important;

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Logo */

#headerNavigationContainer .navbar-brand-logo {
    float: none !important;

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


#headerNavigationContainer .navbar-brand-logo img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 120px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ------------------------------------------------------------
   4. DESKTOP NAVIGATION
   ------------------------------------------------------------ */

@media (min-width: 768px) {

    /*
     * Navigation becomes its own full-width row.
     *
     * FLEX:
     * Main menu = left
     * Search    = right
     */

    #headerNavigationContainer #nav-menu {
        float: none !important;
        clear: both !important;

        display: flex !important;

        width: 100% !important;

        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* --------------------------------------------------------
       LEFT SIDE - MAIN NAVIGATION
       -------------------------------------------------------- */

    #headerNavigationContainer #main-navigation {
        float: none !important;

        display: block !important;

        flex: 0 0 auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #headerNavigationContainer #main-navigation > li {
        float: left !important;
    }


    /* --------------------------------------------------------
       RIGHT SIDE - SEARCH
       -------------------------------------------------------- */

    #headerNavigationContainer #nav-menu > .pull-md-right {
        float: none !important;

        display: flex !important;

        align-items: center !important;

        /*
         * This pushes search all the way to the right.
         */
        margin-left: auto !important;
    }


    /* Search form */

    #headerNavigationContainer .navbar-form {
        float: none !important;

        display: flex !important;

        align-items: center !important;

        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;

        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    /* Search field */

    #headerNavigationContainer .navbar-form .form-group {
        margin-bottom: 0 !important;
    }


    /* Vertically align search button */

    #headerNavigationContainer .navbar-form .btn {
        vertical-align: middle !important;
    }
}


/* ------------------------------------------------------------
   5. MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    /*
     * Return user navigation to normal document flow
     * on small screens.
     */

    #headerNavigationContainer > .container-fluid:first-child {
        position: static !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 5px 15px !important;
    }


    #headerNavigationContainer #navigationUser {
        float: right !important;
    }


    /*
     * Logo no longer needs reserved space for
     * Login/Register/Profile.
     */

    #headerNavigationContainer .site-name {
        width: 100% !important;

        padding: 5px 0 10px 0 !important;

        text-align: left !important;
    }


    /*
     * Responsive logo
     */

    #headerNavigationContainer .navbar-brand-logo img {
        width: auto !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: 90px !important;
    }


    /*
     * Let Bootstrap control collapsed navigation.
     * Do NOT force display:block here.
     */

    #headerNavigationContainer #nav-menu {
        clear: both !important;
    }


    /*
     * Reset desktop flex behavior.
     */

    #headerNavigationContainer #main-navigation {
        float: none !important;
    }


    #headerNavigationContainer #main-navigation > li {
        float: none !important;
    }


    /*
     * Search behaves normally inside collapsed menu.
     */

    #headerNavigationContainer #nav-menu > .pull-md-right {
        float: none !important;

        width: 100% !important;

        margin: 0 !important;
    }


    #headerNavigationContainer .navbar-form {
        float: none !important;

        width: 100% !important;
    }
}