/**
 * Custom Stylesheet - ACCOUNTHINK Journal OJS
 * journal.feb-unsika.id
 * Ukuran gambar ideal: 1920 x 250 px
 */

/* =============================================
   RESET MARGIN & PADDING HEADER
   ============================================= */

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

.pkp_structure_head,
.pkp_structure_head > *,
.pkp_head_wrapper,
.pkp_site_name,
.pkp_site_name > *,
.pkp_site_name a,
.pkp_site_name_image,
.pkp_site_name_image a,
.pkp_site_name_image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Gambar header full width */
.pkp_site_name img,
.pkp_site_name_image img {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    min-height: unset !important;
    object-fit: fill !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background-color: transparent !important;
}

.pkp_structure_head,
.pkp_head_wrapper,
header,
.pkp_site_name,
.pkp_site_name_image {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* =============================================
   NAVBAR FULL WIDTH
   ============================================= */

.pkp_navigation_primary_row,
nav.pkp_navigation_primary,
.pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* =============================================
   HEADER AREA DESKTOP: TRANSPARAN
   Agar gambar header (banner) tetap tampil di desktop
   ============================================= */

/* Di desktop, seluruh area header harus transparan
   sehingga gambar banner terlihat. Hanya navbar yang merah. */
@media (min-width: 1025px) {
    /* Header area desktop: transparan & tinggi cukup untuk gambar banner */
    .pkp_structure_head,
    .pkp_head_wrapper,
    header.pkp_structure_head {
        background-color: transparent !important;
        height: auto !important;
        min-height: unset !important;
        overflow: visible !important;
        display: block !important;
    }

    /* Pastikan pkp_site_name dan gambarnya tampil normal */
    .pkp_site_name,
    .pkp_site_name_image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background-color: transparent !important;
    }

    .pkp_site_name img,
    .pkp_site_name_image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
    }
}

/* =============================================
   UBAH WARNA BIRU → MERAH #e20001
   ============================================= */

.pkp_navigation_primary,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
nav.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_navigation_user_row,
.pkp_navigation_user_wrapper,
nav.pkp_navigation_user {
    background-color: #e20001 !important;
    border-color: #c00001 !important;
}

/* Nuclear: semua elemen di dalam header kecuali gambar
   HANYA berlaku di HP (max-width 1024px), tidak di desktop */
@media (max-width: 1024px) {
    .pkp_structure_head *:not(img):not(.pkp_site_name):not(.pkp_site_name_image) {
        background-color: #e20001 !important;
    }
}

/* Gambar header tetap transparan */
.pkp_site_name,
.pkp_site_name_image,
.pkp_site_name img,
.pkp_site_name_image img,
.pkp_site_name a,
.pkp_site_name_image a {
    background-color: transparent !important;
}

/* Semua link nav putih */
.pkp_navigation_primary a,
.pkp_navigation_primary li a,
.pkp_navigation_user a,
.pkp_navigation_user li a,
.pkp_nav_list > li > a,
.pkp_navigation_primary > ul > li > a {
    color: #ffffff !important;
    background-color: #e20001 !important;
}

/* Hover nav */
.pkp_navigation_primary a:hover,
.pkp_navigation_primary li:hover > a,
.pkp_navigation_user a:hover,
.pkp_navigation_user li:hover > a,
.pkp_navigation_primary .pkp_nav_list > li > a:hover,
.pkp_navigation_primary .pkp_nav_list > li > a:focus {
    background-color: #b50001 !important;
    color: #ffffff !important;
}

/* Dropdown sub-menu */
.pkp_navigation_primary .pkp_nav_list > li ul {
    background-color: #e20001 !important;
    border-color: #b50001 !important;
}

.pkp_navigation_primary .pkp_nav_list > li ul li a {
    background-color: #e20001 !important;
    color: #ffffff !important;
}

.pkp_navigation_primary .pkp_nav_list > li ul li a:hover {
    background-color: #b50001 !important;
}

/* =============================================
   BACKGROUND PATTERN POLA LINGKARAN
   Hanya di sisi kiri & kanan (luar konten)
   ============================================= */

