/* =========================================================================
   Custom OJS 3 – Tema "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
   Versi  : Recode 2 dari custom_ojs3_jpai.css

   PERUBAHAN UTAMA (refactor):
     1. Archive jurnal  -> grid kartu 3 kolom, cover issue tampil dominan.
     2. Sidebar         -> efek mosaik (tile grid), header gradasi.
     3. Nav utama       -> ikon Font Awesome per item (berbasis href, andal).
     4. Warna           -> gradasi biru TOSCA -> BIRU LAUT di seluruh aksen.
   ========================================================================= */

@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 {
  /* Skala tosca -> laut */
  --jpai-tosca:        #14c2cf;   /* tosca terang (brand)        */
  --jpai-tosca-deep:   #0d9fb2;   /* tosca-teal (transisi)       */
  --jpai-sea:          #0a5d86;   /* biru laut                   */
  --jpai-sea-deep:     #07415f;   /* laut dalam / hover          */
  --jpai-navy:         #052f47;   /* teks tegas / judul          */

  --jpai-light:        #e6f7f9;   /* tint tosca (background)     */
  --jpai-line:         #cfe8ec;   /* garis / border halus        */
  --jpai-text:         #2c3338;   /* teks utama                  */
  --jpai-muted:        #607079;   /* teks sekunder               */
  --jpai-bg:           #eef6f8;   /* background halaman          */

  /* Gradien inti (dipakai berulang) */
  --jpai-grad:        linear-gradient(135deg, #14c2cf 0%, #0d9fb2 48%, #0a5d86 100%);
  --jpai-grad-deep:   linear-gradient(135deg, #0d9fb2 0%, #0a5d86 55%, #07415f 100%);
  --jpai-grad-soft:   linear-gradient(135deg, #e6f7f9 0%, #d4eef3 100%);
}

/* ------------------------------- 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-sea);
  transition: color .15s ease;
}
a:hover,
a:focus {
  color: var(--jpai-tosca-deep);
}

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

/* ------------------------- HEADER / NAMA SITUS -------------------------- */
.pkp_head_wrapper {
  background: #fff;
  /* garis bawah header dibuat gradasi tipis */
  border-bottom: 3px solid transparent;
  border-image: var(--jpai-grad) 1;
}
.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-sea-deep);
}
.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;
}

/* =========================================================================
   (3) NAV UTAMA — BAR GRADASI TOSCA->LAUT + IKON PER MENU
   ========================================================================= */
.pkp_navigation_primary_row {
  background: var(--jpai-grad) !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(7, 65, 95, .28) !important;
}

/* ---- IKON: dasar (semua item dapat ikon + jarak) --------------------- */
.pkp_navigation_primary > li > a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 8px;
  font-size: 13px;
  opacity: .92;
  content: "\f0da";                 /* default: caret-right        */
}
/* item pertama umumnya Home */
.pkp_navigation_primary > li:first-child > a::before { content: "\f015"; } /* home */

/* ---- IKON: per-menu berbasis href (urutan generic -> spesifik) ------- */
/* About (info) — diletakkan lebih dulu agar sub-About bisa menimpa */
.pkp_navigation_primary > li > a[href*="/about"]::before              { content: "\f05a"; } /* info-circle  */
/* Current issue */
.pkp_navigation_primary > li > a[href*="issue/current"]::before       { content: "\f02d"; } /* book         */
.pkp_navigation_primary > li > a[href*="issue/view"]::before          { content: "\f02d"; } /* book         */
/* Archives */
.pkp_navigation_primary > li > a[href*="issue/archive"]::before       { content: "\f187"; } /* archive      */
.pkp_navigation_primary > li > a[href*="issues"]::before              { content: "\f187"; } /* archive      */
/* Announcements */
.pkp_navigation_primary > li > a[href*="announcement"]::before        { content: "\f0a1"; } /* bullhorn     */
/* Editorial team / people */
.pkp_navigation_primary > li > a[href*="editorialTeam"]::before       { content: "\f0c0"; } /* users        */
.pkp_navigation_primary > li > a[href*="editorial"]::before           { content: "\f0c0"; } /* users        */
/* Submissions / author guideline */
.pkp_navigation_primary > li > a[href*="about/submissions"]::before   { content: "\f093"; } /* upload       */
.pkp_navigation_primary > li > a[href*="submission"]::before          { content: "\f093"; } /* upload       */
.pkp_navigation_primary > li > a[href*="guideline"]::before           { content: "\f15c"; } /* file-alt     */
.pkp_navigation_primary > li > a[href*="author"]::before              { content: "\f15c"; } /* file-alt     */
/* Indexing / statistics */
.pkp_navigation_primary > li > a[href*="indexing"]::before            { content: "\f02e"; } /* bookmark     */
.pkp_navigation_primary > li > a[href*="statistics"]::before          { content: "\f201"; } /* chart-line   */
/* Contact */
.pkp_navigation_primary > li > a[href*="about/contact"]::before       { content: "\f0e0"; } /* envelope     */
.pkp_navigation_primary > li > a[href*="contact"]::before             { content: "\f0e0"; } /* envelope     */
/* Ethics / policy / focus & scope (halaman statis umum) */
.pkp_navigation_primary > li > a[href*="ethics"]::before              { content: "\f19c"; } /* university   */
.pkp_navigation_primary > li > a[href*="policies"]::before            { content: "\f024"; } /* flag         */
.pkp_navigation_primary > li > a[href*="focusAndScope"]::before       { content: "\f05b"; } /* crosshairs   */
/* Indeks / abstracting */
.pkp_navigation_primary > li > a[href*="indexed"]::before             { content: "\f02e"; } /* bookmark     */

