@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* ==========================================================================
   STYLE SHEET - JOURNAL OF PUBLIC HEALTH INDONESIAN (JPHI / JHH)
   100% Presisi Meniru: https://ejournal-nawalaedu.com/index.php/JHH
   Konsep Warna: 
     - Navbar & Aksen: #7CC252 (Leaf Green)
     - Sidebar Title & Tautan Artikel: #175B86 (Dark Teal Blue)
     - Background: new-grid.png
   ========================================================================== */

* {
  scroll-behavior: smooth;
}

html {
  padding-top: 0;
}

html, body {
  min-height: 100%;
  background-image: url("https://nawalaeducation.com/public/new-grid.png");
  background-repeat: repeat;
}

.pkp_site_nav_menu a {
  display: inline-block;
  padding: .125rem 0;
  color: rgba(0, 0, 0, 0.84);
  text-decoration: none;
}

/* Container Wrapper Presisi (Max Width 1200px) */
.pkp_structure_head {
  margin: -2rem auto 0 auto !important;
  max-width: 1200px !important;
  border-bottom: none !important;
}

.pkp_head_wrapper {
  position: relative !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.pkp_structure_content {
  margin: 0 auto !important;
  max-width: 1200px !important;
  padding: 2.143rem 25px 25px 25px !important;
  background-color: #fff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

.pkp_structure_footer_wrapper {
  clear: both !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 25px auto 0 auto !important;
  display: block !important;
  float: none !important;
  box-sizing: border-box !important;
}

.pkp_structure_footer {
  width: 100% !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
}

/* Header Banner Image Full Width */
.pkp_site_name_wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  min-height: 37px !important;
  width: 100% !important;
  position: relative !important;
}

.pkp_site_name {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-overflow: ellipsis;
  color: #fff;
}

.pkp_site_name a {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: block !important;
  width: 100% !important;
}

.pkp_site_name .is_img {
  display: block !important;
  width: 100% !important;
}

.pkp_site_name .is_img img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
}

