/* ============================================================
   JGRCSSH — MERGED STYLESHEET (OJS 3.5)
   Journal of Global Research in Community Service & Social Humanities

   Gabungan dua stylesheet:
   - HEADER + banner + menu + container layout .... dari CSS LAMA
   - Tipografi, Button, Sidebar, Layout Artikel, Footer .. dari CSS BARU

   CARA PASANG:
   Settings → Website → Appearance → tab "Advanced"
   → "Journal Stylesheet" / "Custom Stylesheet" → unggah file ini
   → Save → bersihkan cache.

   Ganti warna global: cukup ubah nilai di blok :root.
   ============================================================ */

/* ============================================================
   0. FONT & VARIABEL  (CSS BARU)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* --- Warna utama (ubah di sini untuk rebrand) --- */
  --brand-navy:    #0B3D5C;  /* biru tua institusional  */
  --brand-teal:    #14808F;  /* teal utama (header box) */
  --brand-cyan:    #1591A6;  /* aksen tautan            */
  --brand-cyan-hi: #12A6BD;  /* hover tautan            */

  /* --- Netral --- */
  --ink:        #1F2A33;
  --ink-muted:  #5C6B76;
  --surface:    #F5F8FA;
  --hairline:   #E2E9EE;
  --white:      #FFFFFF;

  /* --- Tipografi --- */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(11, 61, 92, .06);
  --shadow-md: 0 6px 20px rgba(11, 61, 92, .08);
}

/* ============================================================
   1. DASAR & TIPOGRAFI  (CSS BARU)
   Catatan: latar body di sini berlaku untuk mobile/tablet.
   Di desktop (>=992px) latar di-override oleh banner header lama.
   ============================================================ */
body,
.pkp_structure_page {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

h1, h2, h3, h4,
.page_title,
.obj_article_summary .title,
.obj_issue_toc .title {
  font-family: var(--font-display);
  color: var(--brand-navy);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.page_title {
  font-weight: 700;
  font-size: 2rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--hairline);
}

/* Tautan */
a { color: var(--brand-cyan); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--brand-cyan-hi); text-decoration: underline; }

/* Aksesibilitas: fokus keyboard terlihat jelas */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--brand-cyan-hi);
  outline-offset: 2px;
}

/* ============================================================
   2. HEADER, BANNER, NAVIGASI & CONTAINER LAYOUT  (CSS LAMA)
   Ditempatkan SESUDAH tipografi agar rule desktop menang atas
   latar body dari bagian tipografi.
   ============================================================ */

