/* =========================================================
   JOURNAL OF TOURISM ISSUES
   OJS CUSTOM CSS - FINAL
   ========================================================= */

/* =========================================================
   1. GLOBAL
   ========================================================= */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;

  background: #e5e5e5 !important;

  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* =========================================================
   2. CONTAINER UTAMA
   ========================================================= */

.pkp_structure {
  width: 100% !important;
  max-width: 1250px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  background: #ffffff !important;

  position: relative !important;

  overflow: visible !important;
}

/* =========================================================
   3. HEADER ORANGE
   ========================================================= */

.pkp_structure_head {
  width: 100% !important;
  max-width: 1250px !important;

  margin: 0 auto !important;

  padding: 0 !important;

  background: #f58220 !important;

  background-image: none !important;

  border: 0 !important;

  position: relative !important;

  z-index: 10000 !important;

  overflow: visible !important;
}

/* =========================================================
   4. HEADER WRAPPER
   ========================================================= */

.pkp_head_wrapper {
  width: 100% !important;
  max-width: 1250px !important;

  margin: 0 auto !important;

  /*
     * PENTING
     * Tidak diberi padding.
     * Agar navbar bisa tepat dari kiri sampai kanan.
     */
  padding: 0 !important;

  position: relative !important;

  overflow: visible !important;
}

/* =========================================================
   5. AREA LOGO + NAMA JURNAL
   ========================================================= */

.pkp_site_name_wrapper {
  width: 100% !important;

  height: 132px !important;
  min-height: 132px !important;

  margin: 0 !important;

  /*
     * Padding hanya untuk isi header.
     * Navbar TIDAK terkena padding ini.
     */
  padding: 15px 38px !important;

  display: flex !important;

  align-items: center !important;

  position: relative !important;

  overflow: visible !important;
}

/* =========================================================
   6. LOGO / NAMA JURNAL
   ========================================================= */

.pkp_site_name {
  display: flex !important;

  align-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  max-width: 75% !important;

  color: #ffffff !important;

  text-decoration: none !important;

  overflow: visible !important;
}

/* =========================================================
   7. LOGO
   ========================================================= */

.pkp_site_name img {
  display: block !important;

  width: auto !important;

  max-width: 90px !important;

  max-height: 90px !important;

  margin-right: 20px !important;
}

/* =========================================================
   8. NAMA JURNAL + ISSN
   ========================================================= */

.pkp_site_name::after {
  content: "Journal of Tourism Issues" "\A" "P-ISSN: XXXX-XXXX  |  E-ISSN: XXXX-XXXX";

  display: block !important;

  white-space: pre-line !important;

  color: #ffffff !important;

  font-family: Arial, Helvetica, sans-serif !important;

  font-size: 28px !important;

  font-weight: 700 !important;

  line-height: 1.25 !important;

  letter-spacing: 0 !important;
}

/* =========================================================
   9. USER / LOGIN
   ========================================================= */

.pkp_navigation_user_wrapper {
  position: absolute !important;

  top: 18px !important;

  right: 38px !important;

  left: auto !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  z-index: 999999 !important;

  overflow: visible !important;
}

/* =========================================================
   10. USER MENU
   ========================================================= */

.pkp_navigation_user {
  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  gap: 4px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;

  overflow: visible !important;
}

/* =========================================================
   11. USER ITEM
   ========================================================= */

.pkp_navigation_user > li {
  position: relative !important;

  display: inline-flex !important;

  align-items: center !important;

  height: 32px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}

/* =========================================================
   12. USER / ACCOUNT LINK
   ========================================================= */

.pkp_navigation_user > li > a {
  position: relative !important;

  display: flex !important;

  align-items: center !important;

  height: 32px !important;

  margin: 0 !important;

  padding: 4px 8px !important;

  color: #ffffff !important;

  background: transparent !important;

  font-family: Georgia, "Times New Roman", serif !important;

  font-size: 16px !important;

  font-weight: 600 !important;

  line-height: 1 !important;

  white-space: nowrap !important;

  text-decoration: underline !important;

  z-index: 1000000 !important;
}

