/*
==========================================================
EAM OJS HEADER REDESIGN
Layout inspired by the supplied reference:
1. Top utility bar (Register / Login)
2. Journal banner image
3. Horizontal navigation bar

EAM palette:
Forest Green #173D32
Deep Green  #214A3A
Gold        #B9A16C
Ivory       #F7F7F0

Banner image: 1500 x 250 px, aspect ratio 6:1
==========================================================
*/


/* ======================================================
   1. OUTER HEADER FRAME
====================================================== */

.pkp_structure_head {
    width: 100% !important;
    background: #173D32 !important;
    padding: 0 10px 10px !important;
    border-bottom: 3px solid #B9A16C !important;
    box-sizing: border-box !important;
}

.pkp_head_wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}


/* ======================================================
   2. TOP UTILITY BAR: REGISTER / LOGIN
====================================================== */

.pkp_navigation_user_wrapper {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    background: #F7F7F0 !important;
    border-bottom: 1px solid #D8DFD3 !important;
    box-sizing: border-box !important;
}

.pkp_navigation_user {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-height: 30px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: right !important;
    list-style: none !important;
}

.pkp_navigation_user > li {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user > li > a {
    display: block !important;
    padding: 6px 11px !important;
    color: #173D32 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: color .2s ease, background .2s ease;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #FFFFFF !important;
    background: #214A3A !important;
}


/* ======================================================
   3. JOURNAL BANNER AREA
====================================================== */

.pkp_site_name_wrapper {
    order: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 10px 10px 0 !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}

.pkp_site_name {
    display: block !important;
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 0 !important;
}

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

.pkp_site_name img,
.pkp_site_name a.is_img img,
img[src*="pageHeaderLogoImage_en_US.jpg"],
img[src*="EAM_Header_1500x250"],
img[src*="EAM_header_redesign"] {
    display: block !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    aspect-ratio: 6 / 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ======================================================
   4. PRIMARY NAVIGATION BAR
====================================================== */

.pkp_navigation_primary_wrapper {
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 10px 10px 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

/* Navigation background strip */
.pkp_navigation_primary_row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    background: #173D32 !important;
    border-top: 3px solid #B9A16C !important;
    border-bottom: 3px solid #B9A16C !important;
    box-sizing: border-box !important;
}

/* Main menu */
.pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

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

.pkp_navigation_primary > li > a {
    display: block !important;
    padding: 14px 15px !important;
    color: #FFFFFF !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: color .2s ease, background .2s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #173D32 !important;
    background: #D9C68F !important;
    text-decoration: none !important;
}

.pkp_navigation_primary > li > a:before {
    background: #D9C68F !important;
}

/* Dropdown menu */
.pkp_navigation_primary ul {
    min-width: 190px !important;
    padding: 5px 0 !important;
    background: #214A3A !important;
    border: 1px solid #B9A16C !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16) !important;
}

.pkp_navigation_primary ul a {
    display: block !important;
    padding: 9px 13px !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
    color: #173D32 !important;
    background: #D9C68F !important;
}

/* Search link/button */
.pkp_navigation_search_wrapper a,
.pkp_navigation_search_wrapper button {
    color: #FFFFFF !important;
    font-size: 13px !important;
}

.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper button:hover {
    color: #D9C68F !important;
}


/* ======================================================
   5. MOBILE NAVIGATION TOGGLE
====================================================== */

.pkp_site_nav_toggle {
    color: #FFFFFF !important;
    background: #214A3A !important;
    border: 1px solid #B9A16C !important;
    border-radius: 3px !important;
}

.pkp_site_nav_toggle:hover,
.pkp_site_nav_toggle:focus {
    color: #173D32 !important;
    background: #D9C68F !important;
}


/* ======================================================
   6. RESPONSIVE HEADER
====================================================== */

@media screen and (max-width: 768px) {

    .pkp_structure_head {
        padding: 0 5px 6px !important;
    }

    .pkp_site_name_wrapper {
        padding: 7px 7px 0 !important;
    }

    .pkp_navigation_user_wrapper {
        padding: 0 7px !important;
    }

    .pkp_navigation_primary_wrapper {
        padding: 7px 7px 0 !important;
    }

    .pkp_navigation_primary_row {
        min-height: 45px !important;
        padding: 0 5px !important;
    }

    .pkp_navigation_primary {
        flex-wrap: wrap !important;
    }

    .pkp_navigation_primary > li > a {
        padding: 11px 10px !important;
        font-size: 12px !important;
    }

    .pkp_site_name img,
    .pkp_site_name a.is_img img,
    img[src*="pageHeaderLogoImage_en_US.jpg"],
    img[src*="EAM_Header_1500x250"],
    img[src*="EAM_header_redesign"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 6 / 1 !important;
    }
}

@media screen and (max-width: 480px) {

    .pkp_navigation_primary > li > a {
        padding: 9px 8px !important;
        font-size: 11px !important;
    }

    .pkp_navigation_user > li > a {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    .pkp_navigation_primary_row {
        min-height: 40px !important;
    }
}


/* ======================================================
   END OF REDESIGNED EAM HEADER
====================================================== */


/* ======================================================
   EXISTING EAM FOOTER + SIDEBAR STYLES
   Retained from the previous stylesheet
====================================================== */

/* ======================================================
   3. OJS FOOTER STRUCTURE
====================================================== */

.pkp_structure_footer_wrapper,
.pkp_structure_footer {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #173D32 !important;
}

.pkp_footer_content {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ======================================================
   4. EAM MAIN FOOTER
====================================================== */

.eam-footer {
    width: 100%;
    background: #173D32;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.75;
    border-top: 5px solid #B9A16C;
    box-sizing: border-box;
}

.eam-footer * {
    box-sizing: border-box;
}

.eam-container {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding: 35px 25px 20px;
}


/* ======================================================
   5. FOOTER HEADER / JOURNAL IDENTITY
====================================================== */

.eam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    padding-bottom: 27px;
    border-bottom: 1px solid #567263;
}

.eam-brand {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
    min-width: 0;
}

.eam-monogram {
    flex: 0 0 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #E8EDE0;
    border-radius: 10px;
    border-bottom: 4px solid #B9A16C;
}

.eam-monogram strong {
    color: #214A36;
    font-size: 30px;
    letter-spacing: 1px;
    line-height: 1.3;
}

.eam-monogram span {
    color: #72816B;
    font-size: 10px;
    letter-spacing: 3px;
    font-weight: bold;
}

.eam-brand-info {
    min-width: 0;
}

.eam-eyebrow {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2.5px;
    color: #D9C68F;
}

.eam-title {
    font-size: 27px;
    line-height: 1.35;
    font-weight: bold;
    color: #FFFFFF;
    margin-top: 6px;
    letter-spacing: .5px;
}

.eam-title span {
    display: block;
    color: #D9C68F;
}

.eam-university {
    font-size: 11px;
    letter-spacing: 1px;
    color: #DCE8DD;
    margin-top: 6px;
}

.eam-accent {
    width: 45px;
    height: 3px;
    background: #B9A16C;
    margin-top: 13px;
}

.eam-brand-info p {
    max-width: 620px;
    color: #DCE8DD;
    font-size: 12px;
    margin: 10px 0 0;
}


/* Journal status panel */

.eam-journal-status {
    flex: 0 0 215px;
    background: #214A3A;
    border: 1px solid #567263;
    border-radius: 9px;
    padding: 15px 18px;
}

.eam-status-item span {
    display: block;
    color: #D9C68F;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1.5px;
}

.eam-status-item strong {
    display: block;
    color: #FFFFFF;
    font-size: 17px;
    margin-top: 3px;
}

.eam-status-divider {
    height: 1px;
    background: #567263;
    margin: 10px 0;
}


/* ======================================================
   6. FOOTER MAIN GRID
====================================================== */

.eam-main-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.05fr .9fr 1.15fr;
    gap: 27px;
    padding: 30px 0;
}

.eam-column {
    min-width: 0;
}

.eam-label {
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1.8px;
    color: #D9C68F;
}

.eam-column h3,
.eam-publication h3 {
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
    margin: 9px 0 13px;
}

.eam-column p {
    font-size: 12px;
    line-height: 1.85;
    color: #DCE8DD;
    margin: 0 0 10px;
    text-align: left;
}


/* Publisher */

.eam-publisher {
    border-top: 1px solid #567263;
    margin-top: 16px;
    padding-top: 12px;
}

.eam-publisher span {
    display: block;
    color: #D9C68F;
    font-size: 9px;
    letter-spacing: 1.5px;
}

.eam-publisher strong {
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    margin-top: 3px;
}


/* ======================================================
   7. FOCUS AND SCOPE
====================================================== */

.eam-scope-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.eam-scope-list li {
    position: relative;
    color: #DCE8DD;
    font-size: 11px;
    line-height: 1.65;
    padding: 6px 0 6px 17px;
    border-bottom: 1px solid #405E4E;
}

.eam-scope-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 6px;
    background: #B9A16C;
    border-radius: 50%;
}


/* ======================================================
   8. FOOTER QUICK LINKS
====================================================== */

.eam-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    padding: 7px 0;
    border-bottom: 1px solid #405E4E;
    color: #DCE8DD !important;
    font-size: 11px;
    text-decoration: none !important;
    transition: color .2s ease;
}

