/* ==========================================================================
   OJS 3 Custom Stylesheet - Full Block Navigation & Zero-Gap Dropdown (v11)
   Sidebar-left position, outer border removed, stray inner divider killed
   Universitas Pendidikan Indonesia (UPI) - DPPM Style
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand Colors & Variables
   -------------------------------------------------------------------------- */
:root {
  --upi-navy: #003366;
  --upi-navy-dark: #001a33;
  --upi-navy-mid: #002b55;
  --upi-navy-light: #0d47a1;
  --upi-accent-gold: #ffcc00;
  --bg-main: #f4f6f9;
  --bg-card: #ffffff;
  --text-dark: #1e293b;
  --text-muted: #64748b;
  --border-color: #cbd5e1;
  --border-light: #e2e8f0;
  --radius: 6px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base Reset & Typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-family) !important;
  background-color: var(--bg-main) !important;
  color: var(--text-dark) !important;
  line-height: 1.6;
}

a {
  color: var(--upi-navy);
  transition: all 0.2s ease-in-out;
}

a:hover, a:focus {
  color: var(--upi-navy-light);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Site Header & Hide Top-Right Login/Register Bar
   -------------------------------------------------------------------------- */
.pkp_site_header {
  background: var(--upi-navy-dark) !important;
  border-bottom: none !important;
  padding: 0 !important;
}

.pkp_site_name_wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 20px !important;
}

