/* ==========================================================
   JRKK – PROFESSIONAL CUSTOM STYLESHEET
   OJS 3.3.x DEFAULT THEME

   Banner:
   1200 x 180 px

   Design:
   - Clean academic
   - White header
   - Blue sidebar
   - Responsive
   - Mobile-safe
   ========================================================== */


/* ==========================================================
   1. HEADER / SITE BANNER
   ========================================================== */

.pkp_structure_head {
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}


/* Main header wrapper */

.pkp_head_wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* Site name wrapper */

.pkp_site_name_wrapper {
    width: 100% !important;
    max-width: 1200px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    overflow: visible !important;

    box-sizing: border-box !important;
}


/* Site name */

.pkp_site_name {
    display: block !important;

    width: 100% !important;
    max-width: 1200px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    line-height: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}


/* Link surrounding banner */

.pkp_site_name > a {
    display: block !important;

    width: 100% !important;
    max-width: 1200px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    line-height: 0 !important;

    overflow: visible !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   2. MAIN BANNER IMAGE
   ========================================================== */

.pkp_site_name img {
    display: block !important;

    width: 100% !important;
    max-width: 1200px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    border: 0 !important;

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

    box-sizing: border-box !important;
}


/* ==========================================================
   3. REMOVE OJS HEADER RESTRICTIONS
   ========================================================== */

.pkp_site_name_wrapper::before,
.pkp_site_name_wrapper::after,
.pkp_site_name::before,
.pkp_site_name::after {
    display: none !important;
    content: none !important;
}


/* Override image attributes */

.pkp_site_name img[width],
.pkp_site_name img[height] {
    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;
}


/* ==========================================================
   4. NAVIGATION
   ========================================================== */

.pkp_navigation_primary_wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.pkp_navigation {
    margin-top: 0 !important;
}


/* ==========================================================
   5. SIDEBAR
   ========================================================== */

.pkp_structure_sidebar {
    padding-left: 1.4rem !important;
    padding-right: 0 !important;
}


/* General sidebar blocks */

.pkp_structure_sidebar .pkp_block {
    margin-bottom: 1.65rem !important;
}


/* Sidebar titles */

.pkp_structure_sidebar .pkp_block .title {
    color: #1b2d3d !important;

    font-size: .95rem !important;
    font-weight: 700 !important;

    line-height: 1.35 !important;

    text-transform: none !important;
    letter-spacing: 0 !important;

    border: 0 !important;

    padding: 0 0 .55rem 0 !important;
    margin: 0 0 .75rem 0 !important;
}


/* ==========================================================
   6. LOGIN / SUBMISSION BUTTONS
   ========================================================== */

.jrkk-sidebar-actions {
    display: flex !important;

    flex-direction: column !important;

    gap: .55rem !important;

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


.jrkk-sidebar-button {
    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: .68rem .8rem !important;

    background: #ffffff !important;

    border: 1px solid #174a8b !important;

    color: #1f2d3d !important;

    text-align: left !important;

    text-decoration: none !important;

    font-size: .88rem !important;

    font-weight: 600 !important;

    line-height: 1.25 !important;

    border-radius: 0 !important;

    transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease !important;
}


.jrkk-sidebar-button:hover,
.jrkk-sidebar-button:focus {
    background: #174a8b !important;

    border-color: #174a8b !important;

    color: #ffffff !important;

    text-decoration: none !important;
}


/* ==========================================================
   7. QUICK MENUS
   ========================================================== */

.jrkk-quick-menu {
    display: flex !important;

    flex-direction: column !important;

    gap: .5rem !important;

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


.jrkk-quick-menu a {
    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 42px !important;

    box-sizing: border-box !important;

    padding: .62rem .72rem !important;

    margin: 0 !important;

    background: #ffffff !important;

    border: 2px solid #174a8b !important;

    color: #252525 !important;

    text-decoration: none !important;

    font-size: .88rem !important;

    font-weight: 600 !important;

    line-height: 1.35 !important;

    border-radius: 0 !important;

    overflow-wrap: anywhere !important;

    word-break: normal !important;

    transition:
        background-color .18s ease,
        color .18s ease,
        border-color .18s ease !important;
}


.jrkk-quick-menu a:hover,
.jrkk-quick-menu a:focus {
    background: #174a8b !important;

    border-color: #174a8b !important;

    color: #ffffff !important;

    text-decoration: none !important;
}


/* Long menu items */

.jrkk-quick-menu a.long-label {
    min-height: 48px !important;
}


/* ==========================================================
   8. SIDEBAR ICON SUPPORT
   ========================================================== */

.jrkk-quick-menu a .fa,
.jrkk-quick-menu a i {
    flex: 0 0 18px !important;

    width: 18px !important;

    margin-right: .45rem !important;

    text-align: center !important;
}


/* ==========================================================
   9. MAKE A SUBMISSION
   ========================================================== */

.pkp_structure_sidebar .block_make_submission {
    margin-bottom: 1.5rem !important;
}


.pkp_structure_sidebar .block_make_submission a,
.pkp_structure_sidebar .block_make_submission .cmp_button {
    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: .68rem .8rem !important;

    background: #ffffff !important;

    border: 1px solid #174a8b !important;

    border-radius: 0 !important;

    color: #17365d !important;

    font-size: .88rem !important;

    font-weight: 700 !important;

    text-align: left !important;

    text-decoration: none !important;
}


.pkp_structure_sidebar .block_make_submission a:hover,
.pkp_structure_sidebar .block_make_submission .cmp_button:hover {
    background: #174a8b !important;

    border-color: #174a8b !important;

    color: #ffffff !important;
}


/* ==========================================================
   10. SIDEBAR IMAGES / INDEXING
   ========================================================== */

.pkp_structure_sidebar .pkp_block img {
    display: block !important;

    max-width: 100% !important;

    height: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================
   11. SIDEBAR CONTENT
   ========================================================== */

.pkp_structure_sidebar .pkp_block .content {
    overflow: visible !important;
}


/* ==========================================================
   12. MOBILE HEADER
   ========================================================== */

/*
   IMPORTANT:
   Banner 1200 x 180 memiliki rasio sangat lebar.
   Pada HP banner akan otomatis mengecil secara proporsional.

   Jangan menggunakan fixed height.
*/

@media (max-width: 767px) {

    /* Header */

    .pkp_structure_head {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /* Header wrapper */

    .pkp_head_wrapper {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

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

        overflow: visible !important;
    }


    /* Site name wrapper */

    .pkp_site_name_wrapper {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

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

        overflow: visible !important;
    }


    /* Site name */

    .pkp_site_name {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

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

        overflow: visible !important;
    }


    /* Link */

    .pkp_site_name > a {
        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

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

        overflow: visible !important;
    }


    /* Banner */

    .pkp_site_name img {
        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

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

        object-fit: contain !important;

        object-position: center center !important;
    }


    /* Remove image attribute restrictions */

    .pkp_site_name img[width],
    .pkp_site_name img[height] {
        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;
    }


    /* Navigation */

    .pkp_navigation_primary_wrapper {
        width: 100% !important;

        margin-top: 0 !important;

        padding-top: 0 !important;
    }


    /* Sidebar */

    .pkp_structure_sidebar {
        width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* Sidebar buttons */

    .jrkk-sidebar-button,
    .jrkk-quick-menu a,
    .pkp_structure_sidebar .block_make_submission a,
    .pkp_structure_sidebar .block_make_submission .cmp_button {
        width: 100% !important;

        max-width: 100% !important;

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


/* ==========================================================
   13. EXTRA SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .pkp_structure_head,
    .pkp_head_wrapper,
    .pkp_site_name_wrapper,
    .pkp_site_name,
    .pkp_site_name > a {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        overflow: visible !important;
    }


    .pkp_site_name img {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;
    }


    .jrkk-sidebar-button {
        font-size: .86rem !important;
    }


    .jrkk-quick-menu a {
        font-size: .86rem !important;

        min-height: 40px !important;

        padding: .58rem .68rem !important;
    }
}


/* ==========================================================
   JRKK – DEFINITIVE MOBILE HEADER FIX
   OJS 3.3.x DEFAULT THEME
   ========================================================== */

@media (max-width: 767px) {

    /* 1. Never allow the header itself to collapse */
    #headerNavigationContainer.pkp_structure_head,
    #headerNavigationContainer .pkp_head_wrapper,
    #headerNavigationContainer .pkp_site_name_wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* 2. The logo/banner must NEVER be hidden */
    #headerNavigationContainer .pkp_site_name {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    #headerNavigationContainer .pkp_site_name > a,
    #headerNavigationContainer .pkp_site_name a.is_img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* 3. Force actual banner to occupy full mobile width */
    #headerNavigationContainer .pkp_site_name img,
    #headerNavigationContainer .pkp_site_name a.is_img img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

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

        object-fit: contain !important;
        box-sizing: border-box !important;
    }

    #headerNavigationContainer .pkp_site_name img[width],
    #headerNavigationContainer .pkp_site_name img[height] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }

    /* 4. Hamburger stays above the banner */
    #headerNavigationContainer .pkp_site_nav_toggle {
        display: block !important;
        position: absolute !important;
        z-index: 99999 !important;
        top: 10px !important;
        left: 10px !important;
    }

    /* ======================================================
       5. MOBILE NAVIGATION

       CLOSED = completely hidden.
       OPEN   = appears BELOW the banner.

       We deliberately do NOT use absolute positioning
       for the open menu. This prevents the menu from
       covering the banner.
       ====================================================== */

    #headerNavigationContainer .pkp_site_nav_menu {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;

        background: #fff !important;
        overflow: visible !important;

        /* closed state */
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* OJS open state */
    #headerNavigationContainer .pkp_site_nav_menu.pkp_site_nav_menu--isOpen {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        background: #fff !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: none !important;

        z-index: 1000 !important;
    }

    /* Primary menu */
    #headerNavigationContainer .pkp_navigation_primary_row,
    #headerNavigationContainer .pkp_navigation_primary_wrapper,
    #headerNavigationContainer .pkp_navigation_primary {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #headerNavigationContainer .pkp_navigation_primary > li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #headerNavigationContainer .pkp_navigation_primary > li > a {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 16px !important;
        background: #fff !important;
        color: #1b2d3d !important;
        border-bottom: 1px solid #e5e7eb !important;
        text-decoration: none !important;
    }

    /* User menu */
    #headerNavigationContainer .pkp_navigation_user_wrapper,
    #headerNavigationContainer .pkp_navigation_user {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #headerNavigationContainer .pkp_navigation_user li,
    #headerNavigationContainer .pkp_navigation_user li a {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #headerNavigationContainer .pkp_navigation_user li a {
        display: block !important;
        padding: 12px 16px !important;
        background: #fff !important;
        color: #1b2d3d !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
}


/* ==========================================================
   VERY SMALL PHONES
   ========================================================== */

@media (max-width: 480px) {

    #headerNavigationContainer .pkp_site_name img,
    #headerNavigationContainer .pkp_site_name a.is_img img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    #headerNavigationContainer .pkp_site_nav_toggle {
        top: 8px !important;
        left: 8px !important;
    }
}