/* =========================================================
   JURNAL ABDI MASYARAKAT ERAU
   COVER-INSPIRED CUSTOM CSS FOR OJS 3.3
   Palet dan karakter visual dibuat lebih dekat dengan cover:
   biru royal, biru tua, cyan, biru muda, putih
   ========================================================= */

:root {
    --erau-navy: #0544A0;
    --erau-blue: #0B56A8;
    --erau-blue-2: #1169A9;
    --erau-royal: #076AC9;
    --erau-cyan: #2E8BCE;
    --erau-cyan-2: #3DA3D8;
    --erau-sky: #88B7E2;
    --erau-sky-soft: #B9CFE6;
    --erau-pale: #EEF7FD;
    --erau-white: #FFFFFF;
    --erau-text: #143A63;
    --erau-muted: #61788F;
    --erau-border: #CFE3F2;
}

/* =========================================================
   1. GLOBAL
   ========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    background: #E8F2FA !important;
    color: var(--erau-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

body {
    background-image:
        linear-gradient(
            180deg,
            #E8F2FA 0%,
            #F7FBFE 45%,
            #EAF5FB 100%
        ) !important;
}

a {
    color: var(--erau-blue) !important;
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--erau-cyan-2) !important;
}


/* =========================================================
   2. PAGE CONTAINER
   ========================================================= */

.pkp_structure_page {
    width: 100% !important;
    max-width: 1160px !important;
    margin: 18px auto !important;
    background: var(--erau-white) !important;
    box-shadow: 0 7px 28px rgba(5, 68, 160, .12) !important;
    overflow: hidden !important;
}

.pkp_structure_wrapper {
    background: transparent !important;
}


/* =========================================================
   3. HEADER - COVER INSPIRED
   ========================================================= */

.pkp_structure_head {
    position: relative !important;
    overflow: hidden !important;
    border: 0 !important;

    background:
        linear-gradient(
            135deg,
            var(--erau-navy) 0%,
            var(--erau-blue) 38%,
            var(--erau-royal) 68%,
            var(--erau-cyan-2) 100%
        ) !important;
}

/* Geometric bands inspired by the cover */
.pkp_structure_head::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;

    background:
        linear-gradient(
            18deg,
            transparent 0 58%,
            rgba(61,163,216,.30) 58% 65%,
            transparent 65% 100%
        ),
        linear-gradient(
            -18deg,
            transparent 0 64%,
            rgba(136,183,226,.22) 64% 72%,
            transparent 72% 100%
        ),
        linear-gradient(
            160deg,
            rgba(255,255,255,.05) 0 15%,
            transparent 15% 100%
        ) !important;
}

.pkp_structure_head::after {
    content: "" !important;
    position: absolute !important;
    left: -8% !important;
    right: -8% !important;
    bottom: 0 !important;
    height: 18px !important;
    pointer-events: none !important;
    z-index: 0 !important;

    background:
        linear-gradient(
            90deg,
            var(--erau-cyan-2),
            var(--erau-royal),
            var(--erau-navy)
        ) !important;
}

.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 0 !important;
    background: transparent !important;
}


/* =========================================================
   4. LOGO / HEADER IMAGE
   ========================================================= */

/* Ruang atas dan bawah banner */
.pkp_site_name_wrapper {
    padding: 10px 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}
.pkp_site_name {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

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

.pkp_site_name .is_img img,
.pkp_site_name > a > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   5. USER MENU
   ========================================================= */

.pkp_navigation_user_wrapper {
    z-index: 5 !important;
    background: transparent !important;
}

.pkp_navigation_user > li > a,
.pkp_navigation_user > li.in_focus > a,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: var(--erau-white) !important;
    font-weight: 700 !important;
}

.pkp_navigation_user .task_count {
    background: rgba(255,255,255,.22) !important;
}


/* =========================================================
   6. PRIMARY NAVIGATION
   ========================================================= */

.pkp_navigation_primary_row {
    position: relative !important;
    z-index: 3 !important;

    background:
        linear-gradient(
            90deg,
            #F4FAFE 0%,
            #E6F4FC 52%,
            #D9EEF9 100%
        ) !important;

    border-top: 1px solid rgba(255,255,255,.45) !important;
    border-bottom: 3px solid var(--erau-cyan-2) !important;
}

