/* ============================================================
   KUSTOMISASI OJS — REFERENSI JIPT (JURNAL ILMIAH PSIKOLOGI TERAPAN)
   Versi: 1.0
   Dibuat untuk: OJS 3.x (Default Theme / Bootstrap Theme)
   ============================================================ */


/* ============================================================
   1. VARIABEL WARNA UTAMA
   Ubah nilai warna di sini jika ingin menyesuaikan skema warna
   ============================================================ */
:root {
  --color-primary-dark:   #1a5c2a;  /* Hijau tua — header background */
  --color-primary-main:   #2d7a3a;  /* Hijau sedang — sidebar button */
  --color-primary-light:  #4caf2a;  /* Hijau terang/lime — navbar */
  --color-primary-hover:  #3d9e22;  /* Hijau hover navbar */
  --color-accent:         #d4e800;  /* Kuning-lime — logo highlight */
  --color-text-body:      #2c2c2c;  /* Teks utama konten */
  --color-text-muted:     #666666;  /* Teks label/sekunder */
  --color-border-light:   #e8e8e8;  /* Border tabel dan divider */
  --color-bg-sidebar:     #f8f9f6;  /* Background sidebar */
  --color-bg-page:        #f4f4f2;  /* Background halaman */
}


/* ============================================================
   2. GLOBAL RESET & TIPOGRAFI DASAR
   Menetapkan font dan ukuran teks dasar seluruh halaman
   ============================================================ */
body {
  font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-text-body);
  background-color: var(--color-bg-page);
}

/* Judul-judul halaman konten */
h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--color-primary-dark);
  line-height: 1.4;
}

/* Paragraf body — jarak antar paragraf */
p {
  margin-bottom: 1rem;
}

/* Link default */
a {
  color: var(--color-primary-main);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
}


/* ============================================================
   3. HEADER JURNAL
   Menciptakan header hijau tua dengan layout logo + ISSN
   ============================================================ */

/* Container header utama */
#headerLogo,
.pkp_structure_head,
header.pkp_structure_head {
  background-color: var(--color-primary-dark);
  background-image: linear-gradient(135deg,
    var(--color-primary-dark) 0%,
    #2a6e35 50%,
    var(--color-primary-dark) 100%);
  padding: 18px 30px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

/* Logo jurnal — pastikan logo tampak pada background gelap */
.pkp_structure_head img,
#headerLogo img {
  max-height: 90px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Nama/judul jurnal di header */
.pkp_structure_head .pkp_site_name,
.site-name {
  color: #ffffff !important;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 1px 2px 4px rgba(0,0,0,0.3);
  text-decoration: none;
}

.pkp_structure_head .pkp_site_name:hover {
  color: var(--color-accent) !important;
  text-decoration: none;
}

/* Tagline/deskripsi singkat di bawah nama jurnal */
.pkp_structure_head .site_description,
.journal-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-style: italic;
  margin-top: 4px;
}

/* Badge ISSN di pojok kanan header */
.pkp_structure_head .pkp_site_name_tagline,
#ISSNBadge {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  color: #fff;
  padding: 8px 14px;
  font-size: 12px;
  line-height: 2;
  text-align: right;
  white-space: nowrap;
}


/* ============================================================
   4. NAVIGASI UTAMA (NAVBAR)
   Bar hijau terang horizontal dengan hover effect
   ============================================================ */

/* Container navbar */
.pkp_navigation_primary,
nav.pkp_navigation_primary,
.navbar,
#navigationPrimary {
  background-color: var(--color-primary-light) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Item menu navigasi */
.pkp_navigation_primary > ul > li > a,
.pkp_navigation_primary .nav-item > a,
#navigationPrimary > ul > li > a {
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 18px !important;
  display: block;
  border-radius: 0 !important;
  transition: background-color 0.2s ease;
  text-transform: none;
  letter-spacing: 0.3px;
}

/* Hover & aktif menu navigasi */
.pkp_navigation_primary > ul > li > a:hover,
.pkp_navigation_primary > ul > li.current > a,
#navigationPrimary > ul > li > a:hover {
  background-color: rgba(0, 0, 0, 0.18) !important;
  color: #ffffff !important;
  text-decoration: none;
}

/* Dropdown menu navigasi */
.pkp_navigation_primary .pkp_navigation_dropdown,
.pkp_navigation_primary ul ul {
  background-color: var(--color-primary-dark) !important;
  border: none;
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  border-radius: 0 0 6px 6px;
  min-width: 200px;
}

