/* =========================================================
   JRAI - HEADER LOGO + NAMA JURNAL
   ========================================================= */


/* =========================================================
   1. HEADER UTAMA
   ========================================================= */

.pkp_structure_head {
    background: #003D2E !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
}


/* =========================================================
   2. AREA HEADER
   ========================================================= */

.pkp_head_wrapper {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 30px !important;
    padding-right: 30px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   3. AREA LOGO + NAMA JURNAL
   ========================================================= */

.pkp_site_name_wrapper {
    background: #003D2E !important;
    padding: 20px 0 15px !important;
}


/* Container logo dan nama */

.pkp_site_name {
    max-width: 1200px !important;

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

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;

    justify-content: flex-start !important;

    gap: 18px !important;

    background: transparent !important;
}


/* =========================================================
   4. LOGO AL-INSHOF
   ========================================================= */

@media (min-width: 1200px) {
    
    .pkp_site_name img {
        width: 85px !important;
        height: 85px !important;
        max-width: 85px !important;
        max-height: 85px !important;
    }

}


/* Link pembungkus logo */

.pkp_site_name a {
    display: flex !important;

    align-items: center !important;

    width: auto !important;

    color: transparent !important;

    text-decoration: none !important;
}


/* =========================================================
   5. NAMA JURNAL
   ========================================================= */

.pkp_site_name::after {
    content: "Jurnal Raudhatul Athfal Al-Inshof";

    display: block !important;

    color: #FFFFFF !important;

    font-size: 28px !important;

    font-weight: 700 !important;

    line-height: 1.25 !important;

    letter-spacing: 0.2px !important;

    white-space: nowrap !important;
}


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

.pkp_navigation_primary_wrapper {
    background: #003D2E !important;

    border: 0 !important;

    box-shadow: none !important;

    width: 100% !important;

    max-width: none !important;

    position: relative !important;
}


/* =========================================================
   7. GARIS GOLD FULL WIDTH
   ========================================================= */

.pkp_navigation_primary_wrapper::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    height: 3px;

    background: #C9952E;

    z-index: 20;
}


/* =========================================================
   8. AREA MENU
   ========================================================= */

.pkp_navigation_primary_row {
    background: #003D2E !important;

    max-width: 1200px !important;

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

    padding-left: 30px !important;
    padding-right: 30px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   9. MENU UTAMA
   ========================================================= */

.pkp_navigation_primary {
    background: transparent !important;

    box-shadow: none !important;
}


.pkp_navigation_primary > li {
    background: transparent !important;
}


.pkp_navigation_primary > li > a {
    background: transparent !important;

    color: #FFFFFF !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    transition: all 0.2s ease !important;
}


/* Hover */

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
    background: #075B43 !important;

    color: #D5A63A !important;
}


/* Menu aktif */

.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.active > a {
    background: #075B43 !important;

    color: #D5A63A !important;
}


/* =========================================================
   10. DROPDOWN
   ========================================================= */

.pkp_navigation_primary .dropdown-menu {
    background: #003D2E !important;

    border: 1px solid #C9952E !important;

    box-shadow: none !important;
}


.pkp_navigation_primary .dropdown-menu li,
.pkp_navigation_primary .dropdown-menu a {
    background: #003D2E !important;

    color: #FFFFFF !important;
}


.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus {
    background: #075B43 !important;

    color: #D5A63A !important;
}


/* =========================================================
   11. SEARCH
   ========================================================= */

.pkp_search {
    background: transparent !important;

    box-shadow: none !important;

    max-width: none !important;
}


.pkp_search button,
.pkp_search a {
    background: transparent !important;

    color: #FFFFFF !important;

    border: none !important;
}


.pkp_search button:hover,
.pkp_search button:focus,
.pkp_search a:hover,
.pkp_search a:focus {
    background: transparent !important;

    color: #D5A63A !important;
}


/* =========================================================
   12. USER / ADMIN
   ========================================================= */

.pkp_user_navigation {
    background: transparent !important;
}


.pkp_user_navigation > li {
    background: transparent !important;
}


.pkp_user_navigation > li > a {
    background: transparent !important;

    color: #FFFFFF !important;
}


.pkp_user_navigation > li > a:hover,
.pkp_user_navigation > li > a:focus {
    background: #075B43 !important;

    color: #D5A63A !important;
}


/* =========================================================
   13. MOBILE MENU
   ========================================================= */