/* =========================================================
   13. ACCOUNT DROPDOWN
   ========================================================= */

.pkp_navigation_user > li > .dropdown-menu {
  position: absolute !important;

  /*
     * DROPDOWN DEKAT DENGAN NAMA AKUN
     */
  top: 28px !important;

  right: 0 !important;

  left: auto !important;

  min-width: 195px !important;

  width: 195px !important;

  margin: 0 !important;

  padding: 6px 0 !important;

  background: #ffffff !important;

  border: 1px solid #dddddd !important;

  border-radius: 0 !important;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18) !important;

  z-index: 9999999 !important;

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;
}

/* =========================================================
   14. DROPDOWN BRIDGE
   ========================================================= */

.pkp_navigation_user > li > .dropdown-menu::before {
  content: "";

  position: absolute !important;

  top: -8px !important;

  right: 0 !important;

  width: 100% !important;

  height: 8px !important;

  background: transparent !important;

  display: block !important;
}

/* =========================================================
   15. DROPDOWN HOVER
   ========================================================= */

.pkp_navigation_user > li:hover > .dropdown-menu {
  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;
}

/* =========================================================
   16. DROPDOWN OPEN
   ========================================================= */

.pkp_navigation_user > li.open > .dropdown-menu,
.pkp_navigation_user > li.show > .dropdown-menu,
.pkp_navigation_user > li > a[aria-expanded="true"] + .dropdown-menu {
  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;
}

/* =========================================================
   17. DROPDOWN ITEM
   ========================================================= */

.pkp_navigation_user > li > .dropdown-menu li {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   18. DROPDOWN LINK
   ========================================================= */

.pkp_navigation_user > li > .dropdown-menu li a {
  display: block !important;

  width: 100% !important;

  height: auto !important;

  margin: 0 !important;

  padding: 10px 20px !important;

  color: #333333 !important;

  background: #ffffff !important;

  font-family: Arial, Helvetica, sans-serif !important;

  font-size: 15px !important;

  font-weight: 400 !important;

  line-height: 1.35 !important;

  white-space: nowrap !important;

  text-decoration: none !important;
}

/* =========================================================
   19. DROPDOWN HOVER
   ========================================================= */

.pkp_navigation_user > li > .dropdown-menu li a:hover,
.pkp_navigation_user > li > .dropdown-menu li a:focus {
  color: #f58220 !important;

  background: #fff4e8 !important;

  text-decoration: none !important;
}

/* =========================================================
   20. NAVBAR
   ========================================================= */

/*
 * INI BAGIAN PALING PENTING.
 *
 * Navbar sekarang menggunakan FULL WIDTH container.
 *
 * Karena .pkp_head_wrapper tidak lagi memiliki padding,
 * navbar otomatis mulai dari kiri container dan berakhir
 * tepat di kanan container.
 */

.pkp_navigation_primary_wrapper {
  position: relative !important;

  width: 100% !important;

  max-width: 1250px !important;

  height: 58px !important;

  min-height: 58px !important;

  margin: 0 !important;

  padding: 0 !important;

  background: #ffffff !important;

  border: 0 !important;

  border-top: 0 !important;

  border-right: 0 !important;

  border-bottom: 0 !important;

  border-left: 0 !important;

  display: flex !important;

  align-items: center !important;

  overflow: visible !important;

  z-index: 500 !important;
}

/* =========================================================
   21. PRIMARY NAVIGATION
   ========================================================= */

.pkp_navigation_primary {
  display: flex !important;

  align-items: center !important;

  height: 58px !important;

  min-height: 58px !important;

  width: auto !important;

  margin: 0 !important;

  padding: 0 !important;

  background: #ffffff !important;

  list-style: none !important;

  border: 0 !important;

  box-shadow: none !important;
}

/* =========================================================
   22. NAV ITEM
   ========================================================= */

.pkp_navigation_primary > li {
  display: flex !important;

  align-items: center !important;

  height: 58px !important;

  margin: 0 !important;

  padding: 0 !important;

  background: #ffffff !important;

  border: 0 !important;
}

/* =========================================================
   23. NAV LINK
   ========================================================= */

.pkp_navigation_primary > li > a {
  display: flex !important;

  align-items: center !important;

  height: 58px !important;

  margin: 0 !important;

  padding: 0 20px !important;

  color: #333333 !important;

  background: #ffffff !important;

  border: 0 !important;

  font-family: Arial, Helvetica, sans-serif !important;

  font-size: 15px !important;

  font-weight: 600 !important;

  line-height: 1 !important;

  white-space: nowrap !important;

  text-decoration: none !important;
}

/* =========================================================
   24. NAV HOVER
   ========================================================= */

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  color: #f58220 !important;

  background: #ffffff !important;

  border: 0 !important;
}

