/* ============================================================
   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. Ini untuk desktop; di layar < 992px
   banner diatur ulang di bagian 10.                          */
.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) ----------------------- */

/* Selector diperpanjang dengan alasan yang sama seperti aturan
   hover di bawah: tanpa itu aturan .pkp_structure_main a di
   bagian 4 menang dan teks tombol tampil biru di atas amber
   (kontras rendah, sulit dibaca terutama di layar ponsel).   */
.obj_galley_link,
.pkp_structure_main a.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 dan tablet (< 992px) ------------
   Di bawah 992px tema Default memakai layout mobile: header
   dikunci setinggi 40px dan logo diletakkan absolut di samping
   tombol menu. Aturan full-bleed di bagian 2 membuat banner
   meluber menutupi isi halaman dan tergeser ke kanan. Panel
   menu juga memakai warna dasar tema (#2834a8), bukan --brand,
   sehingga tampil dua warna.

   Perbaikannya: banner kembali ke alur normal selebar layar
   (tanpa trik 100vw), tombol menu menjadi bilah "Menu" di
   bawah banner, dan panel menu disamakan warnanya dengan
   header. Desktop (>= 992px) tidak berubah.                 */

@media (max-width: 991.98px) {

  /* Header selebar layar, tanpa jarak samping */
  .has_site_logo .pkp_head_wrapper {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .pkp_site_name_wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  /* Banner utuh selebar layar, tingginya ikut gambar */
  .pkp_site_name {
    position: relative;
    left: auto;
    right: auto;
    order: 1;
    width: 100%;
    margin: 0 !important;
    white-space: normal;
  }

  .pkp_site_name .is_img {
    margin: 0;
  }

  /* Tombol menu menjadi bilah penuh di bawah banner */
  .pkp_site_nav_toggle {
    position: relative;
    top: auto;
    left: auto;
    order: 2;
    width: 100%;
    height: 48px;
    padding: 0 20px 0 58px;
    background: var(--brand-dark);
    box-shadow: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 48px;
    text-align: left;
    cursor: pointer;
  }

  /* Baris content kedua hanya dipakai browser yang mendukung
     teks alternatif, agar pembaca layar tidak membaca "Menu"
     dua kali (tombol sudah berlabel "Open Menu").            */
  .pkp_site_nav_toggle::after {
    content: "Menu";
    content: "Menu" / "";
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pkp_site_nav_toggle > span {
    left: 20px;
    transform: translateY(-50%);
  }

  .pkp_site_nav_toggle:focus {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }

  .pkp_site_nav_toggle:focus:not(:focus-visible) {
    outline: none;
  }

  /* Panel menu: satu warna dengan header, setiap item berupa
     baris penuh yang mudah disentuh                          */
  .pkp_site_nav_menu {
    padding: 0;
    background: var(--brand-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  }

  #navigationPrimary,
  .pkp_navigation_primary {
    padding-left: 0 !important;
  }

  .pkp_site_nav_menu .pkp_nav_list a,
  .pkp_site_nav_menu .pkp_navigation_search_wrapper a {
    display: block;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    line-height: 1.4;
    text-decoration: none;
  }

  /* Sub-menu (isi "About" dan menu akun) menjorok ke dalam */
  .pkp_site_nav_menu ul ul {
    padding-left: 0;
  }

  .pkp_site_nav_menu .pkp_nav_list ul a {
    padding-left: 36px;
    font-weight: 400;
    background: rgba(0, 0, 0, 0.08);
  }

  .pkp_site_nav_menu .pkp_nav_list a:hover,
  .pkp_site_nav_menu .pkp_nav_list a:focus,
  .pkp_site_nav_menu .pkp_navigation_search_wrapper a:hover,
  .pkp_site_nav_menu .pkp_navigation_search_wrapper a:focus {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: none;
    color: #fff;
    text-decoration: none;
  }

  .pkp_navigation_search_wrapper {
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Register / Login sedikit dibedakan dari menu utama */
  .pkp_navigation_user.pkp_navigation_user {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.12);
  }

  /* Isi halaman: URL panjang, tabel, gambar atau iframe yang
     lebih lebar dari layar membuat halaman melebar dan
     tampilannya mengecil. URL dipatahkan, tabel bisa digeser
     ke samping di dalam kotaknya sendiri.                    */
  .pkp_structure_main,
  .pkp_structure_sidebar,
  .pkp_structure_footer {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  .pkp_structure_main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .pkp_structure_main iframe,
  .pkp_structure_main video,
  .pkp_structure_main embed,
  .pkp_structure_sidebar iframe {
    max-width: 100%;
  }

  /* Gambar dengan tinggi tertulis di HTML (style="height:..")
     tidak gepeng saat lebarnya dikecilkan                    */
  .pkp_structure_main img,
  .pkp_structure_sidebar img {
    height: auto !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;
}

/* Layar sentuh: :hover "menempel" setelah diketuk, sehingga
   kartu artikel, sampul, tombol dan logo tetap terangkat.
   Efek gerak dimatikan khusus perangkat tanpa mouse; desktop
   tidak terpengaruh.                                         */
@media (hover: none) {
  .obj_article_summary:hover,
  .obj_galley_link:hover,
  .pkp_block .content a:hover img {
    transform: none;
  }

  .obj_article_summary:hover {
    box-shadow: none;
  }

  .pkp_structure_main .cover:hover img,
  .pkp_structure_main .cover img:hover {
    transform: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  }

  .pkp_block .menu-block .btn-block-menu:hover {
    padding-left: 12px;
  }
}

/* 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;
  }
}