/* =========================================================
   OJS (Tema Bawaan) - HEADER FULL WIDTH untuk struktur:
   h1.site-name > div.page-header > a > img
   (sesuai inspect screenshot kamu)
   Tempel di: Settings > Website > Appearance > Advanced > Additional CSS
   ========================================================= */


/* 1) Hilangkan padding/margin pembungkus header supaya tidak ada jarak */
header#headerNavigationContainer,
header#headerNavigationContainer .container,
header#headerNavigationContainer .container-fluid,
header#headerNavigationContainer .navbar,
header#headerNavigationContainer .navbar-header,
header#headerNavigationContainer h1.site-name {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 2) Pastikan wrapper banner block */
header#headerNavigationContainer h1.site-name .page-header {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* 3) Hilangkan space bawah gambar */
header#headerNavigationContainer h1.site-name .page-header a {
  display: block !important;
  line-height: 0 !important;
}

/* 4) Buat gambar banner FULL layar (100vw) */
header#headerNavigationContainer h1.site-name .page-header img {
  display: block !important;

  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;

  /* center full-bleed */
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  /* biar rapi di semua device */
  max-height: 320px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 5) Menu/nav tetap rapi (tidak mentok kiri-kanan) */
header#headerNavigationContainer .pkp_navigation_primary_wrapper,
header#headerNavigationContainer .pkp_site_nav_menu,
header#headerNavigationContainer nav {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* 6) Responsif */
@media (max-width: 1024px) {
  header#headerNavigationContainer h1.site-name .page-header img {
    max-height: 260px !important;
  }
}
@media (max-width: 768px) {
  header#headerNavigationContainer h1.site-name .page-header img {
    max-height: 200px !important;
  }

  header#headerNavigationContainer .pkp_navigation_primary_wrapper,
  header#headerNavigationContainer .pkp_site_nav_menu,
  header#headerNavigationContainer nav {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 480px) {
  header#headerNavigationContainer h1.site-name .page-header img {
    max-height: 160px !important;
  }
}