/* ============================================================
   POLINES GLOBAL THEME — CekJurnal.id
   Shared styles across all pages. Do not duplicate in <style>.
   ============================================================ */

/* ===== COLOR TOKENS ===== */
:root {
  --polines-navy:      #003366;
  --polines-blue:      #004080;
  --polines-gold:      #FDB515;
  --polines-yellow:    #FFD700;
  --polines-dark:      #002244;
  --polines-light-blue:#4A90E2;
}

/* ===== HEADER NAVIGATION ===== */
.header-area,
header.header-area {
  background-color: var(--polines-navy) !important;
}

.header-area .main-nav .nav li a,
header.header-area .main-nav .nav li a {
  color: #fff !important;
}

.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active,
header.header-area .main-nav .nav li a:hover,
header.header-area .main-nav .nav li a.active {
  color: var(--polines-gold) !important;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu,
header.header-area .main-nav .nav li.has-sub ul.sub-menu {
  background-color: var(--polines-blue) !important;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a,
header.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover,
.header-area .main-nav .nav li.has-sub ul.sub-menu li a.active,
header.header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover,
header.header-area .main-nav .nav li.has-sub ul.sub-menu li a.active {
  color: var(--polines-gold) !important;
  background-color: rgba(253,181,21,0.1);
}

.header-area .main-nav .menu-trigger span,
header.header-area .main-nav .menu-trigger span {
  background-color: var(--polines-gold) !important;
}

@media screen and (max-width: 992px) {
  .header-area .main-nav .nav,
  header.header-area .main-nav .nav {
    background-color: var(--polines-navy) !important;
  }
}

/* ===== BUTTONS ===== */
.border-button a {
  background-color: var(--polines-gold) !important;
  color: var(--polines-navy) !important;
  border: 2px solid var(--polines-gold) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}
.border-button a:hover {
  background-color: transparent !important;
  color: var(--polines-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(253,181,21,0.3);
}

.main-button a {
  background-color: var(--polines-gold) !important;
  color: var(--polines-navy) !important;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid var(--polines-gold);
}
.main-button a:hover {
  background-color: var(--polines-yellow) !important;
  color: var(--polines-navy) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(253,181,21,0.4);
}

/* ===== FOOTER ===== */
footer {
  background-color: var(--polines-navy) !important;
  color: #fff;
  padding: 30px 0;
  margin-top: 0;
}
footer p {
  color: rgba(255,255,255,0.9);
  margin: 0;
}

/* ===== PRELOADER ===== */
.js-preloader {
  background-color: var(--polines-navy) !important;
}
.js-preloader .dot,
.js-preloader .dots span {
  background-color: var(--polines-gold) !important;
}

/* ===== PAGE HEADING (shared across inner pages) ===== */
.page-heading {
  background-color: var(--polines-navy);
  padding: 60px 0 40px;
}
.page-heading h1,
.page-heading h3 {
  color: var(--polines-gold) !important;
}

/* ===== TITLE BOX (predator pages) ===== */
.title-box {
  background: linear-gradient(135deg, var(--polines-navy), var(--polines-blue));
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.title-box h2 { color: var(--polines-gold) !important; }
.title-box p  { color: rgba(255,255,255,0.85); }

/* ===== PAGINATION ===== */
.pagination .page-link {
  color: var(--polines-navy);
  border-color: #dee2e6;
  transition: all 0.2s;
}
.pagination .page-link:hover,
.pagination .page-item.active .page-link {
  background-color: var(--polines-navy);
  border-color: var(--polines-navy);
  color: #fff;
}

/* ===== SECTION HEADING ===== */
.section-heading h2 { color: var(--polines-navy); }
.section-heading .line-dec {
  background-color: var(--polines-gold);
}

/* ===== UTILITY CLASSES (extracted from inline styles) ===== */

/* Text utilities */
.text-body-muted     { color: #6b7280; }
.text-body-subtle    { color: #6c757d; }
.text-body-dark      { color: #4b5563; }

/* Typography combos (used in jurnal-match result cards) */
.result-meta {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 15px;
}
.result-meta-sm {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  padding-left: 20px;
}
.result-label {
  color: #4b5563;
  font-size: 14px;
  margin-bottom: 12px;
  font-weight: 600;
}
.result-note-sm {
  color: #4b5563;
  font-size: 13px;
  margin-top: 15px;
}

/* Info box (gray card) */
.info-box-gray {
  background: #f3f4f6;
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
}

/* Page content offset (for pages with fixed header) */
.page-content-offset {
  margin-top: 100px;
  margin-bottom: 80px;
}

/* Table column widths (discontinued-scopus / predator-daftar) */
.col-w-50  { width: 50px; }
.col-w-80  { width: 80px; }
.col-w-120 { width: 120px; }
.col-w-150 { width: 150px; }
.col-w-180 { width: 180px; }

/* Empty state icon */
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

/* Inline badge/count label */
.filter-count {
  color: #666;
  margin-left: 10px;
}
.filter-result-label {
  margin-top: 15px;
  font-weight: 600;
}

/* Warning note (amber) */
.warning-note {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
}
.warning-note p,
.warning-note span {
  color: #856404;
}

/* ===== ADDITIONAL UTILITY CLASSES (round 2) ===== */

/* Color shortcuts */
.text-gold       { color: var(--polines-gold); }
.text-gold-light { color: var(--polines-yellow); }
.text-danger-sm  { color: #dc3545; }
.text-amber      { color: #92400e; }
.text-muted-13   { color: #6c757d; font-size: 13px; }

/* Info box variants */
.info-box-warning {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
}
.info-box-warning p,
.info-box-warning span { color: #856404; }

/* predator-apa-itu: body text blocks */
.body-text-lg {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 20px;
}
.body-text-center-lg {
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 25px;
  color: rgba(255,255,255,0.9);
}

/* jurnal-match: info box */
.result-info-box {
  background: #f3f4f6;
  padding: 20px;
  border-radius: 12px;
  margin-top: 20px;
}

/* Align helpers */
.text-center-block { text-align: center; margin-bottom: 20px; }
.text-center-sub   { text-align: center; color: #6c757d; font-size: 13px; margin-bottom: 15px; }

/* ===== EVALUATION TOOL COLOR INDICATORS (predator-alat-evaluasi) ===== */
.cat-color-info   { border-left-color: #0ea5e9 !important; }
.cat-color-info .cat-bar { background: #0ea5e9; }
.cat-color-success { border-left-color: #10b981 !important; }
.cat-color-success .cat-bar { background: #10b981; }
.empty-icon-lg    { font-size: 48px; margin-bottom: 12px; }
.m-0-inline       { margin: 0; }
.divider-faint    { opacity: 0.3; margin: 12px 0; }

/* ============================================================
   FIX 1: DROPDOWN NAVIGATION — hover buka submenu di desktop
   ============================================================ */

/* Desktop: buka submenu saat hover */
@media (min-width: 992px) {
  .header-area .main-nav .nav li.has-sub:hover > ul.sub-menu,
  .background-header .main-nav .nav li.has-sub:hover > ul.sub-menu {
    display: block !important;
  }

  /* Submenu styling — navy theme agar konsisten dengan header */
  .header-area .main-nav .nav li.has-sub > ul.sub-menu,
  .background-header .main-nav .nav li.has-sub > ul.sub-menu {
    background-color: var(--polines-navy) !important;
    border-top: 2px solid var(--polines-gold);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    min-width: 220px;
  }

  .header-area .main-nav .nav li.has-sub > ul.sub-menu li a,
  .background-header .main-nav .nav li.has-sub > ul.sub-menu li a {
    color: rgba(255,255,255,0.9) !important;
    background-color: transparent !important;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 14px;
  }

  .header-area .main-nav .nav li.has-sub > ul.sub-menu li:last-child a,
  .background-header .main-nav .nav li.has-sub > ul.sub-menu li:last-child a {
    border-bottom: none;
  }

  .header-area .main-nav .nav li.has-sub > ul.sub-menu li a:hover,
  .background-header .main-nav .nav li.has-sub > ul.sub-menu li a:hover {
    color: var(--polines-gold) !important;
    background-color: rgba(255,255,255,0.07) !important;
    padding-left: 26px;
  }

  /* Panah indikator */
  .header-area .main-nav .nav li.has-sub > a::after {
    content: " ▾";
    font-size: 10px;
    opacity: 0.7;
  }
}

/* Mobile: JS click tetap berjalan */
@media (max-width: 991px) {
  .header-area .main-nav .nav li.has-sub.is-open-sub > ul.sub-menu {
    display: block !important;
  }
  .header-area .main-nav .nav li.has-sub > ul.sub-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    border-top: none;
    min-width: auto;
    padding-left: 15px;
    background-color: rgba(0,32,68,0.6) !important;
  }
  .header-area .main-nav .nav li.has-sub > ul.sub-menu li a {
    color: rgba(255,255,255,0.85) !important;
    font-size: 14px;
    padding: 8px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .header-area .main-nav .nav li.has-sub > ul.sub-menu li a:hover {
    color: var(--polines-gold) !important;
    background-color: transparent !important;
    padding-left: 20px;
  }
}

/* ============================================================
   FIX 2: HEADER OFFSET & WARNA second-page-heading
   Inner pages: header-sticky = position fixed dari awal → perlu padding-top
   ============================================================ */

/* Header inner pages bersifat fixed → konten perlu offset 80px */
.header-area.header-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: var(--polines-navy) !important;
}

/* second-page-heading harus dimulai SETELAH header (80px) */
.second-page-heading {
  background:
    linear-gradient(135deg, rgba(0,34,68,0.88), rgba(0,64,128,0.88)),
    url("assets/images/banner-03.jpg") center/cover no-repeat;
  padding: 80px 0 60px;
  padding-top: 140px;   /* 80px header + 60px spacing */
  margin-bottom: 60px;
}

.second-page-heading h4 {
  color: var(--polines-gold) !important;
}

.second-page-heading h2 {
  color: #ffffff !important;
}

.second-page-heading p {
  color: rgba(255,255,255,0.9) !important;
}

@media (max-width: 991px) {
  .second-page-heading {
    padding-top: 110px;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .second-page-heading h2 { font-size: 32px; }
}

@media (max-width: 767px) {
  .second-page-heading {
    padding-top: 100px;
    padding-bottom: 30px;
  }
  .second-page-heading h2 { font-size: 26px; }
}

/* ============================================================
   FIX 3: OFFSET KONTEN INNER PAGES — mencegah konten tertutup header fixed
   Semua halaman dengan header-sticky perlu padding-top di section pertama
   ============================================================ */

/* predator.html — .weekly-offers langsung setelah header */
.header-area.header-sticky ~ main > .weekly-offers,
body > main > .weekly-offers:first-child {
  padding-top: 100px;
}

/* literasi.html — coming-soon-section sudah ada padding 80px, tambah offset header */
.coming-soon-section {
  padding-top: 160px !important; /* 80px header + 80px original */
}

/* predator-alat-evaluasi.html — eval-section margin-top 65px tidak cukup */
.eval-section {
  margin-top: 100px !important;
}

/* taxonomy.html — taxonomy-section margin-top 80px hampir cukup, naikan sedikit */
.taxonomy-section {
  margin-top: 100px !important;
}

/* visitor-stats.html — cek apakah ada masalah */
.stats-hero,
.page-hero {
  padding-top: 140px;
}