/* Header bar (default / mobile) */
.pkp_structure_head {
  background-color: #0b6d91;
  border-bottom: 1px solid #ddd;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}

.pkp_site_name_wrapper {
  background: transparent;
}

/* Karena header fixed di mobile, konten utama diberi jarak atas */
.pkp_structure_main {
  padding: 0.714rem;
  margin-top: 50px !important;
}

/* Warna item profil pada menu (desktop) */
@media (min-width: 992px) {
  li.profile a {
    color: #292e6e !important;
  }
}

/* Menu navigasi */
@media (min-width: 1023px) {
  .pkp_site_nav_menu {
    display: block;
    margin-top: -10px;
  }
}

@media (min-width: 1200px) {
  .pkp_site_nav_menu {
    display: block;
    margin-top: 26px;
  }
}

@media (min-width: 992px) {
  .pkp_navigation_primary_row {
    background: #ffffff;
    padding-left: 2.143rem;
    padding-right: 2.143rem;
    border-bottom: 1px solid #dddddd;
  }
}

/* Header + banner versi desktop */
@media (min-width: 992px) {
  html,
  body {
    background: #FBF5E6;   /* warna cream */
    width: 100vw;
  }

  .pkp_navigation_user_wrapper {
    top: 0px;
    right: 0;
    left: auto;
    width: 25%;
    transform: none;
    padding-right: 2.143rem;
  }

  .pkp_site_name .is_img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    max-height: 100%;
  }

  .pkp_site_name .is_img {
    display: block;
    margin: 0px;
    padding: 0;
    width: 100%;
    background-color: transparent;
  }

  .pkp_structure_page {
    margin: 0 auto;
    max-width: 1160px;
    background: transparent;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .pkp_structure_head {
    background-color: transparent;
    border-bottom: 1px solid #ddd;
    position: relative;
    border: none;
    height: 220px;
    margin-bottom: 0px;
  }

  .pkp_site_name_wrapper {
    background: #ffffff94 !important;
    padding: 0px;
    height: 220px;
  }

  .pkp_structure_content {
    padding-top: 0;
    background-color: white;
  }

  .pkp_site_nav_menu {
    display: block;
    margin-top: -10px;
  }

  .pkp_site_name {
    margin-left: 0;
    padding: 0px;
    height: 100%;
  }

  .pkp_structure_main {
    padding: 10px 20px 0px 25px;
    margin-top: 0px !important;
  }
}

/* ============================================================
   3. LAYOUT HOMEPAGE  (CSS LAMA — pendukung tampilan header/beranda)
   Selector-nya berbeda dari layout artikel baru, jadi tidak bentrok.
   ============================================================ */
.pkp_page_index .additional_content {
  padding: 0 0.714rem 0 0.714rem;
  border-top: none !important;
  order: 2;
}

.additional_content .left-side {
  display: flex;
  justify-content: center;
}

.additional_content .left-side p {
  max-width: 70%;
}

.additional_content .right-side {
  margin-bottom: 320px;
}

.pkp_page_index .additional_content .main-desc {
  text-align: justify;
}

/* Tabel di area konten */
table.table {
  margin-top: -10px;
}

.additional_content .description-wrapper .right-side table,
tr,
td {
  border-bottom: 1px solid #dbdbdb;
  padding: 4px 0px;
}

.additional_content .description-wrapper .right-side table {
  max-width: 100%;
}

.additional_content .description-wrapper .right-side table,
tr {
  margin-bottom: 20px !important;
}

.pkp_structure_content .pkp_structure_main .page_index_journal {
  display: flex;
  flex-direction: column;
}

.pkp_structure_content .pkp_structure_main .page_index_journal .current_issue {
  order: 3;
}

@media (min-width: 768px) {
  .additional_content .description-wrapper {
    display: flex;
  }

  .additional_content .left-side {
    display: flex;
    justify-content: start;
    width: 40%;
    margin-top: -20px;
  }

  .additional_content .right-side {
    width: 60%;
    margin-bottom: 20px;
  }

  .additional_content .left-side p {
    max-width: 90%;
  }

  .additional_content .left-side p img {
    border: 2px solid #c7c7c7;
  }
}

@media (min-width: 992px) {
  .additional_content .description-wrapper {
    display: flex;
    padding: 0px 20px;
  }

  .additional_content .right-side {
    margin-bottom: 20px;
    margin-top: -20px;
  }

  .pkp_page_index .additional_content .main-desc {
    padding: 0px 20px 0px 20px;
  }

  .pkp_page_index .homepage_image {
    margin: 20px 0px 0px 0px !important;
    display: none;
    order: 1;
  }
}

/* ============================================================
   4. TOMBOL  (CSS BARU)
   ============================================================ */
.cmp_button,
.pkp_button,
button.submitFormButton,
a.cmp_button {
  background: var(--brand-teal);
  color: var(--white) !important;
  border: none;
  border-radius: var(--radius);
  padding: .6rem 1.2rem;
  font-family: var(--font-body);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, transform .05s ease;
}
.cmp_button:hover,
.pkp_button:hover,
a.cmp_button:hover {
  background: var(--brand-navy);
  text-decoration: none;
  transform: translateY(-1px);
}

/* ============================================================
   5. SIDEBAR  (CSS BARU)
   ============================================================ */
.pkp_structure_sidebar .pkp_block {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.pkp_structure_sidebar .pkp_block .title {
  background: var(--brand-teal);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .85rem;
  margin: 0;
  padding: .7rem 1rem;
}
.pkp_structure_sidebar .pkp_block .content {
  padding: .9rem 1rem;
}
.pkp_structure_sidebar .pkp_block .content a {
  display: inline-block;
  padding: .15rem 0;
}

/* ============================================================
   6. KONTEN: DAFTAR ARTIKEL & DETAIL ARTIKEL  (CSS BARU)
   ============================================================ */
.homepage_about,
.about_the_journal {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
}

/* Kartu artikel pada daftar terbitan */
.obj_article_summary {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--brand-teal);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 4px;      /* sebelumnya 1rem */
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .05s ease;
}
.obj_article_summary:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.obj_article_summary .title a { color: var(--brand-navy); }
.obj_article_summary .title a:hover { color: var(--brand-cyan-hi); }
.obj_article_summary .authors { color: var(--ink-muted); font-size: .95rem; }

/* Label galley (PDF) jadi pil kecil */
.obj_article_summary .galleys_links a,
.obj_galley_link {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .15rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand-teal);
}
.obj_galley_link:hover { background: var(--brand-teal); color: var(--white); }