.eam-links a span {
    color: #D9C68F;
}

.eam-links a:hover {
    color: #D9C68F !important;
}

.eam-link {
    display: inline-block;
    margin-top: 12px;
    color: #D9C68F !important;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: .8px;
    text-decoration: none !important;
}

.eam-link:hover {
    color: #FFFFFF !important;
}


/* ======================================================
   9. EDITORIAL OFFICE
====================================================== */

.eam-office strong {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.6;
}

.eam-office p {
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.eam-contact {
    border-top: 1px solid #567263;
    margin-top: 12px;
    padding-top: 10px;
}

.eam-contact span {
    display: block;
    font-size: 9px;
    color: #D9C68F;
    letter-spacing: 1px;
}

.eam-contact strong {
    display: block;
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 4px;
}

.eam-map-link {
    display: inline-block;
    margin-top: 12px;
    padding: 7px 11px;
    background: #D9C68F;
    color: #173D32 !important;
    font-size: 9px;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 4px;
}


/* ======================================================
   10. PUBLICATION AND LICENSE
====================================================== */

.eam-information {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 25px;
    padding: 20px;
    background: #214A3A;
    border: 1px solid #567263;
    border-radius: 9px;
}

.eam-publication h3 {
    margin-bottom: 12px;
}

.eam-issue-grid {
    display: flex;
    gap: 10px;
}

.eam-issue {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: #173D32;
    border-radius: 5px;
    border-left: 3px solid #B9A16C;
}

.eam-issue span {
    display: block;
    color: #D9C68F;
    font-size: 9px;
    letter-spacing: 1px;
}

.eam-issue strong {
    display: block;
    color: #FFFFFF;
    font-size: 12px;
    margin-top: 4px;
}

.eam-license-content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 12px;
}

.eam-license-content img {
    width: 88px;
    height: 31px;
    display: block;
    flex: 0 0 88px;
}

.eam-license-content strong {
    display: block;
    color: #FFFFFF;
    font-size: 11px;
    line-height: 1.6;
}

.eam-license-content p {
    color: #DCE8DD;
    font-size: 10px;
    line-height: 1.7;
    margin: 5px 0 0;
}


