/* =====================================================
   OJS 3 MODERN RESPONSIVE FRONTEND CSS
   Target: OJS 3.x Default Theme / compatible derivatives
   Scope : Public journal frontend only
===================================================== */

/* =====================================================
   01. RESET & GLOBAL
===================================================== */

:root {
    --ojs-primary: #12355b;
    --ojs-primary-hover: #0d2948;
    --ojs-primary-soft: #eef4fa;
    --ojs-background: #f5f7fa;
    --ojs-surface: #ffffff;
    --ojs-text: #252525;
    --ojs-muted: #687386;
    --ojs-border: #e3e7ed;
    --ojs-shadow: 0 2px 10px rgba(20, 38, 63, 0.08);
    --ojs-shadow-hover: 0 6px 18px rgba(20, 38, 63, 0.11);
    --ojs-radius: 8px;
    --ojs-container: 1200px;
    --ojs-sidebar: 300px;
    --ojs-gap: 24px;
}

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

body {
    background: var(--ojs-background);
    color: var(--ojs-text);
    font-family: Arial, Helvetica, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

.pkp_structure_page {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    margin: 0;
    background: var(--ojs-background);
}

.pkp_structure_page a {
    color: var(--ojs-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.pkp_structure_page a:hover,
.pkp_structure_page a:focus {
    color: var(--ojs-primary-hover);
}

.pkp_structure_page img,
.pkp_structure_page iframe,
.pkp_structure_page video,
.pkp_structure_page canvas,
.pkp_structure_page svg {
    max-width: 100%;
}

.pkp_structure_page img {
    height: auto;
}

.pkp_structure_page iframe,
.pkp_structure_page video {
    width: 100%;
}

.pkp_structure_page input,
.pkp_structure_page select,
.pkp_structure_page textarea,
.pkp_structure_page button {
    max-width: 100%;
    font: inherit;
}

.pkp_structure_page input[type="text"],
.pkp_structure_page input[type="email"],
.pkp_structure_page input[type="password"],
.pkp_structure_page input[type="url"],
.pkp_structure_page input[type="search"],
.pkp_structure_page select,
.pkp_structure_page textarea {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--ojs-border);
    border-radius: 6px;
    background: #fff;
    color: var(--ojs-text);
}

.pkp_structure_page textarea {
    min-height: 120px;
    resize: vertical;
}

.pkp_structure_page input:focus,
.pkp_structure_page select:focus,
.pkp_structure_page textarea:focus,
.pkp_structure_page button:focus,
.pkp_structure_page a:focus-visible {
    outline: 2px solid rgba(18, 53, 91, 0.28);
    outline-offset: 2px;
}

/* Keep long content from widening the whole page */
.pkp_structure_main,
.pkp_structure_sidebar,
.page,
.page_index_journal,
.obj_article_details,
.obj_issue_toc,
.obj_article_summary,
.cmp_announcements,
.additional_content,
.homepage_about,
.current_issue {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Tables may scroll independently instead of widening the page */
.pkp_structure_main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

.pkp_structure_main pre,
.pkp_structure_main code {
    max-width: 100%;
}

.pkp_structure_main pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =====================================================
   02. USER NAVIGATION
===================================================== */

.pkp_structure_head {
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--ojs-border);
    background: var(--ojs-surface);
    box-shadow: 0 1px 5px rgba(20, 38, 63, 0.04);
}

.pkp_structure_head .pkp_head_wrapper {
    position: relative;
    width: 100%;
    max-width: var(--ojs-container);
    margin: 0 auto;
}

/* Desktop: dedicated user-navigation row at the very top */
@media (min-width: 993px) {
    .pkp_structure_head .pkp_head_wrapper {
        display: grid;
        grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
        align-items: center;
        gap: 18px 28px;
        padding: 48px 20px 14px;
    }

    .pkp_structure_head .pkp_navigation_user_wrapper {
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        width: auto;
        min-height: 38px;
        margin: 0;
        padding: 4px 0;
        transform: none;
        border: 0;
        border-bottom: 1px solid var(--ojs-border);
        background: #fff;
        text-align: right;
        z-index: 20;
    }

    .pkp_structure_head .pkp_navigation_user {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 2px 14px;
        margin: 0;
        padding: 0;
        border: 0;
        list-style: none;
        font-size: 13px;
        line-height: 1.35;
    }

    .pkp_structure_head .pkp_navigation_user > li {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    .pkp_structure_head .pkp_navigation_user > li > a {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 4px 2px;
        color: var(--ojs-muted);
        background: transparent;
        text-decoration: none;
        white-space: nowrap;
    }

    .pkp_structure_head .pkp_navigation_user > li > a:hover,
    .pkp_structure_head .pkp_navigation_user > li > a:focus {
        color: var(--ojs-primary);
        background: transparent;
        text-decoration: none;
    }

    /* User dropdown remains functional and within viewport */
    .pkp_structure_head .pkp_navigation_user ul {
        right: 0;
        left: auto;
        max-width: min(240px, calc(100vw - 40px));
        border: 1px solid var(--ojs-border);
        border-radius: 8px;
        background: #fff;
        box-shadow: var(--ojs-shadow);
    }

    .pkp_structure_head .pkp_navigation_user ul a {
        white-space: normal;
    }
}

/* =====================================================
   03. LOGO & MAIN NAVIGATION
===================================================== */

.pkp_structure_head .pkp_site_name_wrapper,
.pkp_structure_head .pkp_site_name,
.pkp_structure_head .pkp_site_nav_menu,
.pkp_structure_head .pkp_navigation_primary_row,
.pkp_structure_head .pkp_navigation_primary_wrapper {
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 993px) {
    .pkp_structure_head .pkp_site_name_wrapper {
        grid-column: 1;
        width: auto;
        height: auto;
        min-height: 70px;
        display: flex;
        align-items: center;
    }

    .pkp_structure_head .pkp_site_name {
        position: static;
        left: auto;
        right: auto;
        width: auto;
        max-width: 340px;
        margin: 0;
        padding: 0;
        overflow: visible;
        white-space: normal;
        text-align: left;
        background: transparent;
    }

    .pkp_structure_head .pkp_site_name .is_img {
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .pkp_structure_head .pkp_site_name .is_img img {
        display: block;
        width: auto;
        max-width: 100%;
        max-height: 78px;
        height: auto;
        object-fit: contain;
    }

    .pkp_structure_head .pkp_site_name .is_text {
        display: inline-block;
        padding: 4px 0;
        color: var(--ojs-primary);
        font-size: clamp(20px, 2vw, 30px);
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
    }

    .pkp_structure_head .pkp_site_nav_menu {
        grid-column: 2;
        position: static;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        z-index: auto;
    }

    .pkp_structure_head .pkp_navigation_primary_wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        width: 100%;
        padding: 0;
    }

    .pkp_structure_head .pkp_navigation_primary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 2px 4px;
        max-width: 100%;
        margin: 0;
        padding: 0;
        text-align: right;
        list-style: none;
    }

    .pkp_structure_head .pkp_navigation_primary > li {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    .pkp_structure_head .pkp_navigation_primary > li > a,
    .pkp_structure_head .pkp_navigation_search_wrapper > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        margin: 0;
        padding: 9px 11px;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #344054;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
    }

    .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 {
        border-bottom-color: var(--ojs-primary);
        background: var(--ojs-primary-soft);
        color: var(--ojs-primary);
        text-decoration: none;
    }

    .pkp_structure_head .pkp_navigation_primary > li.current > a,
    .pkp_structure_head .pkp_navigation_primary > li.active > a,
    .pkp_structure_head .pkp_navigation_primary > li > a[aria-current="page"] {
        border-bottom-color: var(--ojs-primary);
        color: var(--ojs-primary);
    }

    .pkp_structure_head .pkp_navigation_search_wrapper {
        flex: 0 0 auto;
        float: none;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* Dropdowns: light, readable, and safely layered */
    .pkp_structure_head .pkp_navigation_primary ul,
    .pkp_structure_head .pkp_navigation_user ul {
        z-index: 9999;
        border: 1px solid var(--ojs-border);
        border-radius: 8px;
        background: #fff;
        box-shadow: var(--ojs-shadow);
    }

    .pkp_structure_head .pkp_navigation_primary ul a,
    .pkp_structure_head .pkp_navigation_user ul a {
        display: block;
        padding: 10px 12px;
        border: 0;
        border-left: 3px solid transparent;
        background: #fff;
        color: var(--ojs-text);
        font-size: 13px;
        line-height: 1.35;
        text-decoration: none;
    }

    .pkp_structure_head .pkp_navigation_primary ul a:hover,
    .pkp_structure_head .pkp_navigation_primary ul a:focus,
    .pkp_structure_head .pkp_navigation_user ul a:hover,
    .pkp_structure_head .pkp_navigation_user ul a:focus {
        border-left-color: var(--ojs-primary);
        background: var(--ojs-primary-soft);
        color: var(--ojs-primary);
    }
}

/* =====================================================
   04. HEADER BANNER
===================================================== */

/* OJS homepage image: styled as a responsive banner */
.pkp_structure_main .page_index_journal .homepage_image {
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--ojs-shadow);
}

.pkp_structure_main .page_index_journal .homepage_image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    object-fit: cover;
}

/* Compatibility for manually inserted banner classes */
.pkp_structure_main .journal-banner,
.pkp_structure_main .header-banner,
.pkp_structure_main .homepage-banner {
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    overflow: hidden;
    border-radius: 10px;
}

.pkp_structure_main .journal-banner img,
.pkp_structure_main .header-banner img,
.pkp_structure_main .homepage-banner img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* =====================================================
   05. MAIN CONTENT
===================================================== */

.pkp_structure_content {
    width: 100%;
    max-width: var(--ojs-container);
    margin: 0 auto;
    padding: 28px 20px 48px;
    background: transparent;
}

.pkp_structure_content.has_sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ojs-sidebar);
    gap: var(--ojs-gap);
    align-items: start;
}

