@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* === GLOBAL FONT OVERRIDE === */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.pkp_structure_page {
    font-family: 'Poppins', sans-serif !important;
}

/* =============================================
   OJS CUSTOM HEADER - MAGAU HISTORIA JURNAL
   Gambar: 1280x390px | Rasio ~3.28:1
   https://i.ibb.co.com/d0ttP2pn/Chat-GPT-Image-17-Apr-2026-15-55-02.png
   https://i.ibb.co.com/YBrMJFQy/Header-Magau-Prodi-Sejarah-FKIP-Untad-Fix.png
   ============================================= */

:root {
    --custom-header-image: url('https://i.imgur.com/oXEcGxL.png');
}

/* =============================================
   PENDEKATAN: gambar banner via ::before
   agar navigasi bisa tampil normal di bawahnya
   ============================================= */

/* === RESET HEADER CONTAINER === */
.pkp_structure_head,
#pkp_content_main>.pkp_structure_head,
header.pkp_structure_head {
    background: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    position: relative !important;
    overflow: visible !important;
    /* Paksa container tidak pudar */
    opacity: 1 !important;
    filter: none !important;
}

/* === BANNER IMAGE VIA PSEUDO-ELEMENT (tidak menghalangi navigasi) === */
.pkp_structure_head::before {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    padding-top: 30.46% !important;
    /* rasio 390/1280 × 100 */
    background-image: var(--custom-header-image) !important;
    background-size: 100% auto !important;
    background-position: top left !important;
    background-repeat: no-repeat !important;
    background-color: #8B6914 !important;
    /* Paksa warna asli gambar — lawan filter/opacity dari tema OJS */
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* === SEMBUNYIKAN NAMA JURNAL & LOGO ASLI === */
.pkp_structure_head .pkp_site_name_wrapper,
.pkp_structure_head .pkp_site_name,
#headerLogo,
#headerLogo img,
.pkp_structure_head h1,
.pkp_structure_head h2,
.pkp_structure_head p,
.pkp_structure_head a img {
    display: none !important;
}

/* =============================================
   SEMBUNYIKAN ELEMEN PENCARIAN DI HEADER
   ============================================= */
.pkp_structure_head .search,
.pkp_structure_head .pkp_search,
.pkp_structure_head form[role="search"],
.pkp_structure_head input[type="search"],
.pkp_structure_head .pkp_block_search {
    display: none !important;
}

/* Sembunyikan Login & Register dari nav UTAMA (sudah ada di user nav) */
.pkp_structure_head .pkp_navigation_primary ul li:has(a[href*="login"]),
.pkp_structure_head .pkp_navigation_primary ul li:has(a[href*="register"]) {
    display: none !important;
}

/* =============================================
   NAVIGASI USER — REDESAIN TOTAL
   Posisi: terintegrasi di sisi kanan navbar utama
   ============================================= */

/* Tempatkan user nav di sisi kanan navbar utama, sedikit turun agar sejajar teks nav */
.pkp_structure_head .pkp_navigation_user {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    position: absolute !important;
    top: calc(50% + 7px) !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 18px !important;
    border: none !important;
    z-index: 200 !important;
}


/* Daftar item navigasi user - Hanya target level atas agar dropdown tidak ikut menjadi row */
.pkp_structure_head .pkp_navigation_user>ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 12px !important;
}