/* ======================================================
   11. COPYRIGHT
====================================================== */

.eam-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid #567263;
    margin-top: 23px;
    padding-top: 16px;
}

.eam-copyright strong {
    display: block;
    color: #D9C68F;
    font-size: 10px;
    letter-spacing: 1px;
}

.eam-copyright span,
.eam-copyright-right {
    display: block;
    color: #C9D9CC;
    font-size: 10px;
    margin-top: 3px;
}


/* ======================================================
   12. PKP BRANDING
====================================================== */

.pkp_brand_footer {
    display: flex !important;
    float: none !important;
    clear: both !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 13px max(calc((100% - 1210px) / 2), 25px) !important;
    background: #E8EDE0 !important;
    border-top: 1px solid #D1D9CB !important;
    box-sizing: border-box !important;
}

.pkp_brand_footer a {
    display: block !important;
    float: none !important;
    width: 145px !important;
    max-width: 145px !important;
    margin: 0 !important;
}

.pkp_brand_footer img {
    display: block !important;
    width: 100% !important;
    max-width: 145px !important;
    height: auto !important;
    filter: none !important;
}


/* ======================================================
   13. TABLET RESPONSIVE
====================================================== */

@media screen and (max-width: 950px) {

    .eam-main-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .eam-information {
        grid-template-columns: 1fr;
    }

}


/* ======================================================
   14. MOBILE RESPONSIVE
====================================================== */

@media screen and (max-width: 600px) {

    /* Header banner */

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

    .pkp_site_name img,
    .pkp_site_name a.is_img img,
    img[src*="pageHeaderLogoImage_en_US.jpg"],
    img[src*="EAM_Header_1500x250"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 6 / 1 !important;
    }

    .pkp_navigation_primary > li > a {
        padding: 10px 11px !important;
        font-size: 12px !important;
    }

    /* Footer */

    .eam-container {
        padding: 23px 15px 17px;
    }

    .eam-header {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .eam-brand {
        gap: 13px;
        align-items: flex-start;
    }

    .eam-monogram {
        flex-basis: 68px;
        height: 75px;
    }

    .eam-monogram strong {
        font-size: 22px;
    }

    .eam-title {
        font-size: 19px;
    }

    .eam-eyebrow {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .eam-brand-info p {
        font-size: 11px;
    }

    .eam-journal-status {
        flex-basis: auto;
        display: grid;
        grid-template-columns: 1fr 1px 1fr 1px 1fr;
        align-items: center;
        gap: 8px;
        padding: 12px 8px;
    }

    .eam-status-divider {
        width: 1px;
        height: 35px;
        margin: 0;
    }

    .eam-status-item strong {
        font-size: 11px;
    }

    .eam-status-item span {
        font-size: 7px;
    }

    .eam-main-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 24px 0;
    }

    .eam-information {
        padding: 15px;
        gap: 22px;
    }

    .eam-issue-grid {
        flex-direction: column;
    }

    .eam-copyright {
        flex-direction: column;
        align-items: flex-start;
    }

    .pkp_brand_footer {
        justify-content: center !important;
        padding: 14px 12px !important;
    }

}


/* ======================================================
   END OF EAM COMBINED STYLESHEET
====================================================== */


/* ======================================================
   15. EAM SIDEBAR / ADDITIONAL MENU COLOR THEME
   Palette follows the EAM header and the supplied example:
   Header blue : #006B88
   Soft blue   : #B7D5E0
   Cream       : #FFF8DC
   Link blue   : #5C8897
   Olive line  : #284F02
====================================================== */

/* Sidebar block spacing */
.pkp_structure_sidebar .pkp_block {
    margin: 0 0 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Additional Menu heading */
.pkp_structure_sidebar .pkp_block .title {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 11px 10px !important;
    background: #B7D5E0 !important;
    color: #173D32 !important;
    border-left: 4px solid #006B88 !important;
    border-bottom: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: .2px !important;
}

/* Remove default list spacing */
.pkp_structure_sidebar .pkp_block .content,
.pkp_structure_sidebar .pkp_block .content ul {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.pkp_structure_sidebar .pkp_block .content ul {
    list-style: none !important;
}

/* Cream menu item boxes */
.pkp_structure_sidebar .pkp_block .content li {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    background: #FFF8DC !important;
    border: 0 !important;
    border-bottom: 1px solid #284F02 !important;
    list-style: none !important;
}

/* Menu links */
.pkp_structure_sidebar .pkp_block .content li a {
    display: block !important;
    width: 100% !important;
    padding: 12px 10px !important;
    background: transparent !important;
    color: #5C8897 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
}

/* Hover state: harmonized with the forest-green header/navigation */
.pkp_structure_sidebar .pkp_block .content li a:hover,
.pkp_structure_sidebar .pkp_block .content li a:focus {
    padding-left: 15px !important;
    background: #E8EDE0 !important;
    color: #173D32 !important;
    text-decoration: none !important;
}

/* Current/active menu item */
.pkp_structure_sidebar .pkp_block .content li a[aria-current="page"],
.pkp_structure_sidebar .pkp_block .content li.current a,
.pkp_structure_sidebar .pkp_block .content li.active a {
    background: #E8EDE0 !important;
    color: #173D32 !important;
    font-weight: 700 !important;
    border-left: 3px solid #B9A16C !important;
}

/* Nested menu lists */
.pkp_structure_sidebar .pkp_block .content li ul {
    margin: 0 !important;
    padding: 0 0 0 12px !important;
    background: #FFF8DC !important;
}

/* Other sidebar links remain consistent */
.pkp_structure_sidebar .pkp_block .content a {
    text-decoration-color: #B9A16C;
}

/* Mobile spacing */
@media screen and (max-width: 600px) {
    .pkp_structure_sidebar .pkp_block {
        margin-bottom: 16px !important;
    }

    .pkp_structure_sidebar .pkp_block .title {
        font-size: 12px !important;
        padding: 10px !important;
    }

    .pkp_structure_sidebar .pkp_block .content li a {
        font-size: 12px !important;
        padding: 11px 10px !important;
    }
}

/* ======================================================
   END OF EAM SIDEBAR COLOR THEME
====================================================== */


/* ======================================================
   16. HEADER LAYOUT CORRECTION
   Fixes:
   - Full-width Register/Login bar
   - Removes excessive blank gap
   - Removes thick green frame around the banner
   - Keeps the 1500 x 250 px banner proportional
   - Places navigation directly below the banner
====================================================== */

/* Main header: clean white canvas, no thick green side frame */
.pkp_structure_head,
#headerNavigationContainer {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-bottom: 3px solid #B9A16C !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Keep OJS header sections in a compact vertical stack */
.pkp_structure_head .pkp_head_wrapper,
#headerNavigationContainer .pkp_head_wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}

/* All header sections must use the full available width */
.pkp_structure_head .pkp_navigation_user_wrapper,
.pkp_structure_head .pkp_site_name_wrapper,
.pkp_structure_head .pkp_navigation_primary_wrapper,
#headerNavigationContainer .pkp_navigation_user_wrapper,
#headerNavigationContainer .pkp_site_name_wrapper,
#headerNavigationContainer .pkp_navigation_primary_wrapper {
    position: relative !important;
    float: none !important;
    clear: both !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 1. Full-width utility bar */
.pkp_structure_head .pkp_navigation_user_wrapper,
#headerNavigationContainer .pkp_navigation_user_wrapper {
    order: 1 !important;
    display: block !important;
    padding: 0 18px !important;
    background: #F7F7F0 !important;
    border-bottom: 1px solid #DCE3D9 !important;
    text-align: right !important;
}

.pkp_structure_head .pkp_navigation_user,
#headerNavigationContainer .pkp_navigation_user {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    float: none !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-height: 32px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: right !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.pkp_structure_head .pkp_navigation_user > li,
#headerNavigationContainer .pkp_navigation_user > li {
    display: inline-flex !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_head .pkp_navigation_user > li > a,
#headerNavigationContainer .pkp_navigation_user > li > a {
    display: block !important;
    padding: 7px 10px !important;
    color: #173D32 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    text-decoration: none !important;
}

.pkp_structure_head .pkp_navigation_user > li > a:hover,
#headerNavigationContainer .pkp_navigation_user > li > a:hover {
    color: #FFFFFF !important;
    background: #214A3A !important;
}

