/* =========================================================
   JCIM – Journal of Collaborative Industrial Management
   Custom stylesheet untuk OJS 3.x (Default Theme)
   Palet: teal #135c5f + emas #ca9e3a
   Upload: Settings > Website > Appearance > Journal style sheet
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Merriweather:wght@700;900&display=swap");

:root {
  --jcim-teal: #135c5f;          /* warna utama: menu, hero, judul */
  --jcim-teal-dark: #0c4245;
  --jcim-gold: #ca9e3a;          /* aksen: garis, tombol, hover */
  --jcim-gold-dark: #8a6a1f;     /* emas gelap untuk teks di latar putih */
  --jcim-gold-soft: #f6efdd;
  --jcim-cream: #fbf8f0;
  --jcim-text: #1f2a2b;
  --jcim-muted: #5f6b6b;
  --jcim-border: #e3dcc8;
  --jcim-bg: #eef2f1;
  --jcim-radius: 14px;
  --jcim-shadow: 0 6px 22px rgba(19, 92, 95, .10);
}

/* Hilangkan warna merah dari stylesheet portal (Site Settings) di halaman jurnal.
   html:root lebih spesifik dari :root, jadi variabel portal ikut berubah ke teal. */
html:root {
  --pb-red: #135c5f;
  --pb-red-dark: #0c4245;
  --pb-red-soft: #e3efef;
}

/* overflow:visible wajib: portal memberi header overflow:hidden,
   yang memotong dropdown menu About */
html body .pkp_structure_head {
  background: var(--jcim-gold-soft) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  z-index: 100;
}

html body .pkp_structure_head::after { display: none !important; }

html body .pkp_structure_footer_wrapper {
  background: var(--jcim-teal-dark) !important;
}

/* ---------- Dasar ---------- */
body {
  background: var(--jcim-bg);
  color: var(--jcim-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

a { color: var(--jcim-teal); }
a:hover, a:focus { color: var(--jcim-gold-dark); }

.pkp_structure_page {
  margin: 20px auto;
  background: #fff;
  border-radius: var(--jcim-radius);
  box-shadow: var(--jcim-shadow);
  overflow: hidden;
}

/* ---------- Header / banner ---------- */
.pkp_structure_head {
  background: var(--jcim-gold-soft);
  border-bottom: 0;
}

.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

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

/* Theme memberi #navigationPrimary a warna gelap bila warna dasar theme terang */
html body #navigationPrimary > li > a,
html body #navigationPrimary > li > a:hover,
html body #navigationPrimary > li > a:focus {
  color: #fff !important;
}

/* Register / Login
   Theme memberi .pkp_navigation_user lebar tetap (952px) sehingga Login
   terdorong ke luar layar; portal juga memaksa teksnya putih lewat
   #navigationUser, jadi selector ID dipakai di sini agar tetap menang. */
html body .pkp_navigation_user_wrapper {
  top: 14px;
  left: auto !important;
  right: 20px !important;
  width: auto !important;
}

html body #navigationUser.pkp_navigation_user {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #navigationUser > li > a {
  display: inline-block;
  margin: 0;
  padding: 6px 16px !important;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: #fff !important;
  color: var(--jcim-teal) !important;
  border: 1px solid var(--jcim-teal);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

html body #navigationUser > li:last-child > a {
  background: var(--jcim-teal) !important;
  color: #fff !important;
}

html body #navigationUser > li > a:hover,
html body #navigationUser > li:last-child > a:hover {
  background: var(--jcim-gold) !important;
  border-color: var(--jcim-gold);
  color: var(--jcim-teal-dark) !important;
}

/* ---------- Menu utama ---------- */
.pkp_navigation_primary_row {
  background: linear-gradient(90deg, var(--jcim-teal-dark), var(--jcim-teal));
  border-top: 3px solid var(--jcim-gold);
  padding: 0 24px;
}

.pkp_navigation_primary_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: none;
  padding: 0;
}

.pkp_navigation_primary > li > a {
  margin: 0;
  padding: 15px 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-bottom-color: var(--jcim-gold);
  text-decoration: none;
}

/* Dropdown (mis. About): latar putih, teks teal agar tidak putih-di-atas-putih */
html body .pkp_navigation_primary ul {
  z-index: 1000;
  min-width: 220px;
  padding: 6px 0;
  background: #fff;
  border-top: 3px solid var(--jcim-gold);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}

html body .pkp_navigation_primary ul a {
  display: block;
  margin: 0;
  padding: 9px 16px !important;
  color: var(--jcim-teal) !important;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-left: 3px solid transparent;
}

