/**
 * ============================================================
 *  CUSTOM CSS - Jurnal Mitra Sriwijaya (STT Sriwijaya)
 *  Referensi tampilan: Fidei Jurnal (STT Tawangmangu)
 *  Platform: OJS 3.x
 *  Cara pakai: Tempel seluruh kode ini ke
 *  Dashboard > Settings > Website > Appearance > Custom CSS
 * ============================================================
 */

/* ============================================================
   1. FONT & VARIABEL WARNA
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Merriweather:wght@400;700&display=swap');

:root {
  --primary:       #8B1A1A;   /* Merah tua (warna dominan header Fidei) */
  --primary-dark:  #6B1010;
  --primary-light: #a82020;
  --accent:        #c0392b;
  --text-dark:     #222222;
  --text-muted:    #555555;
  --bg-light:      #f5f5f5;
  --bg-white:      #ffffff;
  --border:        #dddddd;
  --sidebar-bg:    #f9f9f9;
  --nav-link:      #ffffff;
  --footer-bg:     #2c2c2c;
  --footer-text:   #cccccc;
  --font-body:     'Open Sans', sans-serif;
  --font-heading:  'Merriweather', serif;
  --radius:        4px;
  --shadow:        0 2px 6px rgba(0,0,0,0.12);
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-dark);
  background-color: var(--bg-light);
  line-height: 1.6;
}

/* ============================================================
   2. HEADER / BANNER ATAS — Pakai gambar banner Mitra Sriwijaya
   ============================================================ */
.pkp_structure_head {
  background-color: #0a0a5e !important; /* fallback warna biru gelap */
  border-bottom: 3px solid #333399;
  padding: 0 !important;
}

/* Wrapper logo — sembunyikan teks default OJS, tampilkan logo image sebagai banner penuh */
.pkp_head_wrapper {
  background-color: #0a0a5e !important;
  padding: 0 !important;
  display: block !important;
  text-align: center;
}

/* -------------------------------------------------------
   OPSI A — Jika logo jurnal sudah diupload di OJS Settings
   (Settings > Journal > Masthead > Journal Thumbnail / Logo)
   Logo akan otomatis tampil sebagai banner di tengah.
   ------------------------------------------------------- */
.pkp_structure_head img,
.pkp_head_wrapper img {
  display: block !important;
  margin: 0 auto !important;       /* TENGAH horizontal */
  max-width: 100% !important;      /* Penuh lebar layar */
  width: 100% !important;
  max-height: none !important;
  height: auto !important;
  object-fit: cover;
}

/* Sembunyikan teks judul jurnal jika sudah pakai gambar */
.pkp_structure_head .pkp_site_name a,
.pkp_structure_head h1 {
  display: none !important;
}

/* -------------------------------------------------------
   OPSI B — Jika ingin paksa background-image dari URL
   Ganti URL di bawah dengan URL gambar banner Anda
   setelah diupload ke hosting / OJS public folder.
   Uncomment (hapus /* */) bagian ini jika diperlukan.
   ------------------------------------------------------- */
/*
.pkp_head_wrapper {
  background-image: url('GANTI_DENGAN_URL_GAMBAR_BANNER_ANDA') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 120px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pkp_structure_head img,
.pkp_head_wrapper img { display: none !important; }
*/

/* ============================================================
   3. NAVIGASI MENU UTAMA
   ============================================================ */
.pkp_navigation_primary_row,
nav.pkp_navigation_primary {
  background-color: var(--primary-dark) !important;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 0 !important;
}

/* Item menu */
.pkp_navigation_primary ul,
nav.pkp_navigation_primary > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

nav.pkp_navigation_primary > ul > li > a,
.pkp_navigation_primary > ul > li > a {
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  display: block;
  text-decoration: none;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition: background 0.2s;
}

nav.pkp_navigation_primary > ul > li > a:hover,
nav.pkp_navigation_primary > ul > li.current > a,
.pkp_navigation_primary > ul > li > a:hover {
  background-color: var(--accent) !important;
  color: #fff !important;
}

/* Dropdown submenu */
nav.pkp_navigation_primary ul ul,
.pkp_navigation_primary ul ul {
  background-color: var(--primary) !important;
  border-top: 2px solid var(--accent);
  box-shadow: var(--shadow);
  min-width: 200px;
  z-index: 999;
}