/* 2. Banner area: only a small, even inset */
.pkp_structure_head .pkp_site_name_wrapper,
#headerNavigationContainer .pkp_site_name_wrapper {
    order: 2 !important;
    display: block !important;
    padding: 8px 10px 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
}

.pkp_structure_head .pkp_site_name,
#headerNavigationContainer .pkp_site_name {
    display: block !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0 !important;
    text-align: center !important;
}

.pkp_structure_head .pkp_site_name a,
.pkp_structure_head .pkp_site_name a.is_img,
#headerNavigationContainer .pkp_site_name a,
#headerNavigationContainer .pkp_site_name a.is_img {
    display: block !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.pkp_structure_head .pkp_site_name img,
.pkp_structure_head .pkp_site_name a.is_img img,
#headerNavigationContainer .pkp_site_name img,
#headerNavigationContainer .pkp_site_name a.is_img img {
    display: block !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 3. Navigation immediately follows the banner */
.pkp_structure_head .pkp_navigation_primary_wrapper,
#headerNavigationContainer .pkp_navigation_primary_wrapper {
    order: 3 !important;
    display: block !important;
    padding: 0 10px !important;
    background: #FFFFFF !important;
    border: 0 !important;
}

.pkp_structure_head .pkp_navigation_primary_row,
#headerNavigationContainer .pkp_navigation_primary_row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-height: 49px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 8px !important;
    background: #173D32 !important;
    border-top: 2px solid #B9A16C !important;
    border-bottom: 3px solid #B9A16C !important;
    box-sizing: border-box !important;
}

.pkp_structure_head .pkp_navigation_primary,
#headerNavigationContainer .pkp_navigation_primary {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.pkp_structure_head .pkp_navigation_primary > li,
#headerNavigationContainer .pkp_navigation_primary > li {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_head .pkp_navigation_primary > li > a,
#headerNavigationContainer .pkp_navigation_primary > li > a {
    display: block !important;
    padding: 14px 14px !important;
    color: #FFFFFF !important;
    background: transparent !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.pkp_structure_head .pkp_navigation_primary > li > a:hover,
#headerNavigationContainer .pkp_navigation_primary > li > a:hover {
    color: #173D32 !important;
    background: #D9C68F !important;
}

/* Search stays at the right edge of the navigation bar */
.pkp_structure_head .pkp_navigation_search_wrapper,
#headerNavigationContainer .pkp_navigation_search_wrapper {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    float: none !important;
    margin-left: auto !important;
    padding: 0 8px !important;
    background: transparent !important;
}

.pkp_structure_head .pkp_navigation_search_wrapper a,
#headerNavigationContainer .pkp_navigation_search_wrapper a,
.pkp_structure_head .pkp_navigation_search_wrapper button,
#headerNavigationContainer .pkp_navigation_search_wrapper button {
    color: #FFFFFF !important;
}

.pkp_structure_head .pkp_navigation_search_wrapper a:hover,
#headerNavigationContainer .pkp_navigation_search_wrapper a:hover {
    color: #D9C68F !important;
}

