/* =========================================================
   IJSoE – Custom OJS Website Styling (v4.3)
   Based on v4/v4.2.
   Fixes:
   1. Logged-in user menu fully visible at top-right over banner
   2. Navigation stays one continuous navy strip with no stray vertical lines
   3. Main content keeps equal left/right margins
   4. Content frame starts below the navigation with breathing space
   5. Internal divider/pseudo-element lines removed so they do not cut through text
   6. v4 header height + compact footer retained
   ========================================================= */

/* ---------- GLOBAL ---------- */
html, body {
    overflow-x: hidden;
}


/* ---------- FULL-WIDTH HEADER ---------- */
.pkp_structure_head {
    background: transparent !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
}

.pkp_head_wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.pkp_site_name_wrapper,
.pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_site_name_wrapper {
    position: relative !important;
    z-index: 1 !important;
}

.pkp_site_name > a.is_img {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 385px !important;
    max-height: 385px !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
}


/* ---------- USER ACCOUNT MENU: FULLY VISIBLE ON BANNER ---------- */
/* OJS default theme sets left:50% + transform; explicitly cancel both. */
.pkp_navigation_user_wrapper {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: 8px !important;
    right: 28px !important;
    left: auto !important;
    transform: none !important;
    z-index: 9999 !important;
    width: auto !important;
    min-width: 220px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    background: transparent !important;
    overflow: visible !important;
}

.pkp_navigation_user {
    display: flex !important;
    visibility: visible !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.pkp_navigation_user > li {
    position: relative !important;
    display: inline-block !important;
}

.pkp_navigation_user > li > a {
    color: #ffffff !important;
    background: rgba(0,0,0,0.20) !important;
    padding: 7px 10px !important;
    border-radius: 3px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45) !important;
}

/* Dropdown aligned safely inside the right edge */
.pkp_navigation_user > li > ul,
.pkp_navigation_user ul,
.pkp_navigation_user > li:hover > ul,
.pkp_navigation_user > li > ul.show {
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    transform: none !important;
    margin-top: 2px !important;
    background: #ffffff !important;
    border: 1px solid #d6dde3 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
    z-index: 10000 !important;
}

.pkp_navigation_user > li > ul a,
.pkp_navigation_user ul a {
    color: #123b5d !important;
    background: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.pkp_navigation_user > li > ul a:hover,
.pkp_navigation_user > li > ul a:focus,
.pkp_navigation_user ul a:hover,
.pkp_navigation_user ul a:focus {
    color: #071f33 !important;
    background: #eaf1f6 !important;
}


/* ---------- ONE CONTINUOUS NAVY NAVIGATION STRIP ---------- */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    background: #17384f !important;
}

.pkp_navigation_primary_wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 48px !important;
    padding-right: 36px !important;
    box-sizing: border-box !important;
    border: 0 !important;
}