.pkp_navigation_primary ul ul li a {
  color: rgba(255,255,255,0.9) !important;
  font-size: 13px;
  padding: 9px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

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

/* Tombol Search di navbar */
.pkp_navigation_primary .pkp_search,
#navigationPrimary .search {
  margin-left: auto;
  padding-right: 16px;
}

.pkp_navigation_primary .pkp_search a,
.pkp_navigation_primary .search-toggle {
  color: #fff !important;
  font-size: 13.5px;
}


/* ============================================================
   5. LAYOUT HALAMAN — MAIN CONTENT + SIDEBAR
   Sistem dua kolom: konten utama (~75%) + sidebar (~25%)
   ============================================================ */

/* Wrapper utama pembungkus konten + sidebar */
.pkp_structure_main,
.pkp_page_content,
#pkpMain {
  background-color: #ffffff;
  max-width: 1100px;
  margin: 24px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Area konten utama (kiri) */
.pkp_structure_content,
main.pkp_structure_content {
  flex: 3 1 0%;
  min-width: 0;
  padding: 28px 32px;
  border-right: 1px solid var(--color-border-light);
}

/* Area sidebar (kanan) */
.pkp_structure_sidebar,
aside.pkp_structure_sidebar {
  flex: 1 1 0%;
  min-width: 220px;
  max-width: 280px;
  background-color: var(--color-bg-sidebar);
  padding: 20px 16px;
}


/* ============================================================
   6. SIDEBAR — QUICK MENU (Elemen Paling Khas)
   Tombol-tombol hijau solid full-width pada sidebar
   ============================================================ */

/* Judul blok sidebar ("Quick Menu", "Recommended Tools", dll.) */
.pkp_block .title,
.block > h3,
.pkp_block h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-body);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary-light);
}

/* Container daftar link sidebar */
.pkp_block ul,
.pkp_block .pkp_block_nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Setiap item link di sidebar — tombol hijau solid */
.pkp_block ul li a,
.pkp_block .pkp_block_nav ul li a {
  display: block;
  width: 100%;
  background-color: var(--color-primary-main);
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 400;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  text-decoration: none;
  transition: background-color 0.15s ease;
  line-height: 1.4;
}

/* Hover tombol sidebar */
.pkp_block ul li a:hover,
.pkp_block .pkp_block_nav ul li a:hover {
  background-color: var(--color-primary-light) !important;
  color: #fff !important;
  text-decoration: none;
}

/* Item pertama — rounded atas */
.pkp_block ul li:first-child a {
  border-radius: 4px 4px 0 0;
}

/* Item terakhir — rounded bawah */
.pkp_block ul li:last-child a {
  border-bottom: none;
  border-radius: 0 0 4px 4px;
}

/* Jarak antar blok sidebar */
.pkp_block {
  margin-bottom: 24px;
}


/* ============================================================
   7. TABEL INFORMASI JURNAL (Info Table)
   Tabel dua kolom: label (kiri) | nilai (kanan)
   ============================================================ */
.pkp_page_about .pkp_content table,
.about_page table,
table.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-bottom: 20px;
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  overflow: hidden;
}

.pkp_page_about .pkp_content table tr,
table.info-table tr {
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color 0.1s;
}

.pkp_page_about .pkp_content table tr:last-child,
table.info-table tr:last-child {
  border-bottom: none;
}

.pkp_page_about .pkp_content table tr:hover,
table.info-table tr:hover {
  background-color: #f0f6f0;  /* Hover hijau sangat pucat */
}

.pkp_page_about .pkp_content table td,
table.info-table td {
  padding: 9px 14px;
  vertical-align: top;
  font-size: 13.5px;
}

/* Kolom label (kiri) */
.pkp_page_about .pkp_content table td:first-child,
table.info-table td.label {
  color: var(--color-text-muted);
  font-weight: 600;
  width: 32%;
  white-space: nowrap;
}

/* Kolom nilai (kanan) */
.pkp_page_about .pkp_content table td:last-child,
table.info-table td.value {
  color: var(--color-text-body);
}


/* ============================================================
   8. JUDUL SECTION / PAGE TITLE
   Garis bawah aksen hijau di bawah setiap judul section
   ============================================================ */
.pkp_structure_content h2,
.pkp_structure_content h1.page_title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary-light);
}

.pkp_structure_content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary-main);
  margin: 20px 0 10px;
}


