/* =========================================================
   OJS 3.3 — Clean Brand Theme (Blue–Green + Grey Sidebar)
   ========================================================= */

/* 1) Font & Base
   --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root{
  /* Brand */
  --brand-blue-700:#0f4aa2;
  --brand-blue-600:#1364c4;
  --brand-green-600:#0fa36b;
  --brand-green-500:#13b981;

  /* Neutrals */
  --ink-900:#0b172a;
  --muted-600:#667085;
  --paper:#ffffff;
  --bg-50:#f6f9fc;

  /* Derived */
  --grad-nav: linear-gradient(90deg,var(--brand-blue-700),var(--brand-green-600));
  --grad-cta: linear-gradient(90deg,var(--brand-blue-600),var(--brand-green-500));
  --grad-text: linear-gradient(90deg,var(--brand-blue-600),var(--brand-green-500));
  --grad-sidebar: linear-gradient(180deg,#ffffff,#f5f7fa,#eceff4); /* abu2→putih lembut */
  --ring:#80d0ff;
}

html,body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--ink-900);
  background:var(--bg-50);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:var(--brand-blue-700); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* Sembunyikan item dropdown "About the Journal" bila ada */
.pkp_navigation_primary ul li ul li a[href*="about"]{ display:none !important; }

/* 2) Header / Navbar
   --------------------------------------------------------- */
