/*
==============================================================
KEADILAN — FINAL RESPONSIVE HEADER V2
Banner:
keadilan-header-final-v2-2048x300.png

Perbaikan:
- E-ISSN dan ISSN tetap terlihat.
- Tombol admin dipindahkan ke bar navigasi.
- Search diberi ruang terpisah agar tidak bertumpuk.
- Banner mengikuti lebar header tanpa distorsi.
==============================================================
*/

:root {
    --keadilan-blue: #287f9d;
    --keadilan-content-max: 1524px;
    --keadilan-nav-height: 56px;
    --keadilan-admin-space: 128px;
    --keadilan-search-space: 120px;
}

/* ==========================================================
   RESET DASAR
   ========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
iframe,
embed,
object {
    max-width: 100%;
}

/* ==========================================================
   HEADER DAN BANNER
   ========================================================== */

.pkp_structure_head {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--keadilan-blue) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.pkp_head_wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

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

.pkp_site_name {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    text-align: left !important;
    background: #f4f4f4 !important;
}

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

.pkp_site_name .is_img img,
.pkp_site_name > a > img {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: 2048 / 300;
    object-fit: contain !important;
    object-position: center center !important;
}

/* ==========================================================
   DESKTOP: MENU, SEARCH, DAN ADMIN TIDAK BERTUMPUK
   ========================================================== */

@media (min-width: 992px) {

    .pkp_site_nav_menu {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: 100% !important;
        min-height: var(--keadilan-nav-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--keadilan-blue) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .pkp_navigation_primary_wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: var(--keadilan-content-max) !important;
        min-height: var(--keadilan-nav-height) !important;
        margin: 0 auto !important;

        /*
         * Ruang kanan dicadangkan untuk Search dan Admin.
         * Ini mencegah menu utama bertumpuk dengan keduanya.
         */
        padding: 0
                 calc(
                     24px
                     + var(--keadilan-admin-space)
                     + var(--keadilan-search-space)
                 )
                 0 24px !important;
    }

    .pkp_navigation_primary {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        min-height: var(--keadilan-nav-height) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary > li {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_primary > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: var(--keadilan-nav-height) !important;
        margin: 0 !important;
        padding: 0 18px !important;
        color: #ffffff !important;
        line-height: 1.3 !important;
        background: transparent !important;
        border: 0 !important;
    }

    .pkp_navigation_primary > li:first-child > a {
        padding-left: 0 !important;
    }

    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.09) !important;
        text-decoration: none !important;
    }

    /*
     * Search ditempatkan di bar navigasi, di kiri tombol Admin.
     */
    .pkp_navigation_search_wrapper {
        position: absolute !important;
        z-index: 1001 !important;
        top: 50% !important;
        right: calc(24px + var(--keadilan-admin-space)) !important;
        width: var(--keadilan-search-space) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
        text-align: center !important;
    }

    .pkp_navigation_search_wrapper a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        padding: 0 10px !important;
        color: #ffffff !important;
        white-space: nowrap !important;
    }

    /*
     * Admin dipindahkan dari area banner ke kanan bar navigasi.
     * Dengan demikian tidak lagi menutupi E-ISSN/ISSN.
     */
    .pkp_navigation_user_wrapper {
        position: absolute !important;
        z-index: 1002 !important;
        top: auto !important;
        right: 24px !important;
        bottom: 0 !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: var(--keadilan-admin-space) !important;
        height: var(--keadilan-nav-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        text-align: right !important;
    }

    .pkp_navigation_user {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_user > li {
        display: inline-block !important;
        width: auto !important;
        margin: 0 !important;
    }

    .pkp_navigation_user > li > a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 0 8px !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        text-shadow: none !important;
    }
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .pkp_site_name .is_img img,
    .pkp_site_name > a > img {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 2048 / 300;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .pkp_site_nav_menu {
        width: 100% !important;
        background: var(--keadilan-blue) !important;
    }
}

/* ==========================================================
   TELEPON
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Seluruh banner tetap terlihat pada layar kecil.
     * Tidak ada crop terhadap area E-ISSN/ISSN.
     */
    .pkp_site_name .is_img img,
    .pkp_site_name > a > img {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 2048 / 300;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .pkp_site_nav_toggle {
        z-index: 1100 !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /*
     * OJS tetap mengontrol menu hamburger.
     */
    .pkp_site_nav_menu {
        width: 100% !important;
        background: var(--keadilan-blue) !important;
    }

    .pkp_navigation_primary,
    .pkp_navigation_user {
        width: 100% !important;
    }

    .pkp_navigation_primary > li,
    .pkp_navigation_user > li {
        width: 100% !important;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_user > li > a {
        display: block !important;
        width: 100% !important;
        padding: 12px 16px !important;
        color: #ffffff !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

/* ==========================================================
   KONTEN RESPONSIF
   ========================================================== */

.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.pkp_structure_main table,
.obj_article_details table,
.page table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {

    .pkp_structure_content {
        width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

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