nav.pkp_navigation_primary ul ul li a,
.pkp_navigation_primary ul ul li a {
  color: #f0f0f0 !important;
  font-size: 13px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

nav.pkp_navigation_primary ul ul li a:hover {
  background-color: var(--accent) !important;
  color: #fff !important;
}

/* ============================================================
   4. NAVIGASI USER (Register / Login)
   ============================================================ */
.pkp_navigation_user,
.pkp_navigation_user_wrapper {
  background-color: var(--primary-dark) !important;
}

.pkp_navigation_user ul li a {
  color: #ffdddd !important;
  font-size: 12px;
  padding: 6px 12px;
}

.pkp_navigation_user ul li a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* Search bar di header */
.pkp_search input[type="text"],
.search_input {
  border: 1px solid rgba(255,255,255,0.4) !important;
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 12px;
}

.pkp_search input[type="text"]::placeholder { color: #ddd; }

.pkp_search button,
.search_btn {
  background-color: var(--accent) !important;
  border: none;
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius);
  cursor: pointer;
}

/* ============================================================
   5. KONTEN UTAMA & LAYOUT
   ============================================================ */
.pkp_structure_content {
  background-color: var(--bg-light);
  padding: 20px 0;
}

/* Wrapper main + sidebar */
.pkp_structure_main,
#pkp_content_main {
  background-color: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow);
}

/* ============================================================
   6. SIDEBAR KANAN
   ============================================================ */
.pkp_structure_sidebar,
#pkp_content_sidebar {
  background-color: transparent;
}

