/* --- 1. MODIFIKASI JUDUL / HEADER BLOK (Seperti "MENU JURNAL") --- */
.block_language .title {
    display: block;
    background-color: #0b1d78 !important; /* Warna biru tua sesuai gambar */
    color: #ffffff !important;             /* Warna teks putih */
    text-align: center !important;         /* Teks di tengah */
    text-transform: uppercase;             /* Huruf kapital semua */
    font-weight: bold !important;          /* Teks tebal */
    padding: 5px 5px !important;         /* Jarak ruang dalam kotak */
    border-radius: 6px !important;         /* Sudut melengkung */
    margin-bottom: 2px !important;        /* Jarak ke tombol di bawahnya */
    font-size: 14px;
}

/* --- 2. MEMBERSIHKAN STRUKTUR LIST BAWAAN OJS --- */
.block_language .content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.block_language .content ul li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- 3. MODIFIKASI TOMBOL PILIHAN BAHASA (Seperti "Tim Editor") --- */
.block_language .content ul li a {
    display: block !important;
    background-color: #ffffff !important;  /* Background putih */
    color: #000000 !important;             /* Warna teks hitam */
    text-align: center !important;         /* Teks di tengah */
    padding: 5px 5px !important;         /* Ukuran tombol */
    margin-bottom: 2px !important;         /* Jarak antar tombol bahasa */
    border: 1.5px solid #000000 !important;/* Border garis hitam tebal sesuai gambar */
    border-radius: 6px !important;         /* Sudut melengkung */
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;     /* Transisi halus saat di-hover */
}

/* =========================================================
   OJS 3 Custom Block: Indexed By (Logos)
   ========================================================= */

/* 1. Main Block Styling */
#customblock-indexedby {
  background-color: #ffffff;
  margin-top: 1rem;
  border-bottom: 8px solid #007ab2; /* Change #007ab2 to your journal's primary color */
}


/* Desktop-specific adjustments (Tailwind 'lg' breakpoint) */
@media (min-width: 1024px) {
  #customblock-indexedby {
    margin-bottom: 1rem;
    margin-left: 1rem; /* Acts as ms-4 (margin-start) */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
}

/* 2. Titles */
#customblock-indexedby h2.title:not(.pkp_screen_reader) {
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: center; /* Optional: centers the "Indexed In" text */
}

/* Ensure OJS screen reader class is hiding the first title properly */
.pkp_screen_reader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Grid Layout for Logos */
#customblock-indexedby .grid {
  display: grid;
  gap: 0.5rem; /* gap-2 */
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
  justify-items: center; /* justify-items-center */
  align-items: center;
}

/* 4. Logo Images */
#customblock-indexedby .grid img {
  max-width: 100%;
  height: auto;
  transition: transform 0.2s ease-in-out;
}

/* Optional: Add a slight hover effect on the indexing logos */
#customblock-indexedby .grid a:hover img {
  transform: scale(1.05);
}

/* MENU */
.vertical-menu {
width: 100%; /* lebar dari menu, saran saya tidak perlu di ubah */
}

.vertical-menu a {
background-color: #0D3D5A; /* Warna pada bagian body menu */
color: white; /* Warna tulisan */
display: block;
padding: 8px;
margin-top: -4px;
margin-bottom: -2px;
text-align: center;
text-decoration: none;
font-family: Lato; /*Jenis font*/
font-weight: bolder;
border-radius: 2px;
}

.vertical-menu a:hover {
background-color: #477689; /* Warna efek yang keluar ketika di arahkan mouse */
}

.vertical-menu a.active {
background-color: #99cbe8; /* Warna pada header menu */
color: #003961; /*Warna font*/
padding: 1px;
margin-bottom: 0px;
font-family: Lato; /*Jenis font*/
font-weight: bolder;
border-bottom: solid black 3px;
}

/* FOOTER BACKGROUND */
/* Apply the background color to the outer wrapper for full width */
.pkp_structure_footer_wrapper {
    background-color: #0D3D5A !important;
    width: 100% !important;
    float: left; /* Ensures it clears floated elements above it in some OJS themes */
}


