/* style.css - OJS 3.1.2.1
   Tambahkan ke public/site/styles/style.css atau ke folder theme Anda.
   Contoh URL gambar batik (ganti sesuai kebutuhan):
   https://jurnal.feb.unila.ac.id/public/site/images/header/batik_bg_jep1.jpg
*/

/* --- Variabel warna --- */
:root{
  --page-bg-color: rgba(255,255,255,0.95); /* latar konten agar teks tetap terbaca */
  --content-max-width: 1200px;
  --body-font-size: 13px;
}

/* Body - background batik */
body {
  min-height: 100vh;
  margin: 0;
  font-size: var(--body-font-size);
  /* Ganti URL di bawah dengan lokasi file pola batik Anda */
  background-image: url('http://jrl.eng.unila.ac.id/public/journals/1/circles-light.png');
  background-repeat: repeat;        /* agar pola mengulang */
  background-position: top left;
  background-attachment: fixed;     /* efek tetap saat scroll; ubah ke 'scroll' bila tidak diinginkan */
  background-size: auto;            /* jangan stretch pola kecuali diinginkan */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Jika Anda ingin menggunakan overlay warna untuk meredam pola di bawah konten */
.site-background-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(255,255,255,0.0); /* ubah alpha jika ingin meredam pola, misal 0.3 */
  z-index: 0;
}

/* Kontainer utama agar konten tetap terbaca di atas pola */
.pkp_page, /* OJS wrapper class generic */
#main, /* variasi id yang mungkin ada */
.wrapper, 
.page {
  position: relative;
  z-index: 1; /* pastikan konten di atas background */
}

/* Membuat panel konten putih transparan agar teks mudah dibaca */
.container, 
.region, 
#content, 
.main-content {
  background: var(--page-bg-color);
  margin: 20px auto;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-radius: 6px;
  max-width: var(--content-max-width);
  box-sizing: border-box;
}

/* Header & footer transparan agar pola terlihat di belakang, tapi konten header tetap tampil */
.site-header, 
.page-header, 
.site-footer {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* Navbar / menu — sedikit latar solid semi-transparan untuk keterbacaan */
.navbar, 
.menu {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px); /* efek blur untuk browser modern */
}

/* Tombol, link, dan warna aksen — ubah sesuai branding */
a, a:visited {
  color: #0b5ed7;
}
a:hover {
  color: #083e9a;
}

/* Responsif — jaga padding & margin di layar kecil */
@media (max-width: 768px) {
  .container, .main-content {
    margin: 12px;
    padding: 14px;
  }
  body {
    background-attachment: scroll; /* performa lebih baik di mobile */
  }
}

/* Opsional: jika Anda ingin mengganti background menjadi warna solid jika gambar tidak ditemukan */
body:empty, 
body[style*="background-image: none"] {
  background-color: #f6f3ef;
}