/*
 * JAPBM — FINAL CLEAN PUBLIC STYLE
 * Cocok untuk OJS dengan selector .pkp_*
 * Gunakan bersama:
 * JAPBM_Header_Final_1200x220_Transparent.png
 */

:root {
    --japbm-navy: #0a1a2d;
    --japbm-teal: #0b5661;
    --japbm-teal-dark: #084953;
    --japbm-text: #22313f;
    --japbm-muted: #63717a;
    --japbm-bg: #eef2f4;
    --japbm-border: #dbe4e8;
    --japbm-white: #ffffff;
    --japbm-shadow: 0 8px 24px rgba(7, 34, 49, .07);
}

html,
body {
    background: var(--japbm-bg) !important;
    color: var(--japbm-text) !important;
}

/* =========================
   TOP USER BAR
   ========================= */
.pkp_navigation_user_wrapper {
    background: var(--japbm-navy) !important;
    border: 0 !important;
}

.pkp_navigation_user_wrapper a {
    color: #ffffff !important;
}

/* =========================
   HEADER
   ========================= */
.pkp_structure_head {
    background: #ffffff !important;
    border-bottom: 1px solid var(--japbm-border) !important;
}

.pkp_head_wrapper {
    width: calc(100% - 40px) !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 12px 0 0 !important;
}

.pkp_site_name_wrapper {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 10px 0 6px !important;
    overflow: visible !important;
}

.pkp_site_name {
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    overflow: visible !important;
}

.pkp_site_name > a.is_img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* IMPORTANT: prevents logo from filling the screen */
.pkp_site_name .is_img img,
.pkp_site_name > a.is_img img,
.pkp_site_name_wrapper img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 980px !important;
    max-height: 180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* =========================
   SEARCH + PRIMARY NAV ROW
   ========================= */
.pkp_navigation_primary_row {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 6px 0 0 !important;
    border-top: 0 !important;
}

.pkp_navigation_search_wrapper {
    border-top: 0 !important;
}

@media (min-width: 992px) {
    .pkp_navigation_primary_row {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        min-height: 58px !important;
    }

    .pkp_navigation_primary_wrapper {
        grid-column: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    #navigationPrimary,
    .pkp_navigation_primary {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        list-style: none !important;
        white-space: nowrap !important;
    }

    #navigationPrimary > li,
    .pkp_navigation_primary > li {
        position: relative !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navigationPrimary > li > a,
    .pkp_navigation_primary > li > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 13px !important;
        margin: 0 !important;
        color: var(--japbm-teal) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 7px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-decoration: none !important;
    }

    #navigationPrimary > li > a:hover,
    #navigationPrimary > li > a:focus,
    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus,
    #navigationPrimary > li.current > a,
    .pkp_navigation_primary > li.current > a {
        color: #ffffff !important;
        background: var(--japbm-teal) !important;
        outline: 0 !important;
    }

    .pkp_navigation_primary > li:hover > ul,
    #navigationPrimary > li:hover > ul {
        display: block !important;
    }

    .pkp_navigation_primary ul,
    #navigationPrimary ul {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 7px) !important;
        left: 0 !important;
        min-width: 250px !important;
        margin: 0 !important;
        padding: 7px 0 !important;
        background: #ffffff !important;
        border: 1px solid var(--japbm-border) !important;
        border-radius: 10px !important;
        box-shadow: var(--japbm-shadow) !important;
        z-index: 9999 !important;
    }

    .pkp_navigation_primary ul li,
    #navigationPrimary ul li {
        display: block !important;
        width: 100% !important;
    }

    .pkp_navigation_primary ul a,
    #navigationPrimary ul a {
        display: block !important;
        width: 100% !important;
        padding: 10px 15px !important;
        color: var(--japbm-teal) !important;
        background: #ffffff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        white-space: normal !important;
    }

    .pkp_navigation_primary ul a:hover,
    .pkp_navigation_primary ul a:focus,
    #navigationPrimary ul a:hover,
    #navigationPrimary ul a:focus {
        color: #ffffff !important;
        background: var(--japbm-teal) !important;
    }

    .pkp_navigation_search_wrapper {
        grid-column: 3 !important;
        justify-self: end !important;
        width: 420px !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: right !important;
    }
}

/* =========================
   CONTENT WIDTH
   ========================= */