/* Halaman baca artikel */
.obj_article_details .item.abstract,
.obj_article_details .main_entry {
  max-width: 70ch;
}
.obj_article_details .item .label {
  color: var(--brand-navy);
  font-family: var(--font-display);
  font-weight: 600;
}
.obj_article_details .authors .name {
  font-weight: 600;
  color: var(--brand-navy);
}
.obj_article_details .authors .affiliation {
  color: var(--ink-muted);
  font-size: .95rem;
}

/* ============================================================
   7. BREADCRUMB & PENCARIAN  (CSS BARU)
   ============================================================ */
.cmp_breadcrumbs,
.cmp_breadcrumbs a { color: var(--ink-muted); font-size: .9rem; }
.cmp_breadcrumbs a:hover { color: var(--brand-cyan-hi); }

input[type="text"],
input[type="search"],
.pkp_search input {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .5rem .8rem;
}

/* ============================================================
   8. FOOTER  (CSS BARU) + konten peta/alamat (CSS LAMA)
   Warna teks konten peta/alamat disesuaikan agar terbaca di
   latar navy footer baru.
   ============================================================ */
.pkp_structure_footer,
.pkp_footer_content {
  background: var(--brand-navy);
  color: #C9D8E2;
}
.pkp_footer_content a { color: var(--white); }
.pkp_footer_content a:hover { color: var(--brand-cyan-hi); }
.pkp_brand_footer { background: var(--brand-navy); border-top: 1px solid rgba(255,255,255,.08); }

/* Konten custom footer (peta + alamat) — struktur dari CSS lama */
.my-footer-wrapper .footer-map {
  text-align: center;
  margin-bottom: 20px;
}
.my-footer-wrapper .footer-map .footer-title {
  font-size: 20px;
  font-weight: 600;
  color: #C9D8E2;          /* disesuaikan untuk latar navy */
  margin-bottom: 20px;
}
.my-footer-wrapper .footer-address {
  text-align: center;
  color: #C9D8E2;          /* disesuaikan untuk latar navy */
}
.footer-map iframe {
  height: 200px;
  width: 300px;
}

@media (min-width: 768px) {
  .my-footer-wrapper {
    display: flex;
    gap: 30px;
    justify-content: center;
  }
  .my-footer-wrapper .footer-address {
    text-align: start;
    margin-top: 80px;
  }
  .my-footer-wrapper .footer-map .footer-title {
    font-size: 20px;
    font-weight: 600;
    color: #C9D8E2;
    margin-bottom: 20px;
    margin-left: 20px;
    text-align: start;
  }
  .footer-map iframe {
    width: 400px;
    height: 250px;
  }
}

@media (min-width: 992px) {
  .footer-map iframe {
    width: 560px;
    height: 250px;
  }
}

/* ============================================================
   9. RESPONSIF & GERAK  (CSS BARU)
   ============================================================ */
@media (max-width: 768px) {
  .page_title { font-size: 1.6rem; }
  .obj_article_summary { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   10. HIDE AUTHOR ROLE  (gabungan kedua selector)
   ============================================================ */
section.item.authors span.userGroup,
.obj_article_details .authors .userGroup {
  display: none !important;
}
/* ==========================================
   OVERRIDE FOOTER
========================================== */

.pkp_structure_footer_wrapper,
.pkp_structure_footer,
.pkp_footer_content,
.pkp_brand_footer{
    background:#EAF6FB !important;
}

.pkp_footer_content{
    color:#29465B !important;
}

.pkp_footer_content a{
    color:#14808F !important;
}

.pkp_footer_content a:hover{
    color:#0B3D5C !important;
}

.pkp_brand_footer{
    border-top:1px solid #CFE5EF !important;
}
/* Mengurangi jarak antar artikel */

.obj_issue_toc .sections > li,
.obj_issue_toc .articles > li,
.cmp_article_list > li,
.issue_toc_section > li{

    margin-bottom:4px !important;
    padding-bottom:0 !important;

}
.obj_article_summary .userGroup{
    display:none !important;
}