/* Dropdown menu akun (Dashboard, View Profile, Logout) */
html body #navigationUser ul {
  background: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}

html body #navigationUser ul a {
  color: var(--jcim-teal) !important;
  background: #fff !important;
  border-left: 3px solid transparent !important;
  font-weight: 600;
}

html body #navigationUser ul a:hover,
html body #navigationUser ul a:focus {
  color: var(--jcim-teal-dark) !important;
  background: var(--jcim-cream) !important;
  border-left-color: var(--jcim-gold) !important;
}

html body .pkp_navigation_primary ul a:hover,
html body .pkp_navigation_primary ul a:focus {
  color: var(--jcim-teal-dark) !important;
  background: var(--jcim-cream);
  border-left-color: var(--jcim-gold);
  text-decoration: none;
}

.pkp_navigation_search_wrapper a {
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.pkp_navigation_search_wrapper a:hover {
  background: var(--jcim-gold);
  border-color: var(--jcim-gold);
  color: var(--jcim-teal-dark);
}

/* ---------- Kerangka konten ---------- */
/* Stylesheet situs (portal) memaksa .pkp_structure_main { width:100%; padding:0 } !important.
   Selector di bawah lebih spesifik, jadi tetap menang walau dimuat lebih dulu. */
.pkp_structure_content.has_sidebar .pkp_structure_main,
.pkp_structure_content .pkp_structure_main {
  box-sizing: border-box;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 28px 20px 40px !important;
}

.pkp_structure_content .pkp_structure_sidebar {
  box-sizing: border-box;
  float: none !important;
  width: auto !important;
  padding: 0 20px 32px !important;
}

@media (min-width: 992px) {
  .pkp_structure_content.has_sidebar {
    display: flex !important;
    align-items: flex-start;
    padding: 32px 0 !important;
  }

  /* clearfix bawaan theme tidak dibutuhkan di flexbox */
  .pkp_structure_content.has_sidebar::before,
  .pkp_structure_content.has_sidebar::after { display: none !important; }

  .pkp_structure_content.has_sidebar .pkp_structure_main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 36px 48px !important;
  }

  .pkp_structure_content.has_sidebar .pkp_structure_sidebar {
    flex: 0 0 310px;
    width: 310px !important;
    padding: 0 28px 32px 0 !important;
  }
}

.pkp_structure_main p { margin: 0 0 1em; text-align: left; }

/* Judul "About the Journal" bawaan OJS disembunyikan,
   karena snippet beranda punya hero sendiri */
.homepage_about > h2 { display: none; }

.pkp_structure_main h2 {
  margin: 36px 0 16px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--jcim-teal);
}

/* =========================================================
   KOMPONEN BERANDA (dipakai oleh jcim-homepage.html)
   ========================================================= */

/* Hero */
.jcim-hero {
  position: relative;
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 28px 32px 44px;
  border-radius: var(--jcim-radius);
  background: linear-gradient(135deg, var(--jcim-teal-dark) 0%, var(--jcim-teal) 60%, #1d7a7e 100%);
  border-bottom: 4px solid var(--jcim-gold);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--jcim-shadow);
}

.jcim-hero::before,
.jcim-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  pointer-events: none;
}
.jcim-hero::before { width: 130px; height: 130px; top: -40px; right: 40px; }
.jcim-hero::after  { width: 60px;  height: 60px;  top: 60px;  right: 16px; }

.jcim-hero__cover {
  flex: 0 0 150px;
  position: relative;
  z-index: 1;
}

.jcim-hero__cover img {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}

.jcim-hero__body { position: relative; z-index: 1; }

.pkp_structure_main .jcim-hero__title {
  margin: 0;
  font-family: "Merriweather", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
}

.pkp_structure_main .jcim-hero__subtitle {
  margin: 6px 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--jcim-gold-soft);
}

.pkp_structure_main .jcim-hero__desc {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

.jcim-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.jcim-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s, background .2s, color .2s;
}
.jcim-btn:hover { transform: translateY(-1px); text-decoration: none; }

.jcim-btn--primary { background: #fff; color: var(--jcim-teal); }
.jcim-btn--primary:hover { background: var(--jcim-gold-soft); color: var(--jcim-teal-dark); }

.jcim-btn--ghost { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
.jcim-btn--ghost:hover { background: rgba(255, 255, 255, .15); color: #fff; }

/* Kartu info di bawah hero */
.jcim-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: -22px 16px 32px;
}

.jcim-stat {
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--jcim-border);
  border-top: 3px solid var(--jcim-gold);
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(19, 92, 95, .08);
}

.jcim-stat__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jcim-muted);
}