/* User Navigation (Login / Register / Profile / Logout) Mentok Kanan Batas Header Hijau */
.pkp_navigation_user_wrapper,
.has_site_logo .pkp_navigation_user_wrapper {
  position: absolute !important;
  top: 6px !important;
  right: 12px !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

@media (min-width: 768px) {
  .pkp_navigation_user_wrapper,
  .has_site_logo .pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 6px !important;
    left: auto !important;
    right: 12px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .pkp_navigation_user,
  .has_site_logo .pkp_navigation_user {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 992px) {
  .pkp_navigation_user_wrapper,
  .has_site_logo .pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 6px !important;
    left: auto !important;
    right: 12px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .pkp_navigation_user,
  .has_site_logo .pkp_navigation_user {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 1200px) {
  .pkp_navigation_user_wrapper,
  .has_site_logo .pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 6px !important;
    left: auto !important;
    right: 12px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .pkp_navigation_user,
  .has_site_logo .pkp_navigation_user {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

.pkp_navigation_user,
.has_site_logo .pkp_navigation_user {
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  pointer-events: auto !important;
}

.pkp_navigation_user > li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

.pkp_navigation_user > li > a,
.pkp_navigation_user > li:last-child > a {
  display: inline-block !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1b3810 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1001 !important;
}

.pkp_navigation_user > li > a:hover {
  background: #175B86 !important;
  color: #ffffff !important;
  border-color: #175B86 !important;
}

/* Primary Navigation Bar (Warna Hijau Daun #7CC252 - Mentok Penuh Kiri ke Kanan) */
.pkp_navigation_primary_row {
  background-color: #7CC252 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

.pkp_navigation_primary_wrapper,
.has_site_logo .pkp_navigation_primary_wrapper {
  background-color: #7CC252 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

@media (min-width: 768px) {
  .pkp_navigation_primary_wrapper,
  .has_site_logo .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 992px) {
  .pkp_navigation_primary_wrapper,
  .has_site_logo .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 1200px) {
  .pkp_navigation_primary_wrapper,
  .has_site_logo .pkp_navigation_primary_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

.pkp_navigation_primary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
}

.pkp_navigation_primary > li {
  display: inline-block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_navigation_primary > li > a {
  padding: 10px 18px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-block !important;
  transition: background 0.2s ease;
}

/* Menu pertama (Current) mentok pas di batas kiri hijau */
.pkp_navigation_primary > li:first-child > a {
  padding-left: 18px !important;
}

.pkp_navigation_primary > li > a:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Tombol Search di Sebelah Kanan Navbar Mentok Batas Kanan Hijau */
.pkp_navigation_search_wrapper {
  display: flex !important;
  align-items: center !important;
  margin: 0 0 0 auto !important;
  padding: 0 20px 0 0 !important;
  border: none !important;
  float: none !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pkp_navigation_search_wrapper a,
.pkp_search_desktop {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.pkp_navigation_search_wrapper a:hover,
.pkp_search_desktop:hover {
  color: #f0fdf4 !important;
}

/* Dropdown Menu */
.pkp_navigation_primary ul,
.pkp_navigation_user ul {
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  border-radius: 4px !important;
}

.pkp_navigation_primary ul a,
.pkp_navigation_user ul a {
  color: #222222 !important;
  padding: 8px 16px !important;
}

.pkp_navigation_primary ul a:hover,
.pkp_navigation_user ul a:hover {
  background: #7CC252 !important;
  color: #ffffff !important;
}

/* Layout 2 Kolom Desktop: Konten Kiri 68% + Sidebar Kanan 29% */
@media (min-width: 992px) {
  .pkp_structure_content.has_sidebar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 30px !important;
  }
  .pkp_structure_main {
    width: 68% !important;
    max-width: 68% !important;
    flex: 0 0 68% !important;
    float: none !important;
    margin-top: 0 !important;
    background: #fff !important;
  }
  .pkp_structure_sidebar {
    width: 29% !important;
    max-width: 29% !important;
    flex: 0 0 29% !important;
    float: none !important;
    margin-top: 0 !important;
    background: transparent !important;
    display: block !important;
    visibility: visible !important;
  }
}

.pkp_structure_sidebar {
  display: block !important;
  visibility: visible !important;
}

.pkp_block {
  margin-bottom: 25px !important;
  display: block !important;
  visibility: visible !important;
}

.pkp_block table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
}

.pkp_block table td {
  padding: 0 !important;
  border: none !important;
}

/* Sidebar Title & Bagan Style (#175B86) */
.title-bagan,
.pkp_block .title {
  background-color: #175B86 !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  padding: 9px 12px !important;
  margin: 15px 0 8px 0 !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
}

.title-bagan td {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* Sidebar Menu Items */
.menu-sidebar td a {
  font-family: 'Poppins', sans-serif !important;
  text-decoration: none !important;
  color: #175B86 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: #f8fafc !important;
  padding: 9px 14px !important;
  margin-block-start: 0.4em !important;
  margin-block-end: 0.4em !important;
  border-radius: 4px !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: 0.2s ease !important;
}

.menu-sidebar td a em,
.menu-sidebar td a i {
  width: 18px !important;
  text-align: center !important;
  color: #175B86 !important;
  display: inline-block !important;
}

.menu-sidebar td a:hover {
  background-color: #175B86 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
  color: #ffffff !important;
  border-color: #175B86 !important;
}

.menu-sidebar td a:hover em,
.menu-sidebar td a:hover i {
  color: #ffffff !important;
}

.bagan-sidebar td a,
.bagan-menu-sidebar td a {
  display: block !important;
  background-color: #ffffff !important;
  text-align: center !important;
  padding: 8px !important;
  margin-block-start: 0.4em !important;
  margin-block-end: 0.4em !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  transition: 0.2s ease !important;
}

.bagan-sidebar td a:hover,
.bagan-menu-sidebar td a:hover {
  background-color: #f8fafc !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.bagan-sidebar img,
.bagan-menu-sidebar img {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block !important;
}

/* Kartu Ringkasan Artikel */
.obj_article_summary {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  padding: 18px 20px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  margin-bottom: 16px !important;
}

.obj_article_summary .title a {
  color: #175B86 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

.obj_article_summary .title a:hover {
  color: #7CC252 !important;
}

.obj_article_summary .authors {
  font-size: 13px !important;
  color: #475569 !important;
  margin-top: 4px !important;
}

.obj_article_summary .pages {
  font-size: 12px !important;
  color: #64748b !important;
}

.obj_galley_link {
  display: inline-block !important;
  padding: 4px 14px !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #175B86 !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  margin-top: 8px !important;
}

.obj_galley_link:hover {
  background: #175B86 !important;
  color: #ffffff !important;
  border-color: #175B86 !important;
}

.pkp_brand_footer {
  display: none !important;
}

@media (min-width: 992px) {
  .pkp_structure_head {
    margin: 0 auto !important;
    background-color: transparent !important;
    border: none !important;
  }
  .pkp_page_index .homepage_image {
    margin: 0 !important;
  }
}