/* ==========================================================================
   CUSTOM CSS — OJS / PKP
   Tema warna:
   - Maroon utama : #6A1B2B
   - Aksen emas   : #D3A15C
   - Teks terang  : #FFFFFF

   DAFTAR BAGIAN
   01. Header situs dan logo jurnal
   02. Struktur navigasi utama
   03. Menu pengguna pada desktop
   04. Status hover, focus, dan dropdown
   05. Tata letak navigasi tablet dan mobile
   06. Judul blok/sidebar
   07. Tautan umum
   08. Breadcrumb
   ========================================================================== */


/* ==========================================================================
   01. HEADER SITUS DAN LOGO JURNAL
   Mengatur warna banner header serta logo agar memenuhi lebar area.
   ========================================================================== */

.pkp_structure_head {
    background: #6A1B2B;
}

.pkp_site_name_wrapper,
.pkp_site_name {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

.pkp_site_name img,
.pkp_site_name .is_img img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
}


/* ==========================================================================
   02. STRUKTUR NAVIGASI UTAMA
   Menetapkan lapisan navigasi dan warna dasar bilah menu.
   ========================================================================== */

.pkp_structure_page {
    position: relative;
}

.pkp_navigation_primary_row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    margin: 0 !important;
    background: #6A1B2B !important;
    border: 0 !important;
    overflow: visible !important;
}

.pkp_navigation_primary_wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    float: none !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
}

/* 02a. Tipografi menu utama */
.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li > button,
.pkp_navigation_primary > li > a:link,
.pkp_navigation_primary > li > a:visited {
    color: #FFFFFF !important;
    transition: color 0.18s ease, background-color 0.18s ease;
}

#navigationPrimary a {
    font-family: "Gill Sans", sans-serif;
    font-weight: 700;
}


/* ==========================================================================
   03. MENU PENGGUNA PADA DESKTOP
   Menggabungkan menu akun/notifikasi ke baris navigasi pada layar lebar.
   ========================================================================== */

@media (min-width: 992px) {
    .pkp_site_nav_menu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100%;
        min-height: 46px;
        padding: 0 24px !important;
        box-sizing: border-box;
        gap: 0;
    }

    .pkp_navigation_primary_row {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible;
    }

    .pkp_navigation_primary_wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .pkp_navigation_primary {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: 0 4px;
        margin: 0 !important;
        padding: 0 !important;
    }

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

    .pkp_navigation_primary > li > a {
        display: block;
        padding: 14px 12px !important;
        white-space: nowrap;
    }

    /* 03a. Tautan Search berada di dekat menu utama */
    .pkp_navigation_search_wrapper {
        display: none
    }

    /* 03b. Menu pengguna menempel di sisi kanan */
    .pkp_navigation_user_wrapper {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto;
        margin-left: auto !important;
        padding: 0 0 0 20px !important;
        transform: none !important;
        white-space: nowrap;
    }

    .pkp_navigation_user {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_navigation_user > li {
        float: none !important;
        margin: 0 !important;
    }
}


/* ==========================================================================
   04. HOVER, FOCUS, DAN DROPDOWN
   Warna emas digunakan saat tautan diarahkan atau mendapat fokus keyboard.
   ========================================================================== */

/* 04a. Hover/focus menu utama */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > button:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > button:focus,
.pkp_navigation_primary > li > a:focus-visible,
.pkp_navigation_primary > li > button:focus-visible {
    color: #D3A15C !important;
    background-color: transparent !important;
}

/* 04b. Latar dan tautan dropdown menu utama */
.pkp_navigation_primary .dropdown-menu,
.pkp_navigation_primary ul {
    background: #6A1B2B !important;
}

.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary ul a {
    color: #FFFFFF !important;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus,
.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
    color: #D3A15C !important;
    background-color: transparent !important;
    border-color: #D3A15C !important;
}

/* 04c. Hover/focus menu pengguna, akun, dan notifikasi */
.pkp_navigation_user_wrapper a:hover,
.pkp_navigation_user_wrapper button:hover,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > button:hover,
.pkp_navigation_user_wrapper a:focus,
.pkp_navigation_user_wrapper button:focus,
.pkp_navigation_user > li > a:focus,
.pkp_navigation_user > li > button:focus {
    color: #D3A15C !important;
    background-color: transparent !important;
}

/* 04d. Dropdown menu pengguna */
.pkp_navigation_user_wrapper .dropdown-menu,
.pkp_navigation_user .dropdown-menu {
    background: #6A1B2B !important;
}

.pkp_navigation_user_wrapper .dropdown-menu a,
.pkp_navigation_user .dropdown-menu a {
    color: #FFFFFF !important;
}

.pkp_navigation_user_wrapper .dropdown-menu a:hover,
.pkp_navigation_user .dropdown-menu a:hover,
.pkp_navigation_user_wrapper .dropdown-menu a:focus,
.pkp_navigation_user .dropdown-menu a:focus {
    color: #D3A15C !important;
    background-color: transparent !important;
    border-color: #D3A15C !important;
}



/* ==========================================================================
   05. TATA LETAK NAVIGASI TABLET DAN MOBILE
   Berlaku pada layar dengan lebar maksimal 991px.
   ========================================================================== */

@media (max-width: 991px) {
    .pkp_site_nav_menu {
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }

    .pkp_navigation_primary {
        flex-wrap: wrap;
    }
}


/* ==========================================================================
   06. JUDUL BLOK / SIDEBAR
   Mengatur bentuk, jarak, tipografi, dan warna judul blok OJS.
   ========================================================================== */

.pkp_block .title {
    display: block;
    margin: 0 0 0.714rem;
    padding-bottom: 0.5em;
    border-bottom: 3px solid #F7BC4A;
    font-size: 1.2rem;
    line-height: 1.2;
    color: #6A1B2B;
    font-weight: 900;
    font-family: "Gill Sans", sans-serif;
    text-transform: uppercase;
}


/* ==========================================================================
   07. TAUTAN UMUM
   Mengatur tampilan tautan pada isi situs dan efek hover/focus.
   ========================================================================== */

a {
    color: #6A1B2B;
    background-color: transparent;
}

a:hover,
a:focus {
    color: #D3A15C;
}

.pkp_block a {
    font-size: 1rem;
    font-weight: 600;
    font-family: "Gill Sans", sans-serif;
    text-decoration: none;
}


/* ==========================================================================
   08. BREADCRUMB / NAVIGASI LOKASI
   ========================================================================== */

.cmp_breadcrumbs {
    display: inline-block;
    text-decoration: none;
    font-family: "Gill Sans", sans-serif;
}