.pkp_structure_head .pkp_navigation_user ul li {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* ── TOMBOL LOGIN & REGISTER (untuk pengunjung tidak login) ── */
.pkp_structure_head .pkp_navigation_user ul li a[href*="login"],
.pkp_structure_head .pkp_navigation_user ul li a[href*="register"] {
    display: inline-flex !important;
    align-items: center !important;
    color: #f5d060 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 6px 16px !important;
    border: 1.5px solid rgba(245, 208, 96, 0.5) !important;
    border-radius: 20px !important;
    background: rgba(245, 208, 96, 0.08) !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    visibility: visible !important;
}

.pkp_structure_head .pkp_navigation_user ul li a[href*="login"]:hover,
.pkp_structure_head .pkp_navigation_user ul li a[href*="register"]:hover {
    background: #f5d060 !important;
    color: #5c1f00 !important;
    border-color: #f5d060 !important;
    box-shadow: 0 0 14px rgba(245, 208, 96, 0.4) !important;
}

/* ── TOMBOL PROFIL / USERNAME (untuk user yang sudah login) ──
   Warna mengikuti tombol sidebar: bg merah tua, teks emas */
.pkp_structure_head .pkp_navigation_user ul li>a:not([href*="login"]):not([href*="register"]):not([href*="logout"]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #edb009 !important;
    /* kuning emas — sama dengan teks sidebar */
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 7px 16px 7px 10px !important;
    background: #7a0000 !important;
    /* merah tua — sama dengan bg tombol sidebar */
    border: 1.5px solid #edb009 !important;
    /* border emas tipis */
    border-radius: 6px !important;
    /* sedikit rounded, serupa tombol sidebar */
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    visibility: visible !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Avatar icon sebelum username */
.pkp_structure_head .pkp_navigation_user ul li>a:not([href*="login"]):not([href*="register"]):not([href*="logout"])::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
    background: #edb009 !important;
    /* lingkaran emas — kontras di atas merah tua */
    color: #7a0000 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    content: '\1F464' !important;
}

.pkp_structure_head .pkp_navigation_user ul li>a:not([href*="login"]):not([href*="register"]):not([href*="logout"]):hover {
    background: #9a0000 !important;
    /* merah lebih terang saat hover */
    border-color: #f5d060 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
    color: #ffffff !important;
}

/* ── TOMBOL LOGOUT ── */
.pkp_structure_head .pkp_navigation_user ul li a[href*="logout"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: rgba(245, 208, 96, 0.75) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 5px 11px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(245, 208, 96, 0.25) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    visibility: visible !important;
}

.pkp_structure_head .pkp_navigation_user ul li a[href*="logout"]:hover {
    color: #ff8a80 !important;
    border-color: rgba(255, 138, 128, 0.5) !important;
    background: rgba(255, 138, 128, 0.1) !important;
}

/* ── DROPDOWN USER (Dashboard, Lihat Profil, dll.) ── */
.pkp_structure_head .pkp_navigation_user ul li ul {
    display: none !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    width: 220px !important;
    max-width: 220px !important;
    background: linear-gradient(160deg, #3d0d00 0%, #5c1f00 100%) !important;
    border: 1px solid rgba(245, 208, 96, 0.25) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    margin: 8px 0 0 0 !important;
    z-index: 999 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
    list-style: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    animation: navDropFadeIn 0.2s ease-out !important;
}

/* Pastikan background default OJS tidak muncul */
.pkp_structure_head .pkp_navigation_user ul li ul li a,
.pkp_structure_head .pkp_navigation_user ul li ul li a:hover,
.pkp_structure_head .pkp_navigation_user ul li ul li a:focus {
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

@keyframes navDropFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pkp_structure_head .pkp_navigation_user ul li:hover>ul,
.pkp_structure_head .pkp_navigation_user ul li:focus-within>ul {
    display: flex !important;
}

/* Item di dalam dropdown */
.pkp_structure_head .pkp_navigation_user ul li ul li {
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

.pkp_structure_head .pkp_navigation_user ul li ul li:last-child {
    margin-bottom: 0 !important;
}

.pkp_structure_head .pkp_navigation_user ul li ul li a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #f5d060 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.2s ease !important;
    visibility: visible !important;
    white-space: nowrap !important;
}

.pkp_structure_head .pkp_navigation_user ul li ul li a:hover {
    color: #ffffff !important;
    background: rgba(245, 208, 96, 0.15) !important;
    padding-left: 18px !important;
}

/* === NAVIGASI UTAMA (menu halaman) === */
.pkp_structure_head .pkp_navigation_primary_row,
.pkp_structure_head .pkp_navigation_primary {
    display: block !important;
    visibility: visible !important;
    background: #903411 !important;
    border-bottom: none !important;
    border-top: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    /* diperlukan agar user nav absolute bekerja */
    overflow: visible !important;
}

/* Reset semua ul dalam nav agar tidak ada padding bawaan browser */
.pkp_structure_head .pkp_navigation_primary ul,
.pkp_structure_head .pkp_navigation_primary_row ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Target top-level ul navigasi — 4 selektor untuk tangkap semua variasi HTML OJS */
.pkp_structure_head .pkp_navigation_primary>ul,
.pkp_structure_head .pkp_navigation_primary_row>ul,
.pkp_structure_head ul.pkp_navigation_primary,
header ul.pkp_navigation_primary {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Padding kiri agar item pertama tidak menempel di tepi layar */
    padding: 0 0 0 20px !important;
    margin: 0 !important;
}

.pkp_structure_head .pkp_navigation_primary ul li {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.pkp_structure_head .pkp_navigation_primary ul li>a,
.pkp_structure_head .pkp_navigation_primary ul li>a:link,
.pkp_structure_head .pkp_navigation_primary ul li>a:visited,
header .pkp_navigation_primary ul li>a,
header .pkp_navigation_primary ul li>a:link,
header .pkp_navigation_primary ul li>a:visited {
    color: #edb009 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    /* Padding seimbang kiri-kanan per item */
    padding: 14px 16px !important;
    display: block !important;
    visibility: visible !important;
    border-bottom: none !important;
    transition: color 0.15s, background 0.15s !important;
}

.pkp_structure_head .pkp_navigation_primary ul li>a:hover,
.pkp_structure_head .pkp_navigation_primary ul li>a:focus,
.pkp_structure_head .pkp_navigation_primary ul li.current>a,
header .pkp_navigation_primary ul li>a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

/* === DROPDOWN NAVIGASI === */
.pkp_structure_head .pkp_navigation_primary ul ul {
    display: none !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #903411 !important;
    border: none !important;
    border-top: 2px solid #edb009 !important;
    min-width: 200px !important;
    padding: 4px 0 !important;
    z-index: 100 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

.pkp_structure_head .pkp_navigation_primary ul li:hover>ul {
    display: flex !important;
}

.pkp_structure_head .pkp_navigation_primary ul ul li {
    display: block !important;
    width: 100% !important;
}

.pkp_structure_head .pkp_navigation_primary ul ul li a {
    color: #edb009 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-bottom: none !important;
    display: block !important;
    width: 100% !important;
}

.pkp_structure_head .pkp_navigation_primary ul ul li a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

/* === OVERRIDE GLOBAL: paksa warna link navigasi agar tidak teroverride tema OJS === */
header a,
.pkp_structure_head a {
    color: #edb009 !important;
    font-family: 'Poppins', sans-serif !important;
}

header .pkp_navigation_primary a,
header .pkp_navigation_primary a:link,
header .pkp_navigation_primary a:visited,
header .pkp_navigation_primary a:active {
    color: #edb009 !important;
    font-family: 'Poppins', sans-serif !important;
    text-decoration: none !important;
}

header .pkp_navigation_primary a:hover {
    color: #ffffff !important;
}

@media (max-width: 767px) {
    .pkp_structure_head::before {
        padding-top: 25% !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Nav utama: bungkus item agar tidak terpotong */
    .pkp_structure_head .pkp_navigation_primary>ul,
    .pkp_structure_head .pkp_navigation_primary_row>ul,
    .pkp_structure_head ul.pkp_navigation_primary {
        flex-wrap: wrap !important;
        padding: 0 0 46px 0 !important;
        /* ruang bawah agar tidak tertindih user nav */
    }

    .pkp_structure_head .pkp_navigation_primary ul li>a {
        padding: 10px 10px !important;
        font-size: 11px !important;
    }

    /* User nav: pindah ke baris bawah, rata kanan, full width */
    .pkp_structure_head .pkp_navigation_user {
        position: static !important;
        width: 100% !important;
        justify-content: flex-end !important;
        background: rgba(0, 0, 0, 0.25) !important;
        padding: 6px 12px !important;
        height: auto !important;
    }

    .pkp_structure_head .pkp_navigation_user ul li>a:not([href*="login"]):not([href*="register"]):not([href*="logout"]) {
        font-size: 11px !important;
        padding: 5px 12px 5px 6px !important;
    }

    .pkp_structure_head .pkp_navigation_user ul li a[href*="login"],
    .pkp_structure_head .pkp_navigation_user ul li a[href*="register"] {
        font-size: 10px !important;
        padding: 5px 12px !important;
    }

    /* Dropdown user: buka ke kiri pada mobile agar tidak keluar layar */
    .pkp_structure_head .pkp_navigation_user ul li ul,
    .pkp_structure_head .pkp_navigation_user ul>li>ul {
        right: 0 !important;
        left: auto !important;
        min-width: 160px !important;
    }
}




/* =============================================
   FIX V2 — OVERRIDE ORANYE OJS SECARA MENYELURUH
   Target: semua kemungkinan selektor block title
   di sidebar OJS 3.x (termasuk BAHASA, TEMPLATE,
   blok kustom, dan navigation block)
   ============================================= */

/* ─── SEMUA KEMUNGKINAN SELEKTOR JUDUL BLOCK SIDEBAR ─── */
.pkp_block h2,
.pkp_block h3,
.pkp_block .title,
.pkp_block>h2,
.pkp_block>h3,
.pkp_block>.title,
.pkp_block_language h2,
.pkp_block_language .title,
.pkp_block_information h2,
.pkp_block_information .title,
.pkp_block_custom h2,
.pkp_block_custom .title,
.pkp_block_browse h2,
.pkp_block_browse .title,
.pkp_block_developed_by h2,
.pkp_block_developed_by .title,
[id^="custom-block"] h2,
[id^="custom-block"] .title,
aside h2,
aside .title,
.sidebar h2,
.sidebar .title,
.side_widget h2,
.side_widget .title,
#sidebarLang h2,
#sidebarLang .title,
.widget h2,
.widget .title {
    background-color: #903411 !important;
    color: #edb009 !important;
    border-color: #903411 !important;
    border-top-color: #edb009 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    display: block !important;
}

/* ─── OVERRIDE WARNA BACKGROUND YANG MUNGKIN DISET VIA inline / tema ─── */
.pkp_block {
    border-top: 2px solid #edb009 !important;
    border-top-color: #edb009 !important;
}

/* ─── AGRESIF: tangkap semua elemen dengan background oranye bawaan OJS ─── */
/* OJS Default Theme menggunakan warna primer ~#E05010 atau #D14A10  */
/* Kita override via filter attribute selector dan class pattern      */

/* Semua heading di area sidebar/aside yang masih oranye */
#pkp_content_main aside h2,
#pkp_content_main aside h3,
#pkp_content_main aside .title,
#pkp_content_sidebar h2,
#pkp_content_sidebar h3,
#pkp_content_sidebar .title {
    background-color: #903411 !important;
    color: #edb009 !important;
}

/* ─── TOMBOL / LINK STYLE SEPERTI TOMBOL (TEMPLATE ARTICLE dll.) ─── */
/* Jika "TEMPLATE ARTICLE" adalah link/button di dalam block, bukan h2 */
.pkp_block a.pkp_button,
.pkp_block input[type="submit"],
.pkp_block .pkp_helpers_align_center a,
.pkp_block>a[class],
.pkp_block ul li a.btn,
.pkp_block>p>a,
#sidebarLang a,
.pkp_block_language a,
.pkp_block_language select,
.pkp_block_language input[type="submit"] {
    color: #edb009 !important;
}

/* ─── OVERRIDE WARNA PRIMER OJS — CSS CUSTOM PROPERTIES TEMA ─── */
/* Beberapa tema OJS 3.3+ menggunakan CSS variables ini */
:root {
    --primary-color: #903411 !important;
    --primary-color-dark: #5c1f00 !important;
    --color-accent: #edb009 !important;
    --c-primary-500: #903411 !important;
    --c-primary-700: #5c1f00 !important;
    --c-primary-300: #b94c25 !important;
    --highlight-color: #edb009 !important;
}

/* ─── TANGKAP POLA WARNA ORENS SPESIFIK OJS DEFAULT THEME ─── */
/* Warna orens bawaan OJS Default Theme: #E05010 / #CC4500 / #f0663c */
/* Paksa override di level tertinggi */
*[style*="background-color: #E05"],
*[style*="background-color: #e05"],
*[style*="background-color: #CC4"],
*[style*="background-color: #cc4"],
*[style*="background: #E05"],
*[style*="background: #e05"] {
    background-color: #903411 !important;
}

/* ─── RESPONSIF MOBILE ─── */
@media (max-width: 767px) {

    .pkp_block h2,
    .pkp_block .title,
    aside h2,
    aside .title {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
}