/* ============================================================
   RESKOMJURNAL — Custom Stylesheet OJS (v5)
   Layout: 2 kolom, sidebar kanan, tabel info jurnal
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

:root {
  --rj-navy:        #1e3a6e;
  --rj-navy-dark:   #16305e;
  --rj-navy-deep:   #0f1e3a;
  --rj-blue:        #2f5fcf;
  --rj-blue-light:  #4e8ef7;
  --rj-white:       #ffffff;
  --rj-gray-bg:     #f0f2f7;
  --rj-gray-border: #dde3ef;
  --rj-text-muted:  #5a6a88;
  --rj-text-main:   #1a2a4a;
  --rj-text-nav:    #d6e6ff;
}

body, * {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  box-sizing: border-box !important;
}

/* ============================================================
   TOP BAR
   ============================================================ */
#navigationUser,
.pkp_navigation_user,
ul#navigationUser {
  background-color: var(--rj-navy-deep) !important;
  padding: 4px 0 !important;
}
#navigationUser a,
.pkp_navigation_user a {
  color: #a0bfe0 !important;
  font-size: 12px !important;
}
#navigationUser a:hover { color: var(--rj-white) !important; }

/* ============================================================
   HEADER — LOGO TENGAH
   ============================================================ */
.pkp_structure_head,
header.pkp_structure_head {
  background-color: var(--rj-navy) !important;
  border-bottom: 3px solid var(--rj-blue) !important;
  padding: 18px 0 !important;
  text-align: center !important;
}
.pkp_structure_head > *,
.pkp_structure_head .pkp_header_wrapper,
.pkp_structure_head > div,
#headerLogo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  float: none !important;
  width: 100% !important;
  text-align: center !important;
}
.pkp_structure_head img,
#headerLogo img {
  display: block !important;
  margin: 0 auto !important;
  max-height: 80px !important;
  width: auto !important;
}
.pkp_site_name,
.pkp_site_name a,
h1.pkp_site_name,
h1.pkp_site_name a {
  display: block !important;
  text-align: center !important;
  color: var(--rj-white) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  margin: 6px auto 0 !important;
}

/* ============================================================
   NAVIGASI — TENGAH, PUTIH, TANPA HIJAU
   ============================================================ */
nav.pkp_navigation_primary,
.pkp_navigation_primary,
#navigationPrimary,
ul#navigationPrimary {
  background-color: var(--rj-navy-dark) !important;
  background:       var(--rj-navy-dark) !important;
  border-bottom: 2px solid rgba(78,142,247,0.3) !important;
  display: flex !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}
nav.pkp_navigation_primary ul,
.pkp_navigation_primary ul,
#navigationPrimary ul,
ul#navigationPrimary {
  background-color: var(--rj-navy-dark) !important;
  background:       var(--rj-navy-dark) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
nav.pkp_navigation_primary li,
.pkp_navigation_primary li,
#navigationPrimary li,
ul#navigationPrimary li {
  background-color: transparent !important;
  background: transparent !important;
}
nav.pkp_navigation_primary li a,
.pkp_navigation_primary li a,
#navigationPrimary li a,
ul#navigationPrimary li a {
  color: var(--rj-text-nav) !important;
  background-color: transparent !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 11px 18px !important;
  display: block !important;
  border-bottom: 3px solid transparent !important;
  text-decoration: none !important;
}
nav.pkp_navigation_primary li a:hover,
.pkp_navigation_primary li a:hover,
#navigationPrimary li a:hover,
nav.pkp_navigation_primary li.current > a {
  color: var(--rj-white) !important;
  background-color: rgba(78,142,247,0.12) !important;
  border-bottom-color: #4e8ef7 !important;
}
.pkp_search, a.pkp_search { color: var(--rj-white) !important; background: transparent !important; }

nav input[type="text"], nav input[type="search"] {
  background-color: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 6px !important;
  color: var(--rj-white) !important;
  padding: 6px 12px !important;
}
nav input::placeholder { color: rgba(255,255,255,0.5) !important; }
nav button[type="submit"] {
  background-color: var(--rj-blue) !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--rj-white) !important;
  padding: 6px 14px !important;
}