/* Dropdown menus */
.pkp_structure_head .pkp_navigation_primary ul,
#headerNavigationContainer .pkp_navigation_primary ul {
    background: #214A3A !important;
    border: 1px solid #B9A16C !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.15) !important;
}

.pkp_structure_head .pkp_navigation_primary ul a,
#headerNavigationContainer .pkp_navigation_primary ul a {
    color: #FFFFFF !important;
    padding: 9px 13px !important;
}

.pkp_structure_head .pkp_navigation_primary ul a:hover,
#headerNavigationContainer .pkp_navigation_primary ul a:hover {
    color: #173D32 !important;
    background: #D9C68F !important;
}

/* Mobile: compact spacing, natural banner scaling */
@media screen and (max-width: 768px) {
    .pkp_structure_head .pkp_navigation_user_wrapper,
    #headerNavigationContainer .pkp_navigation_user_wrapper {
        padding: 0 8px !important;
    }

    .pkp_structure_head .pkp_site_name_wrapper,
    #headerNavigationContainer .pkp_site_name_wrapper {
        padding: 6px 6px 0 !important;
    }

    .pkp_structure_head .pkp_navigation_primary_wrapper,
    #headerNavigationContainer .pkp_navigation_primary_wrapper {
        padding: 0 6px !important;
    }

    .pkp_structure_head .pkp_navigation_primary_row,
    #headerNavigationContainer .pkp_navigation_primary_row {
        min-height: 43px !important;
        padding: 0 4px !important;
    }

    .pkp_structure_head .pkp_navigation_primary > li > a,
    #headerNavigationContainer .pkp_navigation_primary > li > a {
        padding: 10px 9px !important;
        font-size: 11px !important;
    }

    .pkp_structure_head .pkp_site_name img,
    #headerNavigationContainer .pkp_site_name img {
        width: 100% !important;
        height: auto !important;
    }
}

@media screen and (max-width: 480px) {
    .pkp_structure_head .pkp_navigation_primary > li > a,
    #headerNavigationContainer .pkp_navigation_primary > li > a {
        padding: 8px 7px !important;
        font-size: 10px !important;
    }

    .pkp_structure_head .pkp_navigation_user > li > a,
    #headerNavigationContainer .pkp_navigation_user > li > a {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
}

/* ======================================================
   END OF HEADER LAYOUT CORRECTION
====================================================== */


/* ======================================================
   FINAL HEADER ORDER FIX
   OJS order: Register/Login > Banner > Main navigation
====================================================== */

.pkp_structure_head .pkp_head_wrapper,
#headerNavigationContainer .pkp_head_wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #FFFFFF !important;
}

/* Register/Login first */
.pkp_structure_head .pkp_head_wrapper > .pkp_navigation_user_wrapper,
#headerNavigationContainer .pkp_head_wrapper > .pkp_navigation_user_wrapper {
    order: 1 !important;
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-height: 32px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 18px !important;
    background: #F7F7F0 !important;
    border-bottom: 1px solid #DCE3D9 !important;
    box-sizing: border-box !important;
}

/* Banner second */
.pkp_structure_head .pkp_head_wrapper > .pkp_site_name_wrapper,
#headerNavigationContainer .pkp_head_wrapper > .pkp_site_name_wrapper {
    order: 2 !important;
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 10px 0 !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}

/* Primary navigation row third */
.pkp_structure_head .pkp_head_wrapper > .pkp_navigation_primary_row,
#headerNavigationContainer .pkp_head_wrapper > .pkp_navigation_primary_row {
    order: 3 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    float: none !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    min-height: 49px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 8px !important;
    background: #173D32 !important;
    border-top: 2px solid #B9A16C !important;
    border-bottom: 3px solid #B9A16C !important;
    box-sizing: border-box !important;
}

/* Inner navigation wrapper stays inside the navigation row */
.pkp_structure_head .pkp_navigation_primary_row > .pkp_navigation_primary_wrapper,
#headerNavigationContainer .pkp_navigation_primary_row > .pkp_navigation_primary_wrapper {
    order: initial !important;
    display: block !important;
    flex: 1 1 auto !important;
    float: none !important;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* All menu links share one horizontal row */
.pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary,
#headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary > li,
#headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary > li {
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary > li > a,
#headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary > li > a {
    display: block !important;
    padding: 14px 14px !important;
    color: #FFFFFF !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}

/* Search stays on the right side of the same bar */
.pkp_structure_head .pkp_navigation_primary_row > .pkp_navigation_search_wrapper,
#headerNavigationContainer .pkp_navigation_primary_row > .pkp_navigation_search_wrapper {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    float: none !important;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 8px !important;
    background: transparent !important;
}

/* Narrow screens may wrap menu items */
@media screen and (max-width: 900px) {
    .pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary,
    #headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary {
        flex-wrap: wrap !important;
    }
}

@media screen and (max-width: 600px) {
    .pkp_structure_head .pkp_navigation_primary_row,
    #headerNavigationContainer .pkp_navigation_primary_row {
        flex-wrap: wrap !important;
    }

    .pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary > li > a,
    #headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary > li > a {
        padding: 10px 9px !important;
        font-size: 11px !important;
    }
}

/* END FINAL HEADER ORDER FIX */


/* ======================================================
   18. SIDEBAR SPACING AND PROPORTION REFINEMENT
   Gives the sidebar more breathing room without forcing
   the column wider or stretching its contents.
====================================================== */

/* Add balanced inner spacing to the sidebar column */
.pkp_structure_sidebar {
    box-sizing: border-box !important;
    padding: 18px 12px 28px !important;
}

/* Keep sidebar widgets centered and separated */
.pkp_structure_sidebar .pkp_block {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Give image widgets consistent sizing and breathing room */
.pkp_structure_sidebar .pkp_block img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 12px !important;
    object-fit: contain !important;
}

