/* ============================================================
   Loka Bhakti - Cover Bersebelahan dengan About the Journal
   OJS 3.3.0.6 | jaf-fisib.unpak.ac.id
   
   Cara pasang:
   Settings → Website → Appearance → Additional CSS → Save
   ============================================================ */


/* ──────────────────────────────────────────────
   UBAH NILAI INI SESUAI KEBUTUHAN
   ────────────────────────────────────────────── */
:root {
  --cover-width:           220px;    /* Lebar cover di samping teks About       */
  --cover-margin-top:       78px;    /* Jarak cover dari atas                   */
  --cover-margin-right:     24px;    /* Jarak antara cover dan teks kanan       */
  --cover-margin-bottom:    16px;    /* Jarak cover dari bawah                  */
  --cover-margin-left:      16px;    /* Jarak cover dari tepi kiri              */
  --cover-border-radius:     0px;    /* Sudut membulat cover                    */

  /* === Frame & Background === */
  --frame-bg:              #f4f7fb;  /* Warna background seluruh frame          */
  --frame-border:     1px solid #c8d8ec; /* Border luar frame                  */
  --frame-border-radius:   10px;    /* Sudut membulat frame                    */
  --frame-padding:          20px;    /* Jarak dalam frame                       */
  --cover-bg:              #ffffff;  /* Background kotak cover                  */
  --cover-frame-border: 1px solid #c8d8ec; /* Border kotak cover               */
  --cover-frame-padding:    10px;    /* Jarak dalam kotak cover                 */
  --cover-frame-radius:      0px;    /* Sudut membulat kotak cover              */
}


/* ──────────────────────────────────────────────
   LAYOUT UTAMA
   Cover (homepageImage) float ke KIRI,
   teks "About the Journal" otomatis mengisi
   sisi KANAN cover.
   ────────────────────────────────────────────── */

/* 1. Cover / Homepage Image → float ke kiri + frame kotak */
img[src*="homepageImage_en_US"] {
  float:         right !important;
  width:         var(--cover-width) !important;
  height:        auto !important;
  margin:        var(--cover-margin-top) var(--cover-margin-right) var(--cover-margin-bottom) var(--cover-margin-left) !important;
  border-radius: var(--cover-border-radius);
  display:       block;

  /* Frame kotak cover */
  background:    var(--cover-bg);
  border:        var(--cover-frame-border) !important;
  border-radius: var(--cover-frame-radius) !important;
  padding:       var(--cover-frame-padding) !important;
  box-shadow:    0 2px 8px rgba(0,0,0,0.08);
}

/* 2. Seksi About the Journal → frame luar dengan background */
#homepageAbout {
  display:       flow-root;  /* cara terbaik agar frame menutup float cover */
  text-align:    justify;

}

/* Clearfix cadangan jika flow-root belum cukup */
#homepageAbout::after {
  content: "";
  display: table;
  clear:   both;
}

/* Paksa justify pada semua teks di dalam About the Journal */
#homepageAbout p,
#homepageAbout div,
#homepageAbout span,
.homepage_about p,
.pkp_page_index #homepageAbout p {
  text-align:      justify !important;
  text-align-last: left !important;   /* baris terakhir paragraf tetap rata kiri */
  hyphens:         auto;              /* bantu pemisahan kata agar lebih rapi    */
}

/* 3. Judul "About the Journal" tetap rata kiri */
#homepageAbout h2 {
  margin-top: 0;
  text-align: left;
}

/* 4. Setelah About selesai, bersihkan float
   supaya Current Issue tampil di bawah secara normal */
#homepageIssue {
  clear: both;
}


/* ──────────────────────────────────────────────
   TAMPILAN COVER ISSUE (Current Issue)
   Di bawah About the Journal
   ────────────────────────────────────────────── */
img[src*="cover_issue"],
.obj_issue_summary .cover img {
  width:         var(--cover-width) !important;
  height:        auto !important;
  max-width:     100% !important;
  border-radius: var(--cover-border-radius);
  object-fit:    contain;
}


/* ──────────────────────────────────────────────
   SEMUA UKURAN LAYAR — layout tetap sama
   Cover selalu di kiri, teks selalu di kanan
   ────────────────────────────────────────────── */

/* Pastikan gambar tidak pernah melebihi lebar yang ditentukan */
img[src*="homepageImage_en_US"] {
  max-width: var(--cover-width) !important;
}


/* ============================================================
   PANDUAN KUSTOMISASI

   ▸ Ubah lebar cover          → --cover-width: 220px
   ▸ Jarak cover dari ATAS     → --cover-margin-top: 20px
   ▸ Jarak cover ke teks kanan → --cover-margin-right: 24px
   ▸ Jarak cover dari BAWAH    → --cover-margin-bottom: 16px
   ▸ Jarak cover dari tepi KIRI → --cover-margin-left: 16px
   ▸ Pindah cover ke KANAN (teks di kiri):
     Ganti  float: left   →  float: right
     Ganti  margin-right  →  margin-left
   ============================================================ */