.pkp_site_nav_menu {
    background: #003D2E !important;

    border: 0 !important;

    box-shadow: none !important;
}


.pkp_site_nav_menu,
.pkp_site_nav_menu > *,
.pkp_site_nav_menu ul,
.pkp_site_nav_menu nav {
    background-color: #003D2E !important;
}


/* Menu mobile */

.pkp_site_nav_menu .pkp_navigation_primary {
    background: #003D2E !important;
}


.pkp_site_nav_menu .pkp_navigation_primary > li {
    background: #003D2E !important;

    border-color: rgba(201, 149, 46, 0.25) !important;
}


.pkp_site_nav_menu .pkp_navigation_primary > li > a {
    background: #003D2E !important;

    color: #FFFFFF !important;
}


.pkp_site_nav_menu .pkp_navigation_primary > li > a:hover {
    background: #075B43 !important;

    color: #D5A63A !important;
}


/* =========================================================
   14. ADMIN MOBILE
   ========================================================= */

.pkp_site_nav_menu .pkp_user_navigation {
    background: #003D2E !important;
}


.pkp_site_nav_menu .pkp_user_navigation > li {
    background: #003D2E !important;
}


.pkp_site_nav_menu .pkp_user_navigation > li > a {
    background: #003D2E !important;

    color: #FFFFFF !important;
}


/* =========================================================
   15. TOMBOL MENU
   ========================================================= */

.pkp_site_nav_toggle {
    background: #003D2E !important;

    color: #FFFFFF !important;

    border: 0 !important;
}


.pkp_site_nav_toggle:hover,
.pkp_site_nav_toggle:focus {
    background: #075B43 !important;

    color: #D5A63A !important;
}


/* =========================================================
   16. RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

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


    .pkp_site_name_wrapper {
        padding: 12px 0 !important;
    }


    .pkp_site_name {
        gap: 12px !important;
    }


    .pkp_site_name img {
        width: 55px !important;
        height: 55px !important;

        max-width: 55px !important;
        max-height: 55px !important;
    }


    .pkp_site_name::after {
        font-size: 19px !important;

        white-space: normal !important;
    }


    .pkp_navigation_primary_row {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

}

/* =========================================================
   17. FIX WARNA DAFTAR, LOGIN, SEARCH & ADMIN DROPDOWN
   ========================================================= */


/* =========================================================
   A. DAFTAR & LOGIN
   ========================================================= */

/* Link Daftar dan Login di bagian atas header */
.pkp_structure_head a,
.pkp_structure_head .pkp_user_navigation a {
    color: #FFFFFF !important;
}


/* Daftar */
.pkp_structure_head .pkp_user_navigation > li > a {
    color: #FFFFFF !important;
    background: transparent !important;
}


/* Hover Daftar / Login */
.pkp_structure_head .pkp_user_navigation > li > a:hover,
.pkp_structure_head .pkp_user_navigation > li > a:focus {
    color: #D5A63A !important;
    background: transparent !important;
}


/* =========================================================
   B. SEARCH / CARI
   ========================================================= */

/* Tulisan Cari */
.pkp_structure_head .pkp_search a,
.pkp_structure_head .pkp_search button,
.pkp_structure_head .pkp_search .search_prompt {
    color: #FFFFFF !important;
    background: transparent !important;
}


/* Ikon Search */
.pkp_structure_head .pkp_search svg,
.pkp_structure_head .pkp_search svg *,
.pkp_structure_head .pkp_search .fa,
.pkp_structure_head .pkp_search .glyphicon {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}


/* Hover Search */
.pkp_structure_head .pkp_search a:hover,
.pkp_structure_head .pkp_search a:focus,
.pkp_structure_head .pkp_search button:hover,
.pkp_structure_head .pkp_search button:focus {
    color: #D5A63A !important;
    background: transparent !important;
}


/* Ikon search saat hover */
.pkp_structure_head .pkp_search a:hover svg,
.pkp_structure_head .pkp_search a:hover svg *,
.pkp_structure_head .pkp_search button:hover svg,
.pkp_structure_head .pkp_search button:hover svg * {
    color: #D5A63A !important;
    fill: #D5A63A !important;
}


/* =========================================================
   C. DROPDOWN ADMIN
   ========================================================= */

/* Kotak popup admin */
.pkp_user_navigation .dropdown-menu {
    background: #FFFFFF !important;

    border: 1px solid #E0E0E0 !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;

    border-radius: 4px !important;
}