.jcim-stat__value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--jcim-text);
}

/* Judul seksi kecil */
.pkp_structure_main .jcim-section-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jcim-gold-dark);
}

/* Kotak About */
.jcim-card {
  margin-bottom: 28px;
  background: #fff;
  border: 1px solid var(--jcim-border);
  border-radius: var(--jcim-radius);
  overflow: hidden;
}

.jcim-card__body { padding: 18px 20px; font-size: 14px; }
.pkp_structure_main .jcim-card__body p { margin: 0 0 .8em; }
.pkp_structure_main .jcim-card__body p:last-child { margin-bottom: 0; }
.jcim-card__body strong { color: var(--jcim-teal); }

.jcim-card__foot {
  padding: 16px 20px 20px;
  background: var(--jcim-cream);
  border-top: 1px solid var(--jcim-border);
}

.pkp_structure_main .jcim-card__foot h3 {
  margin: 0 0 10px;
  font-family: "Merriweather", Georgia, serif;
  font-size: 1.15rem;
  color: var(--jcim-teal);
}

/* Tabel Quick Facts */
table.jcim-facts {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 14px;
}

table.jcim-facts th,
table.jcim-facts td {
  padding: 8px 12px;
  background: #fff;
  border-top: 1px solid var(--jcim-border);
  border-bottom: 1px solid var(--jcim-border);
  text-align: left;
  vertical-align: top;
}

table.jcim-facts th {
  width: 38%;
  font-weight: 700;
  color: var(--jcim-teal);
  border-left: 3px solid var(--jcim-gold);
  border-radius: 8px 0 0 8px;
}

table.jcim-facts td {
  border-right: 1px solid var(--jcim-border);
  border-radius: 0 8px 8px 0;
}

/* ---------- Current issue ---------- */
.current_issue .current_issue_title {
  margin: 0 0 18px;
  font-weight: 700;
}

.obj_issue_toc .heading {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.obj_issue_toc .cover {
  flex: 0 0 200px;
  float: none;
  width: 200px;
  margin: 0;
}

.obj_issue_toc .cover img {
  width: 100%;
  max-height: none;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}

.obj_issue_toc .sections .section > h2,
.obj_issue_toc .sections .section > h3 {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jcim-gold-dark);
}

/* Rapatkan daftar artikel: theme memberi tiap <li> margin bawah 30px */
html body .cmp_article_list > li { margin: 0 0 10px !important; padding: 0 !important; }
html body .obj_article_summary .galleys_links { margin-top: 8px !important; }

.obj_article_summary {
  padding: 12px 16px;
  margin-bottom: 0;
  border: 1px solid var(--jcim-border);
  border-left: 3px solid var(--jcim-gold);
  border-radius: 10px;
  transition: box-shadow .2s;
}
.obj_article_summary:hover { box-shadow: var(--jcim-shadow); }

.obj_article_summary > .title { font-weight: 700; line-height: 1.45; }
.obj_article_summary .meta { font-size: 13px; color: var(--jcim-muted); }

/* Tombol PDF & tombol submit: theme memberi latar dari "warna dasar" di
   Appearance, jadi ditimpa dengan !important agar ikut palet */
html body .obj_galley_link,
html body .cmp_manuscript_button,
html body .block_make_submission a {
  background: var(--jcim-teal) !important;
  border: 1px solid var(--jcim-teal) !important;
  border-radius: 999px;
  color: #fff !important;
  font-weight: 700;
}

html body .obj_galley_link::before { color: inherit !important; }

html body .obj_galley_link:hover,
html body .obj_galley_link:focus,
html body .cmp_manuscript_button:hover,
html body .cmp_manuscript_button:focus,
html body .block_make_submission a:hover,
html body .block_make_submission a:focus {
  background: var(--jcim-gold) !important;
  border-color: var(--jcim-gold) !important;
  color: var(--jcim-teal-dark) !important;
}

/* =========================================================
   SIDEBAR (dipakai oleh jcim-sidebar-blocks.html)
   ========================================================= */
.pkp_structure_sidebar .pkp_block {
  padding: 0;
  margin-bottom: 18px;
}

/* Block bawaan OJS (bukan custom) tetap rapi */
.pkp_structure_sidebar .pkp_block:not(.block_custom) {
  padding: 16px 18px;
  background: var(--jcim-cream);
  border: 1px solid var(--jcim-border);
  border-radius: var(--jcim-radius);
}

.pkp_block .title {
  font-weight: 800;
  color: var(--jcim-teal);
}

