/*
 * CJMLIT — stylesheet harmonized with the CJMLIT visual system
 * Target: OJS 3.4.x, Default Theme
 * Version: 9.0
 *
 * This is a CLEAN stylesheet written from scratch.
 * Do not load it together with earlier CJMLIT v1-v7 files.
 *
 * Install in:
 * Settings > Website > Appearance > Advanced > Journal Style Sheet
 */

/* =========================================================
   1. Design system
   ========================================================= */

:root {
    --journal-shell: 1520px;
    --journal-side-gap: 20px;

    --journal-navy: #073a57;
    --journal-navy-dark: #062f49;
    --journal-teal: #078f83;
    --journal-teal-dark: #06756d;
    --journal-gold: #d7a72a;

    --journal-page: #f6f5f0;
    --journal-white: #ffffff;
    --journal-text: #202f38;
    --journal-link: #00739d;
    --journal-border: #d5e0e2;
    --journal-divider: #d6e0e2;
    --journal-sidebar-head: #edf6f5;
    --journal-sidebar-top: #718286;

    --journal-radius: 8px;
}

/* =========================================================
   2. Global base
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--journal-page);
    color: var(--journal-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.pkp_structure_page {
    background: transparent !important;
}

a {
    color: var(--journal-link);
    text-underline-offset: 0.15em;
}

a:hover,
a:focus {
    color: var(--journal-teal-dark);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(215, 167, 42, 0.8);
    outline-offset: 3px;
}

/* =========================================================
   3. Shared header shell
   ========================================================= */

.pkp_structure_head {
    position: relative;
    z-index: 1000;
    border: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.pkp_structure_head .pkp_head_wrapper {
    position: relative !important;
    width: calc(100% - (2 * var(--journal-side-gap))) !important;
    max-width: var(--journal-shell) !important;
    margin: 0 auto !important;
    padding-top: 44px !important;
    background: #ffffff !important;
}

/* ---------------------------------------------------------
   3.1 Logged-in user bar
   --------------------------------------------------------- */

.pkp_structure_head .pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--journal-navy-dark) !important;
    box-shadow: none !important;
    transform: none !important;
}

.pkp_structure_head .pkp_navigation_user {
    position: static !important;
    display: flex !important;
    width: auto !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 0 0 auto !important;
    padding: 0 13px 0 8px !important;
    float: none !important;
}

.pkp_structure_head .pkp_navigation_user > li {
    position: relative !important;
    display: flex !important;
    height: 44px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.pkp_structure_head .pkp_navigation_user > li > a {
    display: inline-flex !important;
    height: 44px !important;
    align-items: center !important;
    padding: 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 0.91rem !important;
    font-weight: 700 !important;
    line-height: 44px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.pkp_structure_head .pkp_navigation_user > li > a:hover,
.pkp_structure_head .pkp_navigation_user > li > a:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}

.pkp_structure_head .pkp_navigation_user ul {
    right: 0 !important;
    left: auto !important;
}

/* ---------------------------------------------------------
   3.2 Journal identity
   --------------------------------------------------------- */

.pkp_structure_head .pkp_site_name_wrapper {
    display: flex !important;
    width: 100% !important;
    min-height: 132px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 18px 24px !important;
    background: #ffffff !important;
}

.pkp_structure_head .pkp_site_name {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
}

.pkp_structure_head .pkp_site_name .is_text,
.pkp_structure_head .pkp_site_name a.is_text {
    display: inline-block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--journal-navy) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.65rem, 2vw, 2.15rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    white-space: normal !important;
    text-decoration: none !important;
}

.pkp_structure_head .pkp_site_name .is_img {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_head .pkp_site_name .is_img img {
    display: block !important;
    width: auto !important;
    max-width: min(520px, 100%) !important;
    max-height: 150px !important;
    object-fit: contain !important;
}

/* ---------------------------------------------------------
   3.3 Primary navigation
   --------------------------------------------------------- */

.pkp_structure_head .pkp_navigation_primary_row {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 4px solid var(--journal-gold) !important;
    background:
        linear-gradient(
            90deg,
            var(--journal-navy-dark) 0%,
            var(--journal-navy) 60%,
            var(--journal-teal) 100%
        ) !important;
    box-shadow: none !important;
    transform: none !important;
}

.pkp_structure_head .pkp_navigation_primary_wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 14px !important;
}