.navbar,
.pkp_site_nav_menu,
.pkp_structure_head{
  background:var(--grad-nav) !important;
  border:0;
  box-shadow:0 6px 18px rgba(2,6,23,.10);
}
.navbar .navbar-brand,
.navbar .nav-link,
.pkp_site_nav_menu a,
.pkp_navigation_user a{
  color:#fff !important;
  font-weight:700;
  letter-spacing:.2px;
}
.navbar .nav-link:hover,
.pkp_site_nav_menu a:hover,
.pkp_navigation_user a:hover{ color:#e8f3ff !important; text-decoration:underline; }

.pkp_site_name_wrapper img,
.pkp_site_name a img{ max-height:68px; }

/* Baris menu transparan agar latar penuh terlihat */
.pkp_navigation_primary_row{ background:transparent !important; }

/* 3) Dropdown (satu versi saja, konsisten)
   --------------------------------------------------------- */
.dropdown-menu,
.pkp_navigation_primary ul li ul{
  background: linear-gradient(135deg,#0d47a1,#00796b) !important; /* biru→hijau */
  border:none;
  border-radius:12px;
  box-shadow:0 16px 28px rgba(2,6,23,.20);
  padding:6px 0;
}
.dropdown-item,
.pkp_navigation_primary ul li ul li a{
  color:#fff !important;
  font-weight:600;
  padding:10px 15px;
  display:block;
}
.dropdown-item:hover,
.pkp_navigation_primary ul li ul li a:hover{
  background:rgba(255,255,255,.18);
  color:#eaf7ff !important;
  text-decoration:none;
}
.pkp_navigation_primary ul li ul li{
  border-bottom:1px solid rgba(255,255,255,.20);
}
.pkp_navigation_primary ul li ul li:last-child{
  border-bottom:0;
}

/* 4) Hero (opsional)
   --------------------------------------------------------- */
.home-hero{
  position:relative; overflow:hidden; border-radius:18px;
  padding:clamp(28px,4vw,46px);
  background:
    radial-gradient(650px 300px at -5% 0%, rgba(52,211,153,.28), transparent 60%),
    radial-gradient(800px 380px at 110% 110%, rgba(14,165,233,.25), transparent 55%),
    linear-gradient(90deg, rgba(21,128,61,.95), rgba(16,185,129,.92));
  color:#ecfeff; box-shadow:0 16px 40px rgba(2,6,23,.18); margin-bottom:24px;
}
.home-hero h1{ margin:0 0 8px; font-weight:800; color:#fff; letter-spacing:.3px; }
.home-hero p{ color:#e6fffa; font-size:1.05rem; }
.home-hero .cta{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px; }
.home-hero .btn-hero{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:var(--brand-blue-700);
  border:0; border-radius:999px; padding:10px 16px; font-weight:700;
  text-decoration:none; box-shadow:0 8px 18px rgba(2,6,23,.15);
}
.home-hero .btn-hero .dot{ width:8px; height:8px; border-radius:999px; background:var(--brand-green-600); }
.home-hero .btn-hero:hover{ transform:translateY(-1px); box-shadow:0 12px 20px rgba(2,6,23,.18); }

/* 5) Cards / Index
   --------------------------------------------------------- */
.pkp_page_index .current_issue,
.pkp_page_index .section{
  background:var(--paper);
  border:1px solid rgba(2,6,23,.06);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 20px rgba(2,6,23,.04);
}
.obj_article_summary .title a{ color:var(--ink-900); font-weight:800; }
.obj_article_summary .meta{ color:var(--muted-600); }

/* 6) Buttons (global)
   --------------------------------------------------------- */
.pkp_button,
.pkp_button_primary,
.obj_galley_link a,
.obj_article_summary .galleys_links a,
a.pkp_button_primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--grad-cta);
  color:#fff !important; border:0; border-radius:999px; padding:8px 14px; font-weight:700;
  box-shadow:0 8px 18px rgba(2,6,23,.15);
  transition:transform .15s ease, box-shadow .15s ease;
}
.pkp_button:hover,
.pkp_button_primary:hover,
.obj_galley_link a:hover,
.obj_article_summary .galleys_links a:hover,
a.pkp_button_primary:hover{
  transform:translateY(-1px); box-shadow:0 12px 24px rgba(2,6,23,.18);
}
/* Secondary */
.pkp_button:not(.pkp_button_primary).pkp_helpers_text_only,
.pkp_button_link{
  background:#eef6ff; color:var(--brand-blue-700) !important;
  border-radius:999px; padding:8px 14px; font-weight:700;
}
/* Outline */
.button--outline{
  background:transparent; color:var(--brand-blue-700) !important;
  border:2px solid var(--brand-blue-700); border-radius:999px; padding:8px 14px; font-weight:700;
}
.button--outline:hover{ background:rgba(19,100,196,.08); }

/* 7) Sidebar (sesuai permintaan)
   --------------------------------------------------------- */
/* Blok sidebar default & custom: latar abu2→putih */
.pkp_block,
.pkp_block.block_custom{
  background: var(--grad-sidebar);
  border-radius:12px;
  border:1px solid rgba(2,6,23,.06);
  box-shadow:0 8px 20px rgba(2,6,23,.04);
  padding:12px 14px;
  color:var(--ink-900);
}
/* Judul/tulisan dengan teks gradasi biru–hijau */
.pkp_block .title,
.pkp_block.block_custom .title{
  font-weight:800; font-size:.95rem;
  background: var(--grad-text);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin:0 0 8px 0;
}
/* Link di dalam custom block */
.pkp_block.block_custom a{
  color:var(--brand-blue-700);
  text-decoration:none; display:block; padding:6px 0;
  transition:padding-left .2s ease;
}
.pkp_block.block_custom a:hover{ padding-left:6px; }

/* 8) Forms & Inputs
   --------------------------------------------------------- */
input[type="text"],input[type="email"],input[type="search"],input[type="password"],
select,textarea{
  border:1px solid #d0d8e4; border-radius:10px;
  padding:.625rem .75rem; background:#fff;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ring); border-color:transparent;
}

/* 9) Pagination
   --------------------------------------------------------- */
.pkp_pagination .current,
.pkp_pagination a{ border-radius:10px; padding:.4rem .7rem; }
.pkp_pagination .current{ background:var(--brand-blue-700); color:#fff !important; border:0; }
.pkp_pagination a:hover{ background:rgba(19,100,196,.08); }

/* 10) Footer
   --------------------------------------------------------- */
.pkp_structure_footer_wrapper{
  background:linear-gradient(135deg,var(--brand-blue-700),var(--brand-green-600));
  color:#fff; padding:40px 20px 20px; font-size:14px; line-height:1.65;
  box-shadow:0 -8px 20px rgba(2,6,23,.08) inset;
}

/* === Layout footer: 4 kolom sejajar (Grid) === */
.pkp_structure_footer_wrapper .journal-footer .footer-top{
  display:grid !important;                         /* override dari flex */
  grid-template-columns: repeat(4, minmax(0,1fr)); /* 4 kolom sama lebar */
  gap:24px;
  align-items:start;
  margin-bottom:25px;
}
.pkp_structure_footer_wrapper .journal-footer .footer-col{
  min-width:0; /* cegah overflow yang merusak grid */
}

/* Responsif: 2 kolom tablet, 1 kolom mobile */
@media (max-width: 1024px){
  .pkp_structure_footer_wrapper .journal-footer .footer-top{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .pkp_structure_footer_wrapper .journal-footer .footer-top{
    grid-template-columns: 1fr;
  }
}

/* Typographic polish (tetap) */
.journal-footer .footer-col h3{
  font-size:16px; font-weight:800; color:#e8f3ff; text-transform:uppercase;
  margin:0 0 10px 0;
  border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:6px;
}
.journal-footer .footer-col p,
.journal-footer .footer-col li{ color:#f3f7ff; margin:6px 0; }
.journal-footer .footer-col ul{ list-style:none; padding:0; margin:0; }
.journal-footer .footer-col li + li{ margin-top:6px; }
.journal-footer .footer-col ul li a{ color:#fff; }
.journal-footer .footer-col ul li a:hover{ color:#d8f8ee; text-decoration:underline; }

/* Map & bottom */
.journal-footer .footer-map{
  margin:20px 0; border:2px solid rgba(255,255,255,.45);
  border-radius:10px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.journal-footer .footer-bottom{
  border-top:1px solid rgba(255,255,255,.35);
  padding-top:14px; text-align:center; font-size:13px; color:#f1f5ff;
}
.journal-footer .footer-bottom a{ color:#fff; }
.journal-footer .footer-bottom a:hover{ color:#d8f8ee; text-decoration:underline; }
.journal-footer .footer-bottom img{ vertical-align:middle; margin:0 4px; }

/* 11) Archive page (pakai variabel root, tanpa duplikasi)
   --------------------------------------------------------- */
.pkp_page_issue_archive{ font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg-50); }
.pkp_page_issue_archive .pkp_page_title h1{ font-weight:800; letter-spacing:.2px; color:var(--ink-900); }
.pkp_page_issue_archive h2,
.pkp_page_issue_archive .issues h2{
  font-weight:800; font-size:1.15rem; color:var(--ink-900);
  border-left:4px solid var(--brand-blue-700); padding-left:.6rem; margin:1.2rem 0 .8rem;
}
.pkp_page_issue_archive .issues{
  display:grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap:18px;
}
@media (max-width:639px){ .pkp_page_issue_archive .issues{ grid-template-columns:repeat(1,minmax(0,1fr)); } }
@media (min-width:640px) and (max-width:1023px){ .pkp_page_issue_archive .issues{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .pkp_page_issue_archive .issues{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.pkp_page_issue_archive .obj_issue_summary{
  grid-column:span 1 / span 1; background:var(--paper);
  border:1px solid rgba(2,6,23,.06); border-radius:16px; overflow:hidden;
  box-shadow:0 10px 20px rgba(2,6,23,.05); display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.pkp_page_issue_archive .obj_issue_summary:hover{ transform:translateY(-2px); box-shadow:0 16px 28px rgba(2,6,23,.10); }
.pkp_page_issue_archive .obj_issue_summary .cover{ width:100%; aspect-ratio:16/10; background:#e9eef6; display:block; overflow:hidden; }
.pkp_page_issue_archive .obj_issue_summary .cover img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.pkp_page_issue_archive .obj_issue_summary .obj_issue_summary_content,
.pkp_page_issue_archive .obj_issue_summary .issue_description{ padding:14px 16px; }
.pkp_page_issue_archive .obj_issue_summary .title{ margin:0 0 6px; font-weight:800; font-size:1.05rem; color:var(--ink-900); line-height:1.3; }
.pkp_page_issue_archive .obj_issue_summary .series,
.pkp_page_issue_archive .obj_issue_summary .published{ color:var(--muted-600); font-size:.92rem; margin-top:2px; }
.pkp_page_issue_archive .obj_issue_summary .issue_description{ color:#374151; font-size:.95rem; padding-top:0; }
.pkp_page_issue_archive .obj_issue_summary .cmp_notification,
.pkp_page_issue_archive .obj_issue_summary .read_more,
.pkp_page_issue_archive .obj_issue_summary .links,
.pkp_page_issue_archive .obj_issue_summary .obj_issue_summary_footer{ margin-top:auto; padding:0 16px 16px; }
.pkp_page_issue_archive .obj_issue_summary a.read_more,
.pkp_page_issue_archive .obj_issue_summary .obj_issue_galleys a,
.pkp_page_issue_archive .obj_issue_summary .pkp_button_primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--grad-cta); color:#fff !important; border:0; border-radius:999px; padding:8px 14px; font-weight:700;
  text-decoration:none; box-shadow:0 8px 18px rgba(2,6,23,.15); transition:transform .15s ease, box-shadow .15s ease;
}
.pkp_page_issue_archive .obj_issue_summary a.read_more:hover,
.pkp_page_issue_archive .obj_issue_summary .obj_issue_galleys a:hover{ transform:translateY(-1px); box-shadow:0 12px 22px rgba(2,6,23,.18); }
.pkp_page_issue_archive .obj_issue_summary .published::before{ content:"Published: "; font-weight:600; color:var(--muted-600); }
.pkp_page_issue_archive .page_subtitle,
.pkp_page_issue_archive .filter{ margin-bottom:.8rem; }
.pkp_page_issue_archive .filter form select,
.pkp_page_issue_archive .filter form input[type="text"]{
  border:1px solid #d0d8e4; border-radius:10px; padding:.55rem .7rem; background:#fff; font-family:'Montserrat',sans-serif;
}
.pkp_page_issue_archive .filter form .submit,
.pkp_page_issue_archive .filter form button[type="submit"]{
  background:var(--grad-cta); color:#fff; border:0; border-radius:999px; padding:.55rem 1rem; font-weight:700; margin-left:.4rem;
}
.pkp_page_issue_archive .pkp_pagination{ margin-top:18px; }
.pkp_page_issue_archive .pkp_pagination a,
.pkp_page_issue_archive .pkp_pagination .current{ border-radius:10px; padding:.45rem .75rem; }
.pkp_page_issue_archive .pkp_pagination .current{ background:var(--brand-blue-700); color:#fff !important; border:0; }
.pkp_page_issue_archive .obj_issue_summary .description{ margin-top:.35rem; }

/* 12) Homepage search width helpers (tetap)
   --------------------------------------------------------- */
.pkp_structure_content .homepage_about .homepage_search{ display:block; width:100%; margin:10px 0; }
.pkp_page_index .homepage_about{ max-width:none !important; }
.pkp_structure_content .homepage_about .homepage_search .pkp_search{
  display:grid; grid-template-columns:minmax(0,1fr) max-content; gap:5px; width:100%; max-width:100%;
}
.pkp_structure_content .homepage_about .homepage_search .query{
  min-width:0 !important; width:100% !important;
  padding:10px 12px; border:1px solid #d0d8e4; border-radius:10px; background:#fff; font-family:'Montserrat',sans-serif;
}
.pkp_structure_content .homepage_about .homepage_search .pkp_button_primary{
  white-space:nowrap; background:var(--grad-cta); color:#fff !important; border:0; border-radius:999px;
  padding:10px 16px; font-weight:700; box-shadow:0 8px 18px rgba(2,6,23,.15);
}
.pkp_structure_content .homepage_about .homepage_search .pkp_button_primary:hover{
  transform:translateY(-1px); box-shadow:0 12px 24px rgba(2,6,23,.18);
}
@media (max-width:640px){
  .pkp_structure_content .homepage_about .homepage_search .pkp_search{ grid-template-columns:1fr; }
}

/* 13) Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* 14) Headings / breadcrumbs
   --------------------------------------------------------- */
.pkp_page_title h1,.pkp_page_title h2{ font-weight:800; }
.breadcrumb a{ color:#fff; }
.breadcrumb{ background:transparent; }