nav.pkp_navigation_primary ul ul,
.pkp_navigation_primary ul ul {
  background-color: var(--rj-navy) !important;
  border: 1px solid rgba(78,142,247,0.3) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
  position: absolute !important;
  z-index: 999 !important;
  flex-direction: column !important;
  min-width: 160px !important;
}
nav.pkp_navigation_primary ul ul li a { color: #d6e6ff !important; border-bottom: none !important; }
nav.pkp_navigation_primary ul ul li a:hover { background-color: rgba(78,142,247,0.2) !important; color: var(--rj-white) !important; }

/* ============================================================
   LAYOUT UTAMA — 2 KOLOM
   ============================================================ */
.pkp_structure_content,
#pkp_content_main {
  background-color: var(--rj-gray-bg) !important;
}
.pkp_structure_main {
  background-color: var(--rj-gray-bg) !important;
  padding: 16px !important;
}

/* ============================================================
   SIDEBAR — MIRIP REFERENSI
   ============================================================ */
.pkp_sidebar {
  padding: 16px 0 16px 0 !important;
}
.pkp_sidebar .pkp_block,
aside .pkp_block {
  background: var(--rj-white) !important;
  border: 0.5px solid var(--rj-gray-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
}
.pkp_block h2,
.pkp_block .title,
aside .pkp_block h2 {
  background-color: var(--rj-navy) !important;
  color: var(--rj-white) !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}
.pkp_block .pkp_block_content,
.pkp_block > ul,
.pkp_block > div:not(.title):not(h2) {
  padding: 10px 12px !important;
}
.pkp_block ul { list-style: none !important; padding: 8px 0 !important; }
.pkp_block ul li { border-bottom: 0.5px solid var(--rj-gray-border) !important; }
.pkp_block ul li:last-child { border-bottom: none !important; }
.pkp_block ul li a {
  color: var(--rj-blue) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  display: block !important;
}
.pkp_block ul li a:hover { color: var(--rj-navy) !important; background: #f0f4ff !important; }

/* Login block */
.pkp_block_login input[type="text"],
.pkp_block_login input[type="password"] {
  width: 100% !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--rj-gray-border) !important;
  border-radius: 4px !important;
  background: #f8f9fc !important;
  margin-bottom: 6px !important;
}
.pkp_block_login input[type="submit"],
.pkp_block_login button[type="submit"] {
  width: 100% !important;
  background: var(--rj-navy) !important;
  color: var(--rj-white) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin-top: 4px !important;
}
.pkp_block_login input[type="submit"]:hover { background: var(--rj-blue) !important; }
.pkp_block_login label {
  font-size: 11px !important;
  color: var(--rj-text-muted) !important;
  display: block !important;
  margin-bottom: 3px !important;
}

/* Search block */
.pkp_block_browse input[type="text"],
.block_search input[type="text"] {
  width: 100% !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--rj-gray-border) !important;
  border-radius: 4px !important;
  background: #f8f9fc !important;
  margin-bottom: 6px !important;
}
.pkp_block_browse select,
.block_search select {
  width: 100% !important;
  font-size: 12px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--rj-gray-border) !important;
  border-radius: 4px !important;
  background: #f8f9fc !important;
  margin-bottom: 6px !important;
}
.pkp_block_browse input[type="submit"],
.block_search input[type="submit"] {
  width: 100% !important;
  background: var(--rj-navy) !important;
  color: var(--rj-white) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 7px !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

/* ============================================================
   KONTEN ARTIKEL & ISSUE
   ============================================================ */
h1, h2, h3, h4 { color: var(--rj-navy) !important; font-weight: 600 !important; }
a { color: var(--rj-blue) !important; text-decoration: none !important; }
a:hover { color: var(--rj-blue-light) !important; text-decoration: underline !important; }

.pkp_structure_main p,
.pkp_structure_main div,
.pkp_structure_main span {
  color: var(--rj-text-main) !important;
}

.obj_article_summary,
.obj_issue_summary {
  background: var(--rj-white) !important;
  border: 0.5px solid var(--rj-gray-border) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
}
.obj_article_summary .title a {
  color: var(--rj-navy) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.obj_article_summary .title a:hover { color: var(--rj-blue) !important; }
.obj_article_summary .authors,
.obj_article_summary .pages {
  color: var(--rj-text-muted) !important;
  font-size: 12px !important;
}

/* Tabel metadata artikel */
.pkp_structure_main table {
  border-collapse: collapse !important;
  width: 100% !important;
  font-size: 13px !important;
}
.pkp_structure_main table th {
  background-color: var(--rj-navy) !important;
  color: var(--rj-white) !important;
  padding: 9px 12px !important;
  text-align: left !important;
  font-size: 12px !important;
}
.pkp_structure_main table td {
  padding: 8px 12px !important;
  border-bottom: 0.5px solid var(--rj-gray-border) !important;
  color: var(--rj-text-main) !important;
  vertical-align: top !important;
}
.pkp_structure_main table tr:hover td { background: #f0f4ff !important; }

/* Card konten umum */
.pkp_block {
  background: var(--rj-white) !important;
  border: 0.5px solid var(--rj-gray-border) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
}

/* Homepage image */
.homepage_image img {
  border-radius: 8px !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 14px !important;
}

/* Pengumuman */
.obj_announcement_summary {
  background: var(--rj-white) !important;
  border: 0.5px solid var(--rj-gray-border) !important;
  border-left: 3px solid var(--rj-blue) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
}
.obj_announcement_summary h3 a { color: var(--rj-navy) !important; font-weight: 600 !important; }
.obj_announcement_summary .date { color: var(--rj-text-muted) !important; font-size: 11px !important; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.pkp_navigation_breadcrumbs {
  font-size: 12px !important;
  color: var(--rj-text-muted) !important;
  padding: 8px 0 !important;
  margin-bottom: 10px !important;
}
.pkp_navigation_breadcrumbs a { color: var(--rj-blue) !important; }
.pkp_navigation_breadcrumbs a:hover { color: var(--rj-navy) !important; }

/* ============================================================
   TOMBOL UMUM
   ============================================================ */
.pkp_button_primary, .btn.btn-primary {
  background-color: var(--rj-blue) !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--rj-white) !important;
  font-size: 13px !important;
  padding: 8px 18px !important;
}
.pkp_button_primary:hover { background-color: var(--rj-navy) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.pkp_structure_footer,
footer.pkp_structure_footer {
  background-color: var(--rj-navy-deep) !important;
  color: #a0bfe0 !important;
  border-top: 3px solid var(--rj-blue) !important;
  padding: 18px 0 !important;
  font-size: 12px !important;
  text-align: center !important;
}
.pkp_structure_footer p,
.pkp_structure_footer div { color: #a0bfe0 !important; }
.pkp_structure_footer a { color: var(--rj-blue-light) !important; }
.pkp_structure_footer a:hover { color: var(--rj-white) !important; }
.pkp_structure_footer strong { color: var(--rj-white) !important; }

/* ============================================================
   FORM INPUT UMUM
   ============================================================ */
input[type="text"]:not(nav input),
input[type="email"],
input[type="password"],
textarea, select {
  border: 1px solid var(--rj-gray-border) !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  background: var(--rj-white) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--rj-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(47,95,207,0.1) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .pkp_site_name a { font-size: 16px !important; }
  nav.pkp_navigation_primary ul { justify-content: flex-start !important; }
  nav.pkp_navigation_primary li a { font-size: 12px !important; padding: 9px 10px !important; }
}

/* ============================================================
   ADDITIONAL CONTENT — class untuk Isi Tambahan
   ============================================================ */
.rj-wrap { margin-top:20px; border-top:2px solid #dde3ef; padding-top:16px; }
.rj-intro-box { background:#f0f4ff; border-left:4px solid #1e3a6e; padding:12px 16px; border-radius:0 6px 6px 0; margin-bottom:20px; font-size:13px; line-height:1.7; color:#2a3a5a; }
.rj-intro-box strong { color:#1e3a6e; }
.rj-card { background:#ffffff; border:1px solid #dde3ef; border-radius:8px; padding:16px; margin-bottom:16px; }
.rj-card-top { display:flex; gap:14px; align-items:flex-start; margin-bottom:14px; }
.rj-cover-box { width:64px; height:84px; background:#1e3a6e; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; text-align:center; padding:6px; }
.rj-cover-box span { color:#9ec4f8; font-size:9px; font-weight:600; line-height:1.4; }
.rj-card-body { flex:1; }
.rj-journal-name { font-size:15px; font-weight:600; color:#1e3a6e; margin:0 0 10px 0; line-height:1.3; }
.rj-meta { width:100%; border-collapse:collapse; font-size:12.5px; }
.rj-meta td { padding:3px 6px 3px 0; vertical-align:top; color:#1a2a4a; border:none; }
.rj-meta td:first-child { color:#5a6a88; width:130px; white-space:nowrap; }
.rj-meta a { color:#2f5fcf; text-decoration:none; }
.rj-freq { font-size:12px; color:#5a6a88; font-style:italic; margin:8px 0 0 0; }
.rj-divider { border:none; border-top:1px solid #dde3ef; margin:12px 0; }
.rj-scope { font-size:12.5px; color:#3a4a6a; line-height:1.65; margin-bottom:12px; }
.rj-scope strong { color:#1e3a6e; }
.rj-scope ul { margin:6px 0 8px 18px; padding:0; }
.rj-scope ul li { margin-bottom:3px; }
.rj-links { display:flex; gap:6px; flex-wrap:wrap; }
.rj-links a { font-size:12px; color:#2f5fcf; text-decoration:none; font-weight:500; padding:5px 12px; background:#f0f4ff; border:1px solid #c5d3f0; border-radius:4px; }
.rj-links a:hover { background:#1e3a6e; color:#ffffff; border-color:#1e3a6e; }

/* ============================================================
   HAPUS HIJAU — OVERRIDE PAKSA SEMUA ELEMEN
   ============================================================ */

/* Target semua elemen yang mungkin hijau */
nav, nav *, nav ul, nav ul *,
nav li, nav li *,
.pkp_navigation_primary,
.pkp_navigation_primary *,
#navigationPrimary,
#navigationPrimary *,
ul#navigationPrimary,
ul#navigationPrimary *,
.navbar, .navbar *,
header nav, header nav * {
  background-color: transparent !important;
  background: transparent !important;
}

/* Paksa nav wrapper tetap navy */
nav.pkp_navigation_primary,
.pkp_navigation_primary,
#navigationPrimary,
ul#navigationPrimary,
nav.pkp_navigation_primary > ul,
.pkp_navigation_primary > ul {
  background-color: #16305e !important;
  background: #16305e !important;
}

/* Paksa setiap li tetap transparan di atas navy */
nav.pkp_navigation_primary ul li,
.pkp_navigation_primary ul li,
#navigationPrimary ul li {
  background-color: transparent !important;
  background: transparent !important;
}

/* Search wrapper — ini yang biasanya hijau */
nav.pkp_navigation_primary .search_form,
nav.pkp_navigation_primary form,
nav.pkp_navigation_primary .pkp_search_form,
nav.pkp_navigation_primary li.pkp_search,
nav.pkp_navigation_primary li:last-child,
nav.pkp_navigation_primary li:last-child *,
.pkp_navigation_primary .search_form,
.pkp_navigation_primary form,
.pkp_navigation_primary li:last-child,
#navigationPrimary li:last-child,
#navigationPrimary li:last-child *,
#navigationPrimary form,
#navigationPrimary .search_form,
.pkp_search_form,
.search_form {
  background-color: #16305e !important;
  background: #16305e !important;
}

/* Paksa input search */
nav input[type="text"],
nav input[type="search"],
.pkp_navigation_primary input,
#navigationPrimary input,
.search_form input {
  background-color: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
}

/* Paksa tombol search */
nav button, nav input[type="submit"],
.pkp_navigation_primary button,
#navigationPrimary button {
  background-color: #2f5fcf !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

/* Target class spesifik OJS 3.5 untuk search bar */
.pkp_nav_search,
.pkp_nav_search *,
li.pkp_nav_search,
li.pkp_nav_search * {
  background-color: #16305e !important;
  background: #16305e !important;
}

/* Hapus background dari elemen dengan inline style */
[style*="background-color: green"],
[style*="background: green"],
[style*="background-color:#0f0"],
[style*="background:#0f0"] {
  background-color: #16305e !important;
  background: #16305e !important;
}