.pkp_structure_head .pkp_navigation_primary {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_head .pkp_navigation_primary > li > a,
.pkp_structure_head .pkp_navigation_search_wrapper a {
    display: flex !important;
    min-height: 54px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 0.91rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.pkp_structure_head .pkp_navigation_primary > li > a:hover,
.pkp_structure_head .pkp_navigation_primary > li > a:focus,
.pkp_structure_head .pkp_navigation_search_wrapper a:hover,
.pkp_structure_head .pkp_navigation_search_wrapper a:focus {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}

.pkp_structure_head .pkp_navigation_primary ul {
    min-width: 250px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--journal-border) !important;
    border-top: 3px solid var(--journal-gold) !important;
    border-radius: 0 0 7px 7px !important;
    background: #ffffff !important;
    box-shadow: 0 9px 22px rgba(6, 47, 73, 0.17) !important;
}

.pkp_structure_head .pkp_navigation_primary ul a {
    display: block !important;
    padding: 11px 15px !important;
    border: 0 !important;
    border-left: 4px solid transparent !important;
    background: #ffffff !important;
    color: var(--journal-navy) !important;
    font-size: 0.91rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    text-decoration: none !important;
}

.pkp_structure_head .pkp_navigation_primary ul a:hover,
.pkp_structure_head .pkp_navigation_primary ul a:focus {
    border-left-color: var(--journal-teal) !important;
    background: var(--journal-sidebar-head) !important;
    color: var(--journal-navy-dark) !important;
}

/* =========================================================
   4. Main content shell
   ========================================================= */

.pkp_structure_content {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 365px !important;
    width: calc(100% - (2 * var(--journal-side-gap))) !important;
    max-width: var(--journal-shell) !important;
    min-height: 600px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    column-gap: 0 !important;
    align-items: stretch !important;
    border-right: 1px solid var(--journal-divider) !important;
    border-left: 1px solid var(--journal-divider) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after {
    content: none !important;
    display: none !important;
}

/* ---------------------------------------------------------
   4.1 Main editorial area
   --------------------------------------------------------- */

.pkp_structure_main {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 42px 38px 54px !important;
    overflow: visible !important;
    float: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pkp_structure_main .page,
.pkp_page_index .homepage_about {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pkp_structure_main .cmp_breadcrumbs,
.pkp_structure_main .breadcrumbs {
    margin: 0 0 34px !important;
    padding: 0 !important;
    color: #6d7478 !important;
}

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 {
    color: var(--journal-navy) !important;
    line-height: 1.26 !important;
}

.pkp_structure_main h1 {
    margin: 0 0 30px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(1.75rem, 2.2vw, 2.15rem) !important;
    font-weight: 750 !important;
}

.pkp_structure_main h2 {
    margin: 0 0 26px !important;
    padding: 0 0 11px !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(215, 167, 42, 0.72) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.55rem, 2vw, 1.95rem) !important;
    font-weight: 700 !important;
}

.pkp_structure_main h3 {
    margin: 30px 0 12px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.pkp_structure_main h4 {
    margin: 24px 0 10px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

.pkp_structure_main p,
.pkp_structure_main li,
.pkp_page_index .homepage_about p,
.pkp_page_index .homepage_about li {
    max-width: 100% !important;
    color: var(--journal-text) !important;
    font-size: 1rem !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-word !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

.pkp_structure_main p {
    margin: 0 0 1.25rem !important;
}

.pkp_structure_main ul,
.pkp_structure_main ol {
    margin: 0.6rem 0 1.35rem !important;
    padding-left: 1.45rem !important;
}

.pkp_structure_main li {
    margin-bottom: 0.4rem !important;
}

/* =========================================================
   5. Sidebar and blocks
   ========================================================= */

.pkp_structure_sidebar {
    grid-column: 2 !important;
    display: flex !important;
    width: 365px !important;
    min-width: 0 !important;
    max-width: 365px !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 48px 24px 54px 28px !important;
    float: none !important;
    border: 0 !important;
    border-left: 1px solid var(--journal-divider) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pkp_structure_sidebar .pkp_block {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--journal-border) !important;
    border-radius: var(--journal-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.pkp_structure_sidebar .pkp_block .title {
    margin: 0 !important;
    padding: 15px 18px 13px !important;
    border: 0 !important;
    border-top: 2px solid var(--journal-sidebar-top) !important;
    border-bottom: 2px solid var(--journal-gold) !important;
    border-radius: 0 !important;
    background: var(--journal-sidebar-head) !important;
    color: var(--journal-navy) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.pkp_structure_sidebar .pkp_block .content {
    margin: 0 !important;
    padding: 20px 21px 22px !important;
    background: #ffffff !important;
    color: var(--journal-text) !important;
    line-height: 1.55 !important;
}

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

.pkp_structure_sidebar .pkp_block .content li {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_sidebar .pkp_block .content li + li {
    margin-top: 12px !important;
}

.pkp_structure_sidebar .pkp_block .content a {
    color: var(--journal-link) !important;
    text-decoration: none !important;
}

.pkp_structure_sidebar .pkp_block .content a:hover,
.pkp_structure_sidebar .pkp_block .content a:focus {
    color: var(--journal-teal-dark) !important;
    text-decoration: underline !important;
}

/* ---------------------------------------------------------
   5.1 Submission block
   --------------------------------------------------------- */

.pkp_structure_sidebar .pkp_block.block_make_submission,
.pkp_structure_sidebar .block_make_submission {
    display: flex !important;
    min-height: 94px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    border: 1px solid var(--journal-border) !important;
    border-radius: var(--journal-radius) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.pkp_structure_sidebar .pkp_block.block_make_submission a.block_make_submission_link,
.pkp_structure_sidebar .block_make_submission a,
.pkp_structure_sidebar .block_make_submission a:link,
.pkp_structure_sidebar .block_make_submission a:visited {
    display: inline-flex !important;
    width: auto !important;
    min-width: 205px !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 12px 25px !important;
    border: 1px solid #056b63 !important;
    border-radius: 6px !important;
    background: var(--journal-teal) !important;
    box-shadow: none !important;
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
}

.pkp_structure_sidebar .pkp_block.block_make_submission a.block_make_submission_link:hover,
.pkp_structure_sidebar .pkp_block.block_make_submission a.block_make_submission_link:focus,
.pkp_structure_sidebar .block_make_submission a:hover,
.pkp_structure_sidebar .block_make_submission a:focus {
    border-color: #054f49 !important;
    background: var(--journal-teal-dark) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* =========================================================
   6. Forms, tables, issue/article elements
   ========================================================= */

.cmp_button,
.cmp_form .buttons button,
.pkp_button,
button.submit,
input[type="submit"] {
    border-radius: 6px !important;
}

.obj_issue_toc .galleys_links a,
.obj_article_summary .galleys_links a {
    border-radius: 5px !important;
}

table {
    border-collapse: collapse;
}

thead th {
    background: var(--journal-sidebar-head);
    color: var(--journal-navy);
}

th,
td {
    border-color: var(--journal-border);
}

/* =========================================================
   7. Footer
   ========================================================= */

.pkp_structure_footer_wrapper {
    min-height: 0 !important;
    margin: 0 !important;
    border-top: 4px solid var(--journal-gold) !important;
    background: var(--journal-navy) !important;
    color: #ffffff !important;
}

.pkp_structure_footer {
    width: calc(100% - (2 * var(--journal-side-gap))) !important;
    max-width: var(--journal-shell) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 36px 24px 30px !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: center !important;
}

.pkp_structure_footer p {
    margin: 0.32rem 0 !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
}

.pkp_structure_footer a {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.58) !important;
}

.pkp_structure_footer img,
.pkp_brand_footer img {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 135px !important;
    max-height: 92px !important;
    margin: 22px auto 0 !important;
    float: none !important;
    object-fit: contain !important;
}

/* =========================================================
   8. Mobile menu and responsive layout
   ========================================================= */

@media (min-width: 992px) {
    .pkp_structure_head .pkp_site_nav_toggle {
        display: none !important;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    :root {
        --journal-side-gap: 16px;
    }

    .pkp_structure_content {
        grid-template-columns: minmax(0, 1fr) 315px !important;
    }

    .pkp_structure_sidebar {
        width: 315px !important;
        max-width: 315px !important;
        padding-right: 18px !important;
        padding-left: 22px !important;
    }

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

    .pkp_structure_head .pkp_navigation_primary > li > a,
    .pkp_structure_head .pkp_navigation_search_wrapper a {
        padding-right: 12px !important;
        padding-left: 12px !important;
        font-size: 0.86rem !important;
    }
}

@media (max-width: 991px) {
    :root {
        --journal-side-gap: 0px;
    }

    .pkp_structure_head {
        border-bottom: 4px solid var(--journal-gold) !important;
    }

    .pkp_structure_head .pkp_head_wrapper {
        width: 100% !important;
        max-width: none !important;
        min-height: 68px !important;
        padding-top: 0 !important;
    }

    .pkp_structure_head .pkp_navigation_user_wrapper {
        display: none !important;
    }

    .pkp_structure_head .pkp_site_name_wrapper {
        position: relative !important;
        min-height: 68px !important;
        padding: 0 16px 0 68px !important;
    }

    .pkp_structure_head .pkp_site_name .is_text,
    .pkp_structure_head .pkp_site_name a.is_text {
        padding: 12px 0 !important;
        font-size: clamp(1rem, 3.6vw, 1.3rem) !important;
        line-height: 1.25 !important;
    }

    .pkp_structure_head .pkp_site_name .is_img img {
        max-height: 56px !important;
    }

    /* Solid, visible three-bar button */
    .pkp_structure_head .pkp_site_nav_toggle {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        z-index: 10002 !important;
        display: inline-flex !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 2px solid var(--journal-gold) !important;
        border-radius: 7px !important;
        background: var(--journal-navy) !important;
        box-shadow: none !important;
        color: #ffffff !important;
        cursor: pointer !important;
        opacity: 1 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .pkp_structure_head .pkp_site_nav_toggle span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .pkp_structure_head .pkp_site_nav_toggle::before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        display: block !important;
        width: 24px !important;
        height: 18px !important;
        background:
            linear-gradient(
                to bottom,
                #ffffff 0,
                #ffffff 2px,
                transparent 2px,
                transparent 8px,
                #ffffff 8px,
                #ffffff 10px,
                transparent 10px,
                transparent 16px,
                #ffffff 16px,
                #ffffff 18px
            ) !important;
        transform: translate(-50%, -50%) !important;
    }

    .pkp_structure_head .pkp_site_nav_toggle::after {
        content: none !important;
    }

    .pkp_structure_head .pkp_site_nav_menu {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: 0 !important;
        z-index: 10001 !important;
        width: 100% !important;
        max-height: calc(100vh - 68px) !important;
        margin: 0 !important;
        padding: 10px 18px 20px !important;
        overflow-y: auto !important;
        border-top: 3px solid var(--journal-gold) !important;
        background: var(--journal-navy-dark) !important;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25) !important;
    }

    .pkp_structure_head .pkp_site_nav_menu .pkp_nav_list > li {
        display: block !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    .pkp_structure_head .pkp_site_nav_menu .pkp_nav_list > li > a {
        display: block !important;
        min-height: 0 !important;
        padding: 12px 5px !important;
        color: #ffffff !important;
        font-size: 0.93rem !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-decoration: none !important;
    }

    .pkp_structure_head .pkp_site_nav_menu .dropdown-menu,
    .pkp_structure_head .pkp_site_nav_menu .pkp_nav_list ul {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 8px !important;
        padding: 4px 0 6px 12px !important;
        border: 0 !important;
        border-left: 3px solid var(--journal-gold) !important;
        border-radius: 0 !important;
        background: rgba(255, 255, 255, 0.06) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .pkp_structure_content {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        border-right: 0 !important;
        border-left: 0 !important;
    }

    .pkp_structure_main {
        width: 100% !important;
        margin: 0 !important;
        padding: 28px 20px 36px !important;
        border: 0 !important;
    }

    .pkp_structure_sidebar {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 20px 38px !important;
        border: 0 !important;
        gap: 18px !important;
    }

    .pkp_structure_sidebar .pkp_block {
        width: 100% !important;
    }
}

@media (max-width: 575px) {
    body {
        font-size: 15px;
    }

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

    .pkp_structure_sidebar {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .pkp_structure_main h1 {
        font-size: 1.65rem !important;
    }

    .pkp_structure_main h2 {
        font-size: 1.45rem !important;
    }

    .pkp_structure_sidebar .pkp_block.block_make_submission a.block_make_submission_link,
    .pkp_structure_sidebar .block_make_submission a {
        width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
    }
}

/* =========================================================
   9. Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   10. Search spacing and footer logo contrast — Version 2
   ========================================================= */

/*
 * Add a clear visual gap between the search icon and the word
 * “Search”. The pseudo-element, SVG, or Font Awesome icon is
 * treated as a separate flex item without changing its location.
 */
.pkp_structure_head .pkp_navigation_search_wrapper a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 9px !important;
    white-space: nowrap !important;
}

.pkp_structure_head .pkp_navigation_search_wrapper a::before,
.pkp_structure_head .pkp_navigation_search_wrapper a::after,
.pkp_structure_head .pkp_navigation_search_wrapper a > i,
.pkp_structure_head .pkp_navigation_search_wrapper a > svg,
.pkp_structure_head .pkp_navigation_search_wrapper a > .fa,
.pkp_structure_head .pkp_navigation_search_wrapper a > [class*="icon"] {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/*
 * Improve the visibility of the CuspideScience logo against the
 * navy footer. No position, float, alignment, or parent layout is
 * changed, so the logo remains in its current bottom-page location.
 */
.pkp_structure_footer img,
.pkp_brand_footer img {
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.88) !important;
    border-radius: 8px !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16) !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* Slightly larger logo on desktop, without changing its anchor. */
@media (min-width: 992px) {
    .pkp_structure_footer img,
    .pkp_brand_footer img {
        max-width: 150px !important;
        max-height: 104px !important;
    }
}

/* Maintain compact proportions on mobile. */
@media (max-width: 575px) {
    .pkp_structure_head .pkp_navigation_search_wrapper a {
        column-gap: 8px !important;
    }

    .pkp_structure_footer img,
    .pkp_brand_footer img {
        max-width: 130px !important;
        max-height: 92px !important;
        padding: 7px 8px !important;
    }
}


/* =========================================================
   11. Consistent gold underline for page titles — Version 3
   Applies the same visual treatment used on “About the Journal”
   to standalone OJS page titles such as “Aims and Scope”.
   ========================================================= */

body .pkp_structure_main > h1,
body .pkp_structure_main .page > h1,
body .pkp_structure_main .page h1:first-of-type,
body .pkp_page_page .pkp_structure_main h1,
body .pkp_page_about .pkp_structure_main h1,
body .pkp_page_submissions .pkp_structure_main h1,
body .pkp_page_search .pkp_structure_main h1 {
    display: block !important;
    width: 100% !important;
    margin: 0 0 26px !important;
    padding: 0 0 11px !important;
    border: 0 !important;
    border-bottom: 2px solid rgba(215, 167, 42, 0.78) !important;
    color: var(--journal-navy) !important;
    background: transparent !important;
    box-shadow: none !important;
}

/*
 * Keep a comfortable separation when breadcrumbs appear
 * immediately before the page title.
 */
body .pkp_structure_main .cmp_breadcrumbs + h1,
body .pkp_structure_main .breadcrumbs + h1,
body .pkp_structure_main .cmp_breadcrumbs + .page h1,
body .pkp_structure_main .breadcrumbs + .page h1 {
    margin-top: 0 !important;
}

/* Slightly tighter underline spacing on small screens. */
@media (max-width: 575px) {
    body .pkp_structure_main > h1,
    body .pkp_structure_main .page > h1,
    body .pkp_structure_main .page h1:first-of-type,
    body .pkp_page_page .pkp_structure_main h1,
    body .pkp_page_about .pkp_structure_main h1,
    body .pkp_page_submissions .pkp_structure_main h1,
    body .pkp_page_search .pkp_structure_main h1 {
        margin-bottom: 22px !important;
        padding-bottom: 9px !important;
    }
}


/* =========================================================
   12. Contact page typography normalization — Version 4
   Keeps headings distinct, while all contact details use the
   same font family, size, weight, and line height.
   ========================================================= */

/* Base typography for the entire Contact page */
body .pkp_page_contact .pkp_structure_main,
body .pkp_page_contact .pkp_structure_main .page,
body .pkp_page_contact .pkp_structure_main .page_contact,
body .pkp_page_contact .pkp_structure_main .contact_section,
body .pkp_page_contact .pkp_structure_main .contact_section *,
body .pkp_page_contact .pkp_structure_main .address,
body .pkp_page_contact .pkp_structure_main .address *,
body .pkp_page_contact .pkp_structure_main .contact,
body .pkp_page_contact .pkp_structure_main .contact *,
body .pkp_page_contact .pkp_structure_main .principal_contact,
body .pkp_page_contact .pkp_structure_main .principal_contact *,
body .pkp_page_contact .pkp_structure_main .support_contact,
body .pkp_page_contact .pkp_structure_main .support_contact * {
    font-family: Arial, Helvetica, sans-serif !important;
}

/*
 * Uniform typography for all non-heading contact details:
 * office name, journal name, publisher, address, names,
 * roles, email addresses, and descriptive text.
 */
body .pkp_page_contact .pkp_structure_main p,
body .pkp_page_contact .pkp_structure_main address,
body .pkp_page_contact .pkp_structure_main div:not(.cmp_breadcrumbs):not(.breadcrumbs),
body .pkp_page_contact .pkp_structure_main span,
body .pkp_page_contact .pkp_structure_main li,
body .pkp_page_contact .pkp_structure_main dt,
body .pkp_page_contact .pkp_structure_main dd,
body .pkp_page_contact .pkp_structure_main a:not(.pkp_button):not(.cmp_button) {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
    font-style: normal !important;
    line-height: 1.62 !important;
    letter-spacing: 0 !important;
}

/* Consistent paragraph and address spacing */
body .pkp_page_contact .pkp_structure_main p,
body .pkp_page_contact .pkp_structure_main address {
    margin: 0 0 0.9rem !important;
}

/* Main Contact title */
body .pkp_page_contact .pkp_structure_main h1 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(1.75rem, 2.2vw, 2.15rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* Principal Contact and Support Contact headings */
body .pkp_page_contact .pkp_structure_main h2,
body .pkp_page_contact .pkp_structure_main h3 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(1.45rem, 1.8vw, 1.75rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--journal-navy) !important;
}

/* Contact columns should have matching typography and spacing */
body .pkp_page_contact .pkp_structure_main .principal_contact,
body .pkp_page_contact .pkp_structure_main .support_contact,
body .pkp_page_contact .pkp_structure_main .contact_section {
    color: var(--journal-text) !important;
}

body .pkp_page_contact .pkp_structure_main .principal_contact p,
body .pkp_page_contact .pkp_structure_main .support_contact p,
body .pkp_page_contact .pkp_structure_main .principal_contact address,
body .pkp_page_contact .pkp_structure_main .support_contact address {
    font-size: 1rem !important;
    line-height: 1.62 !important;
}

/* Email links keep the same size and weight as surrounding text */
body .pkp_page_contact .pkp_structure_main a[href^="mailto:"] {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.62 !important;
}

/* Avoid an inherited large font from nested strong/b elements */
body .pkp_page_contact .pkp_structure_main p strong,
body .pkp_page_contact .pkp_structure_main p b,
body .pkp_page_contact .pkp_structure_main address strong,
body .pkp_page_contact .pkp_structure_main address b {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Keep the edit control compact and separate from contact typography */
body .pkp_page_contact .pkp_structure_main .pkp_button,
body .pkp_page_contact .pkp_structure_main .cmp_button,
body .pkp_page_contact .pkp_structure_main a[href*="edit"] {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
}

/* Mobile refinement */
@media (max-width: 575px) {
    body .pkp_page_contact .pkp_structure_main p,
    body .pkp_page_contact .pkp_structure_main address,
    body .pkp_page_contact .pkp_structure_main span,
    body .pkp_page_contact .pkp_structure_main li,
    body .pkp_page_contact .pkp_structure_main dt,
    body .pkp_page_contact .pkp_structure_main dd,
    body .pkp_page_contact .pkp_structure_main a:not(.pkp_button):not(.cmp_button) {
        font-size: 0.98rem !important;
    }

    body .pkp_page_contact .pkp_structure_main h2,
    body .pkp_page_contact .pkp_structure_main h3 {
        font-size: 1.4rem !important;
    }
}


/* =========================================================
   13. Contact page font-size refinement — Version 5
   Harmonizes contact details with the rest of the journal.
   ========================================================= */

/* Standard contact information */
body .pkp_page_contact .pkp_structure_main p,
body .pkp_page_contact .pkp_structure_main address,
body .pkp_page_contact .pkp_structure_main span,
body .pkp_page_contact .pkp_structure_main li,
body .pkp_page_contact .pkp_structure_main dt,
body .pkp_page_contact .pkp_structure_main dd,
body .pkp_page_contact .pkp_structure_main a:not(.pkp_button):not(.cmp_button),
body .pkp_page_contact .pkp_structure_main .principal_contact p,
body .pkp_page_contact .pkp_structure_main .support_contact p,
body .pkp_page_contact .pkp_structure_main .principal_contact address,
body .pkp_page_contact .pkp_structure_main .support_contact address {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
}

/* Principal Contact and Support Contact headings */
body .pkp_page_contact .pkp_structure_main h2,
body .pkp_page_contact .pkp_structure_main h3 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--journal-navy) !important;
}

/* Balanced spacing around contact sections */
body .pkp_page_contact .pkp_structure_main .principal_contact,
body .pkp_page_contact .pkp_structure_main .support_contact {
    padding-top: 0.35rem !important;
}

body .pkp_page_contact .pkp_structure_main .principal_contact p,
body .pkp_page_contact .pkp_structure_main .support_contact p,
body .pkp_page_contact .pkp_structure_main .principal_contact address,
body .pkp_page_contact .pkp_structure_main .support_contact address {
    margin-bottom: 0.75rem !important;
}

/* Email links match the surrounding text */
body .pkp_page_contact .pkp_structure_main a[href^="mailto:"] {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

/* Keep the page title visually dominant */
body .pkp_page_contact .pkp_structure_main h1 {
    font-size: clamp(1.75rem, 2.2vw, 2.15rem) !important;
    line-height: 1.25 !important;
}

/* Mobile proportions */
@media (max-width: 575px) {
    body .pkp_page_contact .pkp_structure_main p,
    body .pkp_page_contact .pkp_structure_main address,
    body .pkp_page_contact .pkp_structure_main span,
    body .pkp_page_contact .pkp_structure_main li,
    body .pkp_page_contact .pkp_structure_main dt,
    body .pkp_page_contact .pkp_structure_main dd,
    body .pkp_page_contact .pkp_structure_main a:not(.pkp_button):not(.cmp_button) {
        font-size: 0.97rem !important;
        line-height: 1.52 !important;
    }

    body .pkp_page_contact .pkp_structure_main h2,
    body .pkp_page_contact .pkp_structure_main h3 {
        font-size: 1.4rem !important;
    }
}


/* =========================================================
   14. Final visual refinements — Version 6
   - More compact journal identity area
   - Slightly larger header logo
   - Improved body-text readability
   - Shorter footer with the CuspideScience logo kept at
     the lower-right corner
   ========================================================= */

/* ---------------------------------------------------------
   A. Header logo: larger image, less unused white space
   --------------------------------------------------------- */

@media (min-width: 992px) {
    body .pkp_structure_head .pkp_site_name_wrapper {
        min-height: 118px !important;
        padding: 10px 24px !important;
    }

    body .pkp_structure_head .pkp_site_name .is_img {
        display: flex !important;
        width: 100% !important;
        min-height: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body .pkp_structure_head .pkp_site_name .is_img img {
        display: block !important;
        width: auto !important;
        height: 108px !important;
        max-width: min(560px, 48vw) !important;
        max-height: 108px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: left center !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body .pkp_structure_head .pkp_site_name_wrapper {
        min-height: 108px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body .pkp_structure_head .pkp_site_name .is_img img {
        height: 96px !important;
        max-width: min(500px, 50vw) !important;
        max-height: 96px !important;
    }
}

/* Mobile logo stays compact and does not compete with the menu button. */
@media (max-width: 991px) {
    body .pkp_structure_head .pkp_site_name .is_img img {
        width: auto !important;
        height: 54px !important;
        max-width: calc(100vw - 92px) !important;
        max-height: 54px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }
}

/* ---------------------------------------------------------
   B. Main text: slightly larger and easier to read
   --------------------------------------------------------- */

body .pkp_structure_main p,
body .pkp_structure_main li,
body .pkp_page_index .homepage_about p,
body .pkp_page_index .homepage_about li {
    font-size: 1.03rem !important;
    line-height: 1.68 !important;
}

/*
 * Preserve the more compact typography intentionally defined
 * for the Contact page in Version 5.
 */
body .pkp_page_contact .pkp_structure_main p,
body .pkp_page_contact .pkp_structure_main address,
body .pkp_page_contact .pkp_structure_main span,
body .pkp_page_contact .pkp_structure_main li,
body .pkp_page_contact .pkp_structure_main dt,
body .pkp_page_contact .pkp_structure_main dd,
body .pkp_page_contact .pkp_structure_main a:not(.pkp_button):not(.cmp_button) {
    font-size: 1rem !important;
    line-height: 1.55 !important;
}

@media (max-width: 575px) {
    body .pkp_structure_main p,
    body .pkp_structure_main li,
    body .pkp_page_index .homepage_about p,
    body .pkp_page_index .homepage_about li {
        font-size: 1rem !important;
        line-height: 1.62 !important;
    }
}

/* ---------------------------------------------------------
   C. Footer: reduce excessive empty height
   --------------------------------------------------------- */

body .pkp_structure_footer_wrapper {
    height: auto !important;
    min-height: 0 !important;
}

body .pkp_structure_footer {
    position: relative !important;
    width: calc(100% - (2 * var(--journal-side-gap))) !important;
    max-width: var(--journal-shell) !important;
    height: auto !important;
    min-height: 190px !important;
    margin: 0 auto !important;
    padding: 32px 24px 38px !important;
    overflow: hidden !important;
}

/* Neutralize fixed heights or oversized spacing in custom footer containers. */
body .pkp_structure_footer > div,
body .pkp_structure_footer .pkp_footer_content,
body .pkp_structure_footer .footer-content,
body .pkp_structure_footer .footer_content {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body .pkp_structure_footer p {
    margin: 0.24rem 0 !important;
    line-height: 1.42 !important;
}

/*
 * Keep the CuspideScience logo in the lower-right corner,
 * but make its white plate smaller and visually lighter.
 */
body .pkp_structure_footer img,
body .pkp_brand_footer img {
    position: absolute !important;
    right: 28px !important;
    bottom: 24px !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: auto !important;
    max-width: 112px !important;
    max-height: 76px !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    float: none !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 6px !important;
    background-color: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
    object-fit: contain !important;
    opacity: 1 !important;
}

/* Do not allow a separate brand-footer area to add empty height. */
body .pkp_brand_footer {
    position: static !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

@media (max-width: 991px) {
    body .pkp_structure_footer {
        min-height: 205px !important;
        padding: 30px 22px 92px !important;
    }

    body .pkp_structure_footer img,
    body .pkp_brand_footer img {
        right: 20px !important;
        bottom: 18px !important;
        max-width: 104px !important;
        max-height: 72px !important;
    }
}

@media (max-width: 575px) {
    body .pkp_structure_footer {
        min-height: 0 !important;
        padding: 28px 16px 104px !important;
    }

    body .pkp_structure_footer img,
    body .pkp_brand_footer img {
        right: 50% !important;
        bottom: 18px !important;
        max-width: 100px !important;
        max-height: 70px !important;
        transform: translateX(50%) !important;
    }
}


/* =========================================================
   15. CJMLIT-specific refinements
   Keeps the same visual language as JAILEI while accommodating
   the wider CJMLIT masthead logo and transportation cover art.
   ========================================================= */

/* Wider masthead logo */
@media (min-width: 992px) {
    body .pkp_structure_head .pkp_site_name .is_img img {
        height: 112px !important;
        max-height: 112px !important;
        max-width: min(680px, 56vw) !important;
        object-position: left center !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body .pkp_structure_head .pkp_site_name .is_img img {
        height: 100px !important;
        max-height: 100px !important;
        max-width: min(600px, 58vw) !important;
    }
}

/* Homepage image / journal cover presentation */
body .pkp_page_index .homepage_image,
body .pkp_page_index .homepage_image img,
body .pkp_page_index .current_issue .cover img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

body .pkp_page_index .homepage_image {
    margin-bottom: 24px !important;
    overflow: hidden !important;
    border: 1px solid var(--journal-border) !important;
    background: #ffffff !important;
}

/* Slightly tighter spacing for the CJMLIT homepage content */
body .pkp_page_index .homepage_about {
    margin-top: 0 !important;
}

/* Keep long transportation-related titles from wrapping awkwardly */
body .pkp_structure_main h1,
body .pkp_structure_main h2,
body .pkp_structure_main h3 {
    overflow-wrap: anywhere !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}

/* Mobile logo */
@media (max-width: 991px) {
    body .pkp_structure_head .pkp_site_name .is_img img {
        height: 56px !important;
        max-height: 56px !important;
        max-width: calc(100vw - 92px) !important;
    }
}


/* =========================================================
   16. CJMLIT visual refinement — Version 2
   Improves the masthead logo, homepage cover, content spacing,
   sidebar polish, and long-form readability.
   ========================================================= */

/* ---------------------------------------------------------
   A. Masthead logo: larger and visually better cropped
   --------------------------------------------------------- */

@media (min-width: 992px) {
    body .pkp_structure_head .pkp_site_name_wrapper {
        min-height: 118px !important;
        padding: 10px 24px !important;
        overflow: visible !important;
    }

    body .pkp_structure_head .pkp_site_name .is_img {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    /*
     * The CJMLIT source logo contains generous internal white
     * margins. A fixed display box with object-fit: cover removes
     * part of this empty area and makes the actual mark more visible.
     */
    body .pkp_structure_head .pkp_site_name .is_img img {
        width: 540px !important;
        height: 92px !important;
        max-width: 56vw !important;
        max-height: 92px !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: left center !important;
        transform: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body .pkp_structure_head .pkp_site_name_wrapper {
        min-height: 108px !important;
    }

    body .pkp_structure_head .pkp_site_name .is_img img {
        width: 470px !important;
        height: 82px !important;
        max-width: 58vw !important;
        max-height: 82px !important;
    }
}

@media (max-width: 991px) {
    body .pkp_structure_head .pkp_site_name .is_img img {
        width: calc(100vw - 92px) !important;
        height: 52px !important;
        max-width: calc(100vw - 92px) !important;
        max-height: 52px !important;
        object-fit: cover !important;
        object-position: left center !important;
    }
}

/* ---------------------------------------------------------
   B. Homepage cover: slightly more refined presentation
   --------------------------------------------------------- */

body .pkp_page_index .homepage_image {
    margin: 18px 0 24px !important;
    overflow: hidden !important;
    border: 1px solid #cbd9dc !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 5px 16px rgba(7, 58, 87, 0.08) !important;
}

body .pkp_page_index .homepage_image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 9px !important;
    object-fit: cover !important;
}

body .pkp_page_index .homepage_about {
    margin-top: 0 !important;
}

body .pkp_page_index .homepage_about h2 {
    margin-top: 6px !important;
    margin-bottom: 24px !important;
}

/* ---------------------------------------------------------
   C. Long-form readability
   --------------------------------------------------------- */

body .pkp_structure_main p,
body .pkp_structure_main li,
body .pkp_page_index .homepage_about p,
body .pkp_page_index .homepage_about li {
    font-size: 1.03rem !important;
    line-height: 1.7 !important;
}

body .pkp_structure_main p {
    margin-bottom: 1.2rem !important;
}

body .pkp_structure_main ol,
body .pkp_structure_main ul {
    margin-bottom: 1.45rem !important;
}

body .pkp_structure_main li {
    margin-bottom: 0.46rem !important;
}

/* Editorial-team headings */
body .pkp_page_index .homepage_about h3 {
    margin-top: 1.75rem !important;
    margin-bottom: 0.7rem !important;
    color: var(--journal-navy) !important;
    font-size: 1.08rem !important;
    line-height: 1.35 !important;
}

/* ---------------------------------------------------------
   D. Sidebar refinement
   --------------------------------------------------------- */

body .pkp_structure_sidebar {
    gap: 20px !important;
}

body .pkp_structure_sidebar .pkp_block {
    border-color: #cedbdd !important;
    box-shadow: 0 3px 10px rgba(7, 58, 87, 0.045) !important;
}

body .pkp_structure_sidebar .pkp_block .title {
    padding-top: 14px !important;
    padding-bottom: 12px !important;
}

body .pkp_structure_sidebar .pkp_block .content {
    padding-top: 19px !important;
    padding-bottom: 20px !important;
}

body .pkp_structure_sidebar .block_make_submission {
    min-height: 94px !important;
}

/* ---------------------------------------------------------
   E. Footer polish
   --------------------------------------------------------- */

body .pkp_structure_footer {
    min-height: 178px !important;
    padding-top: 28px !important;
    padding-bottom: 34px !important;
}

body .pkp_structure_footer p {
    line-height: 1.4 !important;
}

body .pkp_structure_footer img,
body .pkp_brand_footer img {
    max-width: 106px !important;
    max-height: 72px !important;
}

/* ---------------------------------------------------------
   F. Responsive adjustments
   --------------------------------------------------------- */

@media (max-width: 991px) {
    body .pkp_page_index .homepage_image {
        margin-top: 14px !important;
    }

    body .pkp_structure_main p,
    body .pkp_structure_main li,
    body .pkp_page_index .homepage_about p,
    body .pkp_page_index .homepage_about li {
        font-size: 1rem !important;
        line-height: 1.64 !important;
    }
}

@media (max-width: 575px) {
    body .pkp_page_index .homepage_image {
        border-radius: 8px !important;
    }

    body .pkp_page_index .homepage_image img {
        border-radius: 7px !important;
    }
}


/* =========================================================
   17. Final homepage alignment refinements — Version 3
   Minor adjustments after visual validation of the live layout.
   ========================================================= */

/*
 * Align the top of the sidebar more closely with the homepage
 * cover image. This applies only to the journal homepage.
 */
@media (min-width: 992px) {
    body.pkp_page_index .pkp_structure_sidebar,
    .pkp_page_index .pkp_structure_sidebar {
        padding-top: 22px !important;
    }
}

/*
 * Preserve a clear separation between the homepage cover and
 * the “About the Journal” heading, even when margins collapse.
 */
body .pkp_page_index .homepage_image + .homepage_about,
body .pkp_page_index .homepage_image + div .homepage_about {
    margin-top: 18px !important;
}

body .pkp_page_index .homepage_image + .homepage_about h2,
body .pkp_page_index .homepage_image + div .homepage_about h2 {
    margin-top: 0 !important;
}

/* Slightly soften the homepage cover shadow. */
body .pkp_page_index .homepage_image {
    box-shadow: 0 4px 14px rgba(7, 58, 87, 0.065) !important;
}

/* Maintain comfortable spacing for editorial-team sections. */
body .pkp_page_index .homepage_about h3 {
    padding-top: 0.1rem !important;
}

/* Mobile: keep the cover-to-heading gap compact but visible. */
@media (max-width: 575px) {
    body .pkp_page_index .homepage_image + .homepage_about,
    body .pkp_page_index .homepage_image + div .homepage_about {
        margin-top: 14px !important;
    }
}


/* =========================================================
   18. Mobile footer overlap fix — Version 4
   Places the CuspideScience logo in the normal document flow
   below the footer text on phones, preventing any overlap.
   ========================================================= */

@media (max-width: 575px) {
    body .pkp_structure_footer_wrapper {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body .pkp_structure_footer {
        position: relative !important;
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 28px 18px 22px !important;
        overflow: visible !important;
        text-align: center !important;
    }

    body .pkp_structure_footer > div,
    body .pkp_structure_footer .pkp_footer_content,
    body .pkp_structure_footer .footer-content,
    body .pkp_structure_footer .footer_content {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .pkp_structure_footer p {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.3rem auto !important;
        padding: 0 !important;
        font-size: 0.96rem !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
    }

    /*
     * Remove absolute positioning on phones. The logo now sits
     * after the footer text with its own reserved vertical space.
     */
    body .pkp_structure_footer img,
    body .pkp_brand_footer img {
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        top: auto !important;
        display: block !important;
        width: auto !important;
        max-width: 96px !important;
        max-height: 68px !important;
        margin: 22px auto 0 !important;
        padding: 5px 6px !important;
        float: none !important;
        transform: none !important;
        clear: both !important;
        z-index: auto !important;
    }

    /*
     * If OJS renders the logo in a separate brand-footer element,
     * keep that element visible and centered instead of collapsing
     * it to zero height.
     */
    body .pkp_brand_footer {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 18px 22px !important;
        overflow: visible !important;
        background: var(--journal-navy) !important;
    }

    body .pkp_brand_footer img {
        margin-top: 0 !important;
    }
}

/* Extra protection for narrow phones */
@media (max-width: 380px) {
    body .pkp_structure_footer {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    body .pkp_structure_footer p {
        font-size: 0.92rem !important;
        line-height: 1.42 !important;
    }

    body .pkp_structure_footer img,
    body .pkp_brand_footer img {
        max-width: 90px !important;
        max-height: 64px !important;
    }
}


/* =========================================================
   19. JAILEI-equivalent mobile footer layout — Version 5
   Centers the CuspideScience logo below all footer text and
   links, regardless of whether OJS renders it inside the main
   footer content or in the separate brand-footer container.
   ========================================================= */

@media (max-width: 575px) {
    body .pkp_structure_footer_wrapper {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: var(--journal-navy) !important;
    }

    body .pkp_structure_footer {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 30px 18px 24px !important;
        overflow: visible !important;
        background: var(--journal-navy) !important;
        color: #ffffff !important;
        text-align: center !important;
    }

    body .pkp_structure_footer > div,
    body .pkp_structure_footer .pkp_footer_content,
    body .pkp_structure_footer .footer-content,
    body .pkp_structure_footer .footer_content {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        text-align: center !important;
    }

    body .pkp_structure_footer p {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.32rem auto !important;
        padding: 0 !important;
        color: #ffffff !important;
        font-size: 0.96rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    body .pkp_structure_footer a {
        color: #ffffff !important;
    }

    /*
     * Center any wrapper that contains the footer logo.
     * :has() is supported by current mobile Chrome and prevents
     * a right-aligned parent from forcing the image to the side.
     */
    body .pkp_structure_footer p:has(img),
    body .pkp_structure_footer a:has(img),
    body .pkp_structure_footer > div:has(> img),
    body .pkp_structure_footer > div:has(> a > img),
    body .pkp_structure_footer .pkp_footer_content:has(img),
    body .pkp_structure_footer .footer-content:has(img),
    body .pkp_structure_footer .footer_content:has(img) {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        text-align: center !important;
        transform: none !important;
    }

    /*
     * The logo itself follows the same centered strategy as JAILEI:
     * it appears after the footer text, with its own clear spacing.
     */
    body .pkp_structure_footer img,
    body .pkp_structure_footer a > img,
    body .pkp_brand_footer img,
    body .pkp_brand_footer a > img {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100px !important;
        max-height: 72px !important;
        align-self: center !important;
        margin: 24px auto 0 !important;
        padding: 5px 6px !important;
        float: none !important;
        clear: both !important;
        transform: none !important;
        z-index: auto !important;
    }

    /*
     * OJS may render the branding image in a separate container.
     * Keep that container full-width, navy, and centered.
     */
    body .pkp_brand_footer {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 18px 24px !important;
        overflow: visible !important;
        background: var(--journal-navy) !important;
        text-align: center !important;
    }

    body .pkp_brand_footer > *,
    body .pkp_brand_footer a {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        text-align: center !important;
    }

    body .pkp_brand_footer img,
    body .pkp_brand_footer a > img {
        margin-top: 0 !important;
    }
}

/* Extra consistency on very narrow phones */
@media (max-width: 380px) {
    body .pkp_structure_footer {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    body .pkp_structure_footer p {
        font-size: 0.92rem !important;
        line-height: 1.42 !important;
    }

    body .pkp_structure_footer img,
    body .pkp_structure_footer a > img,
    body .pkp_brand_footer img,
    body .pkp_brand_footer a > img {
        max-width: 92px !important;
        max-height: 66px !important;
    }
}


/* =========================================================
   20. Balanced mobile footer-logo spacing — Version 6
   Gives the CuspideScience logo equal space above and below.
   ========================================================= */

@media (max-width: 575px) {
    /*
     * The main footer text ends without extra bottom padding.
     * The logo area itself provides equal 20px spacing above
     * and below the image.
     */
    body .pkp_structure_footer {
        padding-bottom: 0 !important;
    }

    /*
     * Case 1: the logo is wrapped inside the main footer.
     */
    body .pkp_structure_footer p:has(img),
    body .pkp_structure_footer a:has(img),
    body .pkp_structure_footer > div:has(> img),
    body .pkp_structure_footer > div:has(> a > img),
    body .pkp_structure_footer .pkp_footer_content:has(img),
    body .pkp_structure_footer .footer-content:has(img),
    body .pkp_structure_footer .footer_content:has(img) {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 20px 0 !important;
    }

    body .pkp_structure_footer p:has(img) img,
    body .pkp_structure_footer a:has(img) img,
    body .pkp_structure_footer > div:has(> img) > img,
    body .pkp_structure_footer > div:has(> a > img) > a > img,
    body .pkp_structure_footer .pkp_footer_content:has(img) img,
    body .pkp_structure_footer .footer-content:has(img) img,
    body .pkp_structure_footer .footer_content:has(img) img {
        margin: 0 auto !important;
    }

    /*
     * Case 2: OJS renders the logo in the separate brand-footer.
     */
    body .pkp_brand_footer {
        padding: 20px 18px !important;
    }

    body .pkp_brand_footer > *,
    body .pkp_brand_footer a {
        margin: 0 !important;
        padding: 0 !important;
    }

    body .pkp_brand_footer img,
    body .pkp_brand_footer a > img {
        margin: 0 auto !important;
    }

    /*
     * Case 3: the image is a direct child of the main footer.
     */
    body .pkp_structure_footer > img,
    body .pkp_structure_footer > a > img {
        margin: 20px auto !important;
    }
}

/* Slightly tighter, still symmetric, on very narrow phones. */
@media (max-width: 380px) {
    body .pkp_structure_footer p:has(img),
    body .pkp_structure_footer a:has(img),
    body .pkp_structure_footer > div:has(> img),
    body .pkp_structure_footer > div:has(> a > img),
    body .pkp_structure_footer .pkp_footer_content:has(img),
    body .pkp_structure_footer .footer-content:has(img),
    body .pkp_structure_footer .footer_content:has(img),
    body .pkp_brand_footer {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    body .pkp_structure_footer > img,
    body .pkp_structure_footer > a > img {
        margin-top: 18px !important;
        margin-bottom: 18px !important;
    }
}


/* =========================================================
   21. Exact mobile footer-logo vertical centering — Version 7
   Removes stacked top margins/paddings from nested wrappers and
   applies one single, symmetric spacing block around the logo.
   ========================================================= */

@media (max-width: 575px) {
    /*
     * The main text area ends immediately after the footer links.
     * No hidden bottom padding is allowed here.
     */
    body .pkp_structure_footer {
        padding-bottom: 0 !important;
    }

    /*
     * Normalize every possible wrapper that directly contains
     * the branding image. This prevents several inherited margins
     * from being added together above the logo.
     */
    body .pkp_structure_footer *:has(> img),
    body .pkp_structure_footer *:has(> a > img),
    body .pkp_brand_footer *:has(> img),
    body .pkp_brand_footer *:has(> a > img) {
        position: static !important;
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
        line-height: 0 !important;
        text-align: center !important;
        transform: none !important;
    }

    /*
     * The logo area itself owns the vertical spacing.
     * 18px above + 18px below gives a visually balanced result.
     */
    body .pkp_structure_footer p:has(img),
    body .pkp_structure_footer a:has(img),
    body .pkp_structure_footer > div:has(img),
    body .pkp_structure_footer .pkp_footer_content:has(img),
    body .pkp_structure_footer .footer-content:has(img),
    body .pkp_structure_footer .footer_content:has(img),
    body .pkp_brand_footer {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 18px 18px !important;
        line-height: 0 !important;
        background: var(--journal-navy) !important;
    }

    /*
     * Remove every legacy image margin. The wrapper padding above
     * is now the only spacing around the logo.
     */
    body .pkp_structure_footer img,
    body .pkp_structure_footer a > img,
    body .pkp_brand_footer img,
    body .pkp_brand_footer a > img {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 100px !important;
        max-height: 72px !important;
        margin: 0 auto !important;
        padding: 5px 6px !important;
        float: none !important;
        clear: both !important;
        transform: none !important;
        vertical-align: middle !important;
    }

    /*
     * If the image is a direct child of the footer, create the
     * same symmetric spacing without relying on a wrapper.
     */
    body .pkp_structure_footer > img,
    body .pkp_structure_footer > a > img {
        margin: 18px auto !important;
    }

    /*
     * Prevent the separate brand-footer container from receiving
     * extra bottom space from older rules.
     */
    body .pkp_brand_footer {
        margin: 0 !important;
        border: 0 !important;
    }
}

/* Slightly tighter but still symmetric on very narrow phones. */
@media (max-width: 380px) {
    body .pkp_structure_footer p:has(img),
    body .pkp_structure_footer a:has(img),
    body .pkp_structure_footer > div:has(img),
    body .pkp_structure_footer .pkp_footer_content:has(img),
    body .pkp_structure_footer .footer-content:has(img),
    body .pkp_structure_footer .footer_content:has(img),
    body .pkp_brand_footer {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    body .pkp_structure_footer > img,
    body .pkp_structure_footer > a > img {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }
}

/* ==========================================================
   CJMLIT: stable mobile hamburger icon and colour
   - Three white bars remain visible in every state
   - The navy background and gold border never change on tap,
     focus, hover, active, or expanded states
   - No other site component is modified
   ========================================================== */
@media (max-width: 991px) {
  .pkp_structure_head .pkp_site_nav_toggle,
  .pkp_structure_head .pkp_site_nav_toggle:hover,
  .pkp_structure_head .pkp_site_nav_toggle:focus,
  .pkp_structure_head .pkp_site_nav_toggle:focus-visible,
  .pkp_structure_head .pkp_site_nav_toggle:active,
  .pkp_structure_head .pkp_site_nav_toggle[aria-expanded="true"],
  .pkp_structure_head .pkp_site_nav_toggle[aria-expanded="false"],
  .pkp_structure_head .pkp_site_nav_toggle.is_open,
  .pkp_structure_head .pkp_site_nav_toggle.is-active,
  .pkp_structure_head .pkp_site_nav_toggle.active {
    border-color: var(--journal-gold) !important;
    background:
      linear-gradient(#ffffff, #ffffff)
        center calc(50% - 8px) / 24px 3px no-repeat,
      linear-gradient(#ffffff, #ffffff)
        center center / 24px 3px no-repeat,
      linear-gradient(#ffffff, #ffffff)
        center calc(50% + 8px) / 24px 3px no-repeat,
      var(--journal-navy) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /*
   * Remove inherited icons and pseudo-elements that can hide
   * the bars or replace them with a blank square/an X.
   */
  .pkp_structure_head .pkp_site_nav_toggle::before,
  .pkp_structure_head .pkp_site_nav_toggle::after,
  .pkp_structure_head .pkp_site_nav_toggle:hover::before,
  .pkp_structure_head .pkp_site_nav_toggle:hover::after,
  .pkp_structure_head .pkp_site_nav_toggle:focus::before,
  .pkp_structure_head .pkp_site_nav_toggle:focus::after,
  .pkp_structure_head .pkp_site_nav_toggle:active::before,
  .pkp_structure_head .pkp_site_nav_toggle:active::after,
  .pkp_structure_head .pkp_site_nav_toggle[aria-expanded="true"]::before,
  .pkp_structure_head .pkp_site_nav_toggle[aria-expanded="true"]::after,
  .pkp_structure_head .pkp_site_nav_toggle[aria-expanded="false"]::before,
  .pkp_structure_head .pkp_site_nav_toggle[aria-expanded="false"]::after {
    content: none !important;
    display: none !important;
  }

  .pkp_structure_head .pkp_site_nav_toggle > svg,
  .pkp_structure_head .pkp_site_nav_toggle > i,
  .pkp_structure_head .pkp_site_nav_toggle > .fa,
  .pkp_structure_head .pkp_site_nav_toggle > [class*="icon"] {
    display: none !important;
  }

  /* Keep the accessible label for screen readers only. */
  .pkp_structure_head .pkp_site_nav_toggle > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* ==========================================================
   CJMLIT: persistent mobile hamburger bars
   The three white bars are painted directly on the button in
   every state, including the default non-hover state.
   ========================================================== */
@media (max-width: 991px) {
  html body .pkp_structure_head .pkp_site_nav_toggle,
  html body .pkp_structure_head .pkp_site_nav_toggle:not(:hover),
  html body .pkp_structure_head .pkp_site_nav_toggle:hover,
  html body .pkp_structure_head .pkp_site_nav_toggle:focus,
  html body .pkp_structure_head .pkp_site_nav_toggle:focus-visible,
  html body .pkp_structure_head .pkp_site_nav_toggle:active,
  html body .pkp_structure_head .pkp_site_nav_toggle[aria-expanded="true"],
  html body .pkp_structure_head .pkp_site_nav_toggle[aria-expanded="false"] {
    border-color: var(--journal-gold) !important;
    background-color: var(--journal-navy) !important;
    background-image:
      linear-gradient(to right, #ffffff, #ffffff),
      linear-gradient(to right, #ffffff, #ffffff),
      linear-gradient(to right, #ffffff, #ffffff) !important;
    background-repeat: no-repeat !important;
    background-size:
      24px 3px,
      24px 3px,
      24px 3px !important;
    background-position:
      center calc(50% - 8px),
      center center,
      center calc(50% + 8px) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body .pkp_structure_head .pkp_site_nav_toggle::before,
  html body .pkp_structure_head .pkp_site_nav_toggle::after,
  html body .pkp_structure_head .pkp_site_nav_toggle:not(:hover)::before,
  html body .pkp_structure_head .pkp_site_nav_toggle:not(:hover)::after,
  html body .pkp_structure_head .pkp_site_nav_toggle:hover::before,
  html body .pkp_structure_head .pkp_site_nav_toggle:hover::after,
  html body .pkp_structure_head .pkp_site_nav_toggle:focus::before,
  html body .pkp_structure_head .pkp_site_nav_toggle:focus::after,
  html body .pkp_structure_head .pkp_site_nav_toggle:active::before,
  html body .pkp_structure_head .pkp_site_nav_toggle:active::after,
  html body .pkp_structure_head .pkp_site_nav_toggle[aria-expanded="true"]::before,
  html body .pkp_structure_head .pkp_site_nav_toggle[aria-expanded="true"]::after {
    content: none !important;
    display: none !important;
  }

  html body .pkp_structure_head .pkp_site_nav_toggle > svg,
  html body .pkp_structure_head .pkp_site_nav_toggle > i,
  html body .pkp_structure_head .pkp_site_nav_toggle > .fa,
  html body .pkp_structure_head .pkp_site_nav_toggle > [class*="icon"] {
    display: none !important;
  }

  html body .pkp_structure_head .pkp_site_nav_toggle > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}