/* =========================================================
   ISPE Journal Style Sheet (OJS 3.4)
   Goal: Sidebar menu look & feel like JEBI
   File: ispe-journal-style.css
   ========================================================= */

/* ---------- Base typography & page spacing ---------- */
body{
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

.pkp_structure_main{
  padding-top: 10px;
}

/* ---------- SIDEBAR BLOCK TITLE: .head-menu ---------- */
.head-menu{
  margin: 14px 0 8px 0;
  padding: 0;
}

.head-menu > a{
  display: block;
  background: #0e2a3b;                 /* navy */
  color: #ffffff !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 4px;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.08);
}

/* ---------- MAIN MENU CONTAINER: .menu-sidebar ---------- */
.menu-sidebar{
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 10px rgba(0,0,0,.04);
}

/* remove default list styles */
.menu-sidebar ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-sidebar ul li{
  margin: 0;
  padding: 0;
  border-top: 1px solid #eef1f6;
}

.menu-sidebar ul li:first-child{
  border-top: 0;
}

/* menu links (default) */
.menu-sidebar ul li a{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #ffffff;
  color: #1c2b36 !important;
  text-decoration: none !important;
  font-size: 14px;
  transition: all .18s ease-in-out;
}

/* icon styling (FontAwesome <em class="fa ...">) */
.menu-sidebar ul li a em.fa{
  width: 18px;
  min-width: 18px;
  text-align: center;
  color: #0e2a3b;
  opacity: .95;
}

/* strong title inside menu */
.menu-sidebar ul li a strong{
  font-weight: 800;
}

/* ---------- HOVER / FOCUS like JEBI ---------- */
.menu-sidebar ul li a:hover,
.menu-sidebar ul li a:focus{
  background: #0e2a3b;                 /* navy */
  color: #ffffff !important;
  padding-left: 18px;
  outline: none;
}

/* icon turns white on hover/focus */
.menu-sidebar ul li a:hover em.fa,
.menu-sidebar ul li a:focus em.fa{
  color: #ffffff !important;
}

/* yellow accent line like JEBI */
.menu-sidebar ul li a:hover::after,
.menu-sidebar ul li a:focus::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #f5b21a;                 /* yellow accent */
}

/* ---------- ACTIVE / CURRENT PAGE state ---------- */
/* Works if OJS adds aria-current, or you manually add class current */
.menu-sidebar ul li.current a,
.menu-sidebar ul li a[aria-current="page"]{
  background: #0e2a3b;
  color: #ffffff !important;
}

.menu-sidebar ul li.current a em.fa,
.menu-sidebar ul li a[aria-current="page"] em.fa{
  color: #ffffff !important;
}

.menu-sidebar ul li.current a::after,
.menu-sidebar ul li a[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #f5b21a;
}

/* ---------- ISSN / BADGE BLOCK: .badan ---------- */
.badan{
  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 1px 10px rgba(0,0,0,.04);
  margin-bottom: 10px;
}

.badan img{
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* ---------- Sidebar links (general) ---------- */
.pkp_structure_sidebar a{
  text-decoration: none;
}

.pkp_structure_sidebar a:hover{
  text-decoration: none;
}

/* ---------- Make sidebar widgets feel consistent ---------- */
.pkp_structure_sidebar .pkp_block{
  margin-bottom: 14px;
}

/* ---------- Optional: soften right column spacing ---------- */
.pkp_structure_sidebar{
  padding-top: 6px;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991px){
  .head-menu > a{
    font-size: 12px;
    padding: 10px 12px;
  }
  .menu-sidebar ul li a{
    font-size: 13px;
    padding: 10px 12px;
  }
}