/* ═══════════════════════════════════════════════════
   PITUDUH Journal Custom CSS (Updated for OJS 3)
   Background utama: abu #F8F9FA
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Source+Sans+3:wght@400;600;700&display=swap');

/* ==================================================
   1. VARIABEL WARNA 
   (Ganti kode hex di bawah ini untuk mengubah warna massal)
================================================== */
:root {
  /* Warna utama (Menu Navigasi & Footer) - Saat ini Navy Blue */
  --pituduh-primary: #1A365D;   

  /* Warna aksen (Garis pembatas & Hover) - Saat ini Hijau PITUDUH */
  --pituduh-accent:  #2D6A4F;   

  /* Warna latar belakang halaman – Abu-abu sangat muda */
  --pituduh-bg:      #F8F9FA;

  /* Warna teks & putih standar */
  --pituduh-white:   #ffffff;
  --pituduh-text:    #2a2a2a;

  --font-body:       'Source Sans 3', Arial, sans-serif;
  --font-heading:    'Playfair Display', Georgia, serif;
  --font-size-base:  16px;
  --radius:          6px;
  --shadow:          0 2px 10px rgba(0,0,0,0.08);
  --transition:      0.2s ease;
}

/* ==================================================
   2. BASE / GLOBAL
================================================== */
html,
body {
  font-family: var(--font-body) !important;
  background: var(--pituduh-bg) !important;
  color: var(--pituduh-text) !important;
  font-size: var(--font-size-base) !important;
  line-height: 1.7 !important;
}

a {
  color: var(--pituduh-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--pituduh-accent);
}

/* ==================================================
   3. HEADER – AREA LOGO PITUDUH
================================================== */
#headerNavigationContainer,
.pkp_structure_head,
.pkp_site_name_wrapper,
.pkp_head_wrapper {
  background: transparent !important;
}

.pkp_site_name {
  margin: 0 !important;
  padding: 20px 0 !important;
  text-align: center !important;
}

.pkp_site_name .is_img,
.pkp_site_name .is_text {
  display: block !important;
}

/* Pengaturan Presisi Logo */
.pkp_site_name .is_img img,
.pkp_site_name img,
.navbar-brand img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 150px !important;   
  object-fit: contain !important;
  margin: 0 auto !important;
}

/* ==================================================
   4. NAVIGASI UTAMA (MENU BAR) - FIXED FOR OJS 3
================================================== */
/* Ditambahkan .pkp_navigation_primary_wrapper agar background menu bar berubah */
.pkp_navigation_primary_wrapper,
.navbar,
.navbar-default,
.pkp_structure_head .navbar-default {
  background-color: var(--pituduh-primary) !important;
  border: none !important;
  border-bottom: 4px solid var(--pituduh-accent) !important;
  box-shadow: var(--shadow) !important;
}

/* Pengaturan Link Teks Menu */
.navbar-default .navbar-nav > li > a,
.pkp_navigation_primary > li > a {
  color: var(--pituduh-white) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.1px !important;
  padding: 15px 20px !important;
  transition: all var(--transition) !important;
}

/* Efek Hover Menu */
.navbar-default .navbar-nav > li > a:hover,
.pkp_navigation_primary > li > a:hover {
  color: var(--pituduh-white) !important;
  background: var(--pituduh-accent) !important; /* Berubah mengikuti warna aksen saat di-hover */
}

.navbar-default .navbar-nav > li.active > a,
.pkp_navigation_primary > li.current > a {
  color: var(--pituduh-white) !important;
  background: var(--pituduh-accent) !important;
}

/* ==================================================
   5. HALAMAN INDEX / CURRENT ISSUE
================================================== */
.page_index_journal .description,
.page_index .description {
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--pituduh-text) !important;
}

.page_index_journal h2,
.page_index_journal h3,
.page_index_journal .current_issue h2,
.page_index_journal .sections h2,
.page_index_journal .obj_issue_toc h2 {
  font-family: var(--font-heading) !important;
  color: var(--pituduh-primary) !important;
}

/* ==================================================
   6. LIST ARTIKEL
================================================== */
.obj_article_summary {
  background: var(--pituduh-white) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  border-left: 4px solid var(--pituduh-accent) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  transition: box-shadow var(--transition) !important;
}

.obj_article_summary:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.16) !important;
}

.obj_article_summary .title a {
  font-family: var(--font-heading) !important;
  font-size: 19px !important;
  color: var(--pituduh-primary) !important;
}

.obj_article_summary .title a:hover {
  color: var(--pituduh-accent) !important;
}

/* ==================================================
   7. TOMBOL & LINK FILE PDF
================================================== */
.btn-primary,
.pkp_button_primary,
input[type="submit"],
button,
button.pkp_button {
  background-color: var(--pituduh-primary) !important;
  border-color: var(--pituduh-primary) !important;
  color: var(--pituduh-white) !important;
  font-weight: 700 !important;
  border-radius: var(--radius) !important;
  padding: 10px 22px !important;
  transition: all var(--transition) !important;
}

.btn-primary:hover,
.pkp_button_primary:hover,
button:hover {
  background-color: var(--pituduh-accent) !important;
  border-color: var(--pituduh-accent) !important;
  color: var(--pituduh-white) !important;
}

/* Tombol Galley PDF */
.obj_article_summary .galleys_links a,
.obj_article_summary .obj_galley_link,
.galleys_links a,
.obj_galley_link {
  background-color: var(--pituduh-primary) !important;
  color: var(--pituduh-white) !important;
  border-radius: var(--radius) !important;
  padding: 6px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}

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

/* ==================================================
   8. SIDEBAR
================================================== */
.pkp_block {
  background: var(--pituduh-white) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 25px !important;
  overflow: hidden !important;
  border: none !important;
}

.pkp_block .title {
  background: var(--pituduh-primary) !important;
  color: var(--pituduh-white) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 12px 16px !important;
  border-bottom: 3px solid var(--pituduh-accent) !important;
  margin: 0 !important;
}

.pkp_block .content {
  padding: 16px !important;
}

/* ==================================================
   9. TYPOGRAPHY & FORM
================================================== */
h1, h2, h3,
.page_title,
.pkp_page_title {
  font-family: var(--font-heading) !important;
  color: var(--pituduh-primary) !important;
}

input[type="text"], input[type="email"], select, textarea {
  border-radius: var(--radius) !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  padding: 8px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--pituduh-accent) !important;
  outline: none !important;
}

/* ==================================================
   10. FOOTER - FIXED FOR OJS 3
================================================== */
.pkp_structure_footer,
footer {
  background-color: var(--pituduh-primary) !important;
  border-top: 5px solid var(--pituduh-accent) !important; /* Garis pembatas atas footer */
  color: rgba(255,255,255,0.9) !important;
  padding: 40px 20px !important;
  font-size: 14px !important;
  margin-top: 50px !important;
}

.pkp_structure_footer a,
footer a {
  color: var(--pituduh-white) !important;
  text-decoration: underline !important;
}

.pkp_structure_footer a:hover,
footer a:hover {
  color: var(--pituduh-accent) !important;
}

/* ==================================================
   11. RESPONSIVE
================================================== */
@media (max-width: 768px) {
  .pkp_site_name .is_img img, .pkp_site_name img {
    max-height: 100px !important;
  }

  .navbar-default .navbar-nav > li > a,
  .pkp_navigation_primary > li > a {
    padding: 10px 15px !important;
  }
}