/* =========================================================
   25. NAV DROPDOWN
   ========================================================= */

.pkp_navigation_primary .dropdown-menu {
  background: #ffffff !important;

  border: 0 !important;

  border-top: 2px solid #f58220 !important;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;

  z-index: 99999 !important;
}

.pkp_navigation_primary .dropdown-menu a {
  color: #333333 !important;

  background: #ffffff !important;
}

.pkp_navigation_primary .dropdown-menu a:hover {
  color: #f58220 !important;

  background: #fff5ec !important;
}

/* =========================================================
   26. SEARCH
   ========================================================= */

.pkp_navigation_search_wrapper {
  position: absolute !important;

  top: 0 !important;

  right: 0 !important;

  left: auto !important;

  width: auto !important;

  height: 58px !important;

  margin: 0 !important;

  padding: 0 !important;

  background: #ffffff !important;

  border: 0 !important;

  display: flex !important;

  align-items: center !important;

  z-index: 1000 !important;
}

/* =========================================================
   27. SEARCH LINK
   ========================================================= */

.pkp_navigation_search_wrapper a {
  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  height: 58px !important;

  margin: 0 !important;

  padding: 0 25px !important;

  color: #f58220 !important;

  background: #ffffff !important;

  border: 0 !important;

  font-size: 15px !important;

  font-weight: 600 !important;

  white-space: nowrap !important;

  text-decoration: none !important;
}

/* =========================================================
   28. SEARCH HOVER
   ========================================================= */

.pkp_navigation_search_wrapper a:hover {
  color: #d9660a !important;

  background: #ffffff !important;
}

/* =========================================================
   29. HILANGKAN GARIS NAVBAR
   ========================================================= */

.pkp_navigation_primary_wrapper::before,
.pkp_navigation_primary_wrapper::after,
.pkp_navigation_primary::before,
.pkp_navigation_primary::after {
  content: none !important;

  display: none !important;

  border: 0 !important;
}

/* =========================================================
   30. CONTENT
   ========================================================= */

.pkp_structure_content {
  width: 100% !important;

  max-width: 1250px !important;

  margin: 0 auto !important;

  background: #ffffff !important;
}

/* =========================================================
   31. HOMEPAGE IMAGE
   ========================================================= */

.pkp_page_index .homepage_image {
  width: 100% !important;

  max-width: 100% !important;

  margin: 0 !important;

  overflow: hidden !important;
}

.pkp_page_index .homepage_image img {
  display: block !important;

  width: 100% !important;

  max-width: 100% !important;

  height: auto !important;
}

/* =========================================================
   32. SIDEBAR
   ========================================================= */

.pkp_structure_sidebar {
  overflow-wrap: break-word !important;

  word-wrap: break-word !important;
}

/* =========================================================
   33. SUBMISSION BUTTON
   ========================================================= */

