/* Created by    : Bintoro S. Nugroho (Fisika Untan)
   Date created  : 9 Aug. 2026 
   Last modified : 11 Aug. 2026   
   OJS type      : 3.3 
   Theme         : Default Theme
   Style name    : POSITRON1
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
    --positron-navy: #18273e;
    --positron-deep-blue: #083759;
    --positron-light-blue: #63a9e6;
    --positron-pale-blue: #BEDEFA;
    --positron-gold: #CC931B;
    --positron-canvas: #e5e7eb;
    --positron-white: #ffffff;
    --positron-text: #222222;
    --positron-nav-text: #374151;
    --positron-menu-border: #36526f;
    --positron-font-sans: "Noto Sans", Arial, sans-serif;
}


/* =========================================================
   2. PAGE CANVAS
   ========================================================= */
html,
body {
    background: var(--positron-canvas);
}

.pkp_structure_page {
    max-width: 1160px;
    margin: 0 auto;
    background: var(--positron-white);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.10);
}

@media (min-width: 1200px) {
    .pkp_structure_page {
        margin-top: 28px;
        margin-bottom: 28px;
    }
}


/* =========================================================
   3. RESPONSIVE HEADER
   ========================================================= */
.pkp_structure_head {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--positron-canvas) !important;
    border: 0 !important;
    overflow: visible !important;
}

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

.pkp_structure_head .pkp_site_name_wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 6px solid var(--positron-gold) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Neutralize the Default Theme mobile offset so the banner never shifts. */
.pkp_structure_head .pkp_site_name {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.pkp_structure_head .pkp_site_name .is_img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.pkp_structure_head .pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}

/* Desktop header/navigation */
@media (min-width: 992px) {
    .pkp_structure_head .pkp_navigation_primary_wrapper {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 22px !important;
        background: var(--positron-white) !important;
        border-top: 0 !important;
        border-bottom: 1px solid var(--positron-canvas) !important;
        box-sizing: border-box !important;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_search_wrapper a {
        color: var(--positron-nav-text);
        font-family: var(--positron-font-sans);
        font-size: 0.92rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        padding-top: 12px;
        padding-bottom: 9px;
        border-bottom: 3px solid transparent;
    }

    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus,
    .pkp_navigation_search_wrapper a:hover,
    .pkp_navigation_search_wrapper a:focus {
        color: var(--positron-deep-blue);
        border-bottom-color: var(--positron-deep-blue);
        background: transparent;
    }

    .pkp_navigation_user_wrapper {
        position: absolute !important;
        top: 8px !important;
        right: 14px !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 100 !important;
        background: transparent !important;
        text-align: right !important;
    }

    .pkp_navigation_user {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    .pkp_navigation_user > li {
        display: inline-block !important;
        float: none !important;
        margin: 0 0 0 6px !important;
    }

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

    .pkp_navigation_user > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 5px 10px !important;
        color: var(--positron-white) !important;
        background: var(--positron-deep-blue) !important;
        border: 1px solid var(--positron-deep-blue) !important;
        border-radius: 5px !important;
        box-shadow:
            0 2px 5px rgba(0, 0, 0, 0.30),
            0 0 0 1px rgba(255, 255, 255, 0.16) !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }

    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        color: var(--positron-deep-blue) !important;
        background: var(--positron-pale-blue) !important;
        border-color: var(--positron-light-blue) !important;
        box-shadow:
            0 3px 7px rgba(0, 0, 0, 0.34),
            0 0 0 1px rgba(8, 55, 89, 0.12) !important;
        text-decoration: none !important;
    }

    .pkp_navigation_user > li > a[href*="register"]::before,
    .pkp_navigation_user > li > a[href*="login"]::before {
        content: "" !important;
        display: inline-block !important;
        width: 15px !important;
        height: 15px !important;
        margin-right: 6px !important;
        flex: 0 0 15px !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
    }

    .pkp_navigation_user > li > a[href*="register"]::before {
        background-image: url("https://api.iconify.design/mdi/account-plus-outline.svg?color=%23ffffff") !important;
    }

    .pkp_navigation_user > li > a[href*="login"]::before {
        background-image: url("https://api.iconify.design/mdi/login.svg?color=%23ffffff") !important;
    }

    .pkp_navigation_user > li > a[href*="register"]:hover::before,
    .pkp_navigation_user > li > a[href*="register"]:focus::before {
        background-image: url("https://api.iconify.design/mdi/account-plus-outline.svg?color=%23083759") !important;
    }

    .pkp_navigation_user > li > a[href*="login"]:hover::before,
    .pkp_navigation_user > li > a[href*="login"]:focus::before {
        background-image: url("https://api.iconify.design/mdi/login.svg?color=%23083759") !important;
    }
}

