/* ============================================================
   Custom stylesheet — Bogor Hospitality Journal
   OJS 3.3.0.19 (Default theme)

   Upload: Settings > Website > Appearance > Advanced
           > Journal Style Sheet
   Setelah upload ulang, tekan Ctrl+Shift+R (cache browser
   tidak otomatis diperbarui di OJS 3.3).
   ============================================================ */


/* ---- 1. Warna --------------------------------------------
   Ubah tiga nilai ini, sisanya mengikuti.
   --brand sebaiknya disamakan dengan warna biru pada banner
   agar banner tidak terlihat seperti kotak yang ditempel.   */

:root {
  --brand:              #1f7fa8;   /* header dan strip atas    */
  --brand-dark:         #1f7fa8;   /* baris menu, footer, link */
  --brand-accent:       #f2a900;   /* tombol PDF               */
  --brand-accent-dark:  #c98500;   /* tombol PDF saat disorot  */
  --text:               #2b2b2b;
}


/* ---- 2. Header dan banner --------------------------------
   Banner ditampilkan utuh, tinggi mengikuti gambar aslinya
   dan menyusut sendiri saat layar mengecil.                 */

.pkp_structure_head {
  background: var(--brand);
}

/* Baris user (admin-02) dibuat transparan agar menyatu
   dengan warna header, bukan tampil sebagai strip terpisah. */
.pkp_navigation_user_wrapper {
  background: transparent !important;
}

/* Banner melebar penuh ke tepi layar (full-bleed).
   Margin negatif menembus batas container yang punya
   lebar maksimum.                                            */
.pkp_site_name {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
}

.pkp_site_name .is_img,
.pkp_site_name .is_img img {
  display: block;      /* hilangkan celah ~4px di bawah gambar */
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
}

/* Cegah scrollbar horizontal akibat pemakaian 100vw. */
body {
  overflow-x: hidden;
}

/* Rapatkan sisa jarak pada pembungkus header. */
.pkp_head_wrapper {
  padding-bottom: 0 !important;
}

.pkp_site_name_wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_site_name,
.pkp_site_name a {
  color: #fff;
}


/* ---- 3. Menu navigasi ------------------------------------ */

.pkp_navigation_primary_row {
  background: var(--brand-dark);
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Jarak kiri menu. Memakai #navigationPrimary karena tema
   mengatur padding lewat selector ID, yang selalu menang
   melawan selector class.                                    */
#navigationPrimary,
.pkp_navigation_primary {
  padding-left: 20px !important;
}

.pkp_navigation_primary > li > a {
  color: #fff;
  font-weight: 600;
  padding-top: 14px;
  padding-bottom: 14px;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: rgba(255, 255, 255, 0.15);
  text-decoration: none;
}


/* ---- 4. Teks dan link isi halaman ------------------------ */

.pkp_structure_main {
  color: var(--text);
  line-height: 1.65;
}

.pkp_structure_main a {
  color: var(--brand-dark);
}

.pkp_structure_main a:hover {
  color: var(--brand);
}


/* ---- 5. Daftar artikel ----------------------------------- */

.obj_article_summary .title a {
  font-weight: 600;
}

.obj_article_summary .authors {
  color: #666;
  font-size: 0.9em;
}

.obj_issue_toc .section > h2 {
  border-bottom: 2px solid var(--brand);
  padding-bottom: 0.3em;
}


/* ---- 6. Tombol galley (PDF / HTML) ----------------------- */

.obj_galley_link {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #1a1a1a;
}

/* Hover: amber lebih tua, teks tetap gelap.
   Selector sengaja diperpanjang jadi .pkp_structure_main
   a.obj_galley_link karena aturan .pkp_structure_main a:hover
   di bagian 4 punya specificity lebih tinggi dan membuat teks
   tombol ikut berwarna biru.                                 */
.pkp_structure_main a.obj_galley_link:hover,
.pkp_structure_main a.obj_galley_link:focus {
  background: var(--brand-accent-dark);
  border-color: var(--brand-accent-dark);
  color: #1a1a1a;
}


/* ---- 7. Sidebar ------------------------------------------ */

.pkp_block .title {
  color: var(--brand-dark);
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.4em;
}

/* Blok menu sidebar (class .menu-block / .btn-block-menu).
   Class ini sudah ada di HTML blok Anda tetapi belum punya
   CSS, itu sebabnya link tampil menyambung jadi satu paragraf.
   Aturan di bawah hanya berlaku untuk blok ini, blok sidebar
   lain tidak terpengaruh.                                    */

.pkp_block .menu-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}