body {
    background-color: #f0f0f0 !important;
    background-image:
        radial-gradient(circle at 100% 100%, transparent 35px, rgba(160,160,160,0.30) 35px, rgba(160,160,160,0.30) 38px, transparent 38px),
        radial-gradient(circle at 100% 100%, transparent 28px, rgba(160,160,160,0.26) 28px, rgba(160,160,160,0.26) 31px, transparent 31px),
        radial-gradient(circle at 100% 100%, transparent 21px, rgba(160,160,160,0.22) 21px, rgba(160,160,160,0.22) 24px, transparent 24px),
        radial-gradient(circle at 100% 100%, transparent 14px, rgba(160,160,160,0.18) 14px, rgba(160,160,160,0.18) 17px, transparent 17px),
        radial-gradient(circle at 100% 100%, transparent  7px, rgba(160,160,160,0.14)  7px, rgba(160,160,160,0.14) 10px, transparent 10px),
        radial-gradient(circle at 0% 0%, transparent 35px, rgba(160,160,160,0.30) 35px, rgba(160,160,160,0.30) 38px, transparent 38px),
        radial-gradient(circle at 0% 0%, transparent 28px, rgba(160,160,160,0.26) 28px, rgba(160,160,160,0.26) 31px, transparent 31px),
        radial-gradient(circle at 0% 0%, transparent 21px, rgba(160,160,160,0.22) 21px, rgba(160,160,160,0.22) 24px, transparent 24px),
        radial-gradient(circle at 0% 0%, transparent 14px, rgba(160,160,160,0.18) 14px, rgba(160,160,160,0.18) 17px, transparent 17px),
        radial-gradient(circle at 0% 0%, transparent  7px, rgba(160,160,160,0.14)  7px, rgba(160,160,160,0.14) 10px, transparent 10px)
    !important;
    background-size: 50px 50px !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
}

/* Area konten putih bersih (menutup pola di belakangnya) */
.pkp_structure_content,
#pkp_content_main,
.pkp_structure_main {
    background-color: #ffffff !important;
    background-image: none !important;
}

.pkp_page_index .pkp_structure_content,
.pkp_page_article .pkp_structure_content,
.pkp_page_issue .pkp_structure_content,
.pkp_page_about .pkp_structure_content,
.pkp_page_search .pkp_structure_content,
.pkp_page_submissions .pkp_structure_content {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* =============================================
   LAYOUT 2 KOLOM DESKTOP (layar ≥ 1025px)
   Sidebar tetap di kanan, tidak pindah ke bawah
   ============================================= */

@media (min-width: 1025px) {
    .pkp_structure_content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .pkp_structure_main {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .pkp_structure_sidebar {
        flex: 0 0 300px !important;
        width: 300px !important;
        min-width: 220px !important;
        display: block !important;
        float: none !important;
    }
}

/* =============================================
   SIDEBAR JOURNAL MENU - JARAK LEBIH RAPAT
   ============================================= */

.pkp_block .pkp_block_nav li,
.pkp_block ul li,
.pkp_block ol li {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

.pkp_block .pkp_block_nav li a,
.pkp_block ul li a,
.pkp_block ol li a {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* =============================================
   PAKSA TAMPILAN DESKTOP DI HP (layar ≤ 1024px)
   Layout sama persis seperti desktop
   ============================================= */

@media (max-width: 1024px) {

    /* Paksa lebar minimum agar browser HP zoom-out */
    html {
        min-width: 1024px !important;
    }

    /* Pastikan header tidak overlap ke konten di bawahnya */
    .pkp_structure_head {
        position: relative !important;
        z-index: 10 !important;
        float: none !important;
        clear: both !important;
    }

    /* Wrapper halaman mengalir normal setelah header */
    .pkp_structure_page {
        display: block !important;
        position: relative !important;
        clear: both !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        top: 0 !important;
        float: none !important;
    }

    /* Layout 2 kolom tetap: konten kiri + sidebar kanan */
    .pkp_structure_content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        top: 0 !important;
    }

    .pkp_structure_main {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .pkp_structure_sidebar {
        flex: 0 0 280px !important;
        width: 280px !important;
        display: block !important;
        float: none !important;
    }

    /* Navbar horizontal (tidak jadi hamburger) */
    nav.pkp_navigation_primary ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    /* Sembunyikan tombol hamburger */
    .pkp_navigation_primary_responsive_toggle,
    .pkp_mobile_nav_toggle,
    button[aria-controls="navigationPrimary"] {
        display: none !important;
    }

    /* Warna merah tetap di HP */
    .pkp_navigation_primary,
    .pkp_navigation_primary_row,
    .pkp_head_wrapper,
    .pkp_navigation_user {
        background-color: #e20001 !important;
    }
}

/* =============================================
   PAKSA GAMBAR HEADER TAMPIL DI DESKTOP
   Rule ini di akhir agar tidak tertimpa rule lain
   ============================================= */

@media (min-width: 1025px) {
    /* Pastikan seluruh rantai container gambar header tidak ter-collapse */
    .pkp_structure_head,
    .pkp_structure_head > div,
    .pkp_head_wrapper,
    .pkp_site_name_image,
    .pkp_site_name {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Gambar banner: pastikan tampil */
    .pkp_site_name img,
    .pkp_site_name_image img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }
}

/* =============================================
   JARAK KONTEN DARI HEADER (HP)
   ============================================= */

@media (max-width: 1024px) {
    .pkp_structure_content {
        margin-top: 40px !important;
        padding-top: 0 !important;
    }
}