/* Eliminate box effect and stray vertical borders */
.pkp_navigation_primary,
.pkp_navigation_primary > li,
.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper,
.pkp_navigation_search_wrapper > a {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.pkp_navigation_primary > li > a {
    color: #ffffff !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: #ffffff !important;
    background: rgba(255,255,255,0.08) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.pkp_navigation_primary > li:first-child {
    margin-left: 8px !important;
}

.pkp_navigation_search_wrapper,
.pkp_navigation_search_wrapper a {
    color: #ffffff !important;
}


/* ---------- BALANCED MAIN JOURNAL SECTION ---------- */
/* Keep the wider layout, but start it BELOW the navigation with space. */
.pkp_structure_content {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: calc(100% - 192px) !important;
    max-width: none !important;
    margin: 28px auto 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    /* Clean outer frame only; no top line touching navigation */
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid #e2e2e2 !important;
    border-right: 1px solid #e2e2e2 !important;
}

/* Main content gets breathing room from the frame */
.pkp_structure_main {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 26px 30px 34px 30px !important;
    box-sizing: border-box !important;
    border: 0 !important;
}

/* Remove unused sidebar and all internal divider pseudo-lines */
.pkp_structure_sidebar {
    display: none !important;
}

.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after,
.has_sidebar > .pkp_structure_main::before,
.has_sidebar > .pkp_structure_main::after,
.has_sidebar > .pkp_structure_sidebar::before,
.has_sidebar > .pkp_structure_sidebar::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
}

/* Remove internal vertical borders that can cut through page text */
.pkp_page_index,
.page_index_journal,
.page_about,
.cmp_announcements,
.obj_announcement_summary,
.pkp_page_index .additional_content,
.pkp_page_index .current_issue {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Give homepage sections clean spacing around their own horizontal separators */
.pkp_page_index .additional_content,
.pkp_page_index .cmp_announcements,
.pkp_page_index .current_issue {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.pkp_page_index .cmp_announcements,
.pkp_page_index .current_issue {
    margin-top: 22px !important;
    padding-top: 24px !important;
}


/* ---------- CLEAN COMPACT FOOTER ---------- */
.pkp_structure_footer_wrapper {
    background: #f1f1f1 !important;
    margin-top: 24px !important;
}

.pkp_structure_footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 30px !important;
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}

.pkp_footer_content {
    flex: 1 1 auto !important;
    max-width: 72% !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #1f2f3d !important;
}

.pkp_brand_footer {
    flex: 0 0 auto !important;
    max-width: 220px !important;
    text-align: right !important;
    margin-left: auto !important;
}

.pkp_brand_footer img,
.pkp_brand_footer svg {
    max-width: 160px !important;
    width: auto !important;
    height: auto !important;
}


/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .pkp_structure_content {
        width: calc(100% - 80px) !important;
    }
}

@media (max-width: 900px) {
    .pkp_site_name .is_img img {
        height: 300px !important;
        max-height: 300px !important;
    }

    .pkp_navigation_user_wrapper {
        right: 16px !important;
        min-width: 180px !important;
    }

    .pkp_navigation_primary_wrapper {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .pkp_structure_content {
        width: calc(100% - 40px) !important;
        margin-top: 20px !important;
    }

    .pkp_structure_main {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 768px) {
    .pkp_site_name .is_img img {
        height: 220px !important;
        max-height: 220px !important;
    }

    .pkp_structure_content {
        width: calc(100% - 24px) !important;
    }

    .pkp_structure_main {
        padding: 18px 12px 26px 12px !important;
    }

    .pkp_structure_footer {
        display: block !important;
    }

    .pkp_footer_content,
    .pkp_brand_footer {
        max-width: 100% !important;
        text-align: left !important;
    }

    .pkp_brand_footer {
        margin-top: 14px !important;
    }
}


/* =========================================================
   v4.4 FIX — Homepage Additional Content horizontal spacing
   ========================================================= */

/* OJS intentionally lets Additional Content extend to the section edge.
   Restore inner padding so its text aligns with About the Journal. */
.pkp_page_index .additional_content {
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-top: 26px !important;
    padding-bottom: 34px !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    .pkp_page_index .additional_content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 768px) {
    .pkp_page_index .additional_content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}



/* =========================================================
   IJSoE v4.5 — MOBILE / TABLET RESPONSIVE PATCH
   Desktop styling from v4.4 is preserved.
   These rules only apply on smaller screens.
   ========================================================= */

/* ---------- TABLET + MOBILE ---------- */
@media (max-width: 900px) {

    /* Let the banner keep its natural aspect ratio instead of forcing a tall crop */
    .pkp_site_name_wrapper,
    .pkp_site_name {
        height: auto !important;
        min-height: 0 !important;
    }

    .pkp_site_name {
        position: static !important;
        left: auto !important;
        right: auto !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .pkp_site_name .is_img img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    /* Restore OJS mobile behaviour for the account/login navigation.
       Do not keep it absolutely positioned over the banner on mobile. */
    .pkp_navigation_user_wrapper {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        background: transparent !important;
    }

    .pkp_navigation_user {
        display: block !important;
        width: 100% !important;
        margin: 14px 0 0 0 !important;
        padding: 12px 0 0 0 !important;
        border-top: 1px solid rgba(255,255,255,0.20) !important;
    }

    .pkp_navigation_user > li {
        display: block !important;
        width: 100% !important;
    }

    .pkp_navigation_user > li > a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 8px 10px !important;
        border-radius: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }

    /* User dropdown should open inside the screen rather than outside it */
    .pkp_navigation_user > li > ul,
    .pkp_navigation_user ul,
    .pkp_navigation_user > li:hover > ul,
    .pkp_navigation_user > li > ul.show {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 4px 0 0 0 !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
    }

    /* Allow OJS mobile navigation to behave as a stacked menu */
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    .pkp_navigation_primary {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
    }

    .pkp_navigation_primary > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .pkp_navigation_primary > li:first-child {
        margin-left: 0 !important;
    }

    .pkp_navigation_primary > li > a {
        display: block !important;
        width: 100% !important;
        padding: 10px 4px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
    }

    .pkp_navigation_primary ul {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .pkp_navigation_search_wrapper {
        float: none !important;
        width: 100% !important;
        margin: 8px 0 0 0 !important;
        padding: 10px 0 0 0 !important;
        border-top: 1px solid rgba(255,255,255,0.20) !important;
        box-sizing: border-box !important;
    }

    .pkp_navigation_search_wrapper a {
        display: block !important;
        padding: 8px 4px !important;
    }

    /* Main page should use the available mobile width */
    .pkp_structure_content {
        width: calc(100% - 28px) !important;
        max-width: 100% !important;
        margin: 16px auto 0 auto !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .pkp_structure_main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 14px 24px 14px !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    /* Prevent uploaded posters/images/content from overflowing */
    .pkp_structure_main img,
    .pkp_page_index img,
    .page img,
    .obj_article_details img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Long URLs and email addresses must wrap */
    .pkp_structure_main a,
    .pkp_footer_content a {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    /* Tables should scroll horizontally instead of breaking the page */
    .pkp_structure_main table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Homepage additional content aligned with mobile body */
    .pkp_page_index .additional_content {
        padding-left: 14px !important;
        padding-right: 14px !important;
        padding-top: 20px !important;
        padding-bottom: 24px !important;
    }

    /* Compact footer */
    .pkp_structure_footer {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px 16px !important;
    }

    .pkp_footer_content,
    .pkp_brand_footer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    .pkp_brand_footer {
        margin-top: 18px !important;
    }

    .pkp_brand_footer img,
    .pkp_brand_footer svg {
        max-width: 125px !important;
    }
}


/* ---------- SMALL PHONES ---------- */
@media (max-width: 520px) {

    .pkp_structure_content {
        width: calc(100% - 18px) !important;
        margin-top: 10px !important;
    }

    .pkp_structure_main {
        padding: 14px 9px 22px 9px !important;
    }

    .pkp_page_index .additional_content {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    /* Keep headings readable but not oversized */
    .pkp_structure_main h1,
    .pkp_structure_main .page_title {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
    }

    .pkp_structure_main h2 {
        font-size: 1.30rem !important;
        line-height: 1.30 !important;
    }

    .pkp_structure_main h3 {
        font-size: 1.12rem !important;
        line-height: 1.35 !important;
    }

    /* Make buttons/forms fit the viewport */
    .pkp_structure_main input,
    .pkp_structure_main select,
    .pkp_structure_main textarea,
    .pkp_structure_main button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Article detail columns should stack cleanly */
    .obj_article_details .main_entry,
    .obj_article_details .entry_details {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .obj_article_details .entry_details {
        margin-top: 20px !important;
    }
}



/* =========================================================
   IJSoE v4.6 — ACADEMIC TYPOGRAPHY PATCH
   Based on v4.5 mobile-responsive stylesheet.
   Applies Times New Roman, 1.5 line spacing, and controlled
   justification to readable journal content only.
   Navigation, buttons, account menus and other UI remain intact.
   ========================================================= */

/* ---------- BODY / READING TEXT ---------- */
.pkp_structure_main p,
.pkp_page_index .additional_content p,
.page p,
.obj_article_details p,
.obj_issue_toc p,
.obj_announcement_summary p,
.obj_announcement_full p {
    font-family: "Times New Roman", Times, serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    word-spacing: normal !important;
}

/* ---------- HEADINGS ---------- */
.pkp_structure_main h1,
.pkp_structure_main .page_title,
.pkp_page_index .additional_content h1,
.page h1 {
    font-family: "Times New Roman", Times, serif !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.pkp_structure_main h2,
.pkp_page_index .additional_content h2,
.page h2 {
    font-family: "Times New Roman", Times, serif !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.pkp_structure_main h3,
.pkp_page_index .additional_content h3,
.page h3 {
    font-family: "Times New Roman", Times, serif !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.pkp_structure_main h4,
.pkp_structure_main h5,
.pkp_structure_main h6,
.pkp_page_index .additional_content h4,
.pkp_page_index .additional_content h5,
.pkp_page_index .additional_content h6,
.page h4,
.page h5,
.page h6 {
    font-family: "Times New Roman", Times, serif !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

/* ---------- LISTS ---------- */
/* Lists stay left-aligned so bullets/numbers do not develop awkward gaps. */
.pkp_structure_main li,
.pkp_page_index .additional_content li,
.page li,
.obj_article_details li {
    font-family: "Times New Roman", Times, serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* ---------- QUOTATIONS / SPECIAL TEXT ---------- */
.pkp_structure_main blockquote,
.pkp_page_index .additional_content blockquote,
.page blockquote {
    font-family: "Times New Roman", Times, serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* Keep short standalone labels, captions and metadata natural rather than justified. */
.pkp_structure_main figcaption,
.pkp_structure_main caption,
.pkp_structure_main dt,
.pkp_structure_main dd,
.obj_article_details .label,
.obj_article_details .value {
    font-family: "Times New Roman", Times, serif !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

/* ---------- LINKS INSIDE READING TEXT ---------- */
.pkp_structure_main p a,
.pkp_page_index .additional_content p a,
.page p a {
    font-family: inherit !important;
}

/* ---------- MOBILE TYPOGRAPHY REFINEMENT ---------- */
@media (max-width: 900px) {
    .pkp_structure_main p,
    .pkp_page_index .additional_content p,
    .page p,
    .obj_article_details p,
    .obj_issue_toc p,
    .obj_announcement_summary p,
    .obj_announcement_full p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: justify !important;
        text-align-last: left !important;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

@media (max-width: 520px) {
    .pkp_structure_main h1,
    .pkp_structure_main .page_title,
    .pkp_page_index .additional_content h1,
    .page h1 {
        font-size: 25px !important;
    }

    .pkp_structure_main h2,
    .pkp_page_index .additional_content h2,
    .page h2 {
        font-size: 21px !important;
    }

    .pkp_structure_main h3,
    .pkp_page_index .additional_content h3,
    .page h3 {
        font-size: 18px !important;
    }
}