/* Change the text colors inside the footer so they stay readable */
.pkp_structure_footer, 
.pkp_footer_content {
    color: #ffffff !important;
}

/* Change the link colors */
.pkp_structure_footer a {
    color: #ffcc00 !important;
}

======================================================
   1. RESET BAWAAN OJS 3 (Agar Background Bisa Full Width)
   ========================================================= */
.pkp_structure_footer_wrapper {
  background-color: #0D3D5A !important; /* Warna biru gelap untuk background utama */
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important; /* Memaksa lebar 100% layar */
  border-top: 3px solid #08293d;
}

.pkp_structure_footer {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important; /* Melepas batasan lebar bawaan OJS */
  width: 100% !important;
}

/* =========================================================
   2. KONTEN FOOTER (Sejajar dengan Konten Tengah OJS)
   ========================================================= */
.custom-default-footer {
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #f1f1f1;
  font-size: 14px;
  padding-top: 10px; /* Jarak atas */
  width: 100%;
}

.custom-default-footer .footer-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  /* KUNCI ALIGNMENT: Menyesuaikan dengan lebar konten jurnal Anda */
  max-width: 1200px; 
  margin: 0 auto; /* Otomatis menengahkan blok ke tengah layar */
  padding: 0 20px;
  gap: 30px;
}

/* --- PEMBAGIAN 3 KOLOM --- */
.custom-default-footer .footer-section {
  flex: 1 1 32%; /* Menyesuaikan kolom teks agar mengambil sisa ruang */
  text-align: left; 
}

.custom-default-footer .footer-section.logo {
  flex: 0 0 27%; /* Kolom logo disetel pas berukuran 25% */
  display: flex;
  justify-content: flex-end; /* Logo merapat ke kanan sejajar dengan sidebar atas */
  align-items: flex-start;
}

/* Mengatur ukuran gambar logo sebesar 20% dari lebar kolomnya */
.custom-default-footer .footer-section.logo img {
  width: 27%; /* Mengubah ukuran gambar logo menjadi 20% */
  height: auto; /* Menjaga proporsi tinggi gambar agar tidak gepeng */
}


/* --- TIPOGRAFI & LINK --- */
.custom-default-footer .footer-section h4 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-default-footer .footer-section p {
  line-height: 1.8;
  margin-top: 0 !important;
}

.custom-default-footer a {
  color: #66b3ff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.custom-default-footer a:hover {
  text-decoration: underline;
  color: #ffffff;
}

/* =========================================================
   3. AREA COPYRIGHT BAWAH
   ========================================================= */
.custom-default-footer .footer-copyright {
  background-color: transparent;
  width: 100%;
  margin-top: 5px; 
  
  /* --- PERUBAHAN: Menambahkan garis lurus full width --- */
  border-top: 3px solid rgba(255, 255, 255, 0.15); /* Garis putih tipis dan transparan */
  /* ------------------------------------------------------ */
  
  padding-top: 5px !important; /* Jarak antara garis dengan teks di bawahnya */
  padding-bottom: 5px !important; 
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.custom-default-footer .footer-copyright p {
  max-width: 1200px; 
  margin: 0 auto 0 auto !important; 
  padding: 0 5px;
  text-align: center; 
  line-height: 1.5;
  color: #a0b2c0;
  font-size: 13px;
}
/* =========================================================
   4. TAMPILAN HP (MOBILE RESPONSIVE)
   ========================================================= */
@media (max-width: 768px) {
  .custom-default-footer .footer-details {
    flex-direction: column;
    gap: 30px;
  }
  
  .custom-default-footer .footer-section,
  .custom-default-footer .footer-section.logo {
    justify-content: center;
    text-align: center; /* Semua teks ke tengah saat di HP */
    width: 100%;
  }
}


/* Memperdekat jarak khusus untuk blok pilihan bahasa */
.pkp_structure_sidebar .block_language {
    margin-bottom: -35px !important; /* Ubah ke 0px jika ingin menempel total */
}