#navigationPrimary > li > a,
.pkp_navigation_primary > li > a {
    color: var(--erau-navy) !important;
    font-weight: 700 !important;
    border-bottom: 3px solid transparent !important;
}

#navigationPrimary > li > a:hover,
#navigationPrimary > li > a:focus,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    color: var(--erau-royal) !important;
    border-bottom-color: var(--erau-royal) !important;
}

#navigationPrimary ul,
.pkp_navigation_primary ul {
    background: var(--erau-navy) !important;
    border: 0 !important;
    box-shadow: 0 8px 20px rgba(5,68,160,.18) !important;
}

#navigationPrimary ul a,
.pkp_navigation_primary ul a {
    color: var(--erau-white) !important;
}

#navigationPrimary ul a:hover,
#navigationPrimary ul a:focus,
.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
    background: var(--erau-royal) !important;
    color: var(--erau-white) !important;
}


/* =========================================================
   7. SEARCH
   ========================================================= */

.pkp_head_wrapper .pkp_search .search_prompt {
    color: var(--erau-navy) !important;
}

.pkp_head_wrapper .pkp_search .search_prompt:before {
    color: var(--erau-royal) !important;
}

.pkp_head_wrapper .pkp_search .search_prompt:hover,
.pkp_head_wrapper .pkp_search .search_prompt:focus {
    color: var(--erau-cyan-2) !important;
}


/* =========================================================
   8. MAIN CONTENT HEADINGS
   ========================================================= */

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {
    color: var(--erau-navy) !important;
}

.pkp_structure_main h1 {
    position: relative;
    padding-bottom: 10px;
}

.pkp_structure_main h1::after {
    content: "";
    display: block;
    width: 85px;
    height: 4px;
    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            var(--erau-navy),
            var(--erau-royal),
            var(--erau-cyan-2)
        );
}

.pkp_page_index .current_issue h2,
.pkp_block .title,
.obj_issue_toc > .galleys h2,
.obj_issue_toc .section h2,
.obj_article_details .main_entry .label {
    color: var(--erau-navy) !important;
    border-bottom-color: var(--erau-cyan-2) !important;
}


/* =========================================================
   9. CURRENT ISSUE
   ========================================================= */

.pkp_page_index .current_issue {
    position: relative;
    padding-top: 10px;
}

.pkp_page_index .current_issue h2 {
    padding-bottom: 8px !important;
    border-bottom: 4px solid var(--erau-navy) !important;
}

.pkp_page_index .current_issue .current_issue_title {
    color: var(--erau-blue) !important;
    font-weight: 700 !important;
}


/* =========================================================
   10. ARTICLE CARDS
   ========================================================= */

.obj_article_summary {
    position: relative;
    overflow: hidden;

    margin-bottom: 20px !important;
    padding: 17px 18px !important;

    border: 1px solid var(--erau-border) !important;
    border-left: 5px solid var(--erau-royal) !important;
    border-radius: 7px !important;

    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F8FCFF 72%,
            #EEF8FD 100%
        ) !important;

    box-shadow: 0 4px 14px rgba(5,68,160,.07) !important;
}

.obj_article_summary::after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -35px;
    width: 110px;
    height: 110px;
    border-radius: 50%;

    background: rgba(61,163,216,.08);
}

.obj_article_summary .title,
.obj_article_summary > .title a {
    position: relative;
    z-index: 1;
    color: var(--erau-navy) !important;
}

.obj_article_summary > .title a:hover,
.obj_article_summary > .title a:focus {
    color: var(--erau-royal) !important;
}


/* =========================================================
   11. BUTTONS
   ========================================================= */

.cmp_button,
.cmp_button_wire,
.block_make_submission a,
.obj_galley_link,
.cmp_manuscript_button {
    background:
        linear-gradient(
            90deg,
            var(--erau-navy),
            var(--erau-royal)
        ) !important;

    border: 0 !important;
    border-radius: 5px !important;
    color: var(--erau-white) !important;
    box-shadow: 0 3px 8px rgba(5,68,160,.18) !important;
}

.cmp_button:hover,
.cmp_button:focus,
.cmp_button_wire:hover,
.cmp_button_wire:focus,
.block_make_submission a:hover,
.block_make_submission a:focus,
.obj_galley_link:hover,
.obj_galley_link:focus,
.cmp_manuscript_button:hover,
.cmp_manuscript_button:focus {
    background:
        linear-gradient(
            90deg,
            var(--erau-royal),
            var(--erau-cyan-2)
        ) !important;

    color: var(--erau-white) !important;
}