/* dropdown nav utama */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
  background: var(--jpai-sea) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 8px 18px rgba(7, 65, 95, .28);
}
.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;
}
/* di dalam dropdown, ikon submenu cukup caret kecil */
.pkp_navigation_primary > li > ul li > a::before {
  content: "\f105";                 /* angle-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 8px;
  font-size: 12px;
  opacity: .8;
}
/* 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: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(7, 65, 95, .12);
}

/* =========================================================================
   (1) ARCHIVE JURNAL — GRID KARTU 3 KOLOM, COVER DOMINAN
   Target: halaman /issue/archive (daftar issue ber-cover)
   ========================================================================= */
.issues_archive,
ul.issues_archive,
.issues_archive .issues {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.issues_archive > li,
.issues_archive .issues > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kartu issue */
.issues_archive .obj_issue_summary {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  background: #fff;
  border: 1px solid var(--jpai-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(7, 65, 95, .08);
  transition: box-shadow .2s ease, transform .2s ease;
}
.issues_archive .obj_issue_summary:hover {
  box-shadow: 0 12px 26px rgba(13, 159, 178, .22);
  transform: translateY(-4px);
}

/* Cover dibuat dominan: lebar penuh kartu, rasio sampul terjaga */
.issues_archive .obj_issue_summary .cover {
  display: block;
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 4;                /* proporsi sampul jurnal     */
  overflow: hidden;
  background: var(--jpai-grad-soft);  /* placeholder kalau cover kosong */
  position: relative;
}
.issues_archive .obj_issue_summary .cover img,
.issues_archive .obj_issue_summary .cover .obj_issue_cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.issues_archive .obj_issue_summary:hover .cover img {
  transform: scale(1.05);
}
/* pita gradasi tipis di atas cover sebagai aksen brand */
.issues_archive .obj_issue_summary .cover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 5px;
  background: var(--jpai-grad);
}

/* Badan teks kartu */
.issues_archive .obj_issue_summary .title,
.issues_archive .obj_issue_summary .series,
.issues_archive .obj_issue_summary .description {
  padding-left: 16px;
  padding-right: 16px;
}
.issues_archive .obj_issue_summary .title {
  display: block;
  margin-top: 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--jpai-navy);
}
.issues_archive .obj_issue_summary .title:hover {
  color: var(--jpai-tosca-deep);
}
.issues_archive .obj_issue_summary .series {
  margin-top: 4px;
  color: var(--jpai-muted);
  font-size: 13px;
}
.issues_archive .obj_issue_summary .description {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--jpai-text);
  /* batasi 3 baris agar tinggi kartu seragam */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------- DAFTAR / KARTU ARTIKEL ------------------------ */
/* (daftar artikel dalam Table of Contents tetap kartu list — lebih enak dibaca) */
.obj_article_summary {
  border: 1px solid var(--jpai-line);
  border-left: 4px solid transparent;
  border-image: var(--jpai-grad) 1;
  border-image-slice: 1;
  padding: 18px 20px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(7, 65, 95, .06);
  transition: box-shadow .18s ease, transform .18s ease;
  margin-bottom: 18px;
}
.obj_article_summary:hover {
  box-shadow: 0 6px 18px rgba(13, 159, 178, .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-tosca-deep);
}
.obj_article_summary .authors {
  color: var(--jpai-muted);
  font-size: 14px;
}

/* ikon DOI */
.obj_article_summary .item.doi .label {
  background: none;
  color: var(--jpai-sea);
  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-tosca-deep);
}
.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-grad);
  border: 1px solid transparent;
  color: #fff !important;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  padding: 8px 16px;
  transition: filter .15s ease, box-shadow .15s ease;
}
.cmp_button:hover,
.cmp_button_wire:hover,
.obj_galley_link:hover,
.pkp_block.block_make_submission .content a:hover {
  filter: brightness(.94);
  box-shadow: 0 4px 12px rgba(13, 159, 178, .28);
  color: #fff !important;
}

