/* ==========================================================
   CUSTOM CSS - JEDMA (meniru gaya JSHEE)
   Tempel di: Settings > Website > Appearance > CSS Code
   Gunakan bersama "Default Theme" bawaan OJS 3.x, base colour: Blue
   ========================================================== */

/* ---------- 1. Variabel warna utama ---------- */
:root {
  --jedma-primary: #0f5da0;      /* biru utama, mirip JSHEE */
  --jedma-primary-dark: #0a3f6e;
  --jedma-accent: #eef5fb;       /* biru muda untuk background lembut */
  --jedma-text: #2b2b2b;
}

/* ---------- 2. Navbar / Header atas ---------- */
.pkp_head_wrapper,
.pkp_structure_head {
  background-color: #ffffff;
  border-bottom: 3px solid var(--jedma-primary);
}

.pkp_site_name_wrapper a,
.pkp_site_name {
  color: var(--jedma-primary-dark);
  font-weight: 700;
}

.pkp_navigation_primary_row,
#navigationPrimary {
  background-color: var(--jedma-primary);
}

.pkp_navigation_primary_row a,
#navigationPrimary a {
  color: #ffffff !important;
}

.pkp_navigation_primary_row a:hover,
#navigationPrimary a:hover {
  background-color: var(--jedma-primary-dark) !important;
}

/* Logo header */
.pkp_head_wrapper img,
.pkp_page_header_logo,
#pkp_site_logo img {
  max-height: 72px;
  width: auto;
}

/* ---------- 3. Tombol utama (Register/Login/Search) ---------- */
.cmp_button,
.pkp_button,
button.pkp_button,
.pkp_button.primary {
  background-color: var(--jedma-primary);
  border-color: var(--jedma-primary);
  border-radius: 4px;
}

.cmp_button:hover,
.pkp_button:hover {
  background-color: var(--jedma-primary-dark);
}

/* ---------- 4. Current Issue - daftar artikel ---------- */
.issue_toc .article_summary,
.obj_article_summary {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 14px;
  background-color: #ffffff;
  transition: box-shadow 0.2s ease;
}

.obj_article_summary:hover {
  box-shadow: 0 2px 10px rgba(15, 93, 160, 0.15);
  border-color: var(--jedma-primary);
}

.obj_article_summary .title a,
.article_summary .title a {
  color: var(--jedma-primary-dark);
  font-weight: 600;
}

.obj_article_summary .authors,
.article_summary .authors {
  color: #555555;
  font-size: 0.92em;
}

/* Badge halaman / PDF link */
.obj_article_summary .item .pages {
  color: #888;
  font-size: 0.85em;
}

/* ---------- 5. Sidebar blocks (mis. Language, Information) ---------- */
.pkp_block,
.sidebar .pkp_block {
  background-color: var(--jedma-accent);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.pkp_block .title,
.pkp_block h2 {
  color: var(--jedma-primary-dark);
  border-bottom: 2px solid var(--jedma-primary);
  padding-bottom: 6px;
  font-size: 1rem;
}

/* ---------- 6. Journal info table (mirip tabel info di JSHEE) ---------- */
table.journal_info,
.page_summary table {
  width: 100%;
  border-collapse: collapse;
}

table.journal_info td,
.page_summary table td {
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
}

/* ---------- 7. Footer ---------- */
.pkp_structure_footer_wrapper,
#footer {
  background-color: var(--jedma-primary-dark);
  color: #f1f1f1;
  padding: 30px 0;
}

.pkp_structure_footer_wrapper a,
#footer a {
  color: #cfe4f7;
}

.pkp_structure_footer_wrapper a:hover,
#footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------- 8. Body & tipografi umum ---------- */
body {
  color: var(--jedma-text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3 {
  color: var(--jedma-primary-dark);
}

/* ---------- 9. Responsif kecil ---------- */
@media (max-width: 768px) {
  .pkp_head_wrapper img {
    max-height: 50px;
  }
}

/* ==========================================================
   REVISI HEADER BANNER - Gradasi Merah-Kuning (JEDMA)
   Tempel di: Settings > Website > Appearance > CSS Code
   PENTING: Ini MENGGANTIKAN kode "header-banner-besar.css"
   sebelumnya. Hapus dulu blok lama itu, baru tempel yang ini.
   ========================================================== */

/* ---------- Header wrapper: gradasi warna, TANPA gambar diregangkan ---------- */
.pkp_head_wrapper,
.pkp_structure_head,
#headerNavigationContainer {
  background-image: linear-gradient(
    100deg,
    #8e1b1b 0%,      /* merah gelap, kiri */
    #c92a2a 30%,     /* merah */
    #e0872a 65%,     /* oranye */
    #f2c14e 100%     /* kuning keemasan, kanan */
  );
  background-size: cover;
  padding: 14px 20px;          /* ukuran menyesuaikan isi, TIDAK pakai min-height besar */
  display: flex;
  align-items: center;
}

/* Logo pita OJS + JEdMa tetap ukuran asli, tidak diregangkan */
.pkp_head_wrapper img,
.pkp_page_header_logo,
#pkp_site_logo img {
  height: 55px;
  width: auto;
  object-fit: contain;
}

/* ---------- Baris menu navigasi menyatu rapi dengan gradasi ---------- */
.pkp_navigation_primary_row,
#navigationPrimary {
  background-color: rgba(20, 30, 55, 0.92);  /* biru gelap solid, kontras dgn merah-kuning */
}

.pkp_navigation_primary_row a,
#navigationPrimary a {
  color: #ffffff !important;
}

/* ---------- Info akun (webmaster/nama user) di kanan atas ---------- */
.pkp_head_wrapper .pkp_navigation_user,
.header-topbar,
#headerNavigationContainer .navbar-nav {
  color: #ffffff;
}

/* ---------- Responsif ---------- */
@media (max-width: 768px) {
  .pkp_head_wrapper img,
  .pkp_page_header_logo,
  #pkp_site_logo img {
    height: 40px;
  }
  .pkp_head_wrapper,
  .pkp_structure_head,
  #headerNavigationContainer {
    padding: 10px 12px;
  }
}