/* =========================================================
   12. SIDEBAR
   ========================================================= */

.pkp_structure_sidebar {
    background:
        linear-gradient(
            180deg,
            #FBFDFF,
            #F1F8FC
        ) !important;
}

.pkp_block {
    margin: 0 12px 18px !important;
    padding: 18px !important;

    border: 1px solid var(--erau-border) !important;
    border-radius: 7px !important;

    background: var(--erau-white) !important;
    box-shadow: 0 3px 12px rgba(5,68,160,.06) !important;
}

.pkp_block .title {
    display: inline-block !important;
    padding-bottom: 7px !important;
    color: var(--erau-navy) !important;
    font-weight: 700 !important;
    border-bottom: 4px solid var(--erau-cyan-2) !important;
}

.pkp_block a {
    color: var(--erau-blue) !important;
}

.pkp_block a:hover,
.pkp_block a:focus {
    color: var(--erau-cyan-2) !important;
}


/* =========================================================
   13. ISSUE / ARTICLE DETAIL
   ========================================================= */

.obj_issue_toc .heading .pub_id .type,
.obj_issue_toc .heading .published .label,
.obj_article_details .entry_details .label {
    color: var(--erau-navy) !important;
}

.obj_article_details .entry_details .item {
    overflow: hidden !important;
    border: 1px solid var(--erau-border) !important;
    border-radius: 7px !important;
    background: #F8FCFF !important;
    box-shadow: 0 3px 10px rgba(5,68,160,.05) !important;
}

.obj_article_details .entry_details .item > .label,
.obj_article_details .entry_details .sub_item:first-child > .label {
    background:
        linear-gradient(
            90deg,
            #DCEFFA,
            #EEF8FD
        ) !important;

    color: var(--erau-navy) !important;
}


/* =========================================================
   14. FOOTER - COVER BOTTOM BAND INSPIRED
   ========================================================= */

.pkp_structure_footer_wrapper {
    position: relative !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            90deg,
            var(--erau-navy) 0%,
            var(--erau-royal) 55%,
            var(--erau-cyan-2) 100%
        ) !important;

    border: 0 !important;
}

.pkp_structure_footer_wrapper::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 10px !important;

    background:
        linear-gradient(
            90deg,
            var(--erau-cyan-2),
            var(--erau-royal),
            var(--erau-navy)
        ) !important;
}

.pkp_structure_footer,
.pkp_footer_content,
.pkp_structure_footer a {
    position: relative;
    z-index: 1;
    color: var(--erau-white) !important;
}

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

.pkp_brand_footer {
    display: none !important;
}


/* =========================================================
   15. TEXT ALIGNMENT
   ========================================================= */

.obj_article_details .abstract,
.obj_issue_toc .description,
.obj_issue_summary .description,
.obj_article_summary .title,
.obj_article_details .page_title {
    text-align: justify;
}


/* =========================================================
   16. TABLET
   ========================================================= */

@media (max-width: 991px) {

    .pkp_structure_page {
        margin: 0 auto !important;
        box-shadow: none !important;
    }

    .pkp_site_name {
        width: 100% !important;
        text-align: center !important;
    }

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

    .pkp_navigation_primary_row {
        background:
            linear-gradient(
                90deg,
                var(--erau-navy),
                var(--erau-blue)
            ) !important;

        border-bottom-color: var(--erau-cyan-2) !important;
    }

    .pkp_navigation_primary > li > a,
    #navigationPrimary > li > a {
        color: var(--erau-white) !important;
    }
}


/* =========================================================
   MOBILE HEADER FIX - ANDROID
   ========================================================= */