.pkp_structure_content {
    width: calc(100% - 40px) !important;
    max-width: 1180px !important;
    margin: 22px auto 38px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

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

.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after {
    display: none !important;
    content: none !important;
}

/* =========================
   HOMEPAGE SUMMARY
   Force white background and readable text.
   ========================= */
.homepage_about,
.pkp_page_index .homepage_about,
.page_index_journal .homepage_about {
    display: block !important;
    width: 100% !important;
    max-width: 1080px !important;
    margin: 0 auto 28px !important;
    padding: 32px 38px !important;

    color: var(--japbm-text) !important;
    background: #ffffff !important;
    background-image: none !important;

    border: 1px solid var(--japbm-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--japbm-shadow) !important;

    opacity: 1 !important;
    filter: none !important;
    overflow: visible !important;
}

/* remove dark custom wrapper/background inside the summary */
.homepage_about::before,
.homepage_about::after,
.pkp_page_index .homepage_about::before,
.pkp_page_index .homepage_about::after,
.homepage_about > div,
.pkp_page_index .homepage_about > div,
.homepage_about [style*="background"],
.pkp_page_index .homepage_about [style*="background"] {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

/* force readable content */
.homepage_about h1,
.homepage_about h2,
.homepage_about h3,
.homepage_about h4,
.pkp_page_index .homepage_about h1,
.pkp_page_index .homepage_about h2,
.pkp_page_index .homepage_about h3,
.pkp_page_index .homepage_about h4 {
    color: var(--japbm-teal-dark) !important;
    opacity: 1 !important;
}

.homepage_about p,
.homepage_about li,
.homepage_about span,
.pkp_page_index .homepage_about p,
.pkp_page_index .homepage_about li,
.pkp_page_index .homepage_about span {
    color: var(--japbm-text) !important;
    opacity: 1 !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
}

.homepage_about a:not(.cmp_button):not(.pkp_button),
.pkp_page_index .homepage_about a:not(.cmp_button):not(.pkp_button) {
    color: var(--japbm-teal) !important;
}

/* submission button */
.homepage_about .cmp_button,
.homepage_about .pkp_button,
.homepage_about a[href*="submission"],
.pkp_page_index .homepage_about .cmp_button,
.pkp_page_index .homepage_about .pkp_button,
.pkp_page_index .homepage_about a[href*="submission"] {
    display: inline-block !important;
    margin-top: 10px !important;
    padding: 9px 18px !important;
    color: #ffffff !important;
    background: var(--japbm-teal) !important;
    border: 1px solid var(--japbm-teal) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* =========================
   ADDITIONAL CONTENT
   ========================= */
.pkp_page_index .additional_content {
    max-width: 1080px !important;
    margin: 0 auto 28px !important;
    padding: 30px 36px !important;
    color: var(--japbm-text) !important;
    background: #ffffff !important;
    border: 1px solid var(--japbm-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--japbm-shadow) !important;
}

.pkp_page_index .additional_content h1,
.pkp_page_index .additional_content h2,
.pkp_page_index .additional_content h3 {
    color: var(--japbm-teal-dark) !important;
}

.pkp_page_index .additional_content p,
.pkp_page_index .additional_content li {
    color: var(--japbm-text) !important;
    line-height: 1.75 !important;
}

/* =========================
   STATIC PAGES
   ========================= */
.page,
.page_static,
.page_contact,
.page_submissions,
.page_masthead,
.page_search,
.page_catalog_category,
.page_section,
.obj_issue_toc,
.obj_article_details {
    background: #ffffff !important;
    border: 1px solid var(--japbm-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--japbm-shadow) !important;
    padding: 32px 38px !important;
}

.pkp_structure_main h1 {
    color: var(--japbm-teal-dark) !important;
    font-size: 34px !important;
    line-height: 1.2 !important;
}

.pkp_structure_main h2 {
    color: var(--japbm-teal-dark) !important;
    font-size: 26px !important;
    line-height: 1.3 !important;
}

.pkp_structure_main h3 {
    color: var(--japbm-teal-dark) !important;
    font-size: 21px !important;
}

.pkp_structure_main p,
.pkp_structure_main li {
    color: var(--japbm-text) !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
}

/* =========================
   FOOTER
   ========================= */
.pkp_structure_footer_wrapper {
    margin-top: 28px !important;
    background: #dfe6ea !important;
    border-top: 1px solid #d0dade !important;
}

.pkp_footer_content {
    width: calc(100% - 40px) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 26px 12px !important;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 991px) {
    .pkp_head_wrapper,
    .pkp_structure_content,
    .pkp_footer_content {
        width: calc(100% - 24px) !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name > a.is_img img,
    .pkp_site_name_wrapper img {
        width: auto !important;
        max-width: 95% !important;
        max-height: 120px !important;
    }

    .homepage_about,
    .pkp_page_index .homepage_about,
    .pkp_page_index .additional_content,
    .page,
    .page_static {
        padding: 24px 22px !important;
    }
}

@media (max-width: 600px) {
    .pkp_head_wrapper,
    .pkp_structure_content,
    .pkp_footer_content {
        width: calc(100% - 16px) !important;
    }

    .pkp_site_name .is_img img,
    .pkp_site_name > a.is_img img,
    .pkp_site_name_wrapper img {
        max-width: 96% !important;
        max-height: 86px !important;
    }

    .pkp_structure_main h1 {
        font-size: 28px !important;
    }
}