/* ============================================================================
   CUSTOMARY LAW — Custom CSS Override
   ----------------------------------------------------------------------------
   Tujuan : 1. Dropdown menu utama (ABOUT, dll) → maroon (samakan header)
            2. Garis hijau/hitam di bawah header banner → HILANG
            3. Underline item menu aktif (mis. ABOUT) → maroon
   Pasang : OJS Admin → Settings → Website → Appearance →
            Journal Style Sheet (upload file ini), lalu hard refresh
            (Ctrl+Shift+R) untuk membersihkan cache browser.
   Versi  : 1.2 (nuclear override garis hijau)
   ============================================================================ */

/* ---- Palet warna jurnal ---- */
:root {
  --cl-maroon:       #6b1d1d;  /* maroon utama, samakan header banner */
  --cl-maroon-dark:  #4a1414;  /* maroon gelap untuk hover/active state */
  --cl-maroon-light: #8a2a2a;  /* maroon terang (cadangan) */
  --cl-gold:         #c9a352;  /* gold dari logo CL untuk aksen */
}

/* ============================================================================
   1. DROPDOWN MENU UTAMA (ABOUT, dll)
   ============================================================================ */

/* ---- Container dropdown ---- */
.pkp_navigation_primary .dropdown-menu,
.pkp_nav_list ul,
.pkp_navigation_primary li ul,
nav.pkp_site_nav_menu li ul,
ul.pkp_navigation_primary ul,
.pkp_navigation_primary_row .dropdown-menu {
  background: var(--cl-maroon) !important;
  background-color: var(--cl-maroon) !important;
  border: 1px solid var(--cl-maroon-dark) !important;
  border-radius: 3px !important;
  box-shadow: 0 4px 12px rgba(74, 20, 20, 0.35) !important;
}

/* ---- Item link di dalam dropdown (default state) ---- */
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary .dropdown-menu .dropdown-item,
.pkp_nav_list ul li a,
.pkp_navigation_primary li ul li a,
nav.pkp_site_nav_menu li ul li a {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border-left-color: transparent !important;
  text-decoration: none !important;
}

/* ---- Hover & focus state ---- */
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus,
.pkp_navigation_primary .dropdown-menu .dropdown-item:hover,
.pkp_navigation_primary .dropdown-menu .dropdown-item:focus,
.pkp_nav_list ul li a:hover,
.pkp_nav_list ul li a:focus,
.pkp_navigation_primary li ul li a:hover,
.pkp_navigation_primary li ul li a:focus,
nav.pkp_site_nav_menu li ul li a:hover,
nav.pkp_site_nav_menu li ul li a:focus {
  background: var(--cl-maroon-dark) !important;
  background-color: var(--cl-maroon-dark) !important;
  color: var(--cl-gold) !important;
  border-left-color: var(--cl-gold) !important;
  outline: 0 !important;
}

/* ---- Active state ---- */
.pkp_navigation_primary .dropdown-menu .dropdown-item.active,
.pkp_navigation_primary .dropdown-menu .dropdown-item:active,
.pkp_nav_list ul li.current a,
.pkp_nav_list ul li a.active {
  background-color: var(--cl-maroon-dark) !important;
  color: var(--cl-gold) !important;
}

/* ---- Divider antar item ---- */
.pkp_navigation_primary .dropdown-menu .dropdown-divider {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* ---- Header dropdown ---- */
.pkp_navigation_primary .dropdown-menu .dropdown-header {
  color: var(--cl-gold) !important;
}

/* ============================================================================
   2. GARIS HIJAU/HITAM DI BAWAH HEADER BANNER — NUCLEAR OVERRIDE
   ----------------------------------------------------------------------------
   Sumber garis bisa dari banyak tempat. Override SEMUA kemungkinan:
   - border-bottom header / wrapper / nav
   - box-shadow header
   - background-color body atau container parent yang nongol
   - pseudo-element ::before / ::after
   - elemen kosong di antara header & nav
   ============================================================================ */

/* ---- Kandidat utama: header & wrapper ---- */
.pkp_structure_head,
header.pkp_structure_head,
#headerNavigationContainer,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---- Pseudo-element header (sumber garis tersembunyi paling sering) ---- */
.pkp_structure_head::after,
.pkp_structure_head::before,
header.pkp_structure_head::after,
header.pkp_structure_head::before,
.pkp_head_wrapper::after,
.pkp_head_wrapper::before,
#headerNavigationContainer::after,
#headerNavigationContainer::before {
  display: none !important;
  content: none !important;
  border: none !important;
  background: transparent !important;
  height: 0 !important;
}

/* ---- Nav row (yang ada CURRENT, ARCHIVES, dll) ---- */
.pkp_navigation_primary_row,
nav.pkp_site_nav_menu,
.pkp_site_nav_menu,
.pkp_navigation_primary_wrapper {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---- Pseudo-element nav row ---- */
.pkp_navigation_primary_row::before,
.pkp_navigation_primary_row::after,
nav.pkp_site_nav_menu::before,
nav.pkp_site_nav_menu::after {
  display: none !important;
  content: none !important;
  border: none !important;
  background: transparent !important;
  height: 0 !important;
}

/* ---- Body & page structure (kalau garis dari background body yg nongol) ---- */
body.pkp_page_index,
.pkp_structure_page {
  border: none !important;
}

/* ---- Container parent yang sering jadi sumber background hijau di OJS bootstrap3 theme ---- */
.pkp_structure_page > .pkp_structure_head + *,
.pkp_structure_head + .pkp_navigation_primary_row {
  border-top: none !important;
  margin-top: 0 !important;
}

/* ============================================================================
   3. UNDERLINE ITEM MENU UTAMA AKTIF (mis. ABOUT) → MAROON
   ============================================================================ */

.pkp_navigation_primary > li > a,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.active > a,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a:active,
.pkp_navigation_primary > li[aria-haspopup="true"] > a,
.pkp_navigation_primary > li.show > a {
  border-bottom-color: var(--cl-maroon) !important;
}

/* Item yang sedang dibuka dropdown-nya / aktif */
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.active > a,
.pkp_navigation_primary > li.show > a,
.pkp_navigation_primary > li > a[aria-expanded="true"] {
  border-bottom: 2px solid var(--cl-maroon) !important;
}

/* ============================================================================
   CATATAN
   ----------------------------------------------------------------------------
   - Jika garis hijau MASIH muncul setelah upload v1.2, itu artinya sumbernya
     ada di file gambar header (pageHeaderLogoImage_en_US.png) yang punya
     border hijau di bagian bawah image-nya — bukan dari CSS. Cek dengan
     klik kanan banner → Inspect → kalau garis itu BAGIAN dari <img>,
     berarti banner image yang harus diedit (di Photoshop / GIMP), bukan CSS.
   - Jika ada perubahan warna spesifik (mis. maroon journal CL ternyata bukan
     #6b1d1d), ubah variabel --cl-maroon di blok :root.
   ============================================================================ */