/* =========================================================================
   (2) SIDEBAR — EFEK MOSAIK (TILE GRID) + HEADER GRADASI
   ========================================================================= */
/* tekstur mosaik halus pada kolom sidebar */
.pkp_structure_sidebar {
  background-image:
    linear-gradient(135deg, rgba(20,194,207,.05) 25%, transparent 25%),
    linear-gradient(225deg, rgba(10,93,134,.05) 25%, transparent 25%);
  background-size: 22px 22px;
  background-position: 0 0;
  border-radius: 8px;
  padding: 4px;
}

.pkp_block {
  margin: 0 0 20px !important;
  padding: 0;
}
.pkp_structure_sidebar .pkp_block .title {
  font-family: 'Poppins', sans-serif;
  background: var(--jpai-grad);
  color: #fff;
  padding: 9px 12px;
  border-radius: 6px 6px 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 6px 6px;
  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 dijadikan MOSAIK 2 kolom --------------------- */
#customblock-Sidebar_menu.pkp_block ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
#customblock-Sidebar_menu.pkp_block ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
#customblock-Sidebar_menu.pkp_block ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 64px;
  padding: 10px 8px;
  line-height: 1.25;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--jpai-navy) !important;
  background: var(--jpai-grad-soft) !important;
  border: 1px solid var(--jpai-line);
  border-radius: 8px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
#customblock-Sidebar_menu.pkp_block ul li a:hover {
  background: var(--jpai-grad) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(13, 159, 178, .25);
}
/* tile pertama dibuat melebar penuh sebagai "headline" mosaik */
#customblock-Sidebar_menu.pkp_block ul li:first-child {
  grid-column: 1 / -1;
}
#customblock-Sidebar_menu.pkp_block ul li:first-child a {
  min-height: 52px;
  background: var(--jpai-grad) !important;
  color: #fff !important;
  font-size: 14px;
}

.sidebar-block {
  background: var(--jpai-grad-soft);
  border-left: 3px solid var(--jpai-tosca);
  padding: 8px 12px;
  color: var(--jpai-navy);
  margin: 12px 0;
  border-radius: 6px;
}

/* ----------------------------- 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-sea-deep);
}
.pkp_structure_footer {
  background: var(--jpai-grad-deep);
}
.pkp_structure_footer .pkp_footer_content {
  background: transparent;
  color: #dff2f6;
  padding: 28px 20px !important;
}
.pkp_structure_footer .pkp_footer_content a {
  color: #d6f3f8;
}
.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-tosca);
  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;
  }
  /* archive: 3 -> 2 kolom */
  .issues_archive,
  ul.issues_archive,
  .issues_archive .issues {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .pkp_structure_footer .pkp_footer_content { text-align: left; }
  .obj_article_summary { padding: 14px 16px; }
  /* archive: 2 -> 1 kolom */
  .issues_archive,
  ul.issues_archive,
  .issues_archive .issues {
    grid-template-columns: 1fr;
  }
  /* cover tak perlu setinggi 3:4 di layar sempit */
  .issues_archive .obj_issue_summary .cover { aspect-ratio: 16 / 9; }
  /* sidebar mosaik: 2 -> 1 kolom (kecuali headline tetap penuh) */
  #customblock-Sidebar_menu.pkp_block ul { grid-template-columns: 1fr; }
}

/* --------------------------- AKSESIBILITAS ----------------------------- */
a:focus,
.pkp_navigation_primary > li > a:focus,
#customblock-Sidebar_menu.pkp_block ul li a:focus {
  outline: 2px solid var(--jpai-tosca);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .issues_archive .obj_issue_summary:hover,
  .obj_article_summary:hover,
  #customblock-Sidebar_menu.pkp_block ul li a:hover { transform: none !important; }
}