.pkp_site_name a {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.45rem !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Sembunyikan Bilah Login & Register Pojok Kanan Atas */
.pkp_navigation_user_wrapper,
.pkp_navigation_user {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4. FULL-WIDTH BLOCK NAVIGATION BAR (Memisah Semua Menu & Presisi Submenu)
   -------------------------------------------------------------------------- */
.pkp_navigation_primary_row {
  background: linear-gradient(180deg, var(--upi-navy-mid) 0%, var(--upi-navy-dark) 100%) !important;
  border-top: 3px solid var(--upi-accent-gold) !important;
  border-bottom: 3px solid var(--upi-navy-dark) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  width: 100% !important;
  clear: both !important;
  position: relative !important;
}

.pkp_navigation_primary {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  list-style: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Setiap item menu wajib terpisah menjadi blok sendiri */
.pkp_navigation_primary li,
.pkp_navigation_primary > li {
  margin: 0 !important;
  padding: 0 !important;
  border-right: none !important;
  flex: 1 1 auto !important;
  text-align: center !important;
  position: relative !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: stretch !important;
}

/* Tampilan tautan di dalam kotak menu */
.pkp_navigation_primary > li > a {
  border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.pkp_navigation_primary li a,
.pkp_navigation_primary > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 48px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 10px 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  transition: all 0.2s ease-in-out !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-sizing: border-box !important;
  border-bottom: 3px solid transparent !important;
}

/* Hover & Active State - Memperbaiki Efek Highlight & Hilangkan Jarak Submenu */
.pkp_navigation_primary li a:hover,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary li.focus > a,
.pkp_navigation_primary > li:hover > a,
.pkp_navigation_primary li.active > a,
.pkp_navigation_primary > li.active > a {
  background: var(--upi-navy-light) !important;
  color: var(--upi-accent-gold) !important;
  border-bottom: 3px solid var(--upi-accent-gold) !important;
  box-shadow: none !important;
}

/* Dropdown Submenu - Zero-Gap + Grace Period (v8)
   Submenu nempel LANGSUNG (top:100%, tanpa margin negatif) di bawah tombol
   sehingga TIDAK ADA celah struktural sama sekali. Saat kursor keluar,
   submenu tidak langsung hilang -- ada jeda 0.3s dulu (grace period) supaya
   gerakan mouse yang sedikit meleset tetap sempat mengklik menu. */
.pkp_navigation_primary ul,
.pkp_navigation_primary > li > ul {
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 100% !important;
  margin-top: 0 !important;
  left: 0 !important;
  transform: none !important;
  z-index: 99999 !important;
  background-color: var(--upi-navy-dark) !important;
  background-clip: padding-box !important;
  border: 2px solid var(--upi-accent-gold) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  padding: 0 !important;
  min-width: 230px !important;
  text-align: left !important;
  transition:
    opacity 0.12s ease-out,
    visibility 0s linear 0.3s,
    pointer-events 0s linear 0.3s !important;
}

.pkp_navigation_primary li:hover > ul,
.pkp_navigation_primary li.focus > ul,
.pkp_navigation_primary li:focus-within > ul {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.1s ease-in !important; /* buka instan, tanpa delay */
}

.pkp_navigation_primary ul li {
  border-right: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  flex: none !important;
  width: 100% !important;
  display: block !important;
}

.pkp_navigation_primary ul li:last-child {
  border-bottom: none !important;
}

.pkp_navigation_primary ul a {
  color: #f1f5f9 !important;
  padding: 12px 18px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  justify-content: flex-start !important;
  min-height: auto !important;
  border-bottom: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pkp_navigation_primary ul a:hover {
  background-color: var(--upi-navy-light) !important;
  color: var(--upi-accent-gold) !important;
  padding-left: 22px !important;
  border-bottom: none !important;
}

/* Memaksa elemen Home/menu pertama untuk selalu tampil */
.pkp_navigation_primary > li:first-child,
.pkp_navigation_primary > li.home {
  display: flex !important;
}

/* --------------------------------------------------------------------------
   5. Container Layout & Content Box (posisi sidebar di kiri, seperti semula)
   -------------------------------------------------------------------------- */
.pkp_structure_content {
  max-width: 1280px !important;
  margin: 30px auto !important;
  padding: 0 20px !important;
}

@media (min-width: 992px) {
  .pkp_structure_content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  .pkp_structure_sidebar {
    order: -1 !important;
    width: 280px !important;
    flex-shrink: 0 !important;
    margin-right: 30px !important;
    margin-left: 0 !important;
  }

  .pkp_structure_main {
    order: 1 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
}

.pkp_structure_main {
  background-color: var(--bg-card);
  padding: 30px !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: none !important;
}

/* --------------------------------------------------------------------------
   6. Sidebar Blocks & Action Buttons
   -------------------------------------------------------------------------- */
.pkp_structure_sidebar {
  padding-left: 0 !important;
}

.pkp_block {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 18px !important;
  margin-bottom: 22px !important;
  box-shadow: var(--shadow-sm);
}

.pkp_block .title {
  color: var(--upi-navy) !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  border-bottom: 3px solid var(--upi-navy) !important;
  padding-bottom: 8px !important;
  margin-bottom: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pkp_block .content a.btn-action,
.pkp_block .content a.btn-template,
.pkp_block .content a.btn-indexing {
  display: block !important;
  background-color: var(--upi-navy) !important;
  color: #ffffff !important;
  text-align: center;
  padding: 11px 14px !important;
  margin: 8px 0 !important;
  border-radius: var(--radius) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--upi-navy-dark);
}

.pkp_block .content a.btn-action:hover,
.pkp_block .content a.btn-template:hover,
.pkp_block .content a.btn-indexing:hover {
  background-color: var(--upi-navy-light) !important;
  color: var(--upi-accent-gold) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   8. Kill Stray Vertical Dividers Inside Content (v11)
   Menyasar sumber-sumber umum garis vertikal tak diinginkan di dalam kotak
   konten: kolom grid bawaan tema, tabel dari hasil paste (Word/Google Docs),
   dan wrapper "row/col" yang kadang dipakai OJS untuk halaman statis.
   -------------------------------------------------------------------------- */
.pkp_structure_main .row,
.pkp_structure_main .row > *,
.pkp_structure_main [class*="col-"],
.pkp_structure_main .page,
.pkp_structure_main .pkp_content_container,
.pkp_structure_main .cmp_page_break {
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  outline: none !important;
}

.pkp_structure_main table,
.pkp_structure_main table td,
.pkp_structure_main table th,
.pkp_structure_main table tr {
  border: none !important;
}

.about_section_header,
.about_section_header * {
  border: none !important;
}

/* --------------------------------------------------------------------------
   7. Footer Section
   -------------------------------------------------------------------------- */
.pkp_footer {
  background-color: var(--upi-navy-dark) !important;
  color: #cbd5e1 !important;
  padding: 40px 0 !important;
  margin-top: 50px !important;
  border-top: 4px solid var(--upi-accent-gold) !important;
}

.pkp_footer a {
  color: #ffffff !important;
  text-decoration: underline;
}

.pkp_footer a:hover {
  color: var(--upi-accent-gold) !important;
}


/* --------------------------------------------------------------------------
   9. Fix OJS About/Guidelines 2-Column Split & Force 100% Full Width (v13)
   -------------------------------------------------------------------------- */
/* Memaksa seluruh halaman (About, Guidelines, Contact, Submissions, dll)
   untuk tampil penuh 100% tanpa terpotong layout 2-kolom bawaan OJS */
.pkp_structure_main .page,
.pkp_structure_main .page_about,
.pkp_structure_main .page_author_guidelines,
.pkp_structure_main .page_submissions,
.pkp_structure_main [class*="page_"],
.pkp_structure_main .main_content,
.pkp_structure_main .content,
.pkp_structure_main .pkp_content_container,
.pkp_structure_main .row,
.pkp_structure_main [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Sembunyikan kolom sub-nav/sidebar kanan internal OJS yang kosong */
.pkp_structure_main .sub_nav,
.pkp_structure_main .navigation_sub {
  display: none !important;
}

/* Mematikan seluruh garis pembatas vertikal di dalam area konten utama */
.pkp_structure_main *,
.pkp_structure_main *::before,
.pkp_structure_main *::after {
  border-right: none !important;
  column-rule: none !important;
}


/* ==========================================================================
   10. ULTIMATE STRAY VERTICAL LINE DESTROYER (v14)
   ========================================================================== */

/* 1. Mencegah garis dari menu navigasi melimpah ke bawah (overflow containment) */
.pkp_navigation_primary_row,
.pkp_navigation_primary,
.pkp_navigation_primary > li,
.pkp_navigation_primary > li > a {
  max-height: 52px !important;
  overflow: visible !important;
}

/* 2. Matikan SEMUA border-right, border-left, border-center, dan column-rule di SELURUH konten utama */
.pkp_structure_main,
.pkp_structure_main *,
.pkp_structure_main *::before,
.pkp_structure_main *::after,
.pkp_structure_content,
.pkp_structure_content * {
  border-right: none !important;
  border-left: none !important;
  column-rule: none !important;
  box-shadow: none !important; /* Hapus bayangan yang menyamar sebagai garis */
}

/* Kembalikan box-shadow hanya pada kartu utama & sidebar agar tampilan tetap cantik */
.pkp_structure_main {
  box-shadow: var(--shadow-sm) !important;
}
.pkp_block {
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border-color) !important;
}

/* 3. Paksa layout 1 kolom penuh tanpa pembagian grid vertikal OJS */
.pkp_structure_main .page,
.pkp_structure_main [class*="page_"],
.pkp_structure_main .content,
.pkp_structure_main .description,
.pkp_structure_main .pkp_content_container,
.pkp_structure_main .row,
.pkp_structure_main [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background-image: none !important; /* Hapus background gradient/line */
}

/* 4. Basmi pseudo-element (::before / ::after) yang biasa dipakai OJS untuk membuat garis pembatas */
.pkp_structure_main *::before,
.pkp_structure_main *::after,
.pkp_structure_content *::before,
.pkp_structure_content *::after {
  display: none !important;
  content: none !important;
  border: none !important;
  width: auto !important;
}

/* Batalkan pembatasan ::before/::after untuk FontAwesome / Icon jika ada, tapi pastikan tidak membuat garis */
.fa::before, .fas::before, .far::before, .glyphicon::before {
  display: inline-block !important;
}