/* Semua item dropdown */
.pkp_user_navigation .dropdown-menu li {
    background: #FFFFFF !important;
}


/* Tulisan Dashboard, Lihat Profil,
   Administrasi, Log Out */
.pkp_user_navigation .dropdown-menu li a {
    background: #FFFFFF !important;

    color: #003D2E !important;

    font-weight: 500 !important;

    text-decoration: none !important;
}


/* Hover item dropdown */
.pkp_user_navigation .dropdown-menu li a:hover,
.pkp_user_navigation .dropdown-menu li a:focus {
    background: #F1F6F4 !important;

    color: #003D2E !important;
}


/* =========================================================
   D. ANGKA NOTIFIKASI ADMIN
   ========================================================= */

.pkp_user_navigation .badge,
.pkp_user_navigation .notification {
    background: #C9952E !important;

    color: #FFFFFF !important;
}


/* =========================================================
   E. TOMBOL ADMIN / USER
   ========================================================= */

/* Nama admin */
.pkp_user_navigation > li > a,
.pkp_user_navigation > li > button {
    color: #FFFFFF !important;

    background: transparent !important;
}


/* Hover nama admin */
.pkp_user_navigation > li > a:hover,
.pkp_user_navigation > li > button:hover {
    color: #D5A63A !important;

    background: transparent !important;
}


/* =========================================================
   F. PANAH DROPDOWN ADMIN
   ========================================================= */

.pkp_user_navigation .dropdown-toggle::after {
    border-top-color: #FFFFFF !important;
}


.pkp_user_navigation .dropdown-toggle:hover::after {
    border-top-color: #D5A63A !important;
}


/* =========================================================
   G. SEARCH MOBILE
   ========================================================= */

.pkp_site_nav_menu .pkp_search a,
.pkp_site_nav_menu .pkp_search button {
    color: #FFFFFF !important;

    background: transparent !important;
}


.pkp_site_nav_menu .pkp_search a:hover,
.pkp_site_nav_menu .pkp_search button:hover {
    color: #D5A63A !important;

    background: transparent !important;
}


/* Ikon Search Mobile */
.pkp_site_nav_menu .pkp_search svg,
.pkp_site_nav_menu .pkp_search svg * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}


/* =========================================================
   H. ADMIN DROPDOWN - VERSI MOBILE
   ========================================================= */