/* Setiap blok/widget sidebar */
.pkp_sidebar .pkp_block,
.block {
  background-color: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: var(--radius);
  margin-bottom: 16px;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Judul widget sidebar */
.pkp_sidebar .pkp_block h2,
.pkp_sidebar .pkp_block h3,
.block h2, .block h3,
.block_title {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Isi widget sidebar */
.pkp_sidebar .pkp_block .content,
.pkp_sidebar .pkp_block ul,
.block .content,
.block ul {
  padding: 10px 12px;
  font-size: 13px;
}

.pkp_sidebar .pkp_block ul li {
  padding: 4px 0;
  border-bottom: 1px dotted #ddd;
}

.pkp_sidebar .pkp_block ul li:last-child {
  border-bottom: none;
}

.pkp_sidebar a, .block a {
  color: var(--primary) !important;
  text-decoration: none;
}

.pkp_sidebar a:hover, .block a:hover {
  color: var(--accent) !important;
  text-decoration: underline;
}

/* ============================================================
   7. HALAMAN BERANDA (Home)
   ============================================================ */
/* Judul section "About the Journal" */
.pkp_structure_main h2,
#homepageAbout h2,
#homepageIssue h2 {
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

/* Cover issue */
.issue_cover img,
.cover_image img {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 150px;
}

/* ============================================================
   8. DAFTAR ARTIKEL (Article List)
   ============================================================ */
.obj_article_summary {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  margin-bottom: 4px;
}

.obj_article_summary:last-child {
  border-bottom: none;
}

/* Judul artikel */
.obj_article_summary h3 a,
.obj_article_summary .title a {
  color: var(--primary) !important;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.obj_article_summary h3 a:hover,
.obj_article_summary .title a:hover {
  color: var(--accent) !important;
  text-decoration: underline;
}

/* Nama penulis */
.obj_article_summary .authors {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* Halaman artikel */
.obj_article_summary .pages {
  color: var(--text-muted);
  font-size: 12px;
}

/* Tombol PDF / Download */
.obj_article_summary .download a,
.galleys_links a,
.obj_galley_link a {
  background-color: var(--primary) !important;
  color: #fff !important;
  padding: 3px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin: 2px 2px 0 0;
  transition: background 0.2s;
}

.obj_article_summary .download a:hover,
.galleys_links a:hover {
  background-color: var(--accent) !important;
}

/* ============================================================
   9. HALAMAN DETAIL ARTIKEL
   ============================================================ */
.obj_article_details h1.page_title {
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* Section label (Abstract, Keywords, dll) */
.obj_article_details h2,
.obj_article_details h3 {
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 700;
  border-left: 4px solid var(--primary);
  padding-left: 10px;
  margin: 16px 0 8px;
}

/* DOI */
.obj_article_details .doi {
  font-size: 12px;
  color: var(--text-muted);
}

/* Tombol full galley (PDF besar) */
.obj_article_details .galleys_links a {
  background-color: var(--primary) !important;
  color: #fff !important;
  padding: 6px 16px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  display: inline-block;
  margin: 4px 4px 4px 0;
  transition: background 0.2s;
}

.obj_article_details .galleys_links a:hover {
  background-color: var(--accent) !important;
}

/* ============================================================
   10. HALAMAN ARCHIVES / ISSUE
   ============================================================ */
.obj_issue_summary {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  background: var(--bg-white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
  transition: box-shadow 0.2s;
}

.obj_issue_summary:hover {
  box-shadow: 0 3px 10px rgba(139,26,26,0.12);
}

.obj_issue_summary h2 a {
  color: var(--primary) !important;
  font-weight: 700;
  text-decoration: none;
}

.obj_issue_summary h2 a:hover {
  color: var(--accent) !important;
  text-decoration: underline;
}

/* ============================================================
   11. TOMBOL & FORM
   ============================================================ */
.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form textarea,
.pkp_form select,
input[type="text"],
input[type="email"],
input[type="password"],
textarea, select {
  border: 1px solid #ccc;
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 13px;
  font-family: var(--font-body);
  width: 100%;
  box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(139,26,26,0.15);
}

/* Tombol submit / cta */
.pkp_form .submitFormButton,
input[type="submit"],
button[type="submit"],
.cmp_button {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border: none;
  border-radius: var(--radius);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.cmp_button:hover {
  background-color: var(--accent) !important;
}

/* ============================================================
   12. BREADCRUMB
   ============================================================ */
.pkp_breadcrumbs,
.breadcrumb {
  background-color: #f0eded;
  border-bottom: 1px solid #ddd;
  padding: 6px 20px;
  font-size: 12px;
  color: var(--text-muted);
}

.pkp_breadcrumbs a,
.breadcrumb a {
  color: var(--primary) !important;
  text-decoration: none;
}

.pkp_breadcrumbs a:hover,
.breadcrumb a:hover {
  text-decoration: underline;
}

/* ============================================================
   13. PAGINASI
   ============================================================ */
.pkp_pagination ul,
.cmp_pagination ul {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: flex;
  gap: 4px;
}

.pkp_pagination ul li a,
.cmp_pagination ul li a {
  display: block;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--primary) !important;
  font-size: 13px;
  text-decoration: none;
}

.pkp_pagination ul li.current a,
.pkp_pagination ul li a:hover,
.cmp_pagination ul li a:hover {
  background-color: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary);
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.pkp_structure_footer,
footer {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  padding: 24px 20px;
  margin-top: 30px;
  font-size: 13px;
  border-top: 3px solid var(--primary);
}

.pkp_structure_footer a,
footer a {
  color: #ffaaaa !important;
  text-decoration: none;
}

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

/* Teks copyright footer */
.pkp_structure_footer .copyright,
footer .copyright {
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: #aaaaaa;
}

/* ============================================================
   15. NOTIFIKASI / FLASH MESSAGE
   ============================================================ */
.pkp_notification,
.notifySuccess,
.notifyWarning,
.notifyError {
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  margin-bottom: 12px;
}

.notifySuccess { background: #d4edda; color: #155724; border-left: 4px solid #28a745; }
.notifyWarning { background: #fff3cd; color: #856404; border-left: 4px solid #ffc107; }
.notifyError   { background: #f8d7da; color: #721c24; border-left: 4px solid #dc3545; }

/* ============================================================
   16. TABEL
   ============================================================ */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}

table th {
  background-color: var(--primary);
  color: #ffffff;
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
}

table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
}

table tr:nth-child(even) td {
  background-color: #fafafa;
}

table tr:hover td {
  background-color: #f5ecec;
}

/* ============================================================
   17. RESPONSIVE (Mobile)
   ============================================================ */
@media (max-width: 767px) {
  .pkp_head_wrapper {
    flex-direction: column;
    text-align: center;
    padding: 10px;
  }

  nav.pkp_navigation_primary > ul {
    flex-direction: column;
  }

  nav.pkp_navigation_primary > ul > li > a {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

  .pkp_structure_main,
  #pkp_content_main {
    padding: 14px;
  }
}

/* ============================================================
   18. LINK UMUM
   ============================================================ */
a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Heading halaman utama */
h1.page_title {
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary);
}

/* ============================================================
   SELESAI — Salin semua teks di atas ke:
   Dashboard OJS > Settings > Website > Appearance > Custom CSS
   ============================================================ */