/* =====================================================
   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. AJSE QUICK NAVIGATION - LEFT SIDEBAR
   Custom Block Manager markup must contain:
   <div class="ajse-quick-nav"> ... </div>

   Desktop lebar:
   [ Quick Navigation ] [ Main Content ] [ Native Sidebar ]

   Catatan:
   - Hanya block yang berisi .ajse-quick-nav dipindahkan ke kiri.
   - Make a Submission, Cover, Information, dan block OJS lain tetap
     berada di sidebar kanan dan menumpuk secara normal.
   - Tidak mengubah urutan DOM atau fungsi native OJS.
===================================================== */

/* Quick-navigation visual */
.ajse-quick-nav {
    --ajse-menu-primary: #8a1f2d;
    --ajse-menu-primary-hover: #6f1723;
    --ajse-menu-soft: #fbf4f5;
    --ajse-menu-text: #651824;
    --ajse-menu-muted: #5d4a4f;
    --ajse-menu-border-light: #e6cfd3;

    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ajse-quick-nav .ajse-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 64px;
    max-width: 100%;
    padding: 15px 18px;
    box-sizing: border-box;
    border-radius: 18px;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    transition: background-color .2s ease,
                border-color .2s ease,
                color .2s ease,
                box-shadow .2s ease,
                transform .2s ease;
}

.ajse-quick-nav .ajse-nav-arrow {
    display: inline-block;
    flex: 0 0 auto;
    margin-left: 6px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}

.ajse-quick-nav .ajse-nav-primary {
    border: 2px solid var(--ajse-menu-primary);
    background: var(--ajse-menu-primary);
    color: #fff;
    box-shadow: 0 6px 15px rgba(111, 23, 35, .12);
}

.ajse-quick-nav .ajse-nav-primary:visited {
    color: #fff;
}

.ajse-quick-nav .ajse-nav-primary:hover,
.ajse-quick-nav .ajse-nav-primary:focus {
    border-color: var(--ajse-menu-primary-hover);
    background: var(--ajse-menu-primary-hover);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(111, 23, 35, .18);
    transform: translateY(-1px);
}

.ajse-quick-nav .ajse-nav-outline {
    border: 3px solid var(--ajse-menu-primary);
    background: #fff;
    color: var(--ajse-menu-primary);
    box-shadow: none;
}

.ajse-quick-nav .ajse-nav-outline:visited {
    color: var(--ajse-menu-primary);
}

.ajse-quick-nav .ajse-nav-outline:hover,
.ajse-quick-nav .ajse-nav-outline:focus {
    border-color: var(--ajse-menu-primary-hover);
    background: var(--ajse-menu-soft);
    color: var(--ajse-menu-primary-hover);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(111, 23, 35, .12);
    transform: translateY(-1px);
}

.ajse-quick-nav .ajse-nav-note {
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    padding: 18px 18px;
    box-sizing: border-box;
    border: 2px dashed var(--ajse-menu-border-light);
    border-radius: 15px;
    background: #fff;
    color: var(--ajse-menu-muted);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    text-align: center;
}

.ajse-quick-nav .ajse-nav-note strong {
    color: var(--ajse-menu-text);
    font-weight: 700;
}

.ajse-quick-nav .ajse-nav-btn:focus-visible {
    outline: 3px solid rgba(138, 31, 45, .24);
    outline-offset: 3px;
}

/* Card container khusus Quick Navigation.
   Seluruh menu kiri kini berada di dalam satu card agar tampak menyatu
   dengan card konten utama dan sidebar kanan. */
.pkp_structure_sidebar .pkp_block:has(.ajse-quick-nav) {
    padding: 18px;
    border: 1px solid rgba(138, 31, 45, .12);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 3px 14px rgba(20, 38, 63, .08);
    overflow: visible;
}

.pkp_structure_sidebar .pkp_block:has(.ajse-quick-nav) > .title,
.pkp_structure_sidebar .pkp_block:has(.ajse-quick-nav) .title {
    display: none;
}

