/* ============================================================
   HUJAHS HEADER
   OJS 3.5.0.1 / Bootstrap3

   Desktop:
   JAHS logo LEFT
   Journal name CENTER
   Navigation BELOW
   ============================================================ */


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

#headerNavigationContainer {
    background: linear-gradient(
        to right,
        #ed8135 0%,
        #f2a064 18%,
        #f9d4b9 35%,
        #ffffff 50%,
        #f9d4b9 65%,
        #f2a064 82%,
        #ed8135 100%
    );
}

#headerNavigationContainer .navbar-header {
    background: transparent;
}

/* ------------------------------------------------------------
   2. HEADER / LOGO AREA
   ------------------------------------------------------------ */

#headerNavigationContainer .navbar-header {
    position: relative;
    width: 100%;
    min-height: 140px;
    margin: 0;
    padding: 0;
}


/* ------------------------------------------------------------
   3. JAHS LOGO — LEFT
   ------------------------------------------------------------ */

#headerNavigationContainer .navbar-brand {
    position: absolute;

    left: 20px;
    top: 10px;

    width: 140px;
    height: 140px;

    margin: 0;
    padding: 0;

    display: block;

    z-index: 10;

    font-size: 0;
    line-height: 0;
}


#headerNavigationContainer .navbar-brand img {
    width: 145px;
    height: 145px;

    max-width: none;
    max-height: none;

    object-fit: contain;

    display: block;

    margin: 0;
    padding: 0;
}


/* ------------------------------------------------------------
   4. CENTERED JOURNAL NAME
   ------------------------------------------------------------ */

#headerNavigationContainer .navbar-header::after {

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 100%;

    box-sizing: border-box;

    text-align: center;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 34px;
    font-weight: 700;

    line-height: 1.35;

    color: #111111;

    padding-left: 190px;
    padding-right: 190px;

    pointer-events: none;

    z-index: 1;

    white-space: pre-line;

    content:
        "Hajjah University Journal\A
         of Administrative and Human Sciences";
}


/* ------------------------------------------------------------
   5. ENGLISH
   ------------------------------------------------------------ */

html[lang="en"] #headerNavigationContainer .navbar-header::after,
html[lang^="en"] #headerNavigationContainer .navbar-header::after {

    content:
        "Hajjah University Journal\A
         of Administrative and Human Sciences";
}


/* ------------------------------------------------------------
   6. ARABIC
   ------------------------------------------------------------ */

html[lang="ar"] #headerNavigationContainer .navbar-header::after,
html[lang^="ar"] #headerNavigationContainer .navbar-header::after {

    content:
        "مجلة جامعة حجة\A
         للعلوم الإدارية والإنسانية";

    font-family:
        "Noto Naskh Arabic",
        "Amiri",
        "Tahoma",
        Calibri,
        Calibri;

    direction: rtl;
}


/* ------------------------------------------------------------
   7. NAVIGATION — IMPORTANT
   ------------------------------------------------------------ */

/*
   Do NOT use "clear: both" here.
   Bootstrap3 must control the navigation normally.
*/

#headerNavigationContainer .navbar-collapse {
    position: relative;
    z-index: 20;
}


/* Primary navigation */

#headerNavigationContainer .pkp_navigation_primary {
    position: relative;
    z-index: 20;
}


/* User navigation */

#headerNavigationContainer .pkp_navigation_user {
    position: relative;
    z-index: 20;
}


/* Navigation links */

#headerNavigationContainer .navbar-nav {
    position: relative;
    z-index: 20;
}


/* ------------------------------------------------------------
   8. TABLET
   ------------------------------------------------------------ */

@media (max-width: 991px) {

    #headerNavigationContainer .navbar-header {
        min-height: 150px;
    }

    #headerNavigationContainer .navbar-brand {

        left: 15px;
        top: 10px;

        width: 120px;
        height: 120px;
    }

    #headerNavigationContainer .navbar-brand img {

        width: 120px;
        height: 120px;
    }

    #headerNavigationContainer .navbar-header::after {

        font-size: 27px;

        padding-left: 155px;
        padding-right: 155px;
    }
}


/* ------------------------------------------------------------
   9. MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    #headerNavigationContainer .navbar-header {

        min-height: 235px;

        text-align: center;
    }


    /* Logo */

    #headerNavigationContainer .navbar-brand {

        position: relative;

        left: auto;
        top: auto;

        width: 105px;
        height: 105px;

        margin: 10px auto 0 auto;
    }


    #headerNavigationContainer .navbar-brand img {

        width: 105px;
        height: 105px;
    }


    /* Journal title */

    #headerNavigationContainer .navbar-header::after {

        top: 145px;

        transform: none;

        font-size: 21px;

        line-height: 1.35;

        padding-left: 15px;
        padding-right: 15px;
    }


    /* Make sure the mobile menu remains visible */

    #headerNavigationContainer .navbar-toggle {

        position: relative;
        z-index: 50;
    }


    #headerNavigationContainer .navbar-collapse {

        position: relative;
        z-index: 50;
    }
}


/* ------------------------------------------------------------
   10. SMALL MOBILE
   ------------------------------------------------------------ */

@media (max-width: 480px) {

    #headerNavigationContainer .navbar-header {

        min-height: 225px;
    }

    #headerNavigationContainer .navbar-brand {

        width: 90px;
        height: 90px;
    }

    #headerNavigationContainer .navbar-brand img {

        width: 90px;
        height: 90px;
    }

    #headerNavigationContainer .navbar-header::after {

        top: 125px;

        font-size: 19px;

        padding-left: 10px;
        padding-right: 10px;
    }
}