/* =====================================================================
   Jurnal Praksis Bimbingan dan Konseling (ABKIN)
   Custom CSS untuk OJS 3.3.x — Tema "Default"
   Gaya acuan: e-journal Jurnal Ners (UNAIR) — bersih & profesional
   ---------------------------------------------------------------------
   PRINSIP:
   - Hanya MENATA ULANG TAMPILAN (warna, tipografi, kartu, spasi).
   - TIDAK merombak struktur layout tema (tidak pakai grid/float baru),
     supaya tata letak tema tetap utuh dan tidak rusak.
   - Semua selector menarget kelas resmi tema Default OJS 3.3.
   ---------------------------------------------------------------------
   PASANG:
   Settings -> Website -> Appearance -> tab "Setup" ->
   "Journal Style Sheet" -> Upload file ini -> Save.
   ===================================================================== */

/* Font opsional (hapus baris @import bila ingin pakai font sistem). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
  /* === WARNA KHAS JURNAL — ubah di sini untuk rebranding cepat === */
  --jbk-primary:      #14467a;  /* biru akademik (warna utama)      */
  --jbk-primary-dark: #0e3460;  /* biru tua (hover/footer)          */
  --jbk-primary-soft: #e8eef6;  /* biru sangat muda (latar lembut)  */
  --jbk-accent:       #2e8b6e;  /* hijau konseling (aksen)          */
  --jbk-accent-dark:  #226a54;

  /* Netral */
  --jbk-bg:      #f4f6f9;        /* latar halaman */
  --jbk-surface: #ffffff;        /* kartu / konten */
  --jbk-border:  #e3e8ef;
  --jbk-text:    #1f2937;
  --jbk-muted:   #5b6776;

  --jbk-radius: 8px;
  --jbk-shadow: 0 1px 2px rgba(20,35,55,.04), 0 4px 14px rgba(20,35,55,.05);
  --jbk-max:    1200px;

  --font-head: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------
   1. Dasar & tipografi
   --------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--jbk-text);
  background: var(--jbk-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {
  font-family: var(--font-head);
  color: var(--jbk-primary-dark);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--jbk-primary); text-decoration: none; }
a:hover, a:focus { color: var(--jbk-accent-dark); text-decoration: underline; }

/* Kunci responsif: gambar tidak pernah meluber */
img { max-width: 100%; height: auto; }

/* Lebar konten yang nyaman di layar lebar */
.pkp_head_wrapper,
.pkp_structure_content,
.pkp_navigation_primary_row > div,
.pkp_structure_footer_wrapper {
  max-width: var(--jbk-max);
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------
   2. Header & nama jurnal (band putih + garis aksen)
   --------------------------------------------------------------- */
.pkp_structure_head {
  background: var(--jbk-surface);
  border-bottom: 1px solid var(--jbk-border);
}
/* Header — banner di atas, menu di bawah (urutan bawaan tema dijaga) */
.pkp_head_wrapper { padding: 12px 20px; }

.pkp_site_name .is_text,
.pkp_site_name a {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--jbk-primary-dark);
  line-height: 1.2;
}
/* Banner header lebih besar (untuk banner lebar, naikkan/turunkan angka ini) */
.pkp_site_name img { max-height: 130px; width: auto; max-width: 100%; }

/* ---------------------------------------------------------------
   3. Navigasi utama — bar solid biru (ala JNERS)
   --------------------------------------------------------------- */