/* Tablet/mobile header */
@media (max-width: 991px) {
    .pkp_structure_head .pkp_site_name_wrapper {
        position: relative !important;
    }

    .pkp_site_nav_toggle {
        position: absolute !important;
        top: 8px !important;
        left: 8px !important;
        right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10002 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        color: var(--positron-white) !important;
        background: rgba(24, 39, 62, 0.94) !important;
        border-radius: 4px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22) !important;
        box-sizing: border-box !important;
    }

    .pkp_site_nav_menu {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        z-index: 10001 !important;
        pointer-events: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .pkp_structure_head,
    .pkp_structure_head .pkp_head_wrapper,
    .pkp_structure_head .pkp_site_name_wrapper,
    .pkp_structure_head .pkp_site_name,
    .pkp_structure_head .pkp_site_name .is_img {
        overflow-x: visible !important;
    }
}


/* =========================================================
   4. HOMEPAGE STRUCTURE
   ========================================================= */

/* Remove Default Theme main-column dividers at every width. */
body.pkp_page_index.pkp_op_index
.pkp_structure_content > .pkp_structure_main {
    border-left: 0 !important;
    border-right: 0 !important;
}

body.pkp_page_index.pkp_op_index
.pkp_structure_content > .pkp_structure_main::before,
body.pkp_page_index.pkp_op_index
.pkp_structure_content > .pkp_structure_main::after {
    content: none !important;
    display: none !important;
}

