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