.pkp_structure_sidebar .pkp_block:has(.ajse-quick-nav) > .content,
.pkp_structure_sidebar .pkp_block:has(.ajse-quick-nav) .content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Three-column layout is activated ONLY when the quick-nav custom block exists. */
@media (min-width: 1280px) {

    .pkp_structure_content.has_sidebar:has(.pkp_structure_sidebar .ajse-quick-nav) {
        position: relative;
        width: 100%;
        max-width: 1440px;
        grid-template-columns: 260px minmax(0, 1fr) 280px;
        column-gap: 24px;
        row-gap: 24px;
        align-items: start;
    }

    /* Main content in the center */
    .pkp_structure_content.has_sidebar:has(.pkp_structure_sidebar .ajse-quick-nav)
    > .pkp_structure_main {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        align-self: start;
    }

    /* Native sidebar remains on the right; all normal blocks stack naturally. */
    .pkp_structure_content.has_sidebar:has(.pkp_structure_sidebar .ajse-quick-nav)
    > .pkp_structure_sidebar {
        display: block;
        grid-column: 3;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        align-self: start;
    }

    /* Pull ONLY the quick-navigation block out of the right sidebar flow
       and place it in the reserved left column. */
    .pkp_structure_content.has_sidebar:has(.pkp_structure_sidebar .ajse-quick-nav)
    > .pkp_structure_sidebar > .pkp_block:has(.ajse-quick-nav) {
        position: absolute;
        top: 28px;
        left: 20px;
        width: 260px;
        max-width: 260px;
        margin: 0;
        z-index: 2;
    }
}

/* Tablet: return to native safe layout. Quick nav becomes a normal sidebar block
   below/alongside content according to the existing OJS responsive rules. */
@media (max-width: 1279px) {
    .pkp_structure_sidebar .pkp_block:has(.ajse-quick-nav) {
        position: static;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px;
    }

    .ajse-quick-nav {
        gap: 12px;
    }

    .ajse-quick-nav .ajse-nav-btn {
        min-height: 58px;
        padding: 14px 18px;
        border-radius: 15px;
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .ajse-quick-nav {
        gap: 11px;
    }

    .ajse-quick-nav .ajse-nav-btn {
        min-height: 54px;
        padding: 13px 15px;
        border-radius: 13px;
        font-size: 15px;
        line-height: 1.3;
    }

    .ajse-quick-nav .ajse-nav-outline {
        border-width: 2px;
    }

    .ajse-quick-nav .ajse-nav-arrow {
        margin-left: 5px;
        font-size: 17px;
    }

    .ajse-quick-nav .ajse-nav-note {
        padding: 15px 16px;
        border-radius: 12px;
        font-size: 14px;
    }
}

/* =====================================================
   END AJSE LEFT SIDEBAR QUICK NAVIGATION
===================================================== */



/* =====================================================
   13. V5 FINISHING FIXES
   - Remove inherited vertical divider lines from OJS/theme variants
   - Keep Quick Navigation maroon and inside a modern card
===================================================== */

/* 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;
}

/* Quick Navigation: final maroon palette */
.ajse-quick-nav {
    --ajse-menu-primary: #8a1f2d;
    --ajse-menu-primary-hover: #6f1723;
    --ajse-menu-soft: #fbf4f5;
    --ajse-menu-text: #651824;
    --ajse-menu-muted: #5d4a4f;
    --ajse-menu-border-light: #e6cfd3;
}

/* Card wrapper around left navigation */
.pkp_structure_sidebar .pkp_block:has(.ajse-quick-nav) {
    padding: 18px;
    border: 1px solid #eadbdd;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 3px 14px rgba(20, 38, 63, .08);
}

/* Slight inner spacing so the first/last buttons do not touch the card edge */
.pkp_structure_sidebar .pkp_block:has(.ajse-quick-nav) .content {
    padding: 0;
}

@media (max-width: 768px) {
    .pkp_structure_sidebar .pkp_block:has(.ajse-quick-nav) {
        padding: 14px;
        border-radius: 10px;
    }
}

/* =====================================================
   END V5 FINISHING FIXES
===================================================== */