@media (max-width: 767px) {

    .pkp_structure_page {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .pkp_structure_head {
        background: linear-gradient(
            135deg,
            #0544A0,
            #076AC9,
            #2E8BCE
        ) !important;
    }

    /* Area logo */
    .pkp_site_name_wrapper {
        width: 100% !important;
        height: 58px !important;

        margin: 0 !important;

        /* ruang hamburger di kiri */
        padding: 5px 8px 5px 58px !important;

        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .pkp_site_name {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    .pkp_site_name > a,
    .pkp_site_name .is_img {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* PENTING:
       jangan paksa width 100%.
       tinggi yang menentukan ukuran banner */
    .pkp_site_name .is_img img,
    .pkp_site_name > a > img,
    img[src*="pageHeaderTitleImage"] {

        display: block !important;

        width: auto !important;
        height: 44px !important;

        max-width: 100% !important;
        max-height: 44px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: center center !important;
    }

    /* Hamburger tetap di depan */
    .pkp_site_nav_toggle {
        position: absolute !important;
        left: 8px !important;
        top: 9px !important;
        z-index: 9999 !important;
    }

}
/* EMAIL BUTTON */
a[href^="mailto:"] {
    display: inline-block;
    padding: 7px 14px !important;

    background: #2D6D9A !important;
    color: #ffffff !important;

    border-radius: 20px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

a[href^="mailto:"]:hover,
a[href^="mailto:"]:focus {
    background: #173C63 !important;
    color: #ffffff !important;
}
/* CREATIVE COMMONS LICENSE - always visible */
a[href*="creativecommons.org"],
a[href*="creativecommons.org"]:visited,
a[href*="creativecommons.org"]:active {
    color: #2D6D9A !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}

a[href*="creativecommons.org"]:hover,
a[href*="creativecommons.org"]:focus {
    color: #173C63 !important;
    opacity: 1 !important;
    text-decoration: underline !important;
}

p:has(a[href*="creativecommons.org"]),
div:has(> a[href*="creativecommons.org"]) {
    color: #263A4B !important;
    opacity: 1 !important;
}


/* =========================================================
   PRIMARY NAVIGATION SPACING FIX
   Memberi jarak kiri-kanan agar menu "Home" tidak mepet
   ========================================================= */

/* Wrapper utama navigasi */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper,
.pkp_navigation_primary_wrapper {
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
}

/* Hilangkan margin bawaan yang dapat mengganggu posisi */
#navigationPrimary,
.pkp_navigation_primary {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Tablet */
@media (max-width: 991px) {
    .pkp_navigation_primary_row .pkp_navigation_primary_wrapper,
    .pkp_navigation_primary_wrapper {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .pkp_navigation_primary_row .pkp_navigation_primary_wrapper,
    .pkp_navigation_primary_wrapper {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   FINAL FIX - PRIMARY NAVIGATION DROPDOWN (ABOUT)
   Memperbaiki submenu OJS 3.3 yang terpotong/tidak terlihat
   karena overflow pada header.
   ========================================================= */

/* Desktop/tablet navigation */
@media (min-width: 768px) {

    /* Dropdown harus boleh keluar dari area header */
    .pkp_structure_head,
    .pkp_head_wrapper,
    .has_site_logo .pkp_head_wrapper {
        overflow: visible !important;
    }

    /* Pastikan layer navigasi berada di atas header/konten */
    .pkp_structure_head {
        z-index: 100 !important;
    }

    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        position: relative !important;
        z-index: 1000 !important;
        overflow: visible !important;
    }

    #navigationPrimary,
    .pkp_navigation_primary {
        overflow: visible !important;
    }

    #navigationPrimary > li,
    .pkp_navigation_primary > li {
        position: relative !important;
        overflow: visible !important;
    }

    /* Posisi submenu */
    #navigationPrimary > li > ul,
    .pkp_navigation_primary > li > ul {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 99999 !important;
        min-width: 220px !important;
        margin: 0 !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    /* Buka submenu saat hover, keyboard focus, atau state OJS in_focus */
    #navigationPrimary > li:hover > ul,
    #navigationPrimary > li:focus-within > ul,
    #navigationPrimary > li.in_focus > ul,
    .pkp_navigation_primary > li:hover > ul,
    .pkp_navigation_primary > li:focus-within > ul,
    .pkp_navigation_primary > li.in_focus > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Jika OJS memberi aria-expanded=true pada trigger dropdown */
    #navigationPrimary > li > a[aria-expanded="true"] + ul,
    .pkp_navigation_primary > li > a[aria-expanded="true"] + ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Link submenu tetap mudah diklik */
    #navigationPrimary > li > ul > li > a,
    .pkp_navigation_primary > li > ul > li > a {
        display: block !important;
        white-space: nowrap !important;
        position: relative !important;
        z-index: 100000 !important;
    }
}