/*
 * CJMLIT — CJAILEI-matched standalone stylesheet
 * Target: OJS 3.4.x, Default Theme
 * Version: 10.4-CJMLIT
 *
 * This is a CLEAN stylesheet written from scratch.
 * Do not load it together with earlier CJMLIT stylesheet 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. Final CJMLIT readability and logo refinement — v7
   ========================================================= */

/* Slightly larger masthead logo on desktop */
@media (min-width: 1200px) {
    body .pkp_structure_head .pkp_site_name_wrapper {
        min-height: 122px !important;
    }

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

/* Balanced logo size on medium desktop screens */
@media (min-width: 992px) and (max-width: 1199px) {
    body .pkp_structure_head .pkp_site_name_wrapper {
        min-height: 112px !important;
    }

    body .pkp_structure_head .pkp_site_name .is_img img {
        height: 102px !important;
        max-height: 102px !important;
        max-width: min(530px, 52vw) !important;
    }
}

/* Slightly larger mobile logo while preserving menu clearance */
@media (max-width: 991px) {
    body .pkp_structure_head .pkp_site_name .is_img img {
        height: 57px !important;
        max-height: 57px !important;
        max-width: calc(100vw - 92px) !important;
    }
}

/* Improved 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.04rem !important;
    line-height: 1.70 !important;
}

/* Keep the Contact page intentionally more compact */
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;
}

/* Mobile readability */
@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.64 !important;
    }
}


/* =========================================================
   16. Final visual polish — Version 8
   Small adjustments based on the validated live homepage.
   ========================================================= */

/* Create a reliable visual gap below the homepage cover */
body .pkp_page_index .homepage_image {
    margin-bottom: 18px !important;
}

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

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

/* Slightly strengthen the masthead logo without enlarging the header */
@media (min-width: 1200px) {
    body .pkp_structure_head .pkp_site_name .is_img {
        overflow: visible !important;
    }

    body .pkp_structure_head .pkp_site_name .is_img img {
        transform: scale(1.04) !important;
        transform-origin: left center !important;
    }
}

/* Refine sidebar rhythm */
body .pkp_structure_sidebar {
    gap: 19px !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;
}

/* Make the footer logo slightly easier to identify */
@media (min-width: 992px) {
    body .pkp_structure_footer img,
    body .pkp_brand_footer img {
        max-width: 118px !important;
        max-height: 80px !important;
    }
}

/* Keep mobile spacing compact */
@media (max-width: 575px) {
    body .pkp_page_index .homepage_image {
        margin-bottom: 14px !important;
    }

    body .pkp_page_index .homepage_about h2 {
        margin-bottom: 20px !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;
  }
}

/* =========================================================
   17. Article details — DOI / Keywords alignment fix — v10.3
   =========================================================
   - DOI and Keywords align horizontally with Abstract content.
   - The Keywords separator matches the Abstract underline width.
   - The rules remain responsive on tablet and mobile.
   ========================================================= */

/*
 * The Abstract block in the CJMLIT article layout is visually inset
 * from the edge of the main article column. Apply the same horizontal
 * inset to DOI and Keywords so all metadata/content begins on one axis.
 */
