/* =====================================================
   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. ALSUNIYAT — IDENTITAS & CUSTOM BLOCK OJS2
   Palet dari banner OJS2: merah marun (busur) + kuning emas (latar).
   Custom block OJS2 membawa judul sendiri (<span class="blockTitle">),
   jadi judul itu yang diberi gaya judul blok.
===================================================== */

:root {
    --ojs-primary: #8b1a1a;
    --ojs-primary-hover: #6c1212;
    --ojs-primary-soft: #fdf6e6;
    --ojs-background: #faf7f0;
    --ojs-border: #eadfca;
    --als-gold: #f4b63f;
    --als-gold-soft: #fff4d6;
    --als-dark: #4a2a17;
}

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

/* 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(--als-gold);
    color: var(--ojs-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.35;
    text-transform: uppercase;
}

/* Sub-judul di dalam blok (mis. ENGLISH / ARABIC di blok Template) */
.pkp_structure_sidebar .pkp_block p + p > .blockTitle {
    margin: 10px 0 6px;
    padding: 0;
    border-bottom: 0;
    color: var(--als-dark);
    font-size: 13px;
    text-align: center;
}

.pkp_structure_sidebar .pkp_block .content > p:first-child {
    margin-top: 0;
}

/* Additional Menu: tautan berderet -> daftar tombol */
.pkp_structure_sidebar #sidenavUl a {
    display: block;
    margin: 0 0 6px;
    padding: 8px 12px;
    border: 1px solid var(--ojs-border);
    border-left: 4px solid var(--ojs-primary);
    border-radius: 6px;
    background: var(--ojs-primary-soft);
    color: var(--ojs-primary);
    font-weight: 600;
    text-decoration: none;
}

.pkp_structure_sidebar #sidenavUl a:hover,
.pkp_structure_sidebar #sidenavUl a:focus {
    border-left-color: var(--als-gold);
    background: var(--ojs-primary);
    color: #ffffff;
    text-decoration: none;
}

/* Ikon Font Awesome OJS2 (fa-*) tidak dimuat di OJS3 */
.pkp_structure_sidebar #sidenavUl em.fa {
    display: none;
}

/* Gambar custom block (Template, mitra, sertifikat, Tools, Visitors) di tengah;
   spasi &nbsp; warisan OJS2 tidak lagi menggeser gambar */
.pkp_structure_sidebar .block_custom p,
.pkp_structure_sidebar .block_custom .header-controls {
    text-align: center;
}

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

/* 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(--als-gold);
    color: var(--ojs-primary);
    scroll-margin-top: 16px;
}

.page_about #_intro {
    padding: 16px 18px;
    border-left: 4px solid var(--als-gold);
    border-radius: 6px;
    background: var(--als-gold-soft);
}

/* Judul artikel berbahasa Arab (bagian Inggris/Arab) tetap terbaca */
.obj_article_summary .title,
.obj_article_details .page_title {
    unicode-bidi: plaintext;
}

/* =====================================================
   END 12. ALSUNIYAT
===================================================== */


/* =====================================================
   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
===================================================== */