.cmp_manuscript-button,
.pkp_block .btn-primary {
  background: #f58220 !important;

  border-color: #f58220 !important;

  color: #ffffff !important;

  font-weight: 600 !important;
}

.cmp_manuscript-button:hover,
.pkp_block .btn-primary:hover {
  background: #d9660a !important;

  border-color: #d9660a !important;

  color: #ffffff !important;
}

/* =========================================================
   34. LINK
   ========================================================= */

a {
  color: #d9660a;
}

a:hover {
  color: #f58220;
}

/* =========================================================
   35. FOOTER
   ========================================================= */

.pkp_structure_footer {
  width: 100% !important;

  max-width: 1250px !important;

  margin: 0 auto !important;

  padding: 0 !important;

  background: #f58220 !important;

  color: #ffffff !important;

  position: relative !important;

  overflow: hidden !important;
}

/* =========================================================
   36. FOOTER WRAPPER
   ========================================================= */

.pkp_structure_footer_wrapper {
  width: 100% !important;

  max-width: 1250px !important;

  margin: 0 auto !important;

  padding: 0 !important;

  background: #f58220 !important;

  color: #ffffff !important;
}

/* =========================================================
   37. FOOTER CONTENT
   ========================================================= */

.pkp_structure_footer .pkp_footer_content {
  width: 100% !important;

  max-width: 1250px !important;

  margin: 0 auto !important;

  background: #f58220 !important;

  color: #ffffff !important;
}

/* =========================================================
   38. FOOTER BRAND
   ========================================================= */

.pkp_brand_footer {
  background: #f58220 !important;

  color: #ffffff !important;
}

/* =========================================================
   39. FOOTER LINKS
   ========================================================= */

.pkp_structure_footer a {
  color: #ffffff !important;

  text-decoration: none !important;
}

.pkp_structure_footer a:hover {
  color: #ffffff !important;

  text-decoration: underline !important;
}

/* =========================================================
   40. DESKTOP
   ========================================================= */

@media (min-width: 769px) {
  .pkp_structure {
    min-height: 100vh !important;
  }
}

/* =========================================================
   41. TABLET
   ========================================================= */

@media (min-width: 769px) and (max-width: 1250px) {
  .pkp_site_name_wrapper {
    padding-left: 25px !important;

    padding-right: 25px !important;
  }

  .pkp_navigation_user_wrapper {
    right: 25px !important;
  }

  .pkp_navigation_primary > li > a {
    padding-left: 14px !important;

    padding-right: 14px !important;
  }
}

/* =========================================================
   42. MOBILE
   ========================================================= */

@media (max-width: 768px) {
  html,
  body {
    background: #ffffff !important;
  }

  .pkp_structure {
    width: 100% !important;

    max-width: 100% !important;
  }

  .pkp_structure_head {
    width: 100% !important;

    max-width: 100% !important;
  }

  .pkp_site_name_wrapper {
    height: 100px !important;

    min-height: 100px !important;

    padding: 12px 15px !important;
  }

  .pkp_site_name img {
    max-width: 65px !important;

    max-height: 60px !important;

    margin-right: 12px !important;
  }

  .pkp_site_name::after {
    font-size: 17px !important;

    line-height: 1.25 !important;
  }

  .pkp_navigation_user_wrapper {
    top: 8px !important;

    right: 15px !important;
  }

  .pkp_navigation_user > li > a {
    font-size: 13px !important;

    height: 28px !important;
  }

  .pkp_navigation_user > li > .dropdown-menu {
    top: 25px !important;

    min-width: 160px !important;

    width: 160px !important;
  }

  .pkp_navigation_primary_wrapper {
    width: 100% !important;

    height: 50px !important;

    min-height: 50px !important;

    overflow-x: auto !important;

    overflow-y: visible !important;
  }

  .pkp_navigation_primary {
    height: 50px !important;

    min-height: 50px !important;

    min-width: max-content !important;
  }

  .pkp_navigation_primary > li {
    height: 50px !important;
  }

  .pkp_navigation_primary > li > a {
    height: 50px !important;

    padding: 0 10px !important;

    font-size: 13px !important;
  }

  .pkp_navigation_search_wrapper {
    height: 50px !important;
  }

  .pkp_navigation_search_wrapper a {
    height: 50px !important;

    padding: 0 12px !important;
  }
}

