/*
=====================================================================
GEMAGIZI / OJS 3 - GREEN JOURNAL STYLE
---------------------------------------------------------------------
Purpose:
- Rebuild the journal frontend in a clean green visual system.
- Keep the OJS 3 structure and navigation functional.
- Create article cards with publication thumbnail/cover images.
- Make the homepage + sidebar resemble the supplied references.
- Responsive for desktop, tablet and mobile.

Palette inspired by the supplied green logo:
  --green-900 : #245b32
  --green-800 : #2f6b3a
  --green-700 : #43864d
  --green-600 : #5a9e65
  --green-500 : #72b77c
  --green-300 : #b8dfbd
  --green-100 : #eaf5ec
  --green-050 : #f4faf5

Works best with OJS 3.x themes that retain the standard PKP classes.
=====================================================================
*/

/* ================================================================
   01. DESIGN TOKENS
   ================================================================ */
:root {
    --green-900: #245b32;
    --green-800: #2f6b3a;
    --green-700: #43864d;
    --green-600: #5a9e65;
    --green-500: #72b77c;
    --green-400: #91cb99;
    --green-300: #b8dfbd;
    --green-200: #d6ead9;
    --green-100: #eaf5ec;
    --green-050: #f4faf5;

    --ink-900: #1f2b22;
    --ink-700: #405047;
    --ink-600: #5d6b63;
    --ink-500: #718078;

    --line: #dfe8e1;
    --line-strong: #cbdccf;
    --paper: #ffffff;
    --page-bg: #edf4ef;

    --shadow-sm: 0 4px 12px rgba(36, 91, 50, 0.07);
    --shadow-md: 0 10px 26px rgba(36, 91, 50, 0.11);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

/* ================================================================
   02. GLOBAL / PAGE BACKGROUND
   ================================================================ */
html,
body {
    background: var(--page-bg) !important;
    color: var(--ink-900);
}

body {
    font-size: 15px;
    line-height: 1.65;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--green-700);
}

a:hover,
a:focus {
    color: var(--green-900);
}

.pkp_structure_page {
    width: 96% !important;
    max-width: 1500px !important;
    margin: 18px auto !important;
    background: var(--paper) !important;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* ================================================================
   03. HEADER / JOURNAL LOGO
   ================================================================ */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper {
    background: var(--paper) !important;
}

.pkp_structure_head {
    width: 100% !important;
    overflow: hidden;
}

.pkp_site_name {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name .is_img {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name .is_img img,
.pkp_site_name img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
}

/* ================================================================
   04. TOP NAVIGATION
   ================================================================ */
.pkp_navigation_primary_row {
    background: linear-gradient(90deg, var(--green-800), var(--green-600)) !important;
    border: 0 !important;
    box-shadow: 0 2px 0 rgba(36, 91, 50, 0.10);
}

.pkp_navigation_primary {
    background: transparent !important;
}

.pkp_navigation_primary > li > a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 13px 17px !important;
    border-radius: 7px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

.pkp_navigation_primary > li > a[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.18) !important;
}

.pkp_navigation_primary li ul {
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-md);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    overflow: hidden;
}

.pkp_navigation_primary li ul a {
    color: var(--ink-700) !important;
    background: #ffffff !important;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease;
}

.pkp_navigation_primary li ul a:hover,
.pkp_navigation_primary li ul a:focus {
    color: var(--green-800) !important;
    background: var(--green-100) !important;
}

/* Secondary/header actions */
.pkp_navigation_user,
.pkp_navigation_user > li > a {
    color: var(--ink-700) !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: var(--green-800) !important;
}

.pkp_search {
    border-color: var(--green-700) !important;
}

/* ================================================================
   05. MAIN CONTENT + SIDEBAR
   ================================================================ */