/* Keep image-linked buttons centered and away from each other */
.pkp_structure_sidebar .pkp_block .content > a:has(img) {
    display: block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    text-align: center !important;
}

/* A little inset for ordinary widget content */
.pkp_structure_sidebar .pkp_block .content {
    box-sizing: border-box !important;
    padding: 0 4px 2px !important;
}

/* Additional Menu heading: more comfortable height and inset */
.pkp_structure_sidebar .pkp_block .title {
    margin: 0 0 12px !important;
    padding: 12px 13px !important;
    border-left-width: 4px !important;
    border-radius: 2px !important;
    line-height: 1.5 !important;
}

/* Menu list: separate each item and avoid edge-to-edge feel */
.pkp_structure_sidebar .pkp_block .content ul {
    margin: 0 !important;
    padding: 0 2px !important;
}

.pkp_structure_sidebar .pkp_block .content li {
    margin: 0 0 10px !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

.pkp_structure_sidebar .pkp_block .content li a {
    padding: 13px 13px !important;
    line-height: 1.55 !important;
    letter-spacing: .1px !important;
}

/* More balanced hover and active states */
.pkp_structure_sidebar .pkp_block .content li a:hover,
.pkp_structure_sidebar .pkp_block .content li a:focus {
    padding-left: 17px !important;
}

.pkp_structure_sidebar .pkp_block .content li a[aria-current="page"],
.pkp_structure_sidebar .pkp_block .content li.current a,
.pkp_structure_sidebar .pkp_block .content li.active a {
    padding-left: 13px !important;
}

/* Tablet and mobile: preserve breathing room without
   making the sidebar contents overflow the viewport. */
@media screen and (max-width: 768px) {
    .pkp_structure_sidebar {
        padding: 16px 12px 24px !important;
    }

    .pkp_structure_sidebar .pkp_block {
        max-width: 360px !important;
        margin-bottom: 20px !important;
    }

    .pkp_structure_sidebar .pkp_block .title {
        padding: 11px 12px !important;
    }

    .pkp_structure_sidebar .pkp_block .content li a {
        padding: 12px 12px !important;
        font-size: 12px !important;
    }
}

@media screen and (max-width: 480px) {
    .pkp_structure_sidebar {
        padding: 14px 10px 22px !important;
    }

    .pkp_structure_sidebar .pkp_block {
        max-width: 100% !important;
        margin-bottom: 18px !important;
    }

    .pkp_structure_sidebar .pkp_block img {
        margin-bottom: 13px !important;
    }

    .pkp_structure_sidebar .pkp_block .content li {
        margin-bottom: 9px !important;
    }

    .pkp_structure_sidebar .pkp_block .content li a {
        padding: 12px 11px !important;
        font-size: 11px !important;
    }
}

/* ======================================================
   END OF SIDEBAR SPACING REFINEMENT
====================================================== */


/* ======================================================
   19. PRIMARY NAVIGATION POSITION: BELOW JOURNAL BANNER
   Final order:
   1. User/account bar
   2. Journal banner
   3. Main navigation (Home, Current, About, Archives...)
====================================================== */

/* Ensure the header wrapper controls the vertical order
   of OJS header sections. */
.pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_head_wrapper.container,
#headerNavigationContainer .pkp_head_wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* 1. Account / user navigation stays above the banner. */
.pkp_structure_head .pkp_head_wrapper > .pkp_navigation_user_wrapper,
#headerNavigationContainer .pkp_head_wrapper > .pkp_navigation_user_wrapper {
    order: 1 !important;
    display: block !important;
    position: relative !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-height: 30px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 14px !important;
    background: #F7F7F0 !important;
    border: 0 !important;
    border-bottom: 1px solid #DCE3D9 !important;
    box-sizing: border-box !important;
}

/* 2. Journal banner appears immediately after account bar. */
.pkp_structure_head .pkp_head_wrapper > .pkp_site_name_wrapper,
#headerNavigationContainer .pkp_head_wrapper > .pkp_site_name_wrapper {
    order: 2 !important;
    display: block !important;
    position: relative !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 10px 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

/* 3. Primary navigation wrapper moves below the banner.
   This is the OJS wrapper that contains the navigation row. */
.pkp_structure_head .pkp_head_wrapper > .pkp_navigation_primary_wrapper,
#headerNavigationContainer .pkp_head_wrapper > .pkp_navigation_primary_wrapper {
    order: 3 !important;
    display: block !important;
    position: relative !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    background: #FFFFFF !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

/* Keep navigation items and Search on one horizontal bar. */
.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary_row,
#headerNavigationContainer .pkp_navigation_primary_wrapper .pkp_navigation_primary_row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 8px !important;
    background: #173D32 !important;
    border-top: 2px solid #B9A16C !important;
    border-bottom: 3px solid #B9A16C !important;
    box-sizing: border-box !important;
}

/* Menu list uses remaining space. */
.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary,
#headerNavigationContainer .pkp_navigation_primary_wrapper .pkp_navigation_primary {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Keep each menu item aligned in the same row. */
.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary > li,
#headerNavigationContainer .pkp_navigation_primary_wrapper .pkp_navigation_primary > li {
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a,
#headerNavigationContainer .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a {
    display: block !important;
    padding: 14px 13px !important;
    color: #FFFFFF !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}

/* Search remains on the right end of the same green bar. */
.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_search_wrapper,
#headerNavigationContainer .pkp_navigation_primary_wrapper .pkp_navigation_search_wrapper {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    float: none !important;
    position: relative !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 9px !important;
    background: transparent !important;
}

.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_search_wrapper a,
#headerNavigationContainer .pkp_navigation_primary_wrapper .pkp_navigation_search_wrapper a {
    color: #FFFFFF !important;
    white-space: nowrap !important;
}