/* ============================================================
   9. ARTICLE LISTING / ISSUE CARDS
   Tampilan daftar artikel di halaman Archives
   ============================================================ */

/* Card setiap artikel */
.pkp_issue .obj_article_summary,
.articles .obj_article_summary,
.obj_article_summary {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-left: 4px solid var(--color-primary-main);  /* Aksen hijau kiri */
  border-radius: 0 6px 6px 0;
  padding: 16px 18px;
  margin-bottom: 14px;
  transition: box-shadow 0.2s ease, border-left-color 0.2s ease;
}

.obj_article_summary:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  border-left-color: var(--color-primary-light);
}

/* Judul artikel */
.obj_article_summary .title a {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-dark) !important;
  line-height: 1.5;
  text-decoration: none;
}

.obj_article_summary .title a:hover {
  color: var(--color-primary-light) !important;
  text-decoration: underline;
}

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

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


/* ============================================================
   10. ISSUE COVER & HEADER VOLUME
   Tampilan cover issue di halaman Archives
   ============================================================ */
.obj_issue_summary .cover img,
.pkp_issue_cover img {
  border: 2px solid var(--color-primary-light);
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  max-width: 120px;
}

/* Header volume/issue */
.obj_issue_summary .title,
.pkp_issue_title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary-dark);
}


/* ============================================================
   11. PAGINATION
   Styling tombol halaman/navigasi antar halaman
   ============================================================ */
.pkp_pagination .cmp_pagination ul,
.pagination ul {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 20px 0;
  flex-wrap: wrap;
}

.pkp_pagination a,
.pagination a {
  display: inline-block;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--color-primary-main);
  color: var(--color-primary-main);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.pkp_pagination a:hover,
.pkp_pagination .current a {
  background: var(--color-primary-main);
  color: #fff;
  text-decoration: none;
}


/* ============================================================
   12. FOOTER
   Footer sederhana dengan background hijau tua
   ============================================================ */
.pkp_structure_footer,
footer.pkp_structure_footer {
  background-color: var(--color-primary-dark);
  color: rgba(255,255,255,0.8);
  padding: 20px 30px;
  font-size: 13px;
  text-align: center;
  margin-top: 40px;
}

.pkp_structure_footer a {
  color: var(--color-accent);
  text-decoration: none;
}

.pkp_structure_footer a:hover {
  text-decoration: underline;
}


/* ============================================================
   13. BUTTON / TOMBOL AKSI UMUM
   Tombol submit, download PDF, dll.
   ============================================================ */
.pkp_button,
.btn-primary,
input[type="submit"],
button[type="submit"] {
  background-color: var(--color-primary-main) !important;
  border-color: var(--color-primary-dark) !important;
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 5px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.pkp_button:hover,
.btn-primary:hover,
input[type="submit"]:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: #fff !important;
}

/* Tombol PDF/Galley download */
.obj_galley_link.pdf,
.galley_link {
  background-color: var(--color-primary-main);
  color: #fff;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin: 3px 2px;
  transition: background-color 0.15s;
}

.obj_galley_link.pdf:hover {
  background-color: var(--color-primary-dark);
  text-decoration: none;
}


/* ============================================================
   14. FORM SEARCH / PENCARIAN
   Kotak pencarian di halaman dan sidebar
   ============================================================ */
.pkp_search input[type="text"],
.pkp_form input[type="text"],
.pkp_form input[type="email"] {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13.5px;
  width: 100%;
  transition: border-color 0.2s;
}

.pkp_search input[type="text"]:focus,
.pkp_form input[type="text"]:focus {
  border-color: var(--color-primary-main);
  outline: none;
  box-shadow: 0 0 0 3px rgba(45,122,58,0.12);
}


/* ============================================================
   15. RESPONSIVE — MOBILE ADJUSTMENT
   Tampilan menyesuaikan untuk layar kecil (< 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Stack layout: sidebar pindah ke bawah konten */
  .pkp_structure_main,
  .pkp_page_content {
    flex-direction: column;
    margin: 12px;
  }

  .pkp_structure_sidebar {
    max-width: 100%;
    min-width: unset;
    border-top: 2px solid var(--color-border-light);
  }

  /* Header responsif */
  .pkp_structure_head {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 10px;
  }

  /* Navbar scroll horizontal di mobile */
  .pkp_navigation_primary,
  #navigationPrimary {
    overflow-x: auto;
    white-space: nowrap;
  }

  .pkp_structure_content {
    padding: 18px 16px;
  }
}