/* =========================================================
   43. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .pkp_site_name_wrapper {
    height: 90px !important;

    min-height: 90px !important;

    padding-left: 10px !important;

    padding-right: 10px !important;
  }

  .pkp_site_name img {
    max-width: 55px !important;

    max-height: 50px !important;
  }

  .pkp_site_name::after {
    font-size: 14px !important;
  }

  .pkp_navigation_user_wrapper {
    top: 5px !important;

    right: 10px !important;
  }

  .pkp_navigation_user > li > a {
    font-size: 12px !important;

    padding: 2px 5px !important;
  }

  .pkp_navigation_primary > li > a {
    font-size: 12px !important;

    padding: 0 8px !important;
  }
}

/* =========================================================
   44. FINAL NAVBAR OVERRIDE
   ========================================================= */

.pkp_navigation_primary_wrapper {
  width: 100% !important;

  max-width: 1250px !important;

  margin-left: 0 !important;

  margin-right: 0 !important;

  padding-left: 0 !important;

  padding-right: 0 !important;

  background-color: #ffffff !important;

  border: none !important;

  border-top: none !important;

  border-right: none !important;

  border-bottom: none !important;

  border-left: none !important;

  box-shadow: none !important;
}

.pkp_navigation_primary {
  background-color: #ffffff !important;

  border: none !important;

  box-shadow: none !important;
}

.pkp_navigation_search_wrapper {
  right: 0 !important;

  background-color: #ffffff !important;

  border: none !important;

  box-shadow: none !important;
}

.pkp_navigation_search_wrapper a {
  background-color: #ffffff !important;

  border: none !important;
}

/* =========================================================
   PERBAIKAN POSISI DROPDOWN AKUN
   Dropdown dibuat lebih dekat dengan nama akun
   ========================================================= */

.pkp_navigation_user > li {
  position: relative !important;
}

/* Posisi dropdown lebih dekat ke nama akun */
.pkp_navigation_user > li > .dropdown-menu {
  top: 10px !important;
  right: 0 !important;
  left: auto !important;

  margin: 0 !important;

  min-width: 195px !important;
  width: 195px !important;

  padding: 6px 0 !important;

  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  border-radius: 0 !important;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18) !important;

  z-index: 9999999 !important;
}

/* Area penghubung supaya dropdown tidak hilang
   ketika mouse digeser dari nama akun ke menu */
.pkp_navigation_user > li > .dropdown-menu::before {
  content: "" !important;

  position: absolute !important;

  top: -15px !important;
  right: 0 !important;

  width: 100% !important;
  height: 15px !important;

  background: transparent !important;

  display: block !important;
}

/* Pastikan dropdown tetap muncul ketika hover */
.pkp_navigation_user > li:hover > .dropdown-menu,
.pkp_navigation_user > li.open > .dropdown-menu,
.pkp_navigation_user > li.show > .dropdown-menu,
.pkp_navigation_user > li > a[aria-expanded="true"] + .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Item dropdown */
.pkp_navigation_user > li > .dropdown-menu li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Link dropdown */
.pkp_navigation_user > li > .dropdown-menu li a {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 10px 20px !important;

  color: #333333 !important;
  background: #ffffff !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;

  line-height: 1.35 !important;

  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Hover menu */
.pkp_navigation_user > li > .dropdown-menu li a:hover,
.pkp_navigation_user > li > .dropdown-menu li a:focus {
  color: #f58220 !important;
  background: #fff4e8 !important;
  text-decoration: none !important;
}

/* =========================================================
   SELESAI
   ========================================================= */