.pkp_navigation_primary_row {
  background: var(--jbk-primary);
  border-bottom: 3px solid var(--jbk-accent);
}
ul.pkp_navigation_primary > li > a,
.pkp_navigation_primary a {
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 16px;
}
ul.pkp_navigation_primary > li > a:hover,
ul.pkp_navigation_primary > li > a:focus {
  background: var(--jbk-primary-dark);
  color: #fff;
  text-decoration: none;
}
/* Submenu */
.pkp_navigation_primary ul {
  background: var(--jbk-primary-dark);
  box-shadow: var(--jbk-shadow);
}
.pkp_navigation_primary ul a { color: #eaf0f7; }

/* Register/Login dirata-kanankan (di atas banner) */
.pkp_navigation_user_wrapper { width: 100%; margin: 0 0 6px; }

/* --- Register & Login: tautan ber-ikon (gaya JNERS) --- */
ul.pkp_navigation_user { display: flex; justify-content: flex-end; gap: 2px; align-items: center; }
ul.pkp_navigation_user > li > a {
  color: var(--jbk-primary-dark);
  font-weight: 600;
  font-size: .9rem;
}
ul.pkp_navigation_user > li > a:hover { color: var(--jbk-accent-dark); text-decoration: none; }

/* Ikon HANYA untuk Register & Login tingkat atas (saat belum login) */
ul.pkp_navigation_user > li > a[href*="register"] {
  padding: 6px 10px 6px 26px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230e3460'><path d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z'/></svg>") no-repeat left center / 16px;
}
ul.pkp_navigation_user > li > a[href*="login"]:not([href*="signOut"]) {
  padding: 6px 10px 6px 26px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230e3460'><path d='M10 3h6a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-6v-2h6V5h-6Zm-1.4 4.6L12 11H3v2h9l-3.4 3.4L10 18l6-6-6-6Z'/></svg>") no-repeat left center / 16px;
}
/* Menu dropdown (Dashboard/Logout dll.) tidak boleh kena ikon */
ul.pkp_navigation_user ul a { background-image: none !important; padding-left: 16px; }

/* Tombol toggle menu (HP) */
.pkp_site_nav_toggle { background: var(--jbk-primary); color: #fff; border-radius: var(--jbk-radius); }

/* --- Kotak pencarian: input + tombol (gaya JNERS) --- */
.pkp_search { display: flex; align-items: center; }
.pkp_search input[type="search"],
.pkp_search input[type="text"] {
  border: 2px solid var(--jbk-border);
  border-right: none;
  border-radius: var(--jbk-radius) 0 0 var(--jbk-radius);
  padding: 8px 12px;
  min-width: 170px;
}
.pkp_search input:focus { outline: none; border-color: var(--jbk-primary); }
.pkp_search button,
.pkp_search input[type="submit"] {
  border: 2px solid var(--jbk-primary);
  background: var(--jbk-primary) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M10 2a8 8 0 1 0 4.9 14.3l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2Zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z'/></svg>") no-repeat center / 18px;
  border-radius: 0 var(--jbk-radius) var(--jbk-radius) 0;
  width: 44px; height: 40px;
  text-indent: -9999px;   /* sembunyikan teks tombol, sisakan ikon */
  overflow: hidden;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   4. Konten utama & sidebar — tata letak dua kolom yang ANDAL
   ---------------------------------------------------------------
   Catatan: di layar lebar, tema kadang gagal menyejajarkan sidebar
   sehingga ia jatuh ke bawah. Di sini kita ambil alih dengan flexbox
   agar konten utama & sidebar SELALU sejajar dari atas.
   --------------------------------------------------------------- */
.pkp_structure_content { padding: 26px 20px; }

.pkp_structure_main {
  background: var(--jbk-surface);
  border: 1px solid var(--jbk-border);
  border-radius: var(--jbk-radius);
  box-shadow: var(--jbk-shadow);
  padding: 28px 32px;
}

/* Dua kolom hanya pada layar lebar (>= 992px) */
@media (min-width: 992px) {
  .pkp_structure_content {
    display: flex;
    align-items: flex-start;   /* sidebar menempel di atas, bukan jatuh */
    gap: 28px;
  }
  .pkp_structure_main {
    flex: 1 1 auto;
    min-width: 0;              /* cegah konten/tabel meluber */
    width: auto !important;
    float: none !important;    /* batalkan float bawaan tema */
    margin: 0 !important;
  }
  .pkp_structure_sidebar,
  .pkp_sidebar {
    flex: 0 0 300px;
    width: 300px !important;
    float: none !important;
    margin: 0 !important;
  }
}
/* Hilangkan garis/pemisah vertikal bawaan tema di area konten & sidebar.
   Selektor diperkuat (spesifisitas tinggi) agar mengalahkan aturan tema. */
.pkp_structure_sidebar,
.pkp_sidebar,
.pkp_structure_content .pkp_structure_sidebar,
.pkp_structure_content .pkp_sidebar,
.pkp_structure_page .pkp_structure_content .pkp_structure_sidebar,
.pkp_structure_main + .pkp_structure_sidebar {
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
.pkp_structure_content,
.pkp_structure_page .pkp_structure_content {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after,
.pkp_sidebar::before,
.pkp_sidebar::after,
.pkp_structure_main::before,
.pkp_structure_main::after {
  display: none !important;
  border: 0 !important;
  background: none !important;
}
.pkp_structure_main h2,
.homepage_about h2 {
  border-bottom: 2px solid var(--jbk-primary-soft);
  padding-bottom: 8px;
  margin-top: 1.6em;
  font-size: 1.4rem;
}

/* Gambar homepage / sampul */
.cmp_homepage_image img,
.homepage_image img {
  border-radius: var(--jbk-radius);
  box-shadow: var(--jbk-shadow);
  margin-bottom: 18px;
}

/* ---------------------------------------------------------------
   5. Blok sidebar (Menu, Information, Penerbit, dll.)
   --------------------------------------------------------------- */
.pkp_block {
  background: var(--jbk-surface);
  border: 1px solid var(--jbk-border);
  border-radius: var(--jbk-radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--jbk-shadow);
}
.pkp_block .title,
.pkp_block .pkp_block_title {
  font-family: var(--font-head);
  color: var(--jbk-primary-dark);
  font-size: 1rem;
  font-weight: 700;
  border-left: 4px solid var(--jbk-accent);
  padding: 2px 0 2px 10px;
  margin-bottom: 12px;
}
.pkp_block ul { list-style: none; padding-left: 0; margin: 0; }
.pkp_block li { padding: 6px 0; border-bottom: 1px solid var(--jbk-border); font-size: .95rem; }
.pkp_block li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------
   6. Tabel indexing (logo) — responsif
   --------------------------------------------------------------- */
.pkp_structure_main table { border-collapse: collapse; max-width: 100%; }
.pkp_structure_main table td,
.pkp_structure_main table th { padding: 8px 10px; vertical-align: middle; }
.pkp_structure_main table img { max-height: 56px; width: auto; object-fit: contain; }

/* ---------------------------------------------------------------
   7. Daftar terbitan & artikel (kartu ala JNERS)
   --------------------------------------------------------------- */
.obj_article_summary {
  border-bottom: 1px solid var(--jbk-border);
  padding: 18px 0;
}
.obj_article_summary .title a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--jbk-primary-dark);
}
.obj_article_summary .authors { color: var(--jbk-muted); font-size: .92rem; }

/* Tautan unduh galley (PDF, dsb.) sebagai tombol kecil */
.obj_galley_link, a.obj_galley_link {
  display: inline-block;
  background: var(--jbk-primary-soft);
  color: var(--jbk-primary-dark);
  border-radius: 6px;
  padding: 4px 12px;
  margin: 2px 4px 2px 0;
  font-weight: 600;
  font-size: .85rem;
}
.obj_galley_link:hover { background: var(--jbk-primary); color: #fff; text-decoration: none; }

/* Kata kunci sebagai badge */
.obj_article_details .item.keywords span.value a {
  display: inline-block;
  background: var(--jbk-bg);
  border: 1px solid var(--jbk-border);
  border-radius: 100px;
  padding: 2px 12px;
  margin: 2px;
  font-size: .85rem;
}
.obj_article_details .item.keywords span.value a:hover {
  background: var(--jbk-primary); color: #fff; border-color: var(--jbk-primary); text-decoration: none;
}

/* Lebar baca ideal untuk halaman artikel penuh */
.obj_article_details .main_entry,
.obj_article_details .article-details-content { max-width: 74ch; }

/* ---------------------------------------------------------------
   8. Tombol & form
   --------------------------------------------------------------- */
.pkp_button, .cmp_button,
button.submitFormButton,
input[type="submit"], .btn {
  background: var(--jbk-primary);
  color: #fff;
  border: none;
  border-radius: var(--jbk-radius);
  padding: 10px 22px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.pkp_button:hover, .cmp_button:hover,
input[type="submit"]:hover, .btn:hover { background: var(--jbk-primary-dark); }

input[type="text"], input[type="email"], input[type="password"],
textarea, select {
  border: 1px solid var(--jbk-border);
  border-radius: 8px;
  padding: 9px 12px;
  max-width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--jbk-primary);
  box-shadow: 0 0 0 3px var(--jbk-primary-soft);
}

/* ---------------------------------------------------------------
   9. Footer — terang, ringkas, tanpa logo OJS/PKP (gaya JNERS)
   --------------------------------------------------------------- */
.pkp_structure_footer {
  background: var(--jbk-surface);
  color: var(--jbk-text);
  border-top: 3px solid var(--jbk-primary);
  font-size: .9rem;
}
.pkp_structure_footer a { color: var(--jbk-primary); }
.pkp_structure_footer a:hover { color: var(--jbk-accent-dark); }
.pkp_structure_footer_wrapper { padding: 22px 20px; }
.pkp_structure_footer h2,
.pkp_structure_footer h3,
.pkp_structure_footer strong { color: var(--jbk-primary-dark); }

/* Sembunyikan tautan & logo "OJS / PKP" */
.pkp_structure_footer a[href*="aboutThisPublishingSystem"],
.pkp_structure_footer img[src*="ojs_brand"],
.pkp_brand_footer,
.pkp_structure_footer .pkp_brand_footer { display: none !important; }

/* Layout footer ABKIN (dipakai bila HTML footer memakai kelas berikut) */
.jbk-footer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 30px; }
.jbk-footer-col { flex: 1 1 240px; }
.jbk-footer-col h3 { font-size: 1rem; margin: 0 0 8px; }
.jbk-footer-col p { margin: 0 0 6px; color: var(--jbk-muted); line-height: 1.6; }
.jbk-footer-logo { flex: 0 0 auto; margin-left: auto; }
.jbk-footer-logo img { max-height: 64px; width: auto; }
.jbk-footer-license {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--jbk-border);
  text-align: center; color: var(--jbk-muted); font-size: .82rem;
}
@media (max-width: 767px) { .jbk-footer-logo { margin-left: 0; } }

/* ---------------------------------------------------------------
   10. RESPONSIVE — Tablet (<= 991px)
   --------------------------------------------------------------- */
@media (max-width: 991px) {
  .pkp_structure_main { padding: 22px 22px; }
  /* Sidebar full-width & turun ke bawah (tema sudah begini; ditegaskan) */
  .pkp_structure_sidebar, .pkp_sidebar {
    width: 100% !important; float: none !important; margin-top: 22px;
  }
  .pkp_structure_main { width: 100% !important; float: none !important; }
}

/* ---------------------------------------------------------------
   11. RESPONSIVE — Ponsel (<= 767px)
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  body { font-size: 15.5px; }
  .pkp_head_wrapper { padding: 12px 14px; }
  .pkp_structure_content { padding: 16px 12px; }
  .pkp_structure_main { padding: 18px 16px; }
  .pkp_site_name img { max-height: 64px; }

  h1, .pkp_structure_main h1 { font-size: 1.45rem; }
  .pkp_structure_main h2 { font-size: 1.2rem; }

  /* Tabel indexing bisa digeser horizontal, tidak memecah layout */
  .pkp_structure_main table {
    display: block; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .pkp_structure_main table img { max-height: 44px; }

  /* Menu menumpuk rapi saat toggle dibuka */
  ul.pkp_navigation_primary > li { display: block; width: 100%; }

  .pkp_button, .cmp_button, input[type="submit"], .btn { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------------
   12. Aksesibilitas
   --------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--jbk-accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}