/* =========================================================
   JIIA - Custom Style (OJS 3.3 Default Theme)
   Berisi:
   1. Header gambar penuh
   2. Menu navigasi biru
   3. Beranda: gambar di kiri, teks di kanan
   ========================================================= */


/* ---------- 1. HEADER ---------- */

.pkp_structure_head {
  background-color: #cfeaf9;
  border-bottom: 0;
}

@media (min-width: 992px) {

  /* Header selebar layar */
  .pkp_head_wrapper {
    max-width: none;
    width: 100%;
    padding: 0;
  }

  .pkp_site_name_wrapper,
  .pkp_site_name {
    padding: 0;
    margin: 0;
  }

  .pkp_site_name .is_img {
    display: block;
    margin: 0;
  }

  /* Gambar header tampil penuh, tidak dibatasi tingginya */
  .pkp_site_name .is_img img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
  }

  /* Register & Login di pojok kanan atas header */
  .pkp_navigation_user_wrapper {
    top: 0.75rem;
    right: 2rem;
  }

  .pkp_navigation_user > li > a {
    color: #3557d6;
    font-weight: 700;
  }

  .pkp_navigation_user > li > a:hover,
  .pkp_navigation_user > li > a:focus {
    color: #17469e;
    text-decoration: underline;
  }


  /* ---------- 2. MENU NAVIGASI ---------- */

  .pkp_navigation_primary_row {
    background-color: #143f94;
    border-top: 0;
    padding: 0 2rem;
  }

  .pkp_navigation_primary_wrapper {
    max-width: none;
    padding: 0.4rem 0;
  }

  .pkp_navigation_primary > li > a {
    color: #ffffff;
    font-weight: 700;
    margin: 0 0.9rem 0 0;
    border-bottom: 2px solid transparent;
  }

  .pkp_navigation_primary > li > a:hover,
  .pkp_navigation_primary > li > a:focus {
    color: #ffffff;
    border-bottom-color: #8fd3f4;
  }

  /* Tombol Search berbentuk kapsul */
  .pkp_navigation_search_wrapper a {
    color: #17469e;
    background-color: #8fd3f4;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.3rem 1rem;
    border: 0;
  }

  .pkp_navigation_search_wrapper a:hover,
  .pkp_navigation_search_wrapper a:focus {
    background-color: #ffffff;
    color: #17469e;
  }
}


/* ---------- 3. BERANDA: GAMBAR KIRI, TEKS KANAN ---------- */

@media (min-width: 768px) {

  .page_index_journal .homepage_image {
    float: left;
    width: 30%;
    max-width: 330px;
    margin: 0 2rem 1.5rem 0;
  }

  .page_index_journal .homepage_image img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #dcdcdc;
  }

  .page_index_journal .homepage_about {
    overflow: hidden;
    margin-top: 0;
  }

  .page_index_journal .homepage_about h2 {
    margin-top: 0;
  }

  .page_index_journal .homepage_about p {
    text-align: justify;
    line-height: 1.6;
  }

  .page_index_journal .cmp_announcements,
  .page_index_journal .current_issue,
  .page_index_journal .additional_content {
    clear: both;
  }
}


/* ---------- 4. PERBAIKAN TAMBAHAN ---------- */

/* Bar menu biru tua di semua ukuran layar */
.pkp_navigation_primary_row,
.pkp_site_nav_menu {
  background-color: #143f94;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper a {
  color: #ffffff;
}

/* Header & menu menutupi penuh selebar layar
   (tanpa sisa biru muda di kiri-kanan) */
html,
body {
  overflow-x: hidden;
}

.pkp_structure_head {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
}

/* Judul "About the Journal" sejajar dengan bagian atas gambar */
@media (min-width: 768px) {

  .page_index_journal .homepage_image {
    margin-top: 0 !important;
  }

  .page_index_journal .homepage_about {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .page_index_journal .homepage_about h2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.2;
  }

  .page_index_journal .homepage_about p:first-of-type {
    margin-top: 0.75rem;
  }
}


/* ---------- 5. TOMBOL REGISTER / LOGIN DI ATAS HEADER ---------- */

@media (min-width: 992px) {

  .pkp_head_wrapper {
    position: relative;
  }

  .pkp_navigation_user_wrapper {
    display: block !important;
    position: absolute !important;
    top: 14px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    z-index: 50;
    background: transparent;
  }

  .pkp_navigation_user {
    display: flex !important;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  .pkp_navigation_user > li {
    display: block;
    margin: 0;
  }

  .pkp_navigation_user > li > a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.92);
    color: #143f94 !important;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid #8fd3f4;
    box-shadow: 0 2px 6px rgba(20, 63, 148, 0.18);
    text-decoration: none !important;
  }

  .pkp_navigation_user > li > a:hover,
  .pkp_navigation_user > li > a:focus {
    background: #143f94;
    color: #ffffff !important;
  }

  /* Menu dropdown saat sudah login (nama user) */
  .pkp_navigation_user ul {
    z-index: 60;
  }
}