/* ============================================================
   OJS JOURNAL HEADER — JTPA FINAL
   Banner: 1800 × 300 px
   Navigation: compact, single row
   ============================================================ */


/* ============================================================
   1. HEADER / BANNER AREA
   ============================================================ */

.pkp_structure_head {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #1E6292 !important;
    border: none !important;
}

.pkp_head_wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Banner container */
.pkp_site_name_wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #1E6292 !important;
}

.pkp_site_name {
    width: 100% !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}

.pkp_site_name > a.is_img {
    display: block !important;
    width: 100% !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.pkp_site_name > a.is_img img {
    display: block !important;

    width: 100% !important;
    max-width: 1800px !important;

    height: auto !important;
    max-height: none !important;

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

    object-fit: contain !important;
    object-position: center center !important;
}


/* ============================================================
   2. NAVIGATION BAR
   ============================================================ */

.pkp_site_nav_menu {
    display: grid !important;

    grid-template-columns:
        auto
        auto
        auto
        auto
        auto
        1fr !important;

    grid-template-rows: 42px !important;

    align-items: center !important;

    width: 100% !important;
    max-width: none !important;

    height: 42px !important;
    min-height: 42px !important;

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

    background: #1E6292 !important;

    position: relative !important;
    z-index: 1000 !important;
}


/* Remove OJS wrapper spacing */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user_wrapper {
    display: contents !important;
}


/* ============================================================
   3. PRIMARY MENU
   ============================================================ */

#navigationPrimary {
    display: contents !important;

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

    list-style: none !important;
}

#navigationPrimary > li {
    margin: 0 !important;
    padding: 0 !important;
}


/* Current */
#navigationPrimary > li:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
}


/* Archives */
#navigationPrimary > li:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
}


/* About */
#navigationPrimary > li:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
}


/* ============================================================
   4. USER MENU
   ============================================================ */

#navigationUser {
    display: contents !important;

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

    list-style: none !important;
}

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


/* Login */
#navigationUser > li:nth-child(2) {
    grid-column: 4 !important;
    grid-row: 1 !important;
}


/* Register */
#navigationUser > li:nth-child(1) {
    grid-column: 5 !important;
    grid-row: 1 !important;
}


/* ============================================================
   5. MENU TYPOGRAPHY
   Same appearance as Search
   ============================================================ */

#navigationPrimary > li > a,
#navigationUser > li > a,
.pkp_navigation_search_wrapper .pkp_search {
    font-family: Georgia, "Times New Roman", serif !important;

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1 !important;

    color: #ffffff !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}


/* ============================================================
   6. COMPACT MENU SPACING
   ============================================================ */

#navigationPrimary > li > a,
#navigationUser > li > a {
    display: flex !important;

    align-items: center !important;

    height: 42px !important;

    margin: 0 !important;

    padding: 0 14px !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
}


/* ============================================================
   7. SEARCH
   ============================================================ */

.pkp_navigation_search_wrapper {
    grid-column: 6 !important;
    grid-row: 1 !important;

    display: flex !important;

    justify-content: flex-end !important;
    align-items: center !important;

    width: 100% !important;
    height: 42px !important;

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

    border: none !important;
}

.pkp_navigation_search_wrapper .pkp_search {
    display: flex !important;

    align-items: center !important;

    height: 42px !important;

    margin: 0 !important;

    padding: 0 18px !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
}


/* ============================================================
   8. HOVER
   ============================================================ */

#navigationPrimary > li > a:hover,
#navigationPrimary > li > a:focus,
#navigationUser > li > a:hover,
#navigationUser > li > a:focus,
.pkp_navigation_search_wrapper .pkp_search:hover,
.pkp_navigation_search_wrapper .pkp_search:focus {
    background: rgba(255, 255, 255, 0.12) !important;

    color: #ffffff !important;

    text-decoration: none !important;
}


/* ============================================================
   9. ABOUT DROPDOWN
   ============================================================ */

#navigationPrimary > li > ul {
    background: #1E6292 !important;

    border: none !important;

    min-width: 180px !important;

    z-index: 9999 !important;
}

#navigationPrimary > li > ul > li > a {
    display: block !important;

    padding: 9px 14px !important;

    color: #ffffff !important;

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

    font-size: 16px !important;

    font-weight: 400 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;
}

#navigationPrimary > li > ul > li > a:hover {
    background: rgba(255, 255, 255, 0.12) !important;

    color: #ffffff !important;
}


/* ============================================================
   10. REMOVE EXTRA OJS SPACING
   ============================================================ */

.pkp_navigation_primary,
.pkp_navigation_user {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_primary > li,
.pkp_navigation_user > li {
    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   11. TABLET
   ============================================================ */

@media (max-width: 1000px) and (min-width: 769px) {

    #navigationPrimary > li > a,
    #navigationUser > li > a,
    .pkp_navigation_search_wrapper .pkp_search {
        padding-left: 9px !important;
        padding-right: 9px !important;
        font-size: 15px !important;
    }
}


/* ============================================================
   12. MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .pkp_site_name {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pkp_site_name > a.is_img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pkp_site_name > a.is_img img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

    .pkp_site_nav_menu {
        display: flex !important;

        flex-direction: column !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
    }

    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper,
    .pkp_navigation_user_wrapper {
        display: block !important;

        width: 100% !important;
    }

    #navigationPrimary,
    #navigationUser {
        display: block !important;

        width: 100% !important;
    }

    #navigationPrimary > li,
    #navigationUser > li {
        display: block !important;

        width: 100% !important;
    }

    #navigationPrimary > li > a,
    #navigationUser > li > a {
        width: 100% !important;

        height: 38px !important;

        padding: 0 14px !important;

        font-size: 16px !important;
    }

    .pkp_navigation_search_wrapper {
        display: block !important;

        width: 100% !important;

        height: 38px !important;
    }

    .pkp_navigation_search_wrapper .pkp_search {
        width: 100% !important;

        height: 38px !important;

        padding: 0 14px !important;
    }
}