/* Tombol besar Make Submission */
.jcim-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: var(--jcim-radius);
  background: var(--jcim-gold);
  color: var(--jcim-teal-dark);
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(202, 158, 58, .4);
  transition: transform .15s;
}
.jcim-submit:hover,
.jcim-submit:focus { color: var(--jcim-teal-dark); text-decoration: none; transform: translateY(-2px); }

.jcim-submit--outline {
  background: #fff;
  color: var(--jcim-teal);
  border: 2px solid var(--jcim-teal);
  box-shadow: none;
}
.jcim-submit--outline:hover,
.jcim-submit--outline:focus { background: var(--jcim-cream); color: var(--jcim-teal); }

/* Wadah sidebar gabungan (jcim-sidebar.html) */
.jcim-side { display: flex; flex-direction: column; gap: 18px; }
.jcim-side .jcim-submit { padding: 13px; font-size: 1.05rem; }

/* Deretan logo indeksasi / tools */
.jcim-logos { display: flex; flex-direction: column; gap: 10px; }
/* Gambar logo sudah berbingkai sendiri, jadi tautannya cukup diberi efek hover */
.jcim-logos a {
  display: block;
  border-radius: 8px;
  transition: transform .15s, box-shadow .2s;
}
.jcim-logos a:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(19, 92, 95, .15); }
.jcim-logos img { display: block; width: 100%; height: auto; }

/* Kartu gambar (mis. indeks, validasi LoA) */
.jcim-badge-card {
  border: 1px solid var(--jcim-border);
  border-radius: var(--jcim-radius);
  overflow: hidden;
  background: #fff;
}

.jcim-badge-card h3 {
  margin: 0;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--jcim-teal);
}

.jcim-badge-card .jcim-badge-card__body {
  padding: 14px;
  text-align: center;
}

.jcim-badge-card img { max-width: 100%; height: auto; }

/* Menu bertingkat (For Authors, Journal Information) */
.jcim-menu {
  border-radius: var(--jcim-radius);
  overflow: hidden;
  background: var(--jcim-teal);
  box-shadow: var(--jcim-shadow);
}

.jcim-menu h3 {
  margin: 0;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  background: var(--jcim-teal-dark);
  border-bottom: 3px solid var(--jcim-gold);
}

.jcim-menu ul { margin: 0; padding: 0; list-style: none; }

.jcim-menu li + li { border-top: 1px solid rgba(255, 255, 255, .12); }

.jcim-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .2s, border-color .2s, padding-left .2s;
}

.jcim-menu a:hover,
.jcim-menu a:focus {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-left-color: var(--jcim-gold);
  padding-left: 20px;
}

/* ---------- Footer ---------- */
.pkp_structure_footer_wrapper {
  background: var(--jcim-teal-dark);
  color: rgba(255, 255, 255, .85);
  border-top: 3px solid var(--jcim-gold);
}
.pkp_structure_footer_wrapper a { color: var(--jcim-gold); }
/* Footer ringkas: lisensi di kiri-tengah, logo OJS/PKP kecil di kanan.
   Isi footer punya .pkp_footer_content bersarang, jadi padding-nya dinolkan. */
html body .pkp_structure_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 28px !important;
}
html body .pkp_footer_content { flex: 1 1 auto; padding: 0 !important; }
html body .pkp_footer_content p { margin: 4px 0 !important; font-size: 13px; line-height: 1.5; }
html body .pkp_footer_content img { max-height: 28px; width: auto; }
html body .pkp_brand_footer { flex: 0 0 auto; padding: 0 !important; }
html body .pkp_brand_footer img { height: 36px !important; width: auto !important; max-width: none; }
/* sisa ikon ekstensi Google Translate yang ikut tertempel di isi footer */
.pkp_structure_footer .gtx-trans-icon { display: none !important; }

@media (max-width: 640px) {
  html body .pkp_structure_footer { flex-direction: column; gap: 12px; padding: 16px !important; }
}

/* ---------- Responsif ---------- */
@media (max-width: 992px) {
  .pkp_structure_page { margin: 0; border-radius: 0; }
  .pkp_navigation_primary_row { padding: 0; }
  .pkp_navigation_primary > li > a { padding: 12px 16px; }
}

@media (max-width: 640px) {
  .jcim-hero { flex-direction: column; text-align: center; padding: 24px 20px 40px; }
  .jcim-hero__cover { flex-basis: auto; width: 130px; }
  .jcim-hero__actions { justify-content: center; }
  .pkp_structure_main .jcim-hero__title { font-size: 2rem; }
  .jcim-stats { grid-template-columns: 1fr; margin: -20px 8px 24px; }
  .obj_issue_toc .heading { flex-direction: column; }
  table.jcim-facts th { width: auto; }
}