/* ============================================================
   Manggala Journal - Site Stylesheet (v4, konsolidasi)
   OJS 3.4, tema Default, halaman site index (manggalajournal.org)

   Unggah di: Administration > Site Settings > Appearance
              (kolom Site Stylesheet / stylesheet situs)
   Setelah unggah: hard refresh (Ctrl + F5).
   Jika tampilan masih versi lama, bersihkan cache browser / CDN,
   karena OJS memakai nama file statis (styleSheet.css) sehingga
   versi lama mudah tersangkut di cache.
   ------------------------------------------------------------
   v4: banner header dibuat proper di DESKTOP dan MOBILE
       - desktop: tinggi banner dibatasi agar tidak melar di layar lebar
       - mobile : batalkan position:absolute bawaan tema (penyebab
                  banner menimpa teks intro)
       Kartu jurnal premium dipertahankan.
   ============================================================ */

:root{
  --mg-navy:#004aad;
  --mg-navy-dark:#00337d;
  --mg-title:#0b2c5c;
  --mg-text:#4a5568;
  --mg-card-border:#e7ecf3;
  --mg-card-bg:#ffffff;
  --mg-btn-outline:#cad8ec;
}

/* ---------- HEADER / BANNER (semua lebar) ---------- */
.pkp_head_wrapper .pkp_site_name,
.pkp_head_wrapper .pkp_site_name a.is_img{
  display:block;
  width:100%;
  max-width:100%;
  text-align:center;
  overflow:visible;
}
.pkp_head_wrapper .pkp_site_name img{
  display:inline-block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:300px;      /* cegah banner terlalu tinggi di monitor lebar */
}

/* ---------- HEADER di MOBILE / TABLET (< 992px) ----------
   Tema Default memakai position:absolute untuk judul, dirancang
   untuk teks satu baris. Karena situs ini memakai banner gambar,
   judul menimpa konten. Kembalikan ke alur normal + beri ruang
   untuk tombol menu. */
@media (max-width:991px){
  .pkp_head_wrapper .pkp_site_name_wrapper{
    padding-top:3.2rem;
    padding-bottom:.6rem;
  }
  .pkp_head_wrapper .pkp_site_name{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    white-space:normal !important;
  }
  .pkp_head_wrapper .pkp_site_name img{
    max-height:120px;
  }
  .pkp_site_nav_toggle{ top:.6rem !important; }
}

/* ---------- INTRO / DESKRIPSI SITUS ---------- */
.pkp_structure_main > .description,
.pkp_structure_main .about_site{
  max-width:900px;
  margin:8px auto 4px;
  line-height:1.75;
  color:var(--mg-text);
  text-align:justify;
  font-size:.98rem;
}

/* ---------- DAFTAR JURNAL (kartu premium) ---------- */
.journals{ margin-top:34px; }
.journals ul{
  display:flex; flex-direction:column; gap:22px;
  list-style:none; padding:0; margin:0;
}
.journals li.has_thumb{
  display:flex; gap:26px; align-items:flex-start;
  background:var(--mg-card-bg);
  border-radius:16px;
  padding:26px 30px 26px 34px;
  box-shadow:0 1px 2px rgba(16,42,80,.04), 0 10px 30px rgba(16,42,80,.07);
  position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  border:1px solid var(--mg-card-border) !important;
}
.journals li.has_thumb::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg, var(--mg-navy), #0a6ad6);
}
.journals li.has_thumb:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(16,42,80,.08), 0 22px 48px rgba(16,42,80,.14);
}
.journals li.has_thumb .thumb{ flex:0 0 128px; }
.journals li.has_thumb .thumb img{
  width:100%; height:auto; border-radius:10px;
  box-shadow:0 6px 18px rgba(16,42,80,.2);
  border:none !important;
}
.journals .body{ flex:1 1 auto; min-width:0; }
.journals .body h3{ margin:2px 0 12px; }
.journals .body h3 a,
.journals .body h2 a{
  font-size:1.32rem; font-weight:800; letter-spacing:-.3px;
  line-height:1.25; text-decoration:none;
  color:var(--mg-title) !important;
}
.journals .body h3 a:hover,
.journals .body h2 a:hover{ color:var(--mg-navy) !important; }
.journals .body .description{
  color:var(--mg-text); line-height:1.7; font-size:.96rem; text-align:justify;
}
.journals .body .description a{ color:var(--mg-navy); }

/* Tombol View Journal / Current Issue */
.journals ul.links{
  display:flex !important; flex-direction:row !important;
  flex-wrap:wrap; align-items:center; gap:12px;
  list-style:none; padding:0; margin:20px 0 0; border:none;
}
.journals ul.links li{ margin:0; padding:0; border:none; }
.journals ul.links li::after{ content:none; }
.journals ul.links li a{
  display:inline-block; padding:10px 24px; border-radius:9px;
  font-size:.9rem; font-weight:600; letter-spacing:.2px;
  text-decoration:none; transition:.16s;
}
.journals ul.links li.view a{
  background:var(--mg-navy); border:1px solid var(--mg-navy);
  box-shadow:0 3px 10px rgba(0,74,173,.28); color:#fff !important;
}
.journals ul.links li.view a:hover{
  background:var(--mg-navy-dark);
  box-shadow:0 5px 16px rgba(0,74,173,.36); transform:translateY(-1px);
}
.journals ul.links li.current a{
  background:#fff; border:1px solid var(--mg-btn-outline); color:var(--mg-navy) !important;
}
.journals ul.links li.current a:hover{
  background:#eef4fc; border-color:var(--mg-navy);
}

/* ---------- KARTU di MOBILE (< 640px) ---------- */
@media (max-width:640px){
  .journals li.has_thumb{
    flex-direction:column; align-items:center; text-align:center; padding:24px;
  }
  .journals li.has_thumb .thumb{ flex:0 0 auto; max-width:150px; }
  .journals .body .description{ text-align:left; }
  .journals ul.links{ justify-content:center; }
}