/* =========================================================================
   Custom OJS 3 – Tema bergaya "JPAI" (ejournal.uin-suka.ac.id/tarbiyah/jpai)
   Basis  : Default Theme OJS
   Target : OJS 3.3.x – 3.5.x
   Owner  : anwar dani
   Lisensi: GPL
   Catatan: Recode dari custom_ojs3.css. Warna & layout meniru tampilan JPAI
            (biru bersih, nav bar biru, kartu artikel, footer multi-kolom).
   ========================================================================= */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@500;600;700&display=swap');

/* ----------------------------- VARIABEL WARNA --------------------------- */
:root {
  --jpai-primary:        #098bc1;   /* biru brand JPAI            */
  --jpai-primary-dark:   #066a93;   /* hover / aksen              */
  --jpai-navy:           #0a3d62;   /* judul / teks tegas         */
  --jpai-light:          #e8f4fa;   /* tint biru muda (background)*/
  --jpai-line:           #d7e6ef;   /* garis / border halus       */
  --jpai-text:           #33373b;   /* teks utama                 */
  --jpai-muted:          #6b7780;   /* teks sekunder              */
  --jpai-bg:             #f4f8fb;   /* background halaman          */
}

/* ------------------------------- TIPOGRAFI ------------------------------ */
html,
body,
* {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
body {
  color: var(--jpai-text);
  background: var(--jpai-bg) !important;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Open Sans', sans-serif;
  color: var(--jpai-navy);
  font-weight: 600;
}
a {
  color: var(--jpai-primary);
  transition: color .15s ease;
}
a:hover,
a:focus {
  color: var(--jpai-primary-dark);
}

/* -------------------------- STRUKTUR HALAMAN ---------------------------- */
.pkp_structure_page {
  margin: auto;
  width: 1170px;
  max-width: 100%;
  padding-bottom: 0 !important;
  background: #fff;
  box-shadow: 0 0 25px rgba(10, 61, 98, .08);
}
.pkp_structure_content {
  padding-top: 25px;
}

/* ------------------------- HEADER / NAMA SITUS -------------------------- */
.pkp_head_wrapper {
  background: #fff;
  border-bottom: 3px solid var(--jpai-primary);
}
.pkp_site_name_wrapper {
  padding-left: 0;
  padding-right: 0;
}
.pkp_site_name {
  padding-top: 8px;
  padding-bottom: 8px;
}
.pkp_site_name .is_img img {
  display: block;
  max-height: 90px;
  width: auto;
  height: auto;
}

/* -------------------- NAV ATAS (USER: register/login) ------------------ */
.pkp_navigation_user_wrapper {
  padding: 0;
  background: var(--jpai-navy);
}
.pkp_navigation_user {
  border-bottom: none;
}
.pkp_navigation_user > li > a,
.pkp_navigation_user > li.in_focus > a,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus,
.pkp_navigation_user > li.profile > a {
  color: #fff !important;
  font-weight: 600;
  line-height: 38px;
  padding: 0 14px;
}
.pkp_navigation_user > li > a:hover {
  background: rgba(255, 255, 255, .12);
}
.pkp_navigation_user_wrapper .pkp_navigation_user > li.profile > ul.dropdown-menu {
  border-radius: 4px !important;
  overflow: hidden;
}

/* ---------------------- NAV UTAMA (BAR BIRU JPAI) ----------------------- */
.pkp_navigation_primary_row {
  background: var(--jpai-primary) !important;
  border: none;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li {
  padding: 0 !important;
  margin: 0 !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
  margin: 0 !important;
  padding: 0 16px !important;
  line-height: 46px !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 500 !important;
  font-size: 14px;
  color: #fff !important;
  letter-spacing: .2px;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li.in_focus > a {
  background: rgba(0, 0, 0, .18) !important;
}
/* dropdown nav utama */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
  background: var(--jpai-primary-dark) !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 6px 14px rgba(10, 61, 98, .2);
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li {
  border-bottom: solid 1px rgba(255, 255, 255, .15) !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:last-child {
  border-bottom: none !important;
}
/* kotak pencarian di nav */
.pkp_navigation_primary_row .pkp_search.is_open input[type="text"] {
  font-family: 'Open Sans', sans-serif;
  border-radius: 4px;
}

/* -------------------------- HERO / PENCARIAN --------------------------- */
.pkp_page_index .homepage_image {
  margin-top: 20px;
  border-radius: 6px;
  overflow: hidden;
}

/* ----------------------- DAFTAR / KARTU ARTIKEL ------------------------ */
.obj_article_summary {
  border: 1px solid var(--jpai-line);
  border-left: 4px solid var(--jpai-primary);
  padding: 18px 20px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(10, 61, 98, .06);
  transition: box-shadow .18s ease, transform .18s ease;
  margin-bottom: 18px;
}
.obj_article_summary:hover {
  box-shadow: 0 6px 18px rgba(9, 139, 193, .18);
  transform: translateY(-2px);
}
.obj_article_summary .title a {
  color: var(--jpai-navy);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.obj_article_summary .title a:hover {
  color: var(--jpai-primary);
}
.obj_article_summary .authors {
  color: var(--jpai-muted);
  font-size: 14px;
}

/* ikon DOI */
.obj_article_summary .item.doi .label {
  background: none;
  color: var(--jpai-primary);
  font-weight: 600;
}
.obj_article_summary .item.doi .value a {
  color: var(--jpai-muted);
}

/* statistik abstrak & galley (FontAwesome 5) */
.obj_article_summary .item.stats .abstract,
.obj_article_summary .item.stats .galley {
  position: relative;
  color: var(--jpai-muted);
}
.obj_article_summary .item.stats .abstract {
  margin-left: 22px;
  margin-right: 12px;
}
.obj_article_summary .item.stats .galley {
  margin-left: 26px;
}
.obj_article_summary .item.stats .abstract:before,
.obj_article_summary .item.stats .galley:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  left: -16px;
  position: absolute;
  top: 0;
  color: var(--jpai-primary);
}
.obj_article_summary .item.stats .abstract:before { content: "\f06e"; }  /* eye  */
.obj_article_summary .item.stats .galley:before  { content: "\f1c1"; }  /* pdf  */

/* -------------------------- TOMBOL & GALLEY ---------------------------- */
.cmp_button,
.cmp_button_wire,
.obj_galley_link,
.pkp_block.block_make_submission .content a {
  background: var(--jpai-primary);
  border: 1px solid var(--jpai-primary);
  color: #fff !important;
  border-radius: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  padding: 8px 16px;
  transition: background .15s ease;
}
.cmp_button:hover,
.cmp_button_wire:hover,
.obj_galley_link:hover,
.pkp_block.block_make_submission .content a:hover {
  background: var(--jpai-primary-dark);
  border-color: var(--jpai-primary-dark);
  color: #fff !important;
}

/* --------------------------- SIDEBAR / BLOK ---------------------------- */
.pkp_block {
  margin: 0 0 20px !important;
  padding: 0;
}
.pkp_structure_sidebar .pkp_block .title {
  font-family: 'Poppins', sans-serif;
  background: var(--jpai-navy);
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px 4px 0 0;
  margin: 0;
  font-size: 15px;
}
.pkp_structure_sidebar .pkp_block .content {
  border: 1px solid var(--jpai-line);
  border-top: none;
  padding: 12px;
  border-radius: 0 0 4px 4px;
  background: #fff;
}
.pkp_block.block_make_submission .content {
  border: none;
  text-align: center !important;
  padding: 0 !important;
}
.pkp_block.block_make_submission .content a {
  display: block;
}

/* sidebar menu kustom */
#customblock-Sidebar_menu.pkp_block ul,
#customblock-Sidebar_menu.pkp_block ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
#customblock-Sidebar_menu.pkp_block ul li a {
  background: var(--jpai-light) !important;
  display: block;
  line-height: 42px;
  padding: 0 12px 0 18px;
  color: var(--jpai-navy) !important;
  border-bottom: solid 1px #fff;
  font-weight: 600;
}
#customblock-Sidebar_menu.pkp_block ul li a:hover {
  background: var(--jpai-primary) !important;
  color: #fff !important;
}
.sidebar-block {
  background: var(--jpai-light);
  border-left: 3px solid var(--jpai-primary);
  padding: 8px 12px;
  color: var(--jpai-navy);
  margin: 12px 0;
  border-radius: 4px;
}

/* ----------------------------- PENGUMUMAN ------------------------------ */
.cmp_announcements .obj_announcement_summary.full_width {
  width: 100% !important;
}
.cmp_announcements .obj_announcement_summary .summary p {
  line-height: 1.45em;
  margin: 0 0 1em !important;
}

/* ----------------------- FOOTER MULTI-KOLOM JPAI ----------------------- */
.pkp_structure_footer_wrapper {
  border-bottom: none !important;
  background: var(--jpai-navy);
}
.pkp_structure_footer {
  background: var(--jpai-navy);
}
.pkp_structure_footer .pkp_footer_content {
  background: var(--jpai-navy);
  color: #dbe6ee;
  padding: 28px 20px !important;
}
.pkp_structure_footer .pkp_footer_content a {
  color: #cfe6f4;
}
.pkp_structure_footer .pkp_footer_content a:hover {
  color: #fff;
}
.pkp_structure_footer .pkp_footer_content h2,
.pkp_structure_footer .pkp_footer_content h3 {
  color: #fff;
  font-size: 16px;
  border-bottom: 2px solid var(--jpai-primary);
  padding-bottom: 6px;
  margin-bottom: 12px;
  display: inline-block;
}
.pkp_structure_footer .pkp_footer_content p {
  margin: 0 0 8px;
}
.pkp_structure_footer .pkp_footer_content img {
  max-width: 100%;
  height: auto;
}
.pkp_structure_footer .pkp_brand_footer,
.pkp_brand_footer {
  display: none;
}

/* ------------------------------ RESPONSIVE ----------------------------- */
@media (max-width: 1199px) {
  .pkp_structure_page { width: 100%; }
}
@media (max-width: 991px) {
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
    line-height: 40px !important;
  }
  .pkp_page_index .homepage_image,
  .pkp_page_index .additional_content {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .pkp_structure_footer .pkp_footer_content { text-align: left; }
  .obj_article_summary { padding: 14px 16px; }
}