/* Desktop: flexible main column + fixed 300px sidebar. */
@media (min-width: 992px) {
    body.pkp_page_index.pkp_op_index .pkp_structure_content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        align-items: start !important;
        width: 100% !important;
        padding-top: 16px !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }

    body.pkp_page_index.pkp_op_index
    .pkp_structure_content > .pkp_structure_main {
        grid-column: 1 !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 4px 32px 64px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.pkp_page_index.pkp_op_index
    .pkp_structure_content > .pkp_structure_sidebar {
        grid-column: 2 !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 300px !important;
        margin: 0 !important;
        padding: 3.5px 8px 28px !important;
        border-left: 1px solid var(--positron-canvas) !important;
        border-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Tablet/mobile: stacked flow with no vertical divider. */
@media (max-width: 991px) {
    body.pkp_page_index.pkp_op_index .pkp_structure_content {
        display: block !important;
        width: 100% !important;
        padding-top: 0 !important;
        box-sizing: border-box !important;
    }

    body.pkp_page_index.pkp_op_index
    .pkp_structure_content > .pkp_structure_main,
    body.pkp_page_index.pkp_op_index
    .pkp_structure_content > .pkp_structure_sidebar {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body.pkp_page_index.pkp_op_index
    .pkp_structure_content > .pkp_structure_sidebar {
        padding-left: 8px !important;
        padding-right: 8px !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }
}


/* =========================================================
   5. NATIVE OJS ADDITIONAL CONTENT AS "ABOUT JOURNAL"
   ========================================================= */
body.pkp_page_index.pkp_op_index .page_index_journal {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

body.pkp_page_index.pkp_op_index
.page_index_journal > .additional_content {
    order: -100 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .home-about-journal {
    width: 100% !important;
    min-width: 0 !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .home-about-journal > h2,
body.pkp_page_index.pkp_op_index
.additional_content h2.about-journal-title {
    margin: 0 0 20px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--positron-navy) !important;
    font-family: var(--positron-font-sans) !important;
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: var(--positron-text) !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .home-about-journal > p {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .about-journal-info {
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    column-gap: 24px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 12px !important;
    box-sizing: border-box !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .about-journal-cover,
body.pkp_page_index.pkp_op_index
.additional_content .journal-meta {
    min-width: 0 !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .about-journal-cover img {
    display: block !important;
    width: 100% !important;
    max-width: 170px !important;
    height: auto !important;
    margin: 0 !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .meta-row {
    display: grid !important;
    grid-template-columns: 128px 14px minmax(0, 1fr) !important;
    column-gap: 4px !important;
    align-items: baseline !important;
    margin: 0 0 6px !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .meta-label {
    font-weight: 600 !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .meta-colon {
    text-align: center !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .meta-value {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .journal-links {
    margin-top: 14px !important;
}

body.pkp_page_index.pkp_op_index
.additional_content .journal-links a {
    display: inline-block !important;
    margin: 0 12px 6px 0 !important;
}

@media (max-width: 767px) {
    body.pkp_page_index.pkp_op_index
    .page_index_journal > .additional_content {
        margin-bottom: 22px !important;
    }

    body.pkp_page_index.pkp_op_index
    .additional_content .about-journal-info {
        display: block !important;
        margin-top: 10px !important;
    }

    body.pkp_page_index.pkp_op_index
    .additional_content .about-journal-cover {
        margin-bottom: 18px !important;
        text-align: center !important;
    }

    body.pkp_page_index.pkp_op_index
    .additional_content .about-journal-cover img {
        width: 180px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    body.pkp_page_index.pkp_op_index
    .additional_content .meta-row {
        grid-template-columns: 112px 14px minmax(0, 1fr) !important;
        column-gap: 4px !important;
        margin-bottom: 8px !important;
    }

    body.pkp_page_index.pkp_op_index
    .additional_content .journal-links {
        margin-top: 18px !important;
    }
}


/* =========================================================
   6. CUSTOM SIDEBAR
   Matches the current Custom Block HTML exactly.
   ========================================================= */

/* Desktop: widen only the custom sidebar menu so 8px remains
   between the menu box and each outer edge of the 300px sidebar. */
@media (min-width: 992px) {
    #customblock-sidebar {
        width: calc(100% + 1px) !important;
        margin-left: -1px !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
}
#customblock-sidebar .journal-sidebar-menu,
.journal-sidebar-menu {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--positron-font-sans) !important;
    box-sizing: border-box !important;
}

/* Each current menu row is wrapped in its own .sidebar-section. */
#customblock-sidebar .journal-sidebar-menu > .sidebar-section,
.journal-sidebar-menu > .sidebar-section {
    display: contents !important;
}

#customblock-sidebar .journal-sidebar-menu p,
.journal-sidebar-menu p {
    margin: 0 !important;
    padding: 0 !important;
}

#customblock-sidebar .journal-sidebar-menu .sidebar-heading,
.journal-sidebar-menu .sidebar-heading {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    background: linear-gradient(
        to bottom,
        #e3e5e8 0%,
        #f1f2f3 48%,
        var(--positron-white) 100%
    ) !important;
    color: var(--positron-navy) !important;
    border: 1px solid #000000 !important;
    border-bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10) !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

#customblock-sidebar
.journal-sidebar-menu > .sidebar-section:first-child > .sidebar-heading,
.journal-sidebar-menu > .sidebar-section:first-child > .sidebar-heading {
    margin-top: 0 !important;
}

#customblock-sidebar .journal-sidebar-menu > .sidebar-section > a,
.journal-sidebar-menu > .sidebar-section > a {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    background: var(--positron-navy) !important;
    color: var(--positron-white) !important;
    border-top: 0 !important;
    border-left: 1px solid var(--positron-menu-border) !important;
    border-right: 1px solid var(--positron-menu-border) !important;
    border-bottom: 1px solid var(--positron-menu-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 0.90rem !important;
    line-height: 1.40 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}

#customblock-sidebar .journal-sidebar-menu .sidebar-heading + a,
.journal-sidebar-menu .sidebar-heading + a {
    border-top: 4px solid var(--positron-gold) !important;
}

/* Bottom corners only at the end of a visual menu group. */
#customblock-sidebar
.journal-sidebar-menu > .sidebar-section:has(+ .sidebar-section > .sidebar-heading) > a,
.journal-sidebar-menu > .sidebar-section:has(+ .sidebar-section > .sidebar-heading) > a,
#customblock-sidebar
.journal-sidebar-menu > .sidebar-section:last-child > a,
.journal-sidebar-menu > .sidebar-section:last-child > a {
    border-radius: 0 0 4px 4px !important;
}

#customblock-sidebar .journal-sidebar-menu > .sidebar-section > a img,
.journal-sidebar-menu > .sidebar-section > a img {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
}

#customblock-sidebar
.journal-sidebar-menu > .sidebar-section > a:focus:not(:focus-visible),
.journal-sidebar-menu > .sidebar-section > a:focus:not(:focus-visible) {
    background: var(--positron-navy) !important;
    color: var(--positron-white) !important;
    outline: none !important;
}

#customblock-sidebar
.journal-sidebar-menu > .sidebar-section > a:focus-visible,
.journal-sidebar-menu > .sidebar-section > a:focus-visible {
    background: var(--positron-light-blue) !important;
    color: var(--positron-deep-blue) !important;
    outline: 2px solid var(--positron-white) !important;
    outline-offset: -2px !important;
}

@media (hover: hover) and (pointer: fine) {
    #customblock-sidebar
    .journal-sidebar-menu > .sidebar-section > a:hover,
    .journal-sidebar-menu > .sidebar-section > a:hover {
        background: var(--positron-light-blue) !important;
        color: var(--positron-deep-blue) !important;
        text-decoration: none !important;
        outline: none !important;
    }
}

@media (hover: none), (pointer: coarse) {
    #customblock-sidebar
    .journal-sidebar-menu > .sidebar-section > a:hover,
    #customblock-sidebar
    .journal-sidebar-menu > .sidebar-section > a:focus:not(:focus-visible),
    .journal-sidebar-menu > .sidebar-section > a:hover,
    .journal-sidebar-menu > .sidebar-section > a:focus:not(:focus-visible) {
        background: var(--positron-navy) !important;
        color: var(--positron-white) !important;
    }

    #customblock-sidebar
    .journal-sidebar-menu > .sidebar-section > a:active,
    .journal-sidebar-menu > .sidebar-section > a:active {
        background: var(--positron-light-blue) !important;
        color: var(--positron-deep-blue) !important;
    }
}

@media (max-width: 991px) {
    #customblock-sidebar {
        padding-top: 12px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    #customblock-sidebar .journal-sidebar-menu > .sidebar-section > a,
    .journal-sidebar-menu > .sidebar-section > a {
        min-height: 44px !important;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
        gap: 9px !important;
    }

    #customblock-sidebar .journal-sidebar-menu > .sidebar-section > a img,
    .journal-sidebar-menu > .sidebar-section > a img {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        max-width: 17px !important;
        flex-basis: 17px !important;
    }
}



/* =========================================================
   6A. GENERIC CUSTOM-BOX WRAPPER NORMALIZATION
   =========================================================
   Any non-menu OJS Custom Block that contains .sidebar-custom-box
   uses the same outer geometry as #customblock-sidebar. This keeps
   all custom boxes aligned with REVIEWER / JOURNAL POLICY without
   requiring block-specific IDs or CSS.
*/

/* Remove residual bottom padding below the main sidebar menu. */
#customblock-sidebar {
    padding-bottom: 0 !important;
}

/* Remove native OJS block spacing around every generic custom box. */
.pkp_structure_sidebar .pkp_block:has(.sidebar-custom-box) {
    min-width: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* Desktop: match the horizontal geometry of #customblock-sidebar. */
@media (min-width: 992px) {
    .pkp_structure_sidebar .pkp_block:has(.sidebar-custom-box) {
        width: calc(100% + 1px) !important;
        margin-left: -1px !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Tablet/mobile: mirror the 8px horizontal padding used by the
   existing responsive custom-sidebar rules. */
@media (max-width: 991px) {
    .pkp_structure_sidebar .pkp_block:has(.sidebar-custom-box) {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}


/* =========================================================
   6B. GENERIC NON-MENU CUSTOM BOX
   Reusable HTML structure:

   .sidebar-custom-box
     .sidebar-custom-box__title
     .sidebar-custom-box__content

   Optional content helpers:
     .sidebar-custom-box__content--grid-2
     .sidebar-custom-box__content--center
   ========================================================= */

.sidebar-custom-box {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    font-family: var(--positron-font-sans) !important;
    box-sizing: border-box !important;
}

/* Generic heading: matches REVIEWER / JOURNAL POLICY. */
.sidebar-custom-box__title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    background: linear-gradient(
        to bottom,
        #e3e5e8 0%,
        #f1f2f3 48%,
        var(--positron-white) 100%
    ) !important;
    color: var(--positron-navy) !important;
    border: 1px solid #000000 !important;
    border-bottom: 0 !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10) !important;
    font-family: var(--positron-font-sans) !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

/* Generic white content area below the gold separator. */
.sidebar-custom-box__content {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 10px 14px !important;
    background: var(--positron-white) !important;
    border-top: 4px solid var(--positron-gold) !important;
    border-right: 1px solid #000000 !important;
    border-bottom: 1px solid #000000 !important;
    border-left: 1px solid #000000 !important;
    border-radius: 0 0 4px 4px !important;
    box-sizing: border-box !important;
}

/* Optional two-column layout for blocks such as Preparing the Article. */
.sidebar-custom-box__content--grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    align-items: start !important;
}

/* Optional helper for single centered content (logo, counter, badge, etc.). */
.sidebar-custom-box__content--center {
    text-align: center !important;
}

.sidebar-custom-box__content img {
    max-width: 100% !important;
    height: auto;
}


/* =========================================================
   6C. PREPARING THE ARTICLE — RESOURCE ITEMS
   The outer frame is supplied entirely by .sidebar-custom-box.
   These rules only control the two resource items inside it.
   ========================================================= */

.sidebar-resource-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 4px 3px 6px !important;
    color: var(--positron-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.18s ease !important;
}

/* Equal label height keeps the Word and Mendeley logos aligned. */
.sidebar-resource-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 2.6em !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: var(--positron-text) !important;
    font-family: var(--positron-font-sans) !important;
    font-size: 0.86rem !important;
    line-height: 1.30 !important;
    font-weight: 600 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
}

.sidebar-resource-logo {
    display: block !important;
    width: 84px !important;
    height: 84px !important;
    min-width: 0 !important;
    max-width: 84px !important;
    min-height: 0 !important;
    max-height: 84px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
}

@media (hover: hover) and (pointer: fine) {
    .sidebar-resource-item:hover {
        background: #f3f7fb !important;
        color: var(--positron-deep-blue) !important;
        text-decoration: none !important;
    }

    .sidebar-resource-item:hover .sidebar-resource-label {
        color: var(--positron-deep-blue) !important;
    }
}

.sidebar-resource-item:focus-visible {
    outline: 2px solid var(--positron-light-blue) !important;
    outline-offset: -2px !important;
    background: #f3f7fb !important;
}

/* Very narrow screens: slightly reduce content spacing and logo size. */
@media (max-width: 480px) {
    .sidebar-custom-box__content--grid-2 {
        column-gap: 6px !important;
        padding: 11px 8px 13px !important;
    }

    .sidebar-resource-logo {
        width: 76px !important;
        height: 76px !important;
        max-width: 76px !important;
        max-height: 76px !important;
    }
}

/* =========================================================
   7. LOGIN / REGISTER
   ========================================================= */
body.pkp_page_login #customblock-sidebar,
body.pkp_page_login .pkp_structure_sidebar,
body.pkp_page_user.pkp_op_register #customblock-sidebar,
body.pkp_page_user.pkp_op_register .pkp_structure_sidebar {
    display: none !important;
}

body.pkp_page_login .pkp_structure_main,
body.pkp_page_user.pkp_op_register .pkp_structure_main {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 32px !important;
    border-right: 0 !important;
    box-sizing: border-box !important;
}

body.pkp_page_login .pkp_structure_main::before,
body.pkp_page_login .pkp_structure_main::after,
body.pkp_page_user.pkp_op_register .pkp_structure_main::before,
body.pkp_page_user.pkp_op_register .pkp_structure_main::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 767px) {
    body.pkp_page_login .pkp_structure_main,
    body.pkp_page_user.pkp_op_register .pkp_structure_main {
        padding: 22px 18px !important;
    }
}


/* =========================================================
   8. USER-NAV CLEANUP
   ========================================================= */
.pkp_navigation_user .task_count,
#navigationUser .task_count,
#navigationUserWrapper .task_count {
    display: none !important;
}


/* =========================================================
   9. FOOTER
   ========================================================= */
.pkp_brand_footer {
    display: none !important;
}

.pkp_structure_footer_wrapper {
    margin: 0 !important;
    padding: 6px 0 0 !important;
    background: var(--positron-canvas);
    box-sizing: border-box;
}

.pkp_structure_footer,
.pkp_footer_content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.custom-journal-footer {
    --footer-side-pad: 14px;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px var(--footer-side-pad) 0 !important;
    background: var(--positron-white);
    text-align: center;
    box-sizing: border-box;
}

.footer-publisher-info {
    max-width: 760px;
    margin: 0 auto 12px;
    color: var(--positron-text);
    font-family: var(--positron-font-sans);
    font-size: 13.5px;
    line-height: 1.45;
}

.footer-journal-title {
    margin: 0 0 5px;
    color: #0a45c2;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
}

.footer-publisher-name,
.footer-address,
.footer-email {
    margin: 0;
    color: var(--positron-text);
    font-size: 13.5px;
    line-height: 1.45;
}

/* Full-bleed map: derived from the footer's single side-padding token. */
.footer-map {
    width: calc(100% + var(--footer-side-pad) + var(--footer-side-pad)) !important;
    max-width: none !important;
    margin-top: 12px !important;
    margin-right: calc(0px - var(--footer-side-pad)) !important;
    margin-bottom: 0 !important;
    margin-left: calc(0px - var(--footer-side-pad)) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.footer-map iframe {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 230px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: bottom !important;
}

@media (max-width: 768px) {
    .custom-journal-footer {
        --footer-side-pad: 8px;
    }

    .footer-journal-title {
        font-size: 18px;
    }

    .footer-publisher-info,
    .footer-publisher-name,
    .footer-address,
    .footer-email {
        font-size: 13px;
    }

    .footer-map iframe {
        height: 200px !important;
    }
}


/* =========================================================
   10. ACCESSIBILITY / MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    #customblock-sidebar .journal-sidebar-menu > .sidebar-section > a,
    .journal-sidebar-menu > .sidebar-section > a {
        transition: none !important;
    }
}

/* =========================================================
   11. AUTH-AWARE USER NAVIGATION
   =========================================================
   Login and Register are custom Remote URL items ending in
   #login and #register. OJS adds the native account/profile
   dropdown only when a user is authenticated.

   Hide the two Remote URL items only when the authenticated
   account item is present. The first condition uses OJS's
   .task_count marker; the second is a structural fallback
   based on the native account dropdown submenu.
*/
#navigationUser:has(.task_count)
> li:has(> a[href$="#login"]),
#navigationUser:has(.task_count)
> li:has(> a[href$="#register"]),
#navigationUser:has(> li > ul)
> li:has(> a[href$="#login"]),
#navigationUser:has(> li > ul)
> li:has(> a[href$="#register"]) {
    display: none !important;
}