.pkp_structure_content {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 24px !important;
    background: var(--paper) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.pkp_structure_main {
    flex: 1 1 0 !important;
    width: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.pkp_structure_sidebar {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* Sidebar must stay inside its column and never cross the right guide line. */
.pkp_structure_sidebar > *,
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .content,
.pkp_structure_sidebar .content > *,
.pkp_structure_sidebar img,
.pkp_structure_sidebar iframe,
.pkp_structure_sidebar table,
.pkp_structure_sidebar form {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.pkp_structure_sidebar .pkp_block {
    width: 100% !important;
    overflow: hidden !important;
}

/* Sidebar blocks */
.pkp_structure_sidebar .pkp_block {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 18px !important;
    padding: 18px !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-top: 4px solid var(--green-600) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
}

.pkp_structure_sidebar .title {
    margin: 0 0 12px !important;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
    color: var(--green-800) !important;
    font-size: 1.10rem !important;
    font-weight: 800 !important;
}

.pkp_structure_sidebar .content,
.pkp_structure_sidebar table,
.pkp_structure_sidebar tbody,
.pkp_structure_sidebar tr,
.pkp_structure_sidebar td,
.pkp_structure_sidebar .content > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.pkp_structure_sidebar .content a {
    transition: color .2s ease, transform .2s ease;
}

.pkp_structure_sidebar .content a:hover {
    color: var(--green-800) !important;
}

.pkp_structure_sidebar img {
    display: block;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ================================================================
   06. HOME PAGE ORDER / SECTION TITLES
   ================================================================ */
.page_index_journal {
    display: flex !important;
    flex-direction: column !important;
}

/* Keep the normal OJS reading order: current issue first,
   additional homepage content below it. */
.page_index_journal > .current_issue {
    order: 1 !important;
}

.page_index_journal > .cmp_announcements {
    order: 2 !important;
}

.page_index_journal > .homepage_about {
    order: 3 !important;
}

.page_index_journal > .additional_content {
    order: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.page_index_journal h2,
.page_index_journal .title,
.current_issue > h2,
.current_issue > h3 {
    color: var(--green-800) !important;
}

.page_index_journal .current_issue > h2,
.page_index_journal .current_issue > h3 {
    position: relative;
    margin-bottom: 18px !important;
    padding: 0 0 10px 13px;
    border-bottom: 2px solid var(--green-200);
    font-weight: 800;
}

.page_index_journal .current_issue > h2::before,
.page_index_journal .current_issue > h3::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 54px;
    height: 2px;
    background: var(--green-600);
}

/* ================================================================
   07. ADDITIONAL HOMEPAGE CONTENT / ABOUT JOURNAL
   ================================================================ */
.page_index_journal > .additional_content {
    display: block !important;
    margin: 30px 0 0 !important;
    padding-top: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.page_index_journal > .additional_content > div {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Every additional-content block stays within the main column. */
.page_index_journal > .additional_content > div > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.page_index_journal > .additional_content > div img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
}

.page_index_journal > .additional_content > div > :nth-child(1) img {
    width: 100% !important;
    max-width: 260px !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.page_index_journal > .additional_content h2,
.page_index_journal > .additional_content h3,
.page_index_journal > .additional_content h4 {
    margin-top: 0 !important;
    color: var(--green-800) !important;
}

.page_index_journal > .additional_content hr {
    border: 0;
    border-top: 1px solid var(--line);
}

.page_index_journal > .additional_content table {
    width: 100% !important;
    border-collapse: collapse;
}

.page_index_journal > .additional_content th {
    background: var(--green-100);
    color: var(--green-900);
}

/* ================================================================
   08. ARTICLE LIST - THUMBNAIL CARD
   OJS 3 standard article summary uses .cover when a publication
   coverImage exists. See the official OJS template.
   ================================================================ */
.cmp_article_list.articles {
    margin: 0 !important;
    padding: 0 !important;
}

.cmp_article_list.articles > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.obj_article_summary {
    position: relative;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 170px;
    box-sizing: border-box !important;
    margin: 0 0 16px !important;
    padding: 18px 20px !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-left: 4px solid transparent !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 2px 8px rgba(36, 91, 50, 0.04);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.obj_article_summary:hover {
    border-left-color: var(--green-600) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

/* Thumbnail / article cover */
.obj_article_summary > .cover,
.obj_article_summary .cover {
    float: left;
    display: block;
    width: 150px !important;
    height: 205px !important;
    margin: 0 22px 8px 0 !important;
    padding: 0 !important;
    background: var(--green-050);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(36, 91, 50, 0.08);
}

.obj_article_summary > .cover a,
.obj_article_summary .cover a {
    display: block;
    width: 100%;
    height: 100%;
}

.obj_article_summary > .cover img,
.obj_article_summary .cover img,
.obj_article_summary .thumbnail img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center center;
    transition: transform .3s ease;
}

.obj_article_summary:hover .cover img,
.obj_article_summary:hover .thumbnail img {
    transform: scale(1.025);
}

/* Fallback for themes/plugins using .thumbnail instead of .cover */
.obj_article_summary > .thumbnail,
.obj_article_summary .thumbnail {
    float: left;
    display: block;
    width: 150px !important;
    height: 205px !important;
    margin: 0 22px 8px 0 !important;
    border-radius: 10px;
    overflow: hidden;
    background: var(--green-050);
    border: 1px solid var(--line-strong);
    box-shadow: 0 3px 10px rgba(36, 91, 50, 0.08);
}

/* Article title */
.obj_article_summary > .title,
.obj_article_summary .title {
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 1.14rem !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

.obj_article_summary .title a {
    color: var(--green-800) !important;
    text-decoration: none !important;
}

.obj_article_summary .title a:hover,
.obj_article_summary .title a:focus {
    color: var(--green-900) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.obj_article_summary .subtitle {
    display: block;
    margin: 0 0 7px;
    color: var(--ink-600);
    font-weight: 500;
}

.obj_article_summary .meta {
    position: relative;
    margin: 0 0 8px !important;
    padding-top: 2px !important;
    color: var(--ink-600);
    font-size: .92rem;
    line-height: 1.55;
}

.obj_article_summary .authors {
    color: var(--ink-700);
    font-weight: 600;
}

.obj_article_summary .pages,
.obj_article_summary .published {
    color: var(--ink-500);
}

/* Some custom article-summary plugins expose abstract/description */
.obj_article_summary .abstract,
.obj_article_summary .description {
    color: var(--ink-700);
    font-size: .94rem;
    line-height: 1.6;
}

/* Galley buttons */
.obj_article_summary .galleys_links {
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.obj_article_summary .galleys_links li {
    margin: 0 !important;
    padding: 0 !important;
}

.obj_article_summary .galleys_links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    box-sizing: border-box;
    padding: 6px 11px;
    border: 1px solid var(--green-300);
    border-radius: 999px;
    background: var(--green-050);
    color: var(--green-800) !important;
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.obj_article_summary .galleys_links a:hover,
.obj_article_summary .galleys_links a:focus {
    background: var(--green-100);
    border-color: var(--green-500);
    color: var(--green-900) !important;
}

.obj_article_summary::after {
    content: "";
    display: table;
    clear: both;
}

/* ================================================================
   09. CURRENT ISSUE / SECTION HEADINGS
   ================================================================ */
.current_issue .sections {
    margin-top: 12px !important;
}

.current_issue .section {
    margin-bottom: 18px !important;
}

.current_issue .section > h2,
.current_issue .section > h3,
.current_issue .section > h4 {
    margin: 22px 0 12px !important;
    padding: 9px 13px;
    color: var(--green-900) !important;
    background: var(--green-100);
    border-left: 5px solid var(--green-600);
    border-radius: 6px;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
}

/* ================================================================
   10. ISSUE PAGE / ISSUE COVER
   ================================================================ */
.obj_issue_toc {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-md);
    padding: 20px !important;
    background: #ffffff !important;
    box-shadow: var(--shadow-sm);
}

.obj_issue_toc .heading {
    color: var(--green-800) !important;
}

.obj_issue_toc .cover img,
.obj_issue_toc .issue_cover img {
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.obj_issue_toc .sections > .section > h2,
.obj_issue_toc .sections > .section > h3,
.obj_issue_toc .sections > .section > h4 {
    color: var(--green-800) !important;
    border-bottom: 2px solid var(--green-200);
}

/* ================================================================
   11. SEARCH / FORM ELEMENTS
   ================================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    border: 1px solid var(--line-strong) !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    color: var(--ink-900) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--green-500) !important;
    box-shadow: 0 0 0 3px rgba(114, 183, 124, .18) !important;
    outline: none !important;
}

button,
input[type="submit"],
input[type="button"],
.pkp_button,
.cmp_button {
    border-radius: 7px !important;
    font-weight: 700;
}

.pkp_button:hover,
.cmp_button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--green-700) !important;
    border-color: var(--green-700) !important;
    color: #ffffff !important;
}

/* ================================================================
   12. ANNOUNCEMENTS / TABLES / CONTENT BOXES
   ================================================================ */
.cmp_announcements article,
.obj_announcement_summary,
.announcements_list article {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-md);
    padding: 18px;
    background: #ffffff;
}

.cmp_announcements .title a,
.obj_announcement_summary .title a {
    color: var(--green-800) !important;
}

table {
    border-color: var(--line) !important;
}

table th {
    background: var(--green-100) !important;
    color: var(--green-900) !important;
}

blockquote {
    margin: 1em 0;
    padding: 14px 18px;
    border-left: 4px solid var(--green-500);
    background: var(--green-050);
    color: var(--ink-700);
}

/* ================================================================
   13. OJS ARTICLE DETAIL PAGE
   ================================================================ */
.obj_article_details .title,
.obj_article_details .title h1,
.obj_article_details .title h2 {
    color: var(--green-900) !important;
}

.obj_article_details .item .label {
    color: var(--green-800) !important;
}

.obj_article_details .cover_image img {
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.obj_galley_link {
    border-color: var(--green-300) !important;
}

.obj_galley_link:hover {
    background: var(--green-100) !important;
}

/* ================================================================
   14. FOOTER
   ================================================================ */
.pkp_structure_footer_wrapper {
    background: var(--green-900) !important;
    border-top: 4px solid var(--green-500) !important;
}

.pkp_structure_footer {
    background: transparent !important;
    color: #eef8f0 !important;
}

.pkp_structure_footer a {
    color: #d6ead9 !important;
}

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

/* ================================================================
   15. EDITORIAL PICK / CUSTOM CARD HELPERS
   Use these classes in your custom homepage HTML when available:
   .editorial-pick, .editorial_pick, .editorialPick
   ================================================================ */
.editorial-pick,
.editorial_pick,
.editorialPick {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 28px;
}

.editorial-pick .card,
.editorial_pick .card,
.editorialPick .card,
.editorial-pick article,
.editorial_pick article,
.editorialPick article {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.editorial-pick .card:hover,
.editorial_pick .card:hover,
.editorialPick .card:hover,
.editorial-pick article:hover,
.editorial_pick article:hover,
.editorialPick article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.editorial-pick img,
.editorial_pick img,
.editorialPick img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.editorial-pick .body,
.editorial_pick .body,
.editorialPick .body {
    padding: 14px;
}

.editorial-pick a,
.editorial_pick a,
.editorialPick a {
    color: var(--green-800);
    text-decoration: none;
    font-weight: 800;
}

/* ================================================================
   16. ACCESSIBILITY / FOCUS
   ================================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(114, 183, 124, .45) !important;
    outline-offset: 2px;
}

/* ================================================================
   17. TABLET
   ================================================================ */
@media (max-width: 1100px) {
    .pkp_structure_sidebar {
        flex-basis: 280px !important;
        width: 280px !important;
        max-width: 280px !important;
    }

    .obj_article_summary > .cover,
    .obj_article_summary .cover,
    .obj_article_summary > .thumbnail,
    .obj_article_summary .thumbnail {
        width: 135px !important;
        height: 185px !important;
        margin-right: 18px !important;
    }

    .editorial-pick,
    .editorial_pick,
    .editorialPick {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ================================================================
   18. MOBILE
   ================================================================ */
@media (max-width: 850px) {
    .pkp_structure_page {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0;
    }

    .pkp_structure_content {
        display: block !important;
        padding: 18px !important;
    }

    .pkp_structure_sidebar,
    .pkp_structure_main {
        width: 100% !important;
        max-width: 100% !important;
    }

    .pkp_structure_sidebar {
        margin-top: 24px !important;
    }

    .page_index_journal > .additional_content > div {
        display: block !important;
    }

    .page_index_journal > .additional_content > div > :nth-child(1) img {
        max-width: 260px !important;
        margin: 0 auto 18px;
    }

    .page_index_journal > .additional_content > div > * {
        margin-bottom: 18px;
    }

    .obj_article_summary {
        padding: 16px !important;
    }

    .obj_article_summary > .cover,
    .obj_article_summary .cover,
    .obj_article_summary > .thumbnail,
    .obj_article_summary .thumbnail {
        float: none !important;
        width: 112px !important;
        height: 150px !important;
        margin: 0 auto 13px !important;
    }

    .obj_article_summary > .title,
    .obj_article_summary .title {
        font-size: 1.05rem !important;
    }

    .pkp_navigation_primary > li > a {
        padding: 10px 12px !important;
    }

    .editorial-pick,
    .editorial_pick,
    .editorialPick {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   19. VERY SMALL MOBILE
   ================================================================ */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    .pkp_structure_content {
        padding: 14px !important;
    }

    .obj_article_summary {
        margin-bottom: 12px !important;
    }

    .obj_article_summary > .cover,
    .obj_article_summary .cover,
    .obj_article_summary > .thumbnail,
    .obj_article_summary .thumbnail {
        width: 96px !important;
        height: 128px !important;
    }

    .obj_article_summary .meta {
        font-size: .86rem;
    }
}

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

/* ================================================================
   12. SIDEBAR MENU HOVER ANIMATION - GREEN EDITION
   ----------------------------------------------------------------
   Efek mengikuti gaya awal: item sidebar bergeser sedikit ke kanan
   ketika kursor diarahkan, dengan transisi warna dan background.
   ================================================================ */

/* Link menu di dalam sidebar */
.pkp_structure_sidebar .pkp_block .content li > a,
.pkp_structure_sidebar .pkp_block .content .block_make_submission a,
.pkp_structure_sidebar .pkp_block .content > a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 2px 0 !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    text-decoration: none !important;
    color: var(--ink-700) !important;
    background: transparent !important;
    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease,
        padding-left .25s ease,
        box-shadow .25s ease !important;
}

/* Hover: geser ke kanan seperti efek sidebar sebelumnya */
.pkp_structure_sidebar .pkp_block .content li > a:hover,
.pkp_structure_sidebar .pkp_block .content li > a:focus,
.pkp_structure_sidebar .pkp_block .content .block_make_submission a:hover,
.pkp_structure_sidebar .pkp_block .content .block_make_submission a:focus,
.pkp_structure_sidebar .pkp_block .content > a:hover,
.pkp_structure_sidebar .pkp_block .content > a:focus {
    transform: translateX(6px) !important;
    padding-left: 14px !important;
    color: var(--green-900) !important;
    background: var(--green-100) !important;
    box-shadow: inset 3px 0 0 var(--green-600) !important;
}

/* Item list bawaan OJS tetap rapih */
.pkp_structure_sidebar .pkp_block .content ul,
.pkp_structure_sidebar .pkp_block .content ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style-position: inside;
}

.pkp_structure_sidebar .pkp_block .content li {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Judul blok ikut berubah halus saat area sidebar disentuh */
.pkp_structure_sidebar .pkp_block .title {
    transition: color .25s ease, border-color .25s ease !important;
}

.pkp_structure_sidebar .pkp_block:hover .title {
    color: var(--green-900) !important;
    border-bottom-color: var(--green-300) !important;
}

/* Social/media/image links tidak dibatasi menjadi kotak menu */
.pkp_structure_sidebar .pkp_block .content a img,
.pkp_structure_sidebar .pkp_block .content a iframe {
    transition: transform .25s ease, box-shadow .25s ease !important;
}

/* Pada layar sentuh, nonaktifkan pergeseran agar nyaman disentuh */
@media (hover: none) {
    .pkp_structure_sidebar .pkp_block .content li > a,
    .pkp_structure_sidebar .pkp_block .content .block_make_submission a,
    .pkp_structure_sidebar .pkp_block .content > a {
        transform: none !important;
    }
}

/* ================================================================
   v4 - SIDEBAR FULL WIDTH / REMOVE DIVIDER
   Based on the current OJS 3 frontend screenshot.
   ================================================================ */

/* Remove the default OJS vertical separator next to the sidebar. */
.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

/* Remove the inner gutter that can make the sidebar look narrower. */
.pkp_structure_sidebar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 290px !important;
    width: 290px !important;
    max-width: 290px !important;
    min-width: 290px !important;
    box-sizing: border-box !important;
}

/* Every sidebar block fills the sidebar column exactly. */
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .content,
.pkp_structure_sidebar .content > div,
.pkp_structure_sidebar .content > p,
.pkp_structure_sidebar .content > table,
.pkp_structure_sidebar .content > form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Make the block itself use the full available sidebar width. */
.pkp_structure_sidebar .pkp_block {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
}

/* Prevent images/widgets from creating horizontal overflow. */
.pkp_structure_sidebar img,
.pkp_structure_sidebar iframe,
.pkp_structure_sidebar video,
.pkp_structure_sidebar svg,
.pkp_structure_sidebar canvas {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Tables and forms stay inside the sidebar edge. */
.pkp_structure_sidebar table,
.pkp_structure_sidebar tbody,
.pkp_structure_sidebar tr,
.pkp_structure_sidebar td,
.pkp_structure_sidebar th,
.pkp_structure_sidebar form,
.pkp_structure_sidebar fieldset,
.pkp_structure_sidebar input,
.pkp_structure_sidebar select,
.pkp_structure_sidebar textarea,
.pkp_structure_sidebar button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Give sidebar cards a clean full-width appearance. */
.pkp_structure_sidebar .pkp_block {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-top: 4px solid var(--green-600) !important;
    border-radius: 12px !important;
}

/* Sidebar menu animation: subtle slide + green highlight. */
.pkp_structure_sidebar .content a:not(.button),
.pkp_structure_sidebar .pkp_block a {
    display: inline-block;
    max-width: 100%;
    transition: transform .22s ease, color .22s ease, background-color .22s ease;
}

.pkp_structure_sidebar .content a:not(.button):hover,
.pkp_structure_sidebar .pkp_block a:hover {
    color: var(--green-800) !important;
    transform: translateX(5px);
}

/* Mobile: sidebar returns to full available width. */
@media (max-width: 991px) {
    .pkp_structure_sidebar,
    .pkp_structure_sidebar.left,
    .pkp_structure_sidebar.right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 100% !important;
        border: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ================================================================
   v5 - CLEAN MAIN/SIDEBAR EDGE + FULL-WIDTH ADDITIONAL CONTENT
   ----------------------------------------------------------------
   1) Remove every vertical divider at the main/sidebar boundary.
   2) Let Additional Content occupy the complete main-column width.
   3) Remove accidental inner widths/margins that make Additional
      Content look narrower than the content area.
   ================================================================ */

/* ---- Remove OJS/theme divider between main content and sidebar ---- */
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right {
    border-left: 0 !important;
    border-right: 0 !important;
}

.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after {
    border: 0 !important;
    box-shadow: none !important;
}

/* Remove any theme-generated vertical rule on the content wrapper. */
.pkp_structure_content.has_sidebar {
    box-shadow: none !important;
    background: #fff !important;
}

/* Keep only the intended spacing between columns, without a line. */
.pkp_structure_content {
    column-gap: 24px !important;
}

/* ---- Additional Content: full width of the complete main content area ---- */
.pkp_structure_main .page_index_journal > .additional_content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.pkp_structure_main .page_index_journal > .additional_content > div,
.pkp_structure_main .page_index_journal > .additional_content > div > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Do not let the old thumbnail rule constrain the first image in
   Additional Content. Article thumbnails remain controlled by the
   article-card rules elsewhere in this stylesheet. */
.pkp_structure_main .page_index_journal > .additional_content > div > :nth-child(1) img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Tables / banners / embeds in Additional Content fill the available width. */
.pkp_structure_main .page_index_journal > .additional_content img,
.pkp_structure_main .page_index_journal > .additional_content table,
.pkp_structure_main .page_index_journal > .additional_content iframe,
.pkp_structure_main .page_index_journal > .additional_content video {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Desktop: no extra inset on the main column. */
@media (min-width: 992px) {
    .pkp_structure_main {
        border-left: 0 !important;
        border-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .pkp_structure_sidebar {
        border-left: 0 !important;
        border-right: 0 !important;
    }
}

/* ================================================================
   v6 - FULL PAGE / FULL HEADER / FULL SIDEBAR
   Based on the actual OJS 3.3 HTML structure supplied.
   ================================================================ */

/* --- Remove the outer white frame/gutters around the journal page --- */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    background: #ffffff !important;
}

.pkp_structure_page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    overflow: visible !important;
}

/* --- Make the header/logo area use the complete page width --- */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pkp_head_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pkp_site_name .is_img,
.pkp_site_name .is_img img,
.pkp_site_name img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* --- Full-width navigation --- */
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.pkp_navigation_primary_wrapper,
.pkp_navigation_user_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Keep menu items comfortably inside the full-width bar. */
.pkp_navigation_primary {
    margin-left: 0 !important;
}

/* --- Main content wrapper: no artificial outside frame --- */
.pkp_structure_content,
.pkp_structure_content.has_sidebar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

/* Desktop: wider, genuinely full sidebar column. */
@media (min-width: 992px) {
    .pkp_structure_content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 330px !important;
        column-gap: 24px !important;
        align-items: start !important;
        padding: 22px 24px 30px !important;
    }

    .pkp_structure_main {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .pkp_structure_sidebar,
    .pkp_structure_sidebar.left,
    .pkp_structure_sidebar.right {
        width: 330px !important;
        max-width: 330px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        overflow: visible !important;
    }
}

/* --- Remove every visible vertical separator between main and sidebar --- */
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after,
.pkp_structure_sidebar.left::before,
.pkp_structure_sidebar.left::after,
.pkp_structure_sidebar.right::before,
.pkp_structure_sidebar.right::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

/* --- Sidebar itself fills its complete column --- */
.pkp_structure_sidebar .pkp_block {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.pkp_structure_sidebar .content,
.pkp_structure_sidebar .content > div,
.pkp_structure_sidebar .content > p,
.pkp_structure_sidebar .content > form,
.pkp_structure_sidebar .content > table,
.pkp_structure_sidebar .content > img,
.pkp_structure_sidebar .content iframe {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.pkp_structure_sidebar img,
.pkp_structure_sidebar iframe,
.pkp_structure_sidebar video,
.pkp_structure_sidebar canvas,
.pkp_structure_sidebar svg,
.pkp_structure_sidebar table,
.pkp_structure_sidebar form,
.pkp_structure_sidebar input,
.pkp_structure_sidebar select,
.pkp_structure_sidebar textarea,
.pkp_structure_sidebar button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Custom blocks: use the full available sidebar width. */
.pkp_structure_sidebar .block_custom,
.pkp_structure_sidebar .block_custom .content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Additional Content: 100% of the main content column --- */
.pkp_structure_main .page_index_journal > .additional_content,
.pkp_structure_main .page_index_journal > .additional_content > div,
.pkp_structure_main .page_index_journal > .additional_content > div > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.pkp_structure_main .page_index_journal > .additional_content img,
.pkp_structure_main .page_index_journal > .additional_content table,
.pkp_structure_main .page_index_journal > .additional_content iframe,
.pkp_structure_main .page_index_journal > .additional_content video {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Announcements / About: use the entire main column --- */
.pkp_structure_main .page_index_journal > .homepage_about,
.pkp_structure_main .page_index_journal > .cmp_announcements {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* --- Mobile: stack cleanly, with no horizontal overflow --- */
@media (max-width: 991px) {
    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        display: block !important;
        width: 100% !important;
        padding: 18px 16px 28px !important;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar,
    .pkp_structure_sidebar.left,
    .pkp_structure_sidebar.right {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .pkp_structure_sidebar {
        margin-top: 24px !important;
    }
}

/* --- Prevent horizontal overflow from inline custom HTML --- */
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_sidebar .content,
.pkp_structure_sidebar .pkp_block,
.pkp_structure_main .page_index_journal {
    overflow-x: clip !important;
}

@supports not (overflow-x: clip) {
    .pkp_structure_content,
    .pkp_structure_main,
    .pkp_structure_sidebar,
    .pkp_structure_sidebar .content,
    .pkp_structure_sidebar .pkp_block,
    .pkp_structure_main .page_index_journal {
        overflow-x: hidden !important;
    }
}
/* ================================================================
   FINAL POLISH - ABOUT JOURNAL + COVER + SIDEBAR + HEADER
   ================================================================ */

/* ----------------------------------------------------------------
   A. HEADER: 50% shorter while preserving image proportions.
      The supplied header image is 4000x1000 (4:1). The 8:1
      viewport is achieved by cropping vertically, not stretching.
   ---------------------------------------------------------------- */
@media (min-width: 851px) {
    .pkp_site_name .is_img {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 8 / 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* Smaller screens: keep the header readable */
@media (max-width: 850px) {
    .pkp_site_name .is_img {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 4 / 1 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* ----------------------------------------------------------------
   B. ABOUT THE JOURNAL + COVER
      Use the current journal cover as a visual cover card.
      Cover source: May 2026 cover linked from the journal archive.
   ---------------------------------------------------------------- */
.page_index_journal > .homepage_about {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr) !important;
    grid-template-areas:
        "cover heading"
        "cover body" !important;
    column-gap: 26px !important;
    row-gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 26px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.page_index_journal > .homepage_about::before {
    content: "" !important;
    grid-area: cover !important;
    display: block !important;
    width: 190px !important;
    height: 255px !important;
    background-image: url("https://drive.google.com/thumbnail?id=1Nrcme1gitdD9BAgj8hNoUxfAgdis9LGx&sz=w800") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-color: var(--green-050) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-sm) !important;
}

.page_index_journal > .homepage_about > h2 {
    grid-area: heading !important;
    align-self: start !important;
    margin: 0 0 4px !important;
    padding: 0 0 10px !important;
    border-bottom: 2px solid var(--green-200) !important;
    color: var(--green-900) !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.page_index_journal > .homepage_about > h2::after {
    content: "" !important;
    display: block !important;
    width: 58px !important;
    height: 3px !important;
    margin-top: 8px !important;
    border-radius: 99px !important;
    background: var(--green-600) !important;
}

.page_index_journal > .homepage_about > .container-fluid {
    grid-area: body !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.page_index_journal > .homepage_about > .container-fluid > #aboutTheJournal,
.page_index_journal > .homepage_about .row,
.page_index_journal > .homepage_about .col {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.page_index_journal > .homepage_about p {
    margin: 0 !important;
    color: var(--ink-700) !important;
    line-height: 1.75 !important;
    text-align: justify !important;
}

.page_index_journal > .homepage_about strong {
    color: var(--green-900) !important;
}

/* Mobile About Journal */
@media (max-width: 700px) {
    .page_index_journal > .homepage_about {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "cover"
            "heading"
            "body" !important;
        gap: 14px !important;
    }

    .page_index_journal > .homepage_about::before {
        width: 150px !important;
        height: 205px !important;
        margin: 0 auto !important;
    }

    .page_index_journal > .homepage_about > h2 {
        margin-top: 4px !important;
    }
}

/* ----------------------------------------------------------------
   C. FORCE SIDEBAR CUSTOM HEADINGS TO BLACK
      The custom sidebar uses inline green span styles and white
      border-bottom styles; these rules intentionally override them.
   ---------------------------------------------------------------- */
.pkp_structure_sidebar .content span[style*="599e54" i],
.pkp_structure_sidebar .content span[style*="5a9e65" i],
.pkp_structure_sidebar .content span[style*="43864d" i] {
    color: #000000 !important;
}

/* "Journal Menu" and "INDEXING" heading rows */
.pkp_structure_sidebar .content div[style*="border-bottom" i] {
    border-bottom: 1px solid #000000 !important;
}

/* Keep the actual menu text left aligned */
.pkp_structure_sidebar .pkp_block .content table td,
.pkp_structure_sidebar .pkp_block .content table td span,
.pkp_structure_sidebar .pkp_block .content table td a {
    text-align: left !important;
}

/* Custom heading text remains black even when wrapped in span */
.pkp_structure_sidebar .content div[style*="border-bottom" i] span {
    color: #000000 !important;
    text-align: left !important;
}

/* ----------------------------------------------------------------
   D. SIDEBAR FULL COLUMN + NO OUTER DIVIDER
   ---------------------------------------------------------------- */
.pkp_structure_sidebar,
.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

.pkp_structure_sidebar .pkp_block {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ----------------------------------------------------------------
   E. EDITORIAL PICK - keep the requested card design
   ---------------------------------------------------------------- */
.page_index_journal .noble-editorial-pick.mini-card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f3f5f4 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

.page_index_journal .noble-editorial-pick.mini-card-grid > * {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f4f6f5 !important;
    border: 0 !important;
    border-right: 1px solid #e1e7e2 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease !important;
}

.page_index_journal .noble-editorial-pick.mini-card-grid > *:last-child {
    border-right: 0 !important;
}

.page_index_journal .noble-editorial-pick.mini-card-grid > *:hover {
    z-index: 2 !important;
    transform: translateY(-3px) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 22px rgba(36, 91, 50, .13) !important;
}

.page_index_journal .noble-editorial-pick.mini-card-grid img,
.page_index_journal .noble-editorial-pick.mini-card-grid .cover img,
.page_index_journal .noble-editorial-pick.mini-card-grid .thumbnail img {
    display: block !important;
    width: 100% !important;
    height: 190px !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transition: transform .35s ease !important;
}

.page_index_journal .noble-editorial-pick.mini-card-grid > *:hover img {
    transform: scale(1.025) !important;
}

.page_index_journal .noble-editorial-pick.mini-card-grid h4,
.page_index_journal .noble-editorial-pick.mini-card-grid .title {
    margin: 0 !important;
    padding: 14px 14px 6px !important;
    color: var(--ink-900) !important;
    font-size: .94rem !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
}

.page_index_journal .noble-editorial-pick.mini-card-grid h4 a,
.page_index_journal .noble-editorial-pick.mini-card-grid .title a {
    color: var(--ink-900) !important;
    text-decoration: none !important;
}

.page_index_journal .noble-editorial-pick.mini-card-grid h4 a:hover,
.page_index_journal .noble-editorial-pick.mini-card-grid .title a:hover {
    color: var(--green-800) !important;
}

@media (max-width: 1100px) {
    .page_index_journal .noble-editorial-pick.mini-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page_index_journal .noble-editorial-pick.mini-card-grid > * {
        border-right: 0 !important;
        border-bottom: 1px solid #e1e7e2 !important;
    }

    .page_index_journal .noble-editorial-pick.mini-card-grid > *:nth-child(odd) {
        border-right: 1px solid #e1e7e2 !important;
    }
}

@media (max-width: 700px) {
    .page_index_journal .noble-editorial-pick.mini-card-grid {
        grid-template-columns: 1fr !important;
    }

    .page_index_journal .noble-editorial-pick.mini-card-grid > * {
        border-right: 0 !important;
        border-bottom: 1px solid #e1e7e2 !important;
    }

    .page_index_journal .noble-editorial-pick.mini-card-grid > *:last-child {
        border-bottom: 0 !important;
    }
}
/* ================================================================
   V8 - LATEST ARTICLES BELOW ABOUT THE JOURNAL
   ================================================================ */

/* Homepage order:
   About -> Latest Articles/Current Issue -> Announcements -> Additional */
.page_index_journal > .homepage_about {
    order: 1 !important;
}

.page_index_journal > .current_issue {
    order: 2 !important;
}

.page_index_journal > .cmp_announcements {
    order: 3 !important;
}

.page_index_journal > .additional_content {
    order: 4 !important;
}

/* Current Issue / latest articles section */
.page_index_journal > .current_issue {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.page_index_journal > .current_issue > h2,
.page_index_journal > .current_issue > h3 {
    margin: 0 0 16px !important;
    padding: 0 0 10px !important;
    color: var(--green-900) !important;
    border-bottom: 2px solid var(--green-200) !important;
    font-size: 1.35rem !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    position: relative !important;
}

.page_index_journal > .current_issue > h2::after,
.page_index_journal > .current_issue > h3::after {
    content: "" !important;
    display: block !important;
    width: 58px !important;
    height: 3px !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
    background: var(--green-600) !important;
}

/* Section headings */
.page_index_journal > .current_issue .section {
    margin: 0 0 18px !important;
}

.page_index_journal > .current_issue .section > h2,
.page_index_journal > .current_issue .section > h3,
.page_index_journal > .current_issue .section > h4 {
    margin: 20px 0 12px !important;
    padding: 8px 12px !important;
    color: var(--green-900) !important;
    background: var(--green-100) !important;
    border-left: 4px solid var(--green-600) !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}

/* Article list reset */
.page_index_journal > .current_issue .cmp_article_list,
.page_index_journal > .current_issue .cmp_article_list.articles {
    margin: 0 !important;
    padding: 0 !important;
}

.page_index_journal > .current_issue .cmp_article_list > li,
.page_index_journal > .current_issue .cmp_article_list.articles > li {
    list-style: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
}

/* Latest article card */
.page_index_journal > .current_issue .obj_article_summary {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 150px !important;
    margin: 0 !important;
    padding: 15px 17px !important;
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-left: 4px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(36, 91, 50, .04) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: transform .22s ease, box-shadow .22s ease, border-left-color .22s ease !important;
}

.page_index_journal > .current_issue .obj_article_summary:hover {
    transform: translateY(-2px) !important;
    border-left-color: var(--green-600) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Thumbnail */
.page_index_journal > .current_issue .obj_article_summary > .cover,
.page_index_journal > .current_issue .obj_article_summary .cover,
.page_index_journal > .current_issue .obj_article_summary > .thumbnail,
.page_index_journal > .current_issue .obj_article_summary .thumbnail {
    float: left !important;
    display: block !important;
    width: 105px !important;
    height: 145px !important;
    margin: 0 17px 7px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--green-050) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.page_index_journal > .current_issue .obj_article_summary > .cover img,
.page_index_journal > .current_issue .obj_article_summary .cover img,
.page_index_journal > .current_issue .obj_article_summary .thumbnail img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform .3s ease !important;
}

.page_index_journal > .current_issue .obj_article_summary:hover .cover img,
.page_index_journal > .current_issue .obj_article_summary:hover .thumbnail img {
    transform: scale(1.025) !important;
}

/* Article title */
.page_index_journal > .current_issue .obj_article_summary .title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

.page_index_journal > .current_issue .obj_article_summary .title a {
    color: var(--green-800) !important;
    text-decoration: none !important;
}

.page_index_journal > .current_issue .obj_article_summary .title a:hover {
    color: var(--green-900) !important;
    text-decoration: underline !important;
}

/* Metadata */
.page_index_journal > .current_issue .obj_article_summary .meta,
.page_index_journal > .current_issue .obj_article_summary .authors,
.page_index_journal > .current_issue .obj_article_summary .pages,
.page_index_journal > .current_issue .obj_article_summary .published {
    color: var(--ink-600) !important;
    font-size: .88rem !important;
    line-height: 1.5 !important;
}

/* Galley links */
.page_index_journal > .current_issue .obj_article_summary .galleys_links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}

.page_index_journal > .current_issue .obj_article_summary .galleys_links a {
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: var(--green-050) !important;
    border: 1px solid var(--green-300) !important;
    color: var(--green-800) !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.page_index_journal > .current_issue .obj_article_summary::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Mobile */
@media (max-width: 700px) {
    .page_index_journal > .current_issue .obj_article_summary {
        padding: 14px !important;
    }

    .page_index_journal > .current_issue .obj_article_summary > .cover,
    .page_index_journal > .current_issue .obj_article_summary .cover,
    .page_index_journal > .current_issue .obj_article_summary > .thumbnail,
    .page_index_journal > .current_issue .obj_article_summary .thumbnail {
        float: none !important;
        width: 96px !important;
        height: 130px !important;
        margin: 0 auto 11px !important;
    }
}
/* ================================================================
   V9 - BALANCED SIDE SPACE
   ----------------------------------------------------------------
   Memberikan ruang kiri/kanan yang tipis dan proporsional, tanpa
   kembali ke tampilan yang terlalu sempit.
   ================================================================ */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: var(--page-bg) !important;
}

/* Main journal frame */
.pkp_structure_page {
    width: 95% !important;
    max-width: 1600px !important;
    margin: 14px auto !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(36, 91, 50, .08) !important;
    overflow: hidden !important;
}

/* Keep header and navigation aligned perfectly with the frame */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: none !important;
}

/* Main content inside the framed journal */
.pkp_structure_content,
.pkp_structure_content.has_sidebar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Desktop: comfortable internal padding */
@media (min-width: 992px) {
    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        padding: 20px 22px 28px !important;
    }

    .pkp_structure_sidebar {
        width: 330px !important;
        max-width: 330px !important;
    }
}

/* Tablet and mobile: frame fills available screen */
@media (max-width: 991px) {
    .pkp_structure_page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        padding: 18px 16px 28px !important;
    }
}

/* Very wide screens: keep the side margins visually balanced */
@media (min-width: 1700px) {
    .pkp_structure_page {
        width: 94% !important;
        max-width: 1650px !important;
    }
}
/* ================================================================
   V10 - STABLE CROSS-BROWSER / CROSS-LAPTOP LAYOUT
   ================================================================ */

html {
    box-sizing: border-box !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

*, *::before, *::after {
    box-sizing: inherit !important;
}

html, body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Stable journal frame */
.pkp_structure_page {
    display: block !important;
    width: min(95%, 1650px) !important;
    max-width: 1650px !important;
    min-width: 0 !important;
    margin: 14px auto !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Stable header geometry */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name .is_img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.pkp_site_name .is_img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 8 / 1 !important;
    height: auto !important;
    overflow: hidden !important;
}

.pkp_site_name .is_img img,
.pkp_site_name img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

@supports not (aspect-ratio: 8 / 1) {
    .pkp_site_name .is_img {
        height: 12.5vw !important;
        min-height: 90px !important;
        max-height: 205px !important;
    }
}

/* Navigation: never force the page wider than the viewport */
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary,
.pkp_navigation_user_wrapper,
.pkp_navigation_user {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.pkp_navigation_primary {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.pkp_navigation_primary > li {
    min-width: 0 !important;
}

.pkp_navigation_primary > li > a {
    white-space: normal !important;
}

/* Desktop: deterministic main/sidebar grid */
@media (min-width: 1024px) {
    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 330px !important;
        gap: 22px !important;
        align-items: start !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 20px 22px 28px !important;
    }

    .pkp_structure_main {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    .pkp_structure_sidebar,
    .pkp_structure_sidebar.left,
    .pkp_structure_sidebar.right {
        grid-column: 2 !important;
        width: 330px !important;
        min-width: 330px !important;
        max-width: 330px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        overflow: hidden !important;
    }
}

/* 1023px and below: stack before the two-column layout gets cramped */
@media (max-width: 1023px) {
    .pkp_structure_page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .pkp_structure_content,
    .pkp_structure_content.has_sidebar {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 18px 16px 28px !important;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar,
    .pkp_structure_sidebar.left,
    .pkp_structure_sidebar.right {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
    }

    .pkp_structure_sidebar {
        margin-top: 24px !important;
    }
}

/* Stable sidebar blocks and custom content */
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block_custom,
.pkp_structure_sidebar .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.pkp_structure_sidebar .content > div,
.pkp_structure_sidebar .content > p,
.pkp_structure_sidebar .content > form,
.pkp_structure_sidebar .content > table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.pkp_structure_sidebar table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

.pkp_structure_sidebar table td,
.pkp_structure_sidebar table th {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

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

/* Stable homepage sections */
.page_index_journal,
.page_index_journal > *,
.page_index_journal .homepage_about,
.page_index_journal .current_issue,
.page_index_journal .cmp_announcements,
.page_index_journal .additional_content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* About Journal layout */
@media (min-width: 701px) {
    .page_index_journal > .homepage_about {
        display: grid !important;
        grid-template-columns: 190px minmax(0, 1fr) !important;
        gap: 8px 26px !important;
    }

    .page_index_journal > .homepage_about::before {
        width: 190px !important;
        height: 255px !important;
        max-width: 190px !important;
    }
}

@media (max-width: 700px) {
    .page_index_journal > .homepage_about {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .page_index_journal > .homepage_about::before {
        width: 150px !important;
        max-width: 150px !important;
        height: 205px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Stable article cards */
.obj_article_summary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.obj_article_summary .title,
.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .pages,
.obj_article_summary .published {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

/* Stable Editorial Pick breakpoints */
.page_index_journal .noble-editorial-pick.mini-card-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

@media (min-width: 900px) {
    .page_index_journal .noble-editorial-pick.mini-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 601px) and (max-width: 899px) {
    .page_index_journal .noble-editorial-pick.mini-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .page_index_journal .noble-editorial-pick.mini-card-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Prevent long URLs and embedded objects from breaking the layout */
.pkp_structure_main a,
.pkp_structure_sidebar a,
.pkp_structure_main p,
.pkp_structure_sidebar p,
.pkp_structure_main li,
.pkp_structure_sidebar li {
    overflow-wrap: anywhere !important;
}

.pkp_structure_main img,
.pkp_structure_main iframe,
.pkp_structure_main video,
.pkp_structure_main canvas,
.pkp_structure_main svg,
.pkp_structure_main table {
    max-width: 100% !important;
}

/* Touch screens: do not move hover elements */
@media (hover: none) {
    .pkp_structure_sidebar .content a:hover,
    .pkp_structure_sidebar .pkp_block a:hover,
    .obj_article_summary:hover,
    .page_index_journal .noble-editorial-pick.mini-card-grid > *:hover {
        transform: none !important;
    }
}
/* ================================================================
   V11 - FIXED HEADER + VISIBLE LOGIN/LOGOUT NAVIGATION
   ----------------------------------------------------------------
   1. Header logo remains full-width and uses a fixed display box.
   2. Image is cropped proportionally with object-fit: cover;
      never stretched.
   3. Login / profile / dashboard / logout navigation receives
      visible green boxes instead of a white background.
   4. Desktop dimensions are deterministic; mobile remains adaptive.
   ================================================================ */

/* ---------- A. Permanent full-width header frame ---------- */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fixed header viewport on desktop.
   The source logo is 4000x1000 (4:1); we crop vertically rather
   than distort the image. */
@media (min-width: 851px) {
    .pkp_site_name .is_img {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
    }
}

/* Smaller screens: fixed but shorter header, still proportional */
@media (max-width: 850px) {
    .pkp_site_name .is_img {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 125px !important;
        min-height: 125px !important;
        max-height: 125px !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* ---------- B. User navigation: visible boxes ---------- */
.pkp_navigation_user_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    background: var(--green-900) !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
    box-sizing: border-box !important;
}

.pkp_navigation_user {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.pkp_navigation_user > li {
    display: flex !important;
    align-items: stretch !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Top-level login/profile button */
.pkp_navigation_user > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 7px 13px !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 7px !important;
    background: var(--green-700) !important;
    color: #ffffff !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    background: var(--green-600) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Profile/task counter */
.pkp_navigation_user .task_count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    margin-left: 6px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--green-900) !important;
    font-size: .73rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* Dropdown under profile */
.pkp_navigation_user > li > ul {
    min-width: 170px !important;
    padding: 6px !important;
    margin-top: 4px !important;
    background: var(--green-900) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.15) !important;
    box-sizing: border-box !important;
}

.pkp_navigation_user > li > ul > li {
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user > li > ul a {
    display: block !important;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    background: transparent !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
}

.pkp_navigation_user > li > ul a:hover,
.pkp_navigation_user > li > ul a:focus {
    color: #ffffff !important;
    background: var(--green-700) !important;
}

/* Keep the username/profile item itself visually distinct */
.pkp_navigation_user > li.profile > a {
    background: var(--green-800) !important;
    border-color: rgba(255,255,255,.42) !important;
}

/* ---------- C. Make the main navigation visually separate ---------- */
.pkp_site_nav_menu {
    width: 100% !important;
    background: var(--green-800) !important;
}

.pkp_navigation_primary_row {
    min-height: 48px !important;
}

.pkp_navigation_primary > li > a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ---------- D. Keep header/user/navigation deterministic ---------- */
.pkp_structure_head {
    overflow: visible !important;
}

.pkp_head_wrapper {
    overflow: visible !important;
}

/* ---------- E. Do not let old generic white user-navigation rules win ---------- */
.pkp_navigation_user,
.pkp_navigation_user > li,
.pkp_navigation_user > li > a {
    text-shadow: none !important;
}

/* Mobile user navigation */
@media (max-width: 700px) {
    .pkp_navigation_user_wrapper {
        padding: 7px 10px !important;
    }

    .pkp_navigation_user {
        justify-content: flex-start !important;
    }

    .pkp_navigation_user > li > a {
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: .82rem !important;
    }
}

/* Touch devices: no vertical lift */
@media (hover: none) {
    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        transform: none !important;
    }
}
/* ================================================================
   V12 - COMPACT TOP & USER NAVIGATION
   ----------------------------------------------------------------
   Mengecilkan tinggi dua bar navigasi agar tidak terlalu tebal:
   1) Main navigation (bar hijau utama)
   2) User navigation (Login/Logout/Profile)
   ================================================================ */

/* Main navigation: lebih tipis */
.pkp_navigation_primary_row {
    min-height: 38px !important;
    height: auto !important;
}

.pkp_navigation_primary {
    min-height: 38px !important;
    align-items: center !important;
}

.pkp_navigation_primary > li {
    min-height: 38px !important;
}

.pkp_navigation_primary > li > a {
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 14px !important;
    border-radius: 5px !important;
    font-size: .90rem !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
}

/* Search area on the lower navigation */
.pkp_navigation_search_wrapper {
    min-height: 38px !important;
}

.pkp_navigation_search_wrapper .pkp_search {
    min-height: 34px !important;
    padding: 7px 11px !important;
    font-size: .86rem !important;
}

/* User navigation: lebih tipis */
.pkp_navigation_user_wrapper {
    padding: 4px 10px !important;
    min-height: 42px !important;
    height: auto !important;
}

.pkp_navigation_user {
    min-height: 34px !important;
    gap: 5px !important;
}

.pkp_navigation_user > li,
.pkp_navigation_user > li > a {
    min-height: 32px !important;
    height: 32px !important;
}

.pkp_navigation_user > li > a {
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: .80rem !important;
    line-height: 1.1 !important;
}

/* Profile/task counter */
.pkp_navigation_user .task_count {
    min-width: 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin-left: 5px !important;
    padding: 0 !important;
    font-size: .68rem !important;
}

/* User dropdown remains compact */
.pkp_navigation_user > li > ul {
    min-width: 155px !important;
    padding: 5px !important;
}

.pkp_navigation_user > li > ul a {
    padding: 7px 9px !important;
    font-size: .82rem !important;
}

/* Remove extra vertical gaps that can make the bars look thick */
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_user_wrapper {
    line-height: 1 !important;
}

/* Mobile navigation */
@media (max-width: 700px) {
    .pkp_navigation_primary_row,
    .pkp_navigation_primary {
        min-height: 36px !important;
    }

    .pkp_navigation_primary > li > a {
        min-height: 36px !important;
        height: 36px !important;
        padding: 7px 10px !important;
        font-size: .84rem !important;
    }

    .pkp_navigation_user_wrapper {
        min-height: 40px !important;
        padding: 4px 8px !important;
    }

    .pkp_navigation_user > li > a {
        min-height: 30px !important;
        height: 30px !important;
        padding: 5px 9px !important;
        font-size: .76rem !important;
    }
}
/* ================================================================
   V13 - NAVIGATION PROPORTION FIX
   ----------------------------------------------------------------
   - Navigasi utama hanya setinggi item menu.
   - Area user navigation di atas kembali putih.
   - Hanya kotak Login/Profile yang hijau.
   - Search tetap berada di dalam bar navigasi utama tanpa
     menambah tinggi bar.
   ================================================================ */

/* ---------- 1. MAIN NAVIGATION: ONLY MENU HEIGHT ---------- */
.pkp_site_nav_menu {
    background: var(--green-800) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
}

.pkp_navigation_primary_row {
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.pkp_navigation_primary_wrapper {
    min-height: 40px !important;
    height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.pkp_navigation_primary {
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    line-height: 1 !important;
}

.pkp_navigation_primary > li {
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.pkp_navigation_primary > li > a {
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 0 !important;
    font-size: .88rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Do not let hover enlarge the nav */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a[aria-expanded="true"] {
    transform: none !important;
}

/* Search stays at the same bar height */
.pkp_navigation_search_wrapper {
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.pkp_navigation_search_wrapper .pkp_search {
    display: inline-flex !important;
    align-items: center !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 3px 7px 3px 0 !important;
    padding: 0 10px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* ---------- 2. USER NAVIGATION: WHITE BACKGROUND ---------- */
.pkp_navigation_user_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
}

.pkp_navigation_user {
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

.pkp_navigation_user > li {
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Green box only around the user navigation item */
.pkp_navigation_user > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    background: var(--green-800) !important;
    border: 1px solid var(--green-700) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: .80rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    background: var(--green-700) !important;
    border-color: var(--green-600) !important;
    color: #ffffff !important;
    transform: none !important;
}

/* Task count remains visible inside green box */
.pkp_navigation_user .task_count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin-left: 5px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--green-900) !important;
    font-size: .67rem !important;
    line-height: 1 !important;
}

/* Dropdown remains green */
.pkp_navigation_user > li > ul {
    background: var(--green-900) !important;
}

/* User nav menu should never add a second dark bar */
.pkp_navigation_user_wrapper *,
.pkp_navigation_user_wrapper::before,
.pkp_navigation_user_wrapper::after {
    box-sizing: border-box !important;
}

/* ---------- 3. MOBILE ---------- */
@media (max-width: 700px) {
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper,
    .pkp_navigation_primary,
    .pkp_navigation_primary > li {
        height: 38px !important;
        min-height: 38px !important;
    }

    .pkp_navigation_primary > li > a {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 9px !important;
        font-size: .82rem !important;
    }

    .pkp_navigation_search_wrapper {
        height: 38px !important;
        min-height: 38px !important;
    }

    .pkp_navigation_user_wrapper {
        height: 40px !important;
        min-height: 40px !important;
        padding: 4px 8px !important;
    }

    .pkp_navigation_user,
    .pkp_navigation_user > li {
        height: 30px !important;
        min-height: 30px !important;
    }

    .pkp_navigation_user > li > a {
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 9px !important;
        font-size: .76rem !important;
    }
}
/* ================================================================
   V14 - WHITE NAVIGATION WITH GREEN BORDERS
   ----------------------------------------------------------------
   - Background area of BOTH navigation rows = white
   - Every navigation item = white box with green border
   - Main menu text = dark/green
   - User Login/Profile/Register items = white boxes with green border
   - No solid green navigation bars
   ================================================================ */

/* ---------- 1. Main navigation background ---------- */
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Navigation row stays compact */
.pkp_navigation_primary_row {
    min-height: 44px !important;
    height: 44px !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

.pkp_navigation_primary_wrapper {
    min-height: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
}

/* Main menu list */
.pkp_navigation_primary {
    background: transparent !important;
    min-height: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Main menu item */
.pkp_navigation_primary > li {
    height: 34px !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Main menu box */
.pkp_navigation_primary > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    background: #ffffff !important;
    color: var(--green-800) !important;
    border: 1px solid var(--green-600) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}

/* Hover */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a[aria-expanded="true"] {
    background: var(--green-100) !important;
    color: var(--green-900) !important;
    border-color: var(--green-700) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(36, 91, 50, .10) !important;
}

/* Dropdown */
.pkp_navigation_primary li ul {
    background: #ffffff !important;
    border: 1px solid var(--green-600) !important;
    box-shadow: 0 8px 18px rgba(36, 91, 50, .12) !important;
}

.pkp_navigation_primary li ul a {
    color: var(--green-800) !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--green-200) !important;
}

.pkp_navigation_primary li ul a:hover,
.pkp_navigation_primary li ul a:focus {
    color: var(--green-900) !important;
    background: var(--green-100) !important;
}

/* Search box on main navigation */
.pkp_navigation_search_wrapper {
    height: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
}

.pkp_navigation_search_wrapper .pkp_search {
    display: inline-flex !important;
    align-items: center !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    background: #ffffff !important;
    color: var(--green-800) !important;
    border: 1px solid var(--green-600) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* ---------- 2. User navigation background ---------- */
.pkp_navigation_user_wrapper {
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
}

.pkp_navigation_user {
    min-height: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* User list item */
.pkp_navigation_user > li {
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Login / profile / register box */
.pkp_navigation_user > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    background: #ffffff !important;
    color: var(--green-800) !important;
    border: 1px solid var(--green-600) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease !important;
}

/* User nav hover */
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    background: var(--green-100) !important;
    color: var(--green-900) !important;
    border-color: var(--green-700) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(36, 91, 50, .10) !important;
}

/* Username/profile can still be recognizable */
.pkp_navigation_user > li.profile > a {
    background: #ffffff !important;
    color: var(--green-800) !important;
    border-color: var(--green-600) !important;
}

/* Task counter */
.pkp_navigation_user .task_count {
    background: var(--green-800) !important;
    color: #ffffff !important;
    border: 0 !important;
}

/* User dropdown */
.pkp_navigation_user > li > ul {
    background: #ffffff !important;
    border: 1px solid var(--green-600) !important;
    box-shadow: 0 8px 18px rgba(36, 91, 50, .12) !important;
}

.pkp_navigation_user > li > ul a {
    color: var(--green-800) !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--green-200) !important;
}

.pkp_navigation_user > li > ul a:hover,
.pkp_navigation_user > li > ul a:focus {
    color: var(--green-900) !important;
    background: var(--green-100) !important;
}

/* ---------- 3. Mobile ---------- */
@media (max-width: 850px) {
    .pkp_navigation_primary_row {
        min-height: 42px !important;
        height: auto !important;
        padding: 4px 7px !important;
    }

    .pkp_navigation_primary_wrapper,
    .pkp_navigation_primary {
        height: auto !important;
        min-height: 34px !important;
    }

    .pkp_navigation_primary {
        flex-wrap: wrap !important;
    }

    .pkp_navigation_primary > li,
    .pkp_navigation_primary > li > a {
        height: 32px !important;
        min-height: 32px !important;
    }

    .pkp_navigation_primary > li > a {
        padding: 0 9px !important;
        font-size: .78rem !important;
    }

    .pkp_navigation_user_wrapper {
        height: 38px !important;
        min-height: 38px !important;
    }

    .pkp_navigation_user,
    .pkp_navigation_user > li {
        height: 30px !important;
        min-height: 30px !important;
    }

    .pkp_navigation_user > li > a {
        height: 29px !important;
        min-height: 29px !important;
        padding: 0 8px !important;
        font-size: .73rem !important;
    }
}
/* ================================================================
   V15 - HEADER HEIGHT ~75% OF ORIGINAL
   ----------------------------------------------------------------
   Header dibuat lebih tinggi dari versi 50% sebelumnya agar logo/
   teks jurnal tidak terpotong, tetapi tetap lebih ringkas daripada
   header asli.
   ================================================================ */

@media (min-width: 851px) {
    .pkp_site_name .is_img {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

@media (max-width: 850px) {
    .pkp_site_name .is_img {
        height: 175px !important;
        min-height: 175px !important;
        max-height: 175px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}
/* ================================================================
   V16 - HEADER HEIGHT ~85% OF ORIGINAL
   ----------------------------------------------------------------
   Desktop: 283 px
   Mobile: 198 px
   Tetap mempertahankan proporsi gambar dengan object-fit: cover.
   ================================================================ */

@media (min-width: 851px) {
    .pkp_site_name .is_img {
        height: 283px !important;
        min-height: 283px !important;
        max-height: 283px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}

@media (max-width: 850px) {
    .pkp_site_name .is_img {
        height: 198px !important;
        min-height: 198px !important;
        max-height: 198px !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}
/* ================================================================
   V17 - HEADER FIT TO NATURAL IMAGE RATIO
   ----------------------------------------------------------------
   Menampilkan SELURUH logo/header tanpa crop dan tanpa distorsi.
   Source header pada OJS Anda berukuran 4000 x 1000 = rasio 4:1.
   Karena itu tinggi header mengikuti lebar gambar secara otomatis.
   ================================================================ */

/* Reset all previous fixed-height/crop rules */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name .is_img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

/* Let the image define its own height from its natural 4:1 ratio */
.pkp_site_name .is_img {
    position: static !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
}

/* Show the complete header image */
.pkp_site_name .is_img img,
.pkp_site_name img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
}

/* Do not allow old pseudo-elements to create extra header height */
.pkp_structure_head::before,
.pkp_structure_head::after,
.pkp_site_name::before,
.pkp_site_name::after,
.pkp_site_name .is_img::before,
.pkp_site_name .is_img::after {
    display: none !important;
    content: none !important;
}

/* Keep navigation directly under the natural-height header */
.pkp_site_nav_menu {
    margin-top: 0 !important;
}

/* Mobile: same rule — full image, no crop */
@media (max-width: 850px) {
    .pkp_site_name .is_img {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
    }
}
/* ================================================================
   V18 - TRUE HEADER FIT / FULL 4:1 IMAGE
   ----------------------------------------------------------------
   The OJS header image has width="4000" height="1000", so the
   display ratio is fixed to 4:1. The whole image is shown:
   no crop, no stretching, no fixed pixel height.
   ================================================================ */

.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_structure_head {
    overflow: visible !important;
}

/* Exact same ratio as the uploaded OJS header: 4000 / 1000 = 4:1 */
.pkp_site_name .is_img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 1 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.pkp_site_name .is_img img,
.pkp_site_name img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Explicitly neutralize prior fixed-height rules */
.pkp_site_name .is_img,
.pkp_site_name .is_img img {
    min-height: 0 !important;
}

/* Keep the page frame from clipping the fully fitted header */
.pkp_structure_page {
    overflow: visible !important;
}

@media (max-width: 850px) {
    .pkp_site_name .is_img {
        aspect-ratio: 4 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}
/* ================================================================
   V19 - HEADER / NAVIGATION TIGHT CONNECTION
   ----------------------------------------------------------------
   Menempelkan user navigation dan main navigation langsung ke
   batas bawah header tanpa ruang putih tambahan.
   ================================================================ */

/* Remove possible gaps around the header/navigation stack */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_nav_menu,
.pkp_navigation_user_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pkp_structure_head {
    padding-bottom: 0 !important;
}

/* No extra whitespace between header image and navigation */
.pkp_site_name,
.pkp_site_name .is_img,
.pkp_site_name .is_img img {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important;
}

/* User navigation sits immediately under the header */
.pkp_navigation_user_wrapper {
    margin-top: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    height: 38px !important;
    min-height: 38px !important;
}

/* Main navigation follows directly */
.pkp_site_nav_menu {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Compact main navigation row */
.pkp_navigation_primary_row {
    margin-top: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    min-height: 38px !important;
    height: 38px !important;
}

/* Compact main navigation wrapper/list */
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pkp_navigation_primary_wrapper {
    height: 32px !important;
    min-height: 32px !important;
}

.pkp_navigation_primary {
    height: 32px !important;
    min-height: 32px !important;
}

/* Menu boxes remain inside the compact row */
.pkp_navigation_primary > li,
.pkp_navigation_primary > li > a {
    height: 30px !important;
    min-height: 30px !important;
}

/* Search remains aligned to the same height */
.pkp_navigation_search_wrapper {
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove generic paragraph/line gaps if a theme wrapper creates them */
.pkp_structure_head p,
.pkp_site_name p,
.pkp_site_nav_menu p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* On mobile keep the connection tight as well */
@media (max-width: 850px) {
    .pkp_navigation_user_wrapper {
        height: 36px !important;
        min-height: 36px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .pkp_navigation_primary_row {
        min-height: 36px !important;
        height: 36px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}