/* ===================================================================
// CSS for JURNAL HERITAGE
// Adapted and modified from Jurnal Register's CSS.
// =================================================================== */

/* @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); */

body {
  font-family: 'Roboto', sans-serif;
  background-color: #f0f2f5; /* Memberi sedikit warna pada background body */
}


/* ===================================================================
// 1. MAIN PAGE STRUCTURE (Struktur Halaman Utama)
// =================================================================== */

@media (min-width: 992px) {
  .pkp_structure_page {
    overflow: hidden;
    margin: 20px auto;
    max-width: 1160px;
    background: #fff;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); /* Shadow yang lebih soft */
    border: 1px solid #ddd;
  }
}

.pkp_structure_content {
  font-size: 15px;
  margin-bottom: 0.3em;
}

/* ===================================================================
// 2. HEADER (Logo dan Navigasi)
// =================================================================== */
.pkp_head_wrapper {
    border-bottom: 3px solid #244770; /* Warna biru dari sidebar */
}

.pkp_site_name .is_img img {
  max-height: 120px; /* Disesuaikan agar logo banner tidak terlalu tinggi */
  width: auto;
  padding: 10px 0;
}

/* ===================================================================
// 3. MAIN CONTENT AREA (Area Konten Utama)
// =================================================================== */

/* Announcements Section */
.cmp_announcements {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e1e1e1;
    background-color: #f9f9f9;
    border-radius: 5px;
}
.cmp_announcements h2 {
    border-bottom: 2px solid #244770;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.cmp_announcements .summary {
    text-align: justify;
    line-height: 1.6;
}

/* Current Issue Section */
.current_issue {
    padding: 15px;
}
.current_issue > h2 {
    border-bottom: 2px solid #244770;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.current_issue .current_issue_title {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
}
.current_issue .heading .description {
    text-align: justify;
    margin-bottom: 15px;
    background-color: #f0f8ff;
    padding: 10px;
    border-left: 4px solid #0e94ed;
}

/* Article List Styling */
.obj_article_summary {
  padding: 1em 1.5em;
  margin-bottom: 10px;
  background-color: #fafbfb;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-left: 4px solid transparent;
  transition: border-left 0.3s;
}
.obj_article_summary:hover {
    border-left: 4px solid #0e94ed;
}
.obj_article_summary .title {
  font-weight: 600;
  font-size: 1.1em;
}
.obj_article_summary .title a {
  color: #333;
  text-decoration: none;
}
.obj_article_summary .title a:hover {
  color: #244770;
}
.obj_article_summary .authors {
  font-style: italic;
  color: #555;
  margin-top: 5px;
}
.obj_article_summary .galleys_links {
  margin-top: 10px;
  padding-left: 0;
  list-style-type: none;
}
.obj_article_summary .obj_galley_link.pdf {
    font-weight: 700;
    text-transform: Capitalize;
    background: #378ada; /* Warna merah untuk PDF */
    color: #ffffff !important;
    border: none;
    padding: 5px 15px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
}
.obj_article_summary .obj_galley_link.pdf:hover {
    background: #9bcef1;
}

/* Read More Link */
.current_issue .read_more {
  display: inline-block;
  padding: 8px 16px;
  background-color: #244770;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  margin-top: 15px;
  transition: background-color 0.3s;
}
.current_issue .read_more:hover {
  background-color: #0e94ed;
}

/* Additional Content (Indexer Logos) */
.additional_content {
  padding: 15px;
  margin-top: 20px;
  border-top: 1px solid #eee;
}
.additional_content div a img {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px;
  transition: box-shadow 0.3s;
  max-width: 180px; /* Batasi lebar agar rapi */
  height: 60px; /* Samakan tinggi */
  object-fit: contain; /* Agar logo tidak gepeng */
}
.additional_content div a img:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}


/* ===================================================================
// 4. SIDEBAR (Kolom Samping)
// =================================================================== */

.pkp_structure_sidebar .pkp_block {
    margin-bottom: 20px;
}
.pkp_structure_sidebar .pkp_block .title {
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    background-color: #437d91; /* Warna hijau kebiruan dari gambar */
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 10px;
}
.pkp_structure_sidebar .pkp_block .content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.pkp_structure_sidebar .pkp_block .content ul {
    list-style: none;
    padding: 0;
}

/* Styling Khusus untuk Tabel "MENU UTAMA" */
#customblock-aboutnew .content table {
    width: 100% !important;
    border-collapse: collapse;
}
#customblock-aboutnew .content table td {
    border-bottom: 1px solid #ffffff;
    text-align: center;
    vertical-align: middle;
}
#customblock-aboutnew .content table a {
    display: block;
    padding: 10px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}