/* Responsive fallback for tablets and phones. */
@media screen and (max-width: 900px) {
    .pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary_row,
    #headerNavigationContainer .pkp_navigation_primary_wrapper .pkp_navigation_primary_row {
        flex-wrap: wrap !important;
    }

    .pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary,
    #headerNavigationContainer .pkp_navigation_primary_wrapper .pkp_navigation_primary {
        flex-wrap: wrap !important;
    }
}

@media screen and (max-width: 600px) {
    .pkp_structure_head .pkp_navigation_primary_wrapper,
    #headerNavigationContainer .pkp_navigation_primary_wrapper {
        padding: 0 6px !important;
    }

    .pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a,
    #headerNavigationContainer .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a {
        padding: 10px 8px !important;
        font-size: 11px !important;
    }
}

/* ======================================================
   END OF PRIMARY NAVIGATION POSITION FIX
====================================================== */


/* ======================================================
   20. CORRECT OJS PRIMARY ROW ORDER
   The OJS primary navigation is commonly wrapped in
   .pkp_navigation_primary_row, not a direct
   .pkp_navigation_primary_wrapper child.
   Final visual order:
   account bar -> journal banner -> main navigation.
====================================================== */

/* The actual direct child of .pkp_head_wrapper is the
   primary ROW. Move that entire row below the banner. */
.pkp_structure_head .pkp_head_wrapper > .pkp_navigation_primary_row,
#headerNavigationContainer .pkp_head_wrapper > .pkp_navigation_primary_row {
    order: 3 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    float: none !important;
    position: relative !important;
    inset: auto !important;
    clear: both !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 8px !important;
    background: #173D32 !important;
    border-top: 2px solid #B9A16C !important;
    border-bottom: 3px solid #B9A16C !important;
    box-sizing: border-box !important;
}

/* OJS version fallback: if the navigation wrapper itself
   is a direct child, place it after the banner too. */
.pkp_structure_head .pkp_head_wrapper > .pkp_navigation_primary_wrapper,
#headerNavigationContainer .pkp_head_wrapper > .pkp_navigation_primary_wrapper {
    order: 3 !important;
}

/* Navigation list wrapper sits inside the green row. */
.pkp_structure_head .pkp_navigation_primary_row > .pkp_navigation_primary_wrapper,
#headerNavigationContainer .pkp_navigation_primary_row > .pkp_navigation_primary_wrapper {
    display: block !important;
    flex: 1 1 auto !important;
    float: none !important;
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

/* Horizontal menu links. */
.pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary,
#headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary > li,
#headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary > li {
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary > li > a,
#headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary > li > a {
    display: block !important;
    padding: 14px 13px !important;
    color: #FFFFFF !important;
    background: transparent !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}

/* Search remains at the far right of the same green row. */
.pkp_structure_head .pkp_navigation_primary_row > .pkp_navigation_search_wrapper,
#headerNavigationContainer .pkp_navigation_primary_row > .pkp_navigation_search_wrapper {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    float: none !important;
    position: relative !important;
    width: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 10px !important;
    background: transparent !important;
}

.pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_search_wrapper a,
#headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_search_wrapper a {
    color: #FFFFFF !important;
    white-space: nowrap !important;
}

/* Dropdown appearance. */
.pkp_structure_head .pkp_navigation_primary_row .dropdown-menu,
#headerNavigationContainer .pkp_navigation_primary_row .dropdown-menu,
.pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary ul,
#headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary ul {
    background: #214A3A !important;
    border: 1px solid #B9A16C !important;
}

.pkp_structure_head .pkp_navigation_primary_row .dropdown-menu a,
#headerNavigationContainer .pkp_navigation_primary_row .dropdown-menu a,
.pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary ul a,
#headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary ul a {
    color: #FFFFFF !important;
}

.pkp_structure_head .pkp_navigation_primary_row .dropdown-menu a:hover,
#headerNavigationContainer .pkp_navigation_primary_row .dropdown-menu a:hover,
.pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary ul a:hover,
#headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary ul a:hover {
    color: #173D32 !important;
    background: #D9C68F !important;
}

/* Mobile and tablet behavior. */
@media screen and (max-width: 900px) {
    .pkp_structure_head .pkp_navigation_primary_row,
    #headerNavigationContainer .pkp_navigation_primary_row {
        flex-wrap: wrap !important;
    }

    .pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary,
    #headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary {
        flex-wrap: wrap !important;
    }
}

@media screen and (max-width: 600px) {
    .pkp_structure_head .pkp_navigation_primary_row,
    #headerNavigationContainer .pkp_navigation_primary_row {
        padding: 0 4px !important;
    }

    .pkp_structure_head .pkp_navigation_primary_row .pkp_navigation_primary > li > a,
    #headerNavigationContainer .pkp_navigation_primary_row .pkp_navigation_primary > li > a {
        padding: 10px 8px !important;
        font-size: 11px !important;
    }
}

/* ======================================================
   END OF CORRECT OJS PRIMARY ROW ORDER
====================================================== */


/* ======================================================
   21. OJS HEADER REORDER - STRUCTURE-AWARE FIX
   Based on the OJS header template:
   .pkp_site_nav_menu contains BOTH:
   - .pkp_navigation_primary_row
   - .pkp_navigation_user_wrapper

   Desired visual order:
   1. Account / Register / Login
   2. Journal banner
   3. Primary navigation + Search
====================================================== */

/* Main header canvas */
#headerNavigationContainer.pkp_structure_head,
.pkp_structure_head {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    border-bottom: 3px solid #B9A16C !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* The head wrapper becomes the vertical layout parent */
#headerNavigationContainer .pkp_head_wrapper,
.pkp_structure_head .pkp_head_wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    box-sizing: border-box !important;
}