.pkp_structure_main {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Remove old vertical divider/border from the default layout */
.pkp_structure_content.has_sidebar .pkp_structure_main {
    border-right: 0;
}

.pkp_structure_main .page {
    width: 100%;
    max-width: 100%;
}

/* Homepage sections become separate modern cards.
   padding-inline is explicit so the left and right spacing is always identical. */
.pkp_structure_main .page_index_journal > section,
.pkp_structure_main .page_index_journal > .homepage_about,
.pkp_structure_main .page_index_journal > .cmp_announcements,
.pkp_structure_main .page_index_journal > .current_issue,
.pkp_structure_main .page_index_journal > .additional_content {
    width: 100%;
    max-width: 100%;
    margin: 0 0 24px;
    padding-block: 28px;
    padding-inline: 32px;
    border: 1px solid rgba(227, 231, 237, 0.8);
    border-radius: var(--ojs-radius);
    background: var(--ojs-surface);
    box-shadow: var(--ojs-shadow);
}

/* Neutralize theme-specific inner offsets so homepage card content is
   visually balanced on both sides. */
.pkp_structure_main .page_index_journal > .homepage_about > :first-child,
.pkp_structure_main .page_index_journal > .homepage_about > :last-child {
    margin-left: 0;
    margin-right: 0;
}

/* All non-home public content uses the same card language.
   This covers Announcements, Archives, About, Editorial Team, Reviewers,
   Search, issue/article pages, contact pages, etc., without styling the
   homepage wrapper itself as one giant card. */
.pkp_structure_main > .page:not(.page_index_journal) {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-block: 32px;
    padding-inline: 32px;
    border: 1px solid rgba(227, 231, 237, 0.85);
    border-radius: var(--ojs-radius);
    background: var(--ojs-surface);
    box-shadow: var(--ojs-shadow);
}

/* Some OJS/theme variants place public page classes one level deeper.
   Apply the card only when the page is the principal content wrapper. */
.pkp_structure_main > div.page:not(.page_index_journal),
.pkp_structure_main > article.page:not(.page_index_journal) {
    overflow: hidden;
}

.pkp_structure_main .page_index_journal > section:hover,
.pkp_structure_main .page_index_journal > .homepage_about:hover,
.pkp_structure_main .page_index_journal > .cmp_announcements:hover,
.pkp_structure_main .page_index_journal > .current_issue:hover,
.pkp_structure_main .page_index_journal > .additional_content:hover {
    box-shadow: var(--ojs-shadow-hover);
}

.pkp_structure_main .page_index_journal > section:last-child,
.pkp_structure_main .page_index_journal > .additional_content:last-child {
    margin-bottom: 0;
}

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 {
    color: #172b4d;
    letter-spacing: -0.01em;
}

.pkp_structure_main h1 {
    font-size: clamp(25px, 3vw, 34px);
    line-height: 1.25;
}

.pkp_structure_main h2 {
    margin-top: 0;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.3;
}

.pkp_structure_main h3 {
    font-size: clamp(17px, 1.9vw, 21px);
    line-height: 1.35;
}

.pkp_structure_main p,
.pkp_structure_main li {
    line-height: 1.7;
}

.pkp_structure_main .homepage_about p,
.pkp_structure_main .additional_content p {
    color: #3b4351;
}

/* Announcements */
.pkp_structure_main .cmp_announcements .obj_announcement_summary,
.pkp_structure_main .obj_announcement_summary {
    padding: 16px 0;
    border-bottom: 1px solid var(--ojs-border);
}

.pkp_structure_main .cmp_announcements .obj_announcement_summary:last-child,
.pkp_structure_main .obj_announcement_summary:last-child {
    border-bottom: 0;
}

/* Current issue */
.pkp_structure_main .current_issue .current_issue_title {
    margin-bottom: 18px;
    color: var(--ojs-muted);
    font-weight: 600;
}

/* Article summaries stay clean and do not overflow */
.pkp_structure_main .obj_article_summary {
    width: 100%;
    max-width: 100%;
}

.pkp_structure_main .obj_article_summary .title,
.pkp_structure_main .obj_article_summary .authors,
.pkp_structure_main .obj_article_summary .pages,
.pkp_structure_main .obj_article_summary .galleys_links {
    max-width: 100%;
}

/* Breadcrumb */
.pkp_structure_main .cmp_breadcrumbs,
.pkp_structure_main .breadcrumbs {
    max-width: 100%;
    margin-bottom: 18px;
    color: var(--ojs-muted);
    font-size: 13px;
}


/* =====================================================
   05A. DESKTOP COLUMN PLACEMENT FIX
   Explicitly place MAIN on the left and SIDEBAR on the right.
   This prevents OJS themes that output the sidebar first in the
   DOM from occupying the wide content column.
===================================================== */

@media (min-width: 993px) {
    .pkp_structure_content.has_sidebar > .pkp_structure_main {
        grid-column: 1;
        grid-row: 1;
        order: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        align-self: start;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar,
    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar.left,
    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar.right {
        grid-column: 2;
        grid-row: 1;
        order: 2;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border-left: 0;
        border-right: 0;
        align-self: start;
    }
}

/* =====================================================
   06. SIDEBAR
===================================================== */

.pkp_structure_sidebar {
    float: none;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.pkp_structure_sidebar .pkp_block {
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px;
    padding: 20px;
    overflow: visible;
    border: 1px solid rgba(227, 231, 237, 0.85);
    border-radius: var(--ojs-radius);
    background: var(--ojs-surface);
    box-shadow: var(--ojs-shadow);
    color: var(--ojs-text);
    font-size: 14px;
    line-height: 1.6;
}

.pkp_structure_sidebar .pkp_block:last-child {
    margin-bottom: 0;
}

.pkp_structure_sidebar .pkp_block .title {
    display: block;
    margin: 0 0 12px;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--ojs-border);
    color: var(--ojs-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.pkp_structure_sidebar .pkp_block .content {
    min-width: 0;
    max-width: 100%;
}

.pkp_structure_sidebar .pkp_block ul {
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.pkp_structure_sidebar .pkp_block li {
    max-width: 100%;
    padding: 6px 0;
}

.pkp_structure_sidebar .pkp_block a {
    max-width: 100%;
    color: var(--ojs-primary);
    overflow-wrap: anywhere;
    text-decoration: none;
}

.pkp_structure_sidebar .pkp_block a:hover,
.pkp_structure_sidebar .pkp_block a:focus {
    color: var(--ojs-primary-hover);
    text-decoration: underline;
}

.pkp_structure_sidebar .pkp_block img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Do not suppress Custom Block Manager output */
.pkp_structure_sidebar [class*="block_custom"],
.pkp_structure_sidebar [id*="customblock"],
.pkp_structure_sidebar .pkp_block.block_custom {
    display: block;
    visibility: visible;
    max-width: 100%;
}

/* =====================================================
   07. BUTTONS
===================================================== */

.pkp_structure_page .cmp_button,
.pkp_structure_page .pkp_button,
.pkp_structure_page button:not(.pkp_site_nav_toggle),
.pkp_structure_page input[type="submit"],
.pkp_structure_page input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    max-width: 100%;
    padding: 10px 16px;
    border: 1px solid #cbd8e6;
    border-radius: 7px;
    background: #f7faff;
    color: var(--ojs-primary);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.pkp_structure_page .cmp_button:hover,
.pkp_structure_page .cmp_button:focus,
.pkp_structure_page .pkp_button:hover,
.pkp_structure_page .pkp_button:focus,
.pkp_structure_page button:not(.pkp_site_nav_toggle):hover,
.pkp_structure_page button:not(.pkp_site_nav_toggle):focus,
.pkp_structure_page input[type="submit"]:hover,
.pkp_structure_page input[type="submit"]:focus,
.pkp_structure_page input[type="button"]:hover,
.pkp_structure_page input[type="button"]:focus {
    border-color: #aebfd1;
    background: var(--ojs-primary-soft);
    color: var(--ojs-primary-hover);
}

/* Make a Submission: balanced padding and centered text */
.pkp_structure_sidebar .block_make_submission a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 12px 18px;
    border: 1px solid #cbd8e6;
    border-radius: 7px;
    background: #f2f7fc;
    color: var(--ojs-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
}

.pkp_structure_sidebar .block_make_submission a:hover,
.pkp_structure_sidebar .block_make_submission a:focus {
    border-color: #aac0d6;
    background: #e8f1fa;
    color: var(--ojs-primary-hover);
    text-decoration: none;
}

/* =====================================================
   08. FOOTER
===================================================== */

.pkp_structure_footer_wrapper {
    width: 100%;
    margin: 0;
    background: #0b1f3a;
    color: #e8eef5;
}

.pkp_structure_footer {
    width: 100%;
    max-width: var(--ojs-container);
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}

.pkp_footer_content {
    padding: 28px 0 20px;
    color: #e8eef5;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

.pkp_structure_footer a,
.pkp_footer_content a {
    color: #dceaff;
    text-decoration: none;
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus,
.pkp_footer_content a:hover,
.pkp_footer_content a:focus {
    color: #ffffff;
    text-decoration: underline;
}

.pkp_brand_footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 0 0 24px;
}

.pkp_brand_footer a {
    float: none;
    display: inline-block;
    max-width: 160px;
}

.pkp_brand_footer img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =====================================================
   09. TABLET RESPONSIVE
===================================================== */

@media (max-width: 992px) {
    .pkp_structure_content {
        padding: 24px 18px 40px;
    }

    .pkp_structure_content.has_sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_main,
    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_main {
        grid-row: 1;
        order: 1;
    }

    .pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
        grid-row: 2;
        order: 2;
        margin: 0;
        padding: 0;
    }

    /* Preserve native OJS mobile/collapsible navigation behavior */
    .pkp_structure_head .pkp_head_wrapper {
        width: 100%;
        max-width: var(--ojs-container);
        margin: 0 auto;
        padding: 0 18px;
    }

    .pkp_structure_head .pkp_site_name_wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 76px;
        height: auto;
        padding: 8px 0 8px 54px;
    }

    .pkp_structure_head .pkp_site_name {
        position: static;
        left: auto;
        right: auto;
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow: visible;
        white-space: normal;
        text-align: left;
    }

    .pkp_structure_head .pkp_site_name .is_img {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

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

    .pkp_structure_head .pkp_site_name .is_text {
        display: block;
        max-width: 100%;
        padding: 0;
        color: var(--ojs-primary);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        white-space: normal;
        text-decoration: none;
    }

    /* Hamburger remains separate from logo and dark/visible */
    .pkp_structure_head .pkp_site_nav_toggle {
        position: absolute;
        top: 50%;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
        border: 1px solid var(--ojs-border);
        border-radius: 7px;
        background: #ffffff;
        color: #111827;
        box-shadow: none;
        z-index: 30;
    }

    .pkp_structure_head .pkp_site_nav_toggle:hover,
    .pkp_structure_head .pkp_site_nav_toggle:focus {
        border-color: #c4ccd6;
        background: #f5f7fa;
        color: #000000;
    }

    /* Keep OJS's generated hamburger icon dark */
    .pkp_structure_head .pkp_site_nav_toggle::before,
    .pkp_structure_head .pkp_site_nav_toggle::after,
    .pkp_structure_head .pkp_site_nav_toggle span::before,
    .pkp_structure_head .pkp_site_nav_toggle span::after {
        border-color: #111827;
        background-color: #111827;
    }

    /* Collapsed menu stays inside the viewport */
    .pkp_structure_head .pkp_site_nav_menu {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        padding: 16px 18px;
        border-top: 1px solid var(--ojs-border);
        background: #ffffff;
        box-shadow: 0 8px 18px rgba(20, 38, 63, 0.10);
        overflow-x: hidden;
    }

    .pkp_structure_head .pkp_site_nav_menu ul,
    .pkp_structure_head .pkp_navigation_primary,
    .pkp_structure_head .pkp_navigation_user {
        max-width: 100%;
    }

    .pkp_structure_head .pkp_site_nav_menu a {
        max-width: 100%;
        color: var(--ojs-text);
        overflow-wrap: anywhere;
    }

    /* User navigation stays readable inside OJS's native mobile menu.
       The display state of .pkp_site_nav_menu is deliberately NOT overridden,
       so the built-in hamburger/collapse JavaScript keeps working. */
    .pkp_structure_head .pkp_navigation_user_wrapper {
        position: static;
        width: 100%;
        max-width: 100%;
        margin: 0 0 12px;
        padding: 0 0 12px;
        transform: none;
        border: 0;
        border-bottom: 1px solid var(--ojs-border);
        text-align: left;
    }

    .pkp_structure_head .pkp_navigation_user {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 12px;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 13px;
        list-style: none;
    }

    .pkp_structure_head .pkp_navigation_user > li > a {
        display: inline-flex;
        min-height: 36px;
        align-items: center;
        padding: 6px 0;
        color: var(--ojs-muted);
        text-decoration: none;
    }

    .pkp_structure_head .pkp_navigation_primary_wrapper {
        width: 100%;
        max-width: 100%;
    }

    .pkp_structure_head .pkp_navigation_primary > li,
    .pkp_structure_head .pkp_navigation_primary > li > a {
        width: 100%;
        max-width: 100%;
    }

    .pkp_structure_head .pkp_navigation_primary > li > a {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 8px 0;
        color: var(--ojs-text);
        text-decoration: none;
    }

    .pkp_structure_head .pkp_navigation_search_wrapper {
        float: none;
        width: 100%;
        margin: 12px 0 0;
        padding: 12px 0 0;
        border-top: 1px solid var(--ojs-border);
    }

    /* At tablet width the sidebar must stay below the main content
       and its blocks stack vertically. */
    .pkp_structure_sidebar {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .pkp_structure_sidebar .pkp_block {
        width: 100%;
        margin: 0 0 18px;
    }

    .pkp_structure_sidebar .pkp_block:last-child {
        margin-bottom: 0;
    }
}

/* =====================================================
   10. MOBILE RESPONSIVE
===================================================== */

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .pkp_structure_head .pkp_head_wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }

    .pkp_structure_head .pkp_site_name_wrapper {
        min-height: 70px;
        padding-left: 52px;
    }

    .pkp_structure_head .pkp_site_name .is_img img {
        max-width: min(100%, 240px);
        max-height: 54px;
    }

    .pkp_structure_head .pkp_site_name .is_text {
        font-size: 18px;
    }

    .pkp_structure_head .pkp_site_nav_menu {
        padding: 14px 15px 18px;
    }

    .pkp_structure_content {
        padding: 20px 15px 34px;
    }

    .pkp_structure_content.has_sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .pkp_structure_main .page_index_journal .homepage_image,
    .pkp_structure_main .journal-banner,
    .pkp_structure_main .header-banner,
    .pkp_structure_main .homepage-banner {
        margin-bottom: 18px;
        border-radius: 7px;
    }

    .pkp_structure_main .page_index_journal > section,
    .pkp_structure_main .page_index_journal > .homepage_about,
    .pkp_structure_main .page_index_journal > .cmp_announcements,
    .pkp_structure_main .page_index_journal > .current_issue,
    .pkp_structure_main .page_index_journal > .additional_content {
        margin-bottom: 18px;
        padding: 17px;
        border-radius: 7px;
    }

    .pkp_structure_main h1 {
        font-size: 25px;
    }

    .pkp_structure_main h2 {
        font-size: 20px;
    }

    .pkp_structure_main h3 {
        font-size: 17px;
    }

    .pkp_structure_sidebar {
        display: block;
        width: 100%;
    }

    .pkp_structure_sidebar .pkp_block {
        width: 100%;
        margin: 0 0 16px;
        padding: 17px;
        border-radius: 7px;
    }

    .pkp_structure_sidebar .pkp_block:last-child {
        margin-bottom: 0;
    }

    .pkp_structure_sidebar .block_make_submission a,
    .pkp_structure_page .cmp_button,
    .pkp_structure_page .pkp_button,
    .pkp_structure_page input[type="submit"],
    .pkp_structure_page input[type="button"] {
        min-height: 44px;
        padding: 11px 16px;
    }

    .pkp_structure_footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .pkp_footer_content {
        padding: 24px 0 16px;
    }

    .pkp_brand_footer {
        justify-content: flex-start;
        padding-bottom: 22px;
    }
}

/* Extra-small phones */
@media (max-width: 420px) {
    .pkp_structure_head .pkp_site_name_wrapper {
        min-height: 64px;
        padding-left: 50px;
    }

    .pkp_structure_head .pkp_site_nav_toggle {
        width: 40px;
        height: 40px;
    }

    .pkp_structure_head .pkp_site_name .is_img img {
        max-width: min(100%, 200px);
        max-height: 48px;
    }

    .pkp_structure_head .pkp_navigation_user {
        gap: 2px 10px;
        font-size: 12.5px;
    }

    .pkp_structure_content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .pkp_structure_main .page_index_journal > section,
    .pkp_structure_main .page_index_journal > .homepage_about,
    .pkp_structure_main .page_index_journal > .cmp_announcements,
    .pkp_structure_main .page_index_journal > .current_issue,
    .pkp_structure_main .page_index_journal > .additional_content,
    .pkp_structure_sidebar .pkp_block {
        padding: 15px;
    }
}

/* =====================================================
   END
===================================================== */


/* =====================================================
   11. CARD SPACING REFINEMENT
===================================================== */

@media (max-width: 768px) {
    .pkp_structure_main .page_index_journal > section,
    .pkp_structure_main .page_index_journal > .homepage_about,
    .pkp_structure_main .page_index_journal > .cmp_announcements,
    .pkp_structure_main .page_index_journal > .current_issue,
    .pkp_structure_main .page_index_journal > .additional_content,
    .pkp_structure_main > .page:not(.page_index_journal) {
        padding-block: 20px;
        padding-inline: 18px;
    }
}



/* =====================================================
   12. JITHOR — IDENTITAS & CUSTOM BLOCK OJS2
   Palet dari banner & sampul OJS2: arang (latar wayang) #33342f,
   kuning emas (judul banner) #fcbc58, oranye-cokelat sampul.
   Custom block OJS2 membawa judul sendiri (<span class="blockTitle">),
   jadi judul itu yang diberi gaya judul blok.
===================================================== */

:root {
    --ojs-primary: #8a4b12;
    --ojs-primary-hover: #6b390c;
    --ojs-primary-soft: #fdf5e8;
    --ojs-background: #f7f6f2;
    --ojs-border: #e6e0d4;
    --jit-gold: #fcbc58;
    --jit-gold-soft: #fff6e5;
    --jit-dark: #33342f;
}

/* Header: pita emas tipis di bawah header */
.pkp_structure_head {
    border-bottom: 4px solid var(--jit-gold);
}

.pkp_structure_head .pkp_site_name .is_text {
    color: var(--jit-dark);
}

/* Judul blok bawaan OJS3 & judul custom block OJS2 diseragamkan */
.pkp_structure_sidebar .pkp_block .blockTitle,
.pkp_structure_sidebar .pkp_block .title {
    display: block;
    margin: 0 0 12px;
    padding: 0 0 9px;
    border-bottom: 2px solid var(--jit-gold);
    color: var(--jit-dark);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.35;
    text-align: left;
    text-transform: uppercase;
}

.pkp_structure_sidebar .pkp_block .content > p:first-child,
.pkp_structure_sidebar .pkp_block .content > .block > p:first-child {
    margin-top: 0;
    text-align: left !important;
}

/* JITHOR Menu (Additional Menu) & TEAM (Template):
   ikon OJS2 + label -> daftar tombol berikon, ikon dan label sejajar */
.pkp_structure_sidebar .block_custom .vertical-menu {
    margin: 0 0 6px;
    text-align: left !important;
}

.pkp_structure_sidebar .block_custom .vertical-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 6px 10px;
    border: 1px solid var(--ojs-border);
    border-left: 4px solid var(--jit-gold);
    border-radius: 6px;
    background: var(--ojs-surface);
    color: var(--jit-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.pkp_structure_sidebar .block_custom .vertical-menu a:hover,
.pkp_structure_sidebar .block_custom .vertical-menu a:focus {
    border-left-color: var(--ojs-primary);
    background: var(--jit-dark);
    color: #ffffff;
    text-decoration: none;
}

.pkp_structure_sidebar .block_custom .vertical-menu a img {
    float: none !important;
    flex: 0 0 32px;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    object-fit: contain;
}

/* Sisa OJS2: baris kosong (&nbsp;) dan <br> di akhir menu */
.pkp_structure_sidebar .block_custom .vertical-menu:not(:has(a)),
.pkp_structure_sidebar .block_custom .block.custom > br {
    display: none;
}

/* Gambar custom block (SINTA, tracking, indeks, mitra, Tools, Visitor) di tengah;
   spasi &nbsp; dan <br> warisan OJS2 tidak lagi menggeser gambar */
.pkp_structure_sidebar .block_custom p {
    text-align: center;
}

.pkp_structure_sidebar .block_custom p > br:first-child {
    display: none;
}

.pkp_structure_sidebar .block_custom img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    margin: 4px auto;
}

/* Tools: paragraf kosong (&nbsp;) di antara logo dibuang */
#customblock-tools .content p:not(:has(a)):not(:has(.blockTitle)) {
    display: none;
}

/* Tombol & aksen */
.pkp_structure_main .cmp_button,
.pkp_structure_main .obj_galley_link,
.pkp_block.block_make_submission a {
    border-color: var(--ojs-primary);
    background: var(--ojs-primary);
    color: #ffffff;
}

.pkp_structure_main .obj_galley_link:hover,
.pkp_structure_main .obj_galley_link:focus {
    background: var(--ojs-primary-hover);
    color: #ffffff;
}

/* Halaman About: judul bagian ber-anchor mudah dipindai */
.page_about h2[id] {
    margin-top: 2em;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--jit-gold);
    color: var(--jit-dark);
    scroll-margin-top: 16px;
}

/* Judul konten: arang banner, bukan biru dasar */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 {
    color: var(--jit-dark);
}

/* Footer: arang banner + pita emas; logo OJS/PKP putih agar terbaca */
.pkp_structure_footer_wrapper {
    border-top: 4px solid var(--jit-gold);
    background: var(--jit-dark);
    color: #f3f1ea;
}

.pkp_footer_content {
    color: #f3f1ea;
}

.pkp_structure_footer a,
.pkp_footer_content a {
    color: var(--jit-gold);
}

.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus,
.pkp_footer_content a:hover,
.pkp_footer_content a:focus {
    color: #ffffff;
}

.pkp_brand_footer img {
    filter: brightness(0) invert(1);
    opacity: .85;
}

/* =====================================================
   END 12. JITHOR
===================================================== */


/* =====================================================
   13. V5 FINISHING FIXES
   - Remove inherited vertical divider lines from OJS/theme variants

===================================================== */

/* Some OJS 3 themes draw desktop separators on structure wrappers,
   their pseudo-elements, or the native sidebar. Neutralize only those
   visual dividers without changing layout or navigation behavior. */
.pkp_structure_content,
.pkp_structure_content.has_sidebar,
.pkp_structure_main,
.pkp_structure_content.has_sidebar > .pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_content.has_sidebar > .pkp_structure_sidebar {
    border-left: 0 !important;
    border-right: 0 !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 {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

/* Keep any separator pseudo-element transparent if a derivative theme
   uses a background rather than a border for the vertical line. */
.pkp_structure_content.has_sidebar > .pkp_structure_main::before,
.pkp_structure_content.has_sidebar > .pkp_structure_main::after,
.pkp_structure_content.has_sidebar > .pkp_structure_sidebar::before,
.pkp_structure_content.has_sidebar > .pkp_structure_sidebar::after {
    background-color: transparent !important;
}

/* =====================================================
   END 13
===================================================== */


/* =====================================================
   14. DUA SIDEBAR (KIRI & KANAN) — seperti tata letak OJS2
   Custom block "left-sidebar" berisi <div class="jit-left-stack">
   dengan beberapa .jit-card (INDEX, In Collaboration With, Tools,
   Visitor). Pada >= 1200 px: grid tiga kolom; sidebar dijadikan
   display: contents sehingga tiap blok menjadi item grid. Blok kiri &
   konten utama merentang semua baris; baris terakhir 1fr menyerap
   sisa tinggi, jadi kolom kiri tidak pernah menabrak footer.
   Di bawah 1200 px kartu kiri tampil di sidebar biasa.
===================================================== */

.pkp_structure_sidebar .pkp_block:has(.jit-left-stack) {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.jit-left-stack .jit-card {
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid rgba(227, 231, 237, 0.85);
    border-radius: var(--ojs-radius);
    background: var(--ojs-surface);
    box-shadow: var(--ojs-shadow);
}

.jit-left-stack .jit-card:last-child {
    margin-bottom: 0;
}

.pkp_structure_sidebar .jit-left-stack .jit-card > p:first-child {
    margin-top: 0;
    text-align: left !important;
}

.pkp_structure_sidebar .jit-card-tools p:not(:has(a)):not(:has(.blockTitle)) {
    display: none;
}

@media (min-width: 1200px) {
    .pkp_structure_content.has_sidebar:has(.jit-left-stack) {
        max-width: 1440px;
        grid-template-columns: 230px minmax(0, 1fr) 280px;
        grid-template-rows: repeat(12, auto) 1fr;
        column-gap: 24px;
        row-gap: 0;
    }

    .pkp_structure_content.has_sidebar:has(.jit-left-stack) > .pkp_structure_main {
        grid-column: 2;
        grid-row: 1 / -1;
    }

    .pkp_structure_content.has_sidebar:has(.jit-left-stack) > .pkp_structure_sidebar {
        display: contents;
    }

    .pkp_structure_content.has_sidebar:has(.jit-left-stack) > .pkp_structure_sidebar > .pkp_block {
        grid-column: 3;
        align-self: start;
    }

    .pkp_structure_content.has_sidebar:has(.jit-left-stack) > .pkp_structure_sidebar > .pkp_block:has(.jit-left-stack) {
        grid-column: 1;
        grid-row: 1 / -1;
        margin: 0;
    }

    /* Header & footer selebar tata letak tiga kolom agar tepi sejajar */
    .pkp_structure_page:has(.jit-left-stack) .pkp_structure_head .pkp_head_wrapper,
    .pkp_structure_page:has(.jit-left-stack) .pkp_structure_footer {
        max-width: 1440px;
    }
}

/* =====================================================
   END 14
===================================================== */


/* =====================================================
   15. MASTHEAD (BANNER OJS2) & TOMBOL REGISTER/LOGIN
   Banner OJS2 1200x240 dipasang sebagai pageHeaderLogoImage.
   Header arang (senada tepi banner); banner di tengah, proporsional
   (lebar penuh hingga 1200 px, tinggi mengikuti); menu utama di
   tengah di bawah banner. Register/Login = tombol pil, dipilih lewat
   alamat tautan agar berlaku di semua locale.
===================================================== */

.pkp_structure_head {
    border-bottom: 4px solid var(--jit-gold);
    background: var(--jit-dark);
    box-shadow: none;
}

.pkp_structure_head .pkp_site_name .is_img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.pkp_structure_head .pkp_site_name .is_img img {
    display: block;
    width: 100%;
    max-width: 1200px;
    max-height: none;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    object-fit: contain;
}

/* Tombol Register & Login */
.pkp_structure_head .pkp_navigation_user > li > a[href*="/user/register"],
.pkp_structure_head .pkp_navigation_user > li > a[href*="/login"]:not([href*="signOut"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 32px;
    padding: 5px 16px;
    border: 1px solid var(--jit-gold);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.pkp_structure_head .pkp_navigation_user > li > a[href*="/user/register"] {
    background: var(--jit-gold);
    color: var(--jit-dark);
}

.pkp_structure_head .pkp_navigation_user > li > a[href*="/user/register"]:hover,
.pkp_structure_head .pkp_navigation_user > li > a[href*="/user/register"]:focus {
    border-color: #ffffff;
    background: #ffffff;
    color: var(--jit-dark);
}

.pkp_structure_head .pkp_navigation_user > li > a[href*="/login"]:not([href*="signOut"]) {
    border-color: rgba(255, 255, 255, 0.7);
    background: transparent;
    color: #ffffff;
}

.pkp_structure_head .pkp_navigation_user > li > a[href*="/login"]:not([href*="signOut"]):hover,
.pkp_structure_head .pkp_navigation_user > li > a[href*="/login"]:not([href*="signOut"]):focus {
    border-color: var(--jit-gold);
    background: var(--jit-gold);
    color: var(--jit-dark);
}

@media (min-width: 993px) {
    .pkp_structure_head .pkp_head_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 58px 20px 10px;
    }

    /* Clearfix tema (aktif bila body.has_site_logo) jangan jadi item flex kosong */
    .pkp_structure_head .pkp_head_wrapper::before,
    .pkp_structure_head .pkp_head_wrapper::after {
        display: none;
    }

    /* Baris atas: tombol Register/Login rata kanan, sejajar tepi banner */
    .pkp_structure_head .pkp_navigation_user_wrapper {
        left: 50%;
        right: auto;
        width: min(1200px, calc(100% - 40px));
        min-height: 46px;
        padding: 7px 0;
        transform: translateX(-50%);
        border-bottom: 0;
        background: transparent;
    }

    .pkp_structure_head .pkp_navigation_user {
        gap: 8px 10px;
    }

    .pkp_structure_head .pkp_navigation_user > li > a {
        color: #d9d6cc;
    }

    .pkp_structure_head .pkp_navigation_user > li > a:hover,
    .pkp_structure_head .pkp_navigation_user > li > a:focus {
        color: var(--jit-gold);
    }

    .pkp_structure_head .pkp_site_name_wrapper {
        justify-content: center;
        width: 100%;
        min-height: 0;
    }

    .pkp_structure_head .pkp_site_name {
        width: 100%;
        max-width: 1200px;
        text-align: center;
    }

    .pkp_structure_head .pkp_site_name .is_text {
        color: #ffffff;
    }

    /* Menu utama di tengah, di bawah banner */
    .pkp_structure_head .pkp_site_nav_menu {
        width: 100%;
    }

    .pkp_structure_head .pkp_navigation_primary_wrapper,
    .pkp_structure_head .pkp_navigation_primary {
        justify-content: center;
    }

    .pkp_structure_head .pkp_navigation_primary > li > a,
    .pkp_structure_head .pkp_navigation_search_wrapper > a {
        color: #f3f1ea;
    }

    .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,
    .pkp_structure_head .pkp_navigation_primary > li.current > a,
    .pkp_structure_head .pkp_navigation_primary > li > a[aria-current="page"] {
        border-bottom-color: var(--jit-gold);
        background: rgba(255, 255, 255, 0.08);
        color: var(--jit-gold);
    }
}

@media (max-width: 992px) {
    /* Banner selebar layar; tombol menu (hamburger) di bawah banner */
    .pkp_structure_head .pkp_site_name_wrapper {
        justify-content: center;
        min-height: 0;
        padding: 12px 0 62px;
    }

    .pkp_structure_head .pkp_site_name .is_img {
        max-width: 100%;
    }

    .pkp_structure_head .pkp_site_name .is_img img {
        max-width: 100%;
        max-height: none;
        border-radius: 6px;
    }

    .pkp_structure_head .pkp_site_name .is_text {
        color: #ffffff;
    }

    .pkp_structure_head .pkp_site_nav_toggle {
        top: auto;
        bottom: 10px;
        left: 0;
        transform: none;
    }

    /* Di menu ponsel (latar putih) tombol Login bergaris gelap */
    .pkp_structure_head .pkp_navigation_user {
        gap: 8px 10px;
    }

    .pkp_structure_head .pkp_navigation_user > li > a[href*="/login"]:not([href*="signOut"]) {
        border-color: var(--jit-dark);
        color: var(--jit-dark);
    }
}

/* =====================================================
   END 15
===================================================== */