/* Style untuk header menu */
#customblock-aboutnew .content table tr:first-child td {
    background-color: #244770;
}
/* Style untuk item menu */
#customblock-aboutnew .content table td[style*="background-color: #0e94ed;"] {
    background-color: #0e94ed;
}
#customblock-aboutnew .content table td[style*="background-color: #0e94ed;"]:hover {
    background-color: #244770;
}

/* ===================================================================
// 5. FOOTER (Bagian Bawah Halaman)
// =================================================================== */
.pkp_structure_footer_wrapper {
    background-color: #f8f9fa;
    padding: 20px;
    border-top: 3px solid #244770;
}
.pkp_footer_content .footerkolom .footer1 {
    line-height: 1.7;
}
.pkp_footer_content iframe {
    border: 1px solid #ccc !important;
    max-width: 100%;
}
.pkp_brand_footer {
  display: none !important; /* Sembunyikan footer "Powered by OJS" */
}

/* ===================================================================
// 6. RESPONSIVE DESIGN
// =================================================================== */
@media screen and (max-width: 768px) {
  .pkp_navigation_primary_row {
    height: unset;
  }
  .pkp_site_name .is_img img {
    max-height: 80px;
  }
}



/* ===================================================================
// 2. HEADER (Logo dan Navigasi) - REVISED FOR JURNAL REGISTER STYLE
// =================================================================== */

/* Menghapus background biru tua dari seluruh area header */
.pkp_structure_head,
.pkp_head_wrapper {
/*    background: #fff !important;  Paksa background menjadi putih */
    border-bottom: none; /* Hapus border bawah yang lama */
}

/* Mengatur agar banner mengisi seluruh area atas tanpa padding */
.pkp_site_name_wrapper {
    padding: 0;
}

/* Styling untuk gambar banner */
.pkp_site_name .is_img img {
  width: 1160px;             /* Gambar mengisi 100% lebar container */
  height: auto;            /* Tinggi otomatis menyesuaikan rasio */
  max-height: 160px;       /* Batas tinggi maksimal agar tidak terlalu besar */
  object-fit: cover;       /* Memastikan gambar menutupi area tanpa distorsi */
  display: block;          /* Menghilangkan spasi aneh di bawah gambar */
}

/* Membuat bar menu navigasi terpisah di bawah banner */
.pkp_navigation_primary_row {
  background-color: #2c3e50; /* Warna biru tua yang elegan untuk bar menu */
  border-top: 1px solid #46586b;
  border-bottom: 1px solid #46586b;
}

/* Styling untuk link menu agar terlihat jelas di background gelap */
#navigationPrimary > li > a {
    color: #ffffff;
    font-weight: 600;
    padding: 15px 12px;
    text-transform: uppercase;
    font-size: 14px;
}
#navigationPrimary > li > a:hover {
    background-color: #34495e; /* Warna hover yang sedikit lebih terang */
    color: #ffffff;
}

/* Styling untuk dropdown menu "About" */
.dropdown-menu {
    background-color: #34495e;
    border: 1px solid #46586b;
}
.dropdown-menu > li > a {
    color: #ecf0f1;
}
.dropdown-menu > li > a:hover {
    background-color: #2c3e50;
    color: #ffffff;
}

/* Ikon dan teks search */
.pkp_search.pkp_search_desktop {
    color: #ffffff;
}
.pkp_search.pkp_search_desktop:hover {
    color: #bdc3c7;
}

.pkp_nav_list ul {
    background: #2b51a8;
}

ul#navigationPrimary {
    padding: 0 0 0 10px;
}

/* ===================================================================
// 7. FINAL REVISED MOBILE CSS (HEADER & SLIDE-OUT MENU FIX)
// =================================================================== */