/* Critical OJS fix:
   flatten the navigation wrapper so its account bar and
   primary navigation row can be ordered alongside banner. */
#headerNavigationContainer .pkp_site_nav_menu,
.pkp_structure_head .pkp_site_nav_menu {
    display: contents !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
}

/* OJS anchor used for skip navigation should not occupy
   a visible row in the header layout. */
#headerNavigationContainer #siteNav,
.pkp_structure_head #siteNav {
    display: none !important;
}

/* 1. Account bar: first row, above banner */
#headerNavigationContainer .pkp_navigation_user_wrapper,
.pkp_structure_head .pkp_navigation_user_wrapper {
    order: 1 !important;
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-height: 32px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 14px !important;
    text-align: right !important;
    background: #F7F7F0 !important;
    border: 0 !important;
    border-bottom: 1px solid #DCE3D9 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

#headerNavigationContainer .pkp_navigation_user,
.pkp_structure_head .pkp_navigation_user {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: right !important;
}

#headerNavigationContainer .pkp_navigation_user > li,
.pkp_structure_head .pkp_navigation_user > li {
    display: inline-flex !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#headerNavigationContainer .pkp_navigation_user > li > a,
.pkp_structure_head .pkp_navigation_user > li > a {
    display: block !important;
    padding: 6px 9px !important;
    color: #173D32 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-decoration: none !important;
}

/* 2. Journal banner: second row */
#headerNavigationContainer .pkp_site_name_wrapper,
.pkp_structure_head .pkp_site_name_wrapper {
    order: 2 !important;
    display: block !important;
    position: relative !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 10px 0 !important;
    background: #FFFFFF !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

#headerNavigationContainer .pkp_site_name,
.pkp_structure_head .pkp_site_name {
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 0 !important;
}

#headerNavigationContainer .pkp_site_name a.is_img,
.pkp_structure_head .pkp_site_name a.is_img {
    display: block !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0 !important;
}

#headerNavigationContainer .pkp_site_name a.is_img img,
.pkp_structure_head .pkp_site_name a.is_img img {
    display: block !important;
    width: 100% !important;
    max-width: 1500px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    aspect-ratio: 6 / 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 3. Primary navigation: third row, below banner */
#headerNavigationContainer .pkp_navigation_primary_row,
.pkp_structure_head .pkp_navigation_primary_row {
    order: 3 !important;
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 8px !important;
    background: #173D32 !important;
    border-top: 2px solid #B9A16C !important;
    border-bottom: 3px solid #B9A16C !important;
    box-sizing: border-box !important;
}

/* OJS places menu list and Search together inside this wrapper.
   Keep both on one horizontal navigation bar. */
#headerNavigationContainer .pkp_navigation_primary_wrapper,
.pkp_structure_head .pkp_navigation_primary_wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    float: none !important;
    position: relative !important;
    width: 100% !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    min-height: 43px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

/* Main menu list */
#headerNavigationContainer .pkp_navigation_primary,
.pkp_structure_head .pkp_navigation_primary {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

#headerNavigationContainer .pkp_navigation_primary > li,
.pkp_structure_head .pkp_navigation_primary > li {
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#headerNavigationContainer .pkp_navigation_primary > li > a,
.pkp_structure_head .pkp_navigation_primary > li > a {
    display: block !important;
    margin: 0 !important;
    padding: 13px 13px !important;
    color: #FFFFFF !important;
    background: transparent !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

#headerNavigationContainer .pkp_navigation_primary > li > a:hover,
.pkp_structure_head .pkp_navigation_primary > li > a:hover {
    color: #173D32 !important;
    background: #D9C68F !important;
}

/* Search at the far right of the green navigation bar */
#headerNavigationContainer .pkp_navigation_search_wrapper,
.pkp_structure_head .pkp_navigation_search_wrapper {
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    position: relative !important;
    margin: 0 0 0 auto !important;
    padding: 0 10px !important;
    border: 0 !important;
    background: transparent !important;
}

#headerNavigationContainer .pkp_navigation_search_wrapper a,
.pkp_structure_head .pkp_navigation_search_wrapper a {
    display: inline-block !important;
    margin: 0 !important;
    padding: 12px 4px !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

/* Dropdown menu */
#headerNavigationContainer .pkp_navigation_primary ul,
.pkp_structure_head .pkp_navigation_primary ul {
    background: #214A3A !important;
    border: 1px solid #B9A16C !important;
    z-index: 9999 !important;
}

#headerNavigationContainer .pkp_navigation_primary ul a,
.pkp_structure_head .pkp_navigation_primary ul a {
    color: #FFFFFF !important;
}

#headerNavigationContainer .pkp_navigation_primary ul a:hover,
.pkp_structure_head .pkp_navigation_primary ul a:hover {
    color: #173D32 !important;
    background: #D9C68F !important;
}

/* Mobile: allow menu items to wrap, but retain the same order */
@media screen and (max-width: 768px) {
    #headerNavigationContainer .pkp_navigation_primary_wrapper,
    .pkp_structure_head .pkp_navigation_primary_wrapper {
        flex-wrap: wrap !important;
    }

    #headerNavigationContainer .pkp_navigation_primary,
    .pkp_structure_head .pkp_navigation_primary {
        flex-wrap: wrap !important;
    }

    #headerNavigationContainer .pkp_navigation_primary > li > a,
    .pkp_structure_head .pkp_navigation_primary > li > a {
        padding: 10px 9px !important;
        font-size: 11px !important;
    }

    #headerNavigationContainer .pkp_navigation_search_wrapper,
    .pkp_structure_head .pkp_navigation_search_wrapper {
        margin-left: 0 !important;
    }
}

/* ======================================================
   END OF OJS HEADER REORDER
====================================================== */