.pkp_block .menu-block .btn-block-menu {
  display: block;
  padding: 10px 12px;
  background: #f2f6f8;
  border-left: 3px solid var(--brand);
  color: var(--brand-dark);
  font-size: 0.92em;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pkp_block .menu-block .btn-block-menu:hover,
.pkp_block .menu-block .btn-block-menu:focus {
  background: var(--brand);
  border-left-color: var(--brand-dark);
  color: #fff;
  text-decoration: none;
}

/* Varian warna kedua (class .b2 pada link Anda).
   Aktifkan kalau ingin sebagian link dibedakan warnanya.

.pkp_block .menu-block .btn-block-menu.b2 {
  border-left-color: var(--brand-accent);
}
                                                             */


/* ---- 8. Footer ------------------------------------------- */

.pkp_structure_footer_wrapper {
  background: var(--brand-dark);
  color: #e8e8e8;
}

.pkp_structure_footer a {
  color: #fff;
  text-decoration: underline;
}


/* ---- 9. Aturan per halaman -------------------------------
   OJS menambahkan class pada <body> sesuai halaman:
     .pkp_page_index    beranda
     .pkp_page_issue    halaman terbitan
     .pkp_page_article  halaman artikel
     .pkp_page_about    halaman about

   Contoh — sembunyikan deskripsi jurnal di beranda saja:

.pkp_page_index .homepage_about {
  display: none;
}
                                                             */


/* ---- 10. Tampilan mobile ---------------------------------
   Banner tidak dipotong tingginya, hanya jaraknya dirapatkan. */

@media (max-width: 767px) {
  #navigationPrimary,
  .pkp_navigation_primary {
    padding-left: 12px !important;
  }
}


/* ---- 11. Animasi ------------------------------------------
   Sengaja dibuat halus. Durasi di bawah 0.3 detik terasa
   responsif; di atas 0.5 detik mulai terasa lambat.
   Hapus blok mana pun yang tidak Anda suka.                  */

/* Isi halaman muncul perlahan saat dimuat */
@keyframes bhj-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.pkp_structure_main {
  animation: bhj-fade-up 0.45s ease-out both;
}

/* Garis bawah menu utama.
   Memakai box-shadow inset, BUKAN ::after, karena tema Default
   sudah memakai ::after pada link menu untuk panah dropdown.
   Kalau dipaksa pakai ::after, panah "About" berubah jadi
   kotak putih.                                               */
.pkp_navigation_primary > li > a {
  transition: background-color 0.2s ease, box-shadow 0.25s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  box-shadow: inset 0 -3px 0 #fff;
}

/* Menu sidebar bergeser sedikit saat disorot */
.pkp_block .menu-block .btn-block-menu {
  transition: background 0.2s ease,
              border-color 0.2s ease,
              padding-left 0.2s ease;
}

.pkp_block .menu-block .btn-block-menu:hover,
.pkp_block .menu-block .btn-block-menu:focus {
  padding-left: 18px;
}

/* Daftar artikel terangkat tipis */
.obj_article_summary {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.obj_article_summary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Tombol galley */
.obj_galley_link {
  transition: background 0.2s ease,
              border-color 0.2s ease,
              transform 0.15s ease;
}

.obj_galley_link:hover {
  transform: translateY(-1px);
}

/* Sampul terbitan dan artikel.
   Memakai translateY, bukan scale, agar gambar tidak melebar
   dan mendorong teks di sebelahnya.                          */
.pkp_structure_main .cover img {
  display: block;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pkp_structure_main .cover:hover img,
.pkp_structure_main .cover img:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.20);
}

/* Alternatif kalau lebih suka efek membesar. Aktifkan yang
   ini dan nonaktifkan dua aturan di atas.

.pkp_structure_main .cover:hover img {
  transform: scale(1.04);
}
                                                             */

/* Logo pengindeks di sidebar (Google Scholar, Garuda,
   Dimensions, Copernicus, Crossref).
   Gambar-gambar ini tidak punya class, jadi ditarget lewat
   posisinya: gambar yang berada di dalam link di blok sidebar. */
.pkp_block .content a img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin: 6px 0;
  border-radius: 4px;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pkp_block .content a:hover img,
.pkp_block .content a:focus img {
  opacity: 1;
  transform: translateY(-3px);
}

/* Alternatif: logo abu-abu saat diam, berwarna saat disorot.
   Cocok kalau warna logo terasa ramai. Aktifkan blok ini dan
   hapus properti opacity pada dua aturan di atas.

.pkp_block .content a img {
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.25s ease;
}

.pkp_block .content a:hover img {
  filter: grayscale(0);
}
                                                             */

/* Scroll halus untuk link anchor */
html {
  scroll-behavior: smooth;
}

/* Matikan animasi bagi pengguna yang memilih pengurangan
   gerak di pengaturan sistemnya. Penting untuk aksesibilitas
   dan sebagian pembaca memang membutuhkannya.               */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}