.obj_article_details .main_entry .item.doi,
.obj_article_details .main_entry .item.keywords {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.obj_article_details .main_entry .item.doi {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.obj_article_details .main_entry .item.keywords {
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 0 !important;
}

/*
 * Since the Keywords block itself now has the same 32px inset as
 * Abstract, the separator can span 100% of the inner block width.
 */
.obj_article_details .main_entry .item.keywords::after {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(215, 167, 42, 0.72) !important;
    box-shadow: none !important;
}

/* Remove the generic h2 underline from DOI and Keywords labels only. */
.obj_article_details .main_entry .item.doi .label,
.obj_article_details .main_entry .item.keywords .label,
.obj_article_details .main_entry .item.doi h2.label,
.obj_article_details .main_entry .item.keywords h2.label {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--journal-navy) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    vertical-align: baseline !important;
}

.obj_article_details .main_entry .item.doi .value,
.obj_article_details .main_entry .item.keywords .value {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.55 !important;
    vertical-align: baseline !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.obj_article_details .main_entry .item.doi .label::after,
.obj_article_details .main_entry .item.keywords .label::after {
    content: " " !important;
}

/* Tablet */
@media (max-width: 991px) {
    .obj_article_details .main_entry .item.doi,
    .obj_article_details .main_entry .item.keywords {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .obj_article_details .main_entry .item.doi,
    .obj_article_details .main_entry .item.keywords {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .obj_article_details .main_entry .item.doi {
        margin-bottom: 9px !important;
    }

    .obj_article_details .main_entry .item.keywords {
        margin-bottom: 22px !important;
        padding-bottom: 13px !important;
    }

    .obj_article_details .main_entry .item.keywords::after {
        margin-top: 12px !important;
    }

    .obj_article_details .main_entry .item.doi .label,
    .obj_article_details .main_entry .item.keywords .label,
    .obj_article_details .main_entry .item.doi h2.label,
    .obj_article_details .main_entry .item.keywords h2.label {
        font-size: 1.05rem !important;
    }
}


/* =========================================================
   18. OJSBR Most Read Block — unified sidebar design — v10.4
   The plugin renders .title INSIDE .content, unlike the
   standard OJS blocks. Remove the wrapper padding and place
   it exclusively on the articles list so the header spans
   the full card width, with no inner frame/double border.
   Scoped to .block_most_read: other blocks are unchanged.
   ========================================================= */

/* Remove the generic .content padding added by the journal theme. */
body .pkp_structure_sidebar .pkp_block.block_most_read > .content {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

/* Make the Most Read heading a full-width standard block header.
   Colours, typeface and border details are inherited from
   the existing sidebar .title rule. */
body .pkp_structure_sidebar .pkp_block.block_most_read > .content > .title {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Put the padding on the list, BELOW the full-width heading. */
body .pkp_structure_sidebar .pkp_block.block_most_read > .content > ul.most_read {
    display: block !important;
    margin: 0 !important;
    padding: 19px 21px 20px !important;
    list-style: none !important;
}

body .pkp_structure_sidebar .pkp_block.block_most_read > .content > ul.most_read > li.most_read_article {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body .pkp_structure_sidebar .pkp_block.block_most_read > .content > ul.most_read > li.most_read_article + li.most_read_article {
    margin-top: 16px !important;
}

/* Preserve article links; keep the view metric visually secondary. */
body .pkp_structure_sidebar .pkp_block.block_most_read .most_read_article_title {
    line-height: 1.5 !important;
    overflow-wrap: break-word !important;
}

body .pkp_structure_sidebar .pkp_block.block_most_read .most_read_article_journal {
    margin-top: 2px !important;
    color: #55656d !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}


/* =========================================================
   19. OJSBR Accessibility — coherent high-contrast mode — v10.5
   Active ONLY when the plugin adds html.ojsbr-a11y-contrast.
   Keeps the regular theme unchanged.
   ========================================================= */

/* The custom journal theme sets several light backgrounds with
   !important; override those surfaces only in contrast mode. */
html.ojsbr-a11y-contrast body,
html.ojsbr-a11y-contrast body .pkp_structure_page,
html.ojsbr-a11y-contrast body .pkp_structure_head,
html.ojsbr-a11y-contrast body .pkp_structure_head .pkp_head_wrapper,
html.ojsbr-a11y-contrast body .pkp_structure_head .pkp_site_name_wrapper,
html.ojsbr-a11y-contrast body .pkp_structure_head .pkp_navigation_user_wrapper,
html.ojsbr-a11y-contrast body .pkp_structure_head .pkp_navigation_primary_row,
html.ojsbr-a11y-contrast body .pkp_structure_content,
html.ojsbr-a11y-contrast body .pkp_structure_main,
html.ojsbr-a11y-contrast body .pkp_structure_main .page,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar,
html.ojsbr-a11y-contrast body .pkp_structure_footer_wrapper,
html.ojsbr-a11y-contrast body .pkp_structure_footer {
    background: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
}

/* Journal Information, Most Downloaded, Language, Information and
   Accessibility must have the same dark card/background. */
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block .content,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block .title,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .block_make_submission,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block.block_most_read > .content,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block.block_most_read > .content > .title {
    background: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
}

/* Text and headings: avoid dark-blue-on-black and white-on-white.
   Apply to rendered elements, leaving image pixels unchanged. */
html.ojsbr-a11y-contrast body .pkp_structure_main *,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar *,
html.ojsbr-a11y-contrast body .pkp_structure_footer * {
    color: #ffffff !important;
    border-color: #ffffff !important;
    text-shadow: none !important;
}

/* Some custom rules address deeper elements with greater specificity. */
html.ojsbr-a11y-contrast body .pkp_structure_main h1,
html.ojsbr-a11y-contrast body .pkp_structure_main h2,
html.ojsbr-a11y-contrast body .pkp_structure_main h3,
html.ojsbr-a11y-contrast body .pkp_structure_main h4,
html.ojsbr-a11y-contrast body .pkp_structure_main h5,
html.ojsbr-a11y-contrast body .pkp_structure_main h6,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block .title,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block.block_most_read .most_read_article_journal {
    color: #ffffff !important;
}

/* Yellow links consistently, including menus, sidebar and article TOC. */
html.ojsbr-a11y-contrast body a,
html.ojsbr-a11y-contrast body a *,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block .content a,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block .content a *,
html.ojsbr-a11y-contrast body .pkp_structure_main a,
html.ojsbr-a11y-contrast body .pkp_structure_main a *,
html.ojsbr-a11y-contrast body .pkp_structure_head a,
html.ojsbr-a11y-contrast body .pkp_structure_head a * {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

/* A contrast-mode action should remain visible and recognizable. */
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .block_make_submission a,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block.block_make_submission a {
    background: #000000 !important;
    border: 2px solid #ffff00 !important;
    color: #ffff00 !important;
}

html.ojsbr-a11y-contrast body a:hover,
html.ojsbr-a11y-contrast body a:focus,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block .content a:hover,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .pkp_block .content a:focus,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .block_make_submission a:hover,
html.ojsbr-a11y-contrast body .pkp_structure_sidebar .block_make_submission a:focus {
    background: #ffff00 !important;
    color: #000000 !important;
}

html.ojsbr-a11y-contrast body a:hover *,
html.ojsbr-a11y-contrast body a:focus * {
    color: #000000 !important;
}

/* Preserve a visible keyboard focus, without affecting normal mode. */
html.ojsbr-a11y-contrast body a:focus-visible,
html.ojsbr-a11y-contrast body button:focus-visible,
html.ojsbr-a11y-contrast body input:focus-visible {
    outline: 3px solid #ffff00 !important;
    outline-offset: 3px !important;
}

/* The plugin's selected contrast button remains yellow with black text. */
html.ojsbr-a11y-contrast body .block_accessibility .ojsbr-a11y-btn[aria-pressed="true"] {
    background: #ffff00 !important;
    border-color: #ffff00 !important;
    color: #000000 !important;
}