.pkp_site_nav_menu .pkp_user_navigation .dropdown-menu {
    background: #FFFFFF !important;

    border: 1px solid #E0E0E0 !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}


.pkp_site_nav_menu .pkp_user_navigation .dropdown-menu li {
    background: #FFFFFF !important;
}


.pkp_site_nav_menu .pkp_user_navigation .dropdown-menu li a {
    background: #FFFFFF !important;

    color: #003D2E !important;
}


.pkp_site_nav_menu .pkp_user_navigation .dropdown-menu li a:hover,
.pkp_site_nav_menu .pkp_user_navigation .dropdown-menu li a:focus {
    background: #F1F6F4 !important;

    color: #003D2E !important;
}


/* =========================================================
   I. OVERRIDE WARNA LINK BAWAAN OJS
   ========================================================= */

/* Mencegah link bawaan OJS menjadi biru/hitam */
.pkp_structure_head a:link,
.pkp_structure_head a:visited {
    color: #FFFFFF !important;
}


/* Khusus dropdown admin tetap hijau */
.pkp_user_navigation .dropdown-menu a:link,
.pkp_user_navigation .dropdown-menu a:visited {
    color: #003D2E !important;
}


/* =========================================================
   J. JIKA OJS MENGGUNAKAN BOOTSTRAP
   ========================================================= */

.pkp_user_navigation .dropdown-menu > li > a {
    color: #003D2E !important;

    background-color: #FFFFFF !important;
}


.pkp_user_navigation .dropdown-menu > li > a:hover,
.pkp_user_navigation .dropdown-menu > li > a:focus {
    color: #003D2E !important;

    background-color: #F1F6F4 !important;
}

/* =========================================================
   16. RESPONSIVE HEADER
   ========================================================= */


/* =========================================================
   A. DESKTOP BESAR
   1200px ke atas = LOGO + NAMA JURNAL
   ========================================================= */

@media (min-width: 1200px) {

    .pkp_site_name_wrapper {
        padding: 20px 0 15px !important;
    }

    .pkp_site_name {
        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        text-align: left !important;

        gap: 18px !important;

        min-height: 75px !important;

        overflow: visible !important;
    }

    /* Logo tetap tampil */
    .pkp_site_name a {
        display: flex !important;

        align-items: center !important;

        width: auto !important;

        height: auto !important;
    }

    .pkp_site_name img {
        display: block !important;

        width: 75px !important;
        height: 75px !important;

        max-width: 75px !important;
        max-height: 75px !important;

        object-fit: contain !important;

        margin: 0 !important;
    }

    /* Nama jurnal */
    .pkp_site_name::after {
        display: block !important;

        content: "Jurnal Raudhatul Athfal Al-Inshof" !important;

        color: #FFFFFF !important;

        font-size: 28px !important;

        font-weight: 700 !important;

        line-height: 1.25 !important;

        letter-spacing: 0.2px !important;

        white-space: nowrap !important;

        text-align: left !important;
        
        padding-left: 0 !important;
        margin-left: -5px !important;
    }
}


/* =========================================================
   B. TABLET / LAPTOP KECIL
   769px - 1199px
   HANYA NAMA JURNAL
   TANPA LOGO
   ========================================================= */

@media (min-width: 769px) and (max-width: 1199px) {

    .pkp_site_name_wrapper {
        padding: 12px 0 !important;

        min-height: 50px !important;

        overflow: visible !important;
    }

    .pkp_site_name {
        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        text-align: left !important;

        gap: 0 !important;

        width: 100% !important;

        min-height: 45px !important;

        padding: 0 !important;

        margin: 0 !important;

        overflow: visible !important;
    }

    /* =====================================================
       SEMBUNYIKAN LOGO
       ===================================================== */

    .pkp_site_name a {
        display: none !important;
    }

    .pkp_site_name img {
        display: none !important;
    }

    /* =====================================================
       NAMA JURNAL SAJA
       ===================================================== */

    .pkp_site_name::after {
        content: "Jurnal Raudhatul Athfal Al-Inshof" !important;

        display: block !important;

        width: 100% !important;

        color: #FFFFFF !important;

        font-size: clamp(21px, 2.5vw, 27px) !important;

        font-weight: 700 !important;

        line-height: 1.2 !important;

        letter-spacing: 0 !important;

        white-space: nowrap !important;

        text-align: left !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }
}


/* =========================================================
   C. MOBILE
   0 - 768px
   HANYA NAMA JURNAL
   TANPA LOGO
   ========================================================= */

@media (max-width: 768px) {

    .pkp_head_wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;

        width: 100% !important;

        box-sizing: border-box !important;
    }


    /* Area nama jurnal */
    .pkp_site_name_wrapper {
        padding: 9px 0 !important;

        min-height: 42px !important;

        height: auto !important;

        overflow: visible !important;
    }


    .pkp_site_name {
        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        text-align: left !important;

        gap: 0 !important;

        width: 100% !important;

        min-height: 40px !important;

        height: auto !important;

        padding: 0 !important;

        margin: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       SEMBUNYIKAN LOGO SEPENUHNYA
       ===================================================== */

    .pkp_site_name a {
        display: none !important;
    }


    .pkp_site_name img {
        display: none !important;

        visibility: hidden !important;
    }


    /* =====================================================
       NAMA JURNAL
       ===================================================== */

    .pkp_site_name::after {
        content: "Jurnal Raudhatul Athfal Al-Inshof" !important;

        display: block !important;

        width: 100% !important;

        color: #FFFFFF !important;

        font-size: clamp(17px, 4.5vw, 22px) !important;

        font-weight: 700 !important;

        line-height: 1.2 !important;

        letter-spacing: 0 !important;

        white-space: nowrap !important;

        text-align: left !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;
    }


    /* =====================================================
       MENU MOBILE
       ===================================================== */

    .pkp_navigation_primary_row {
        padding-left: 15px !important;

        padding-right: 15px !important;
    }
}


/* =========================================================
   D. HP SANGAT KECIL
   <=480px
   ========================================================= */

@media (max-width: 480px) {

    .pkp_site_name_wrapper {
        padding: 8px 0 !important;

        min-height: 38px !important;
    }


    .pkp_site_name {
        min-height: 36px !important;
    }


    .pkp_site_name::after {
        font-size: 17px !important;

        line-height: 1.2 !important;

        text-align: left !important;

        white-space: nowrap !important;
    }
}