@media (max-width: 767px) {

  /* --- 7.1. HEADER BAR STYLING --- */

  /* Atur bar header utama */
  .pkp_head_wrapper {
    background-color: #2c3e50 !important;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    min-height: 60px;
  }

  /* Atur ulang gaya gambar banner untuk seluler */
  .pkp_site_name .is_img img {
    width: auto !important;
    max-height: 45px !important;
    object-fit: contain !important;
    margin-left: 15px;
  }

  /* Ikon hamburger berwarna putih */
  .pkp_site_nav_toggle span {
      color: #ffffff;
  }

  /* Hapus padding yang tidak perlu */
  .pkp_site_name {
    padding: 0 !important;
  }
  
  /* 
     !!! INI ADALAH BAGIAN YANG DIPERBAIKI !!!
     Kita MENGHAPUS aturan 'height:0' dan 'overflow:hidden' dari sini
     agar tema OJS dapat menangani menu dengan benar.
  */


  /* --- 7.2. SLIDE-OUT MENU STYLING (KETIKA DIKLIK) --- */

  /* Memberi background pada menu yang terbuka */
  .pkp_site_nav_menu.is_opened {
    background-color: #2c3e50;
  }

  /* Menata setiap item link di dalam menu yang terbuka */
  .pkp_site_nav_menu #navigationPrimary li a,
  .pkp_site_nav_menu #navigationUser li a {
    color: #ffffff;
    font-weight: bold;
    padding: 15px 20px;
    border-bottom: 1px solid #46586b; /* Garis pemisah antar menu */
    text-transform: uppercase;
    font-size: 14px;
    display: block;
    width: 100%;
  }

  /* Efek hover untuk item menu */
  .pkp_site_nav_menu #navigationPrimary li a:hover,
  .pkp_site_nav_menu #navigationUser li a:hover {
    background-color: #34495e;
  }

  /* Menata tombol close (X) agar kontras */
  .pkp_site_nav_menu.is_opened .pkp_site_nav_toggle:before {
    color: #ffffff;
    font-size: 24px;
  }
  
  /* Menata container logo di dalam menu slide-out */
  .pkp_site_nav_menu .pkp_site_name {
    border-bottom: 1px solid #46586b;
    background-color: #34495e;
  }

}

/* ===================================================================
// 8. FINAL CSS (CLEANED UP WITH YOUR SUGGESTION)
// =================================================================== */

/* --- 8.1 & 8.2 LAYOUT & SIDEBAR (Tidak ada perubahan) --- */
.pkp_page_article .obj_article_details { display: flex; flex-wrap: wrap; justify-content: space-between; }
.pkp_page_article .main_content { width: 67%; }
.pkp_page_article .article_sidebar { width: 30%; }
.article_sidebar { background-color: #f7f7f7; border: 1px solid #ddd; border-radius: 5px; padding: 15px; align-self: flex-start; }
.article_sidebar .obj_galley_link.pdf { display: block; background-color: #d32f2f; color: #ffffff !important; padding: 12px; text-align: center; font-weight: bold; text-transform: uppercase; text-decoration: none; border-radius: 4px; margin-bottom: 20px; transition: background-color 0.3s; }
.article_sidebar .obj_galley_link.pdf:hover { background-color: #b71c1c; }
.article_sidebar .obj_galley_link.pdf:before { content: '\f1c1'; font-family: 'FontAwesome'; margin-right: 10px; }
.article_sidebar .item { padding: 10px 0; border-bottom: 1px solid #e0e0e0; font-size: 14px; }
.article_sidebar .item:last-child { border-bottom: none; }
.article_sidebar .item .label { display: block; font-weight: bold; color: #333; margin-bottom: 5px; }

/* --- 8.3. STYLING KONTEN UTAMA (KOLOM KIRI) - REVISED --- */
.pkp_page_article .page_title { font-size: 2.2em; font-weight: 700; color: #2c3e50; line-height: 1.3; border-bottom: 3px solid #2c3e50; padding-bottom: 15px; margin-bottom: 20px; }
.pkp_page_article .authors { font-size: 1.1em; color: #555; margin-bottom: 25px; }
.pkp_page_article .authors .author { margin-bottom: 10px; }
.pkp_page_article .item.doi, .pkp_page_article .item.keywords { margin-bottom: 20px; }
.pkp_page_article .item.doi .label, .pkp_page_article .item.keywords .label { font-weight: bold; display: inline-block; margin-right: 10px; }

.pkp_page_article .item.abstract { background-color: #f9f9f9; border: 1px solid #e9e9e9; border-left: 5px solid #3498db; padding: 25px; border-radius: 5px; margin-top: 30px; }
.pkp_page_article .item.abstract .label { font-size: 1.6em; font-weight: 700; color: #2c3e50; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #ddd; }

.pkp_page_article .item.references { margin-top: 40px; padding-top: 20px; border-top: 2px solid #eee; }
.pkp_page_article .item.references .label { font-size: 1.5em; font-weight: 700; color: #2c3e50; margin-bottom: 15px; }

/*
   PERBAIKAN UTAMA MENGGUNAKAN SARAN ANDA:
   Lebih ringkas dan langsung menargetkan tag <p>
*/
.pkp_page_article .item.abstract p {
    text-align: justify;
    line-height: 1.8;
}

.pkp_page_article .item.references .value {
    text-align: justify;
    line-height: 1.7;
    font-size: 0.9em;
}


/* --- 8.4. RESPONSIVE --- */
@media (max-width: 991px) {
  .pkp_page_article .obj_article_details { flex-direction: column; }
  .pkp_page_article .main_content, .pkp_page_article .article_sidebar { width: 100%; }
  .article_sidebar { margin-top: 30px; }
}