/* ===================================================================
   KERTHA WICARA — Fakultas Hukum, Universitas Udayana
   Custom stylesheet v2 — dibangun di atas token warna yang sudah ada
   (--fh-primary, --fh-gold, --fh-accent) dan diperluas untuk elemen
   yang belum tersentuh: navigasi mobile, slider (Swiper), dropdown,
   ikon FontAwesome, form, dan animasi.

   Cara pakai: Website Settings > Appearance > tab Setup >
   "Additional stylesheet" > ganti file lama dengan file ini.
   =================================================================== */

/* -------------------------------------------------
   0. FIX LOGO (dari styleSheet(1).css kalian — dipertahankan)
------------------------------------------------- */
.pkp_site_name { padding-top: 0 !important; padding-bottom: 0 !important; }
.pkp_site_name .is_img img {
  max-width: none; max-height: none;
  width: 100%; height: 100%;
  padding: 0; border: 0;
}

/* -------------------------------------------------
   1. DESIGN TOKENS
   (sama seperti file lama kalian, ditambah beberapa turunan)
------------------------------------------------- */
:root {
  --fh-primary: #0D2B5B;
  --fh-primary-light: #173f7a;
  --fh-primary-dark: #081c3d;

  --fh-gold: #D4AF37;
  --fh-gold-light: #e8c96b;

  --fh-accent: #8B1E2D;
  --fh-accent-light: #a8283a;

  --fh-bg: #f7f9fc;
  --fh-surface: #ffffff;
  --fh-border: #e3e7ee;

  --fh-text: #24324a;
  --fh-text-muted: #6b7484;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(13,43,91,.08);
  --shadow-md: 0 8px 24px rgba(13,43,91,.12);
  --shadow-lg: 0 16px 36px rgba(13,43,91,.16);

  --transition: .3s cubic-bezier(.4,0,.2,1);
}

/* -------------------------------------------------
   2. GLOBAL
------------------------------------------------- */
body {
  background: var(--fh-bg);
  font-family: 'Inter', Arial, sans-serif;
  color: var(--fh-text);
  line-height: 1.7;
}

.pkp_structure_page { max-width: 1400px; margin: auto; }

h1, h2, h3, .page_title, .name {
  font-family: 'Noto Serif', Georgia, serif;
  color: var(--fh-primary);
}

a { color: var(--fh-primary); transition: color var(--transition); }
a:hover { color: var(--fh-accent); }

/* -------------------------------------------------
   3. HEADER / SITE NAME
   PENTING: tema default OJS menerapkan warna "Colour" (Appearance
   > Theme) sebagai inline style pada wrapper header — itu sebabnya
   dulu masih muncul emas walau .pkp_site_name sudah navy. Semua
   selector di bawah dipaksa !important untuk menimpa inline style
   tersebut. Kalau opsi "Colour" di Theme Settings sudah diganti ke
   navy, blok !important ini jadi pengaman cadangan saja.
------------------------------------------------- */
#headerNavigationContainer,
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper {
  background: linear-gradient(90deg, var(--fh-primary), var(--fh-primary-light)) !important;
}

.pkp_site_name {
  background: transparent !important;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 1.4rem 2rem !important;
  margin: 0 !important;
}
.pkp_site_name img { max-height: 180px; }
.pkp_site_name, .pkp_site_name a {
  color: #fff !important;
}

/* -------------------------------------------------
   4. NAVIGASI PRIMER (desktop + mobile toggle)
------------------------------------------------- */
.pkp_navigation_primary_row {
  background: var(--fh-primary) !important;
  border-bottom: 4px solid var(--fh-gold);
}

.pkp_navigation_primary_row a {
  color: #fff !important;
  font-weight: 600;
  transition: var(--transition);
}
.pkp_navigation_primary_row a:hover {
  background: var(--fh-gold) !important;
  color: var(--fh-primary) !important;
}

/* Tombol hamburger mobile (mengikuti struktur default theme) */
#navigationPrimaryMobile,
.pkp_navigation_button_mobile {
  color: #fff;
  transition: var(--transition);
}
.pkp_navigation_button_mobile:hover { color: var(--fh-gold); }

/* -------------------------------------------------
   5. DROPDOWN MENU (dropdown.js)
------------------------------------------------- */
.dropdown-menu,
ul.sub-menu,
.pkp_navigation_primary li ul {
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  border-top: 3px solid var(--fh-gold);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: .4rem 0;
  animation: dropdownFade .2s ease both;
}

.dropdown-menu a,
.pkp_navigation_primary li ul a {
  color: var(--fh-primary) !important;
  padding: .55rem 1.1rem;
  display: block;
  font-weight: 500;
}
.dropdown-menu a:hover,
.pkp_navigation_primary li ul a:hover {
  background: var(--fh-bg);
  color: var(--fh-accent) !important;
  padding-left: 1.4rem;
}

@keyframes dropdownFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------
   6. SLIDER / CAROUSEL (Swiper.js — homepage highlight)
------------------------------------------------- */
.swiper {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

.swiper-slide {
  position: relative;
  background: var(--fh-primary-dark);
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.72);
}

.swiper-slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem 2rem;
  background: linear-gradient(0deg, rgba(13,43,91,.9) 0%, transparent 100%);
  color: #fff;
}

.swiper-pagination-bullet {
  background: #fff;
  opacity: .5;
}
.swiper-pagination-bullet-active {
  background: var(--fh-gold);
  opacity: 1;
}

.swiper-button-next, .swiper-button-prev {
  color: var(--fh-gold);
  background: rgba(13,43,91,.5);
  border-radius: 50%;
  width: 40px; height: 40px;
  transition: var(--transition);
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  background: var(--fh-primary);
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 16px; }

/* -------------------------------------------------
   7. CARD ARTIKEL
------------------------------------------------- */
.obj_article_summary {
  background: #fff;
  border: 0;
  border-left: 5px solid var(--fh-gold);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.obj_article_summary:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-left-color: var(--fh-accent);
}

.obj_article_summary .title a {
  font-family: 'Noto Serif', Georgia, serif;
  font-weight: 700;
}
.obj_article_summary .authors,
.obj_article_summary .meta {
  color: var(--fh-text-muted);
  font-size: .9rem;
}

/* -------------------------------------------------
   8. TOMBOL & GALLEY LINK
------------------------------------------------- */
.obj_galley_link, .cmp_button_wire, .pkp_button {
  background: var(--fh-primary);
  border-color: var(--fh-primary);
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 600;
  padding: .5rem 1.2rem;
  transition: var(--transition);
}
.obj_galley_link:hover, .cmp_button_wire:hover, .pkp_button:hover {
  background: var(--fh-gold);
  color: var(--fh-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.pkp_button.pkp_button_primary {
  background: linear-gradient(120deg, var(--fh-accent), var(--fh-accent-light));
  border-color: var(--fh-accent);
}

/* -------------------------------------------------
   9. IKON FONTAWESOME — samakan warna dengan brand
------------------------------------------------- */
.fa, .fas, .far, .fab {
  color: var(--fh-primary);
  transition: var(--transition);
}
a:hover .fa, a:hover .fas, a:hover .fab { color: var(--fh-gold); }

/* -------------------------------------------------
   10. SIDEBAR BLOCK
------------------------------------------------- */
.pkp_block .title {
  background: var(--fh-primary);
  color: #fff;
  border-left: 5px solid var(--fh-gold);
  padding: .6rem 1rem;
  font-family: 'Noto Serif', Georgia, serif;
}
.pkp_block {
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 1.2rem;
}

/* -------------------------------------------------
   11. FORM & PENCARIAN
------------------------------------------------- */
input[type="text"], input[type="search"], input[type="email"],
textarea, select {
  border: 1px solid var(--fh-border);
  border-radius: var(--radius-sm);
  padding: .55rem .8rem;
  transition: var(--transition);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--fh-primary);
  box-shadow: 0 0 0 3px rgba(13,43,91,.15);
}

/* -------------------------------------------------
   12. FOOTER
------------------------------------------------- */
.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_brand_footer {
  background: var(--fh-primary);
  color: #fff;
  border-top: 3px solid var(--fh-gold);
}
.pkp_structure_footer a { color: rgba(255,255,255,.85); }
.pkp_structure_footer a:hover { color: var(--fh-gold-light); }

/* Badge "Platform & workflow by OJS/PKP" biar tetap terlihat rapi di atas background gelap */
.pkp_brand_footer img { filter: brightness(0) invert(1); opacity: .8; }

/* -------------------------------------------------
   13. ANIMASI HALAMAN
------------------------------------------------- */
.pkp_structure_main { animation: fadeInUp .4s ease both; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------
   14. RESPONSIVE
------------------------------------------------- */
@media (max-width: 768px) {
  .obj_article_summary { padding: 12px; }
  .pkp_navigation_primary_row a { font-size: 14px; }
  .swiper-slide-caption { padding: 1rem 1.2rem; }
  .pkp_site_name img { max-height: 100px; }
}

/* -------------------------------------------------
   15. CUSTOM BLOCK CONTENT (sidebar: template, indexing,
   akreditasi, info jurnal) — dipakai oleh HTML yang ditempel
   di plugin Custom Block Manager.
------------------------------------------------- */
.fh-block-list { list-style: none; margin: 0; padding: 0; }
.fh-block-list li { margin-bottom: .6rem; }
.fh-block-list a {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--fh-primary);
  transition: var(--transition);
}
.fh-block-list a:hover { color: var(--fh-accent); transform: translateX(3px); }
.fh-block-list .fh-ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--fh-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  flex-shrink: 0;
}

.fh-badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
.fh-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .55rem .4rem;
  background: var(--fh-bg);
  border: 1px solid var(--fh-border);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 700;
  color: var(--fh-primary);
  transition: var(--transition);
}
.fh-badge:hover {
  background: var(--fh-primary);
  color: #fff;
  border-color: var(--fh-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.fh-akreditasi {
  text-align: center;
  padding: .5rem 0 .2rem;
}
.fh-akreditasi .fh-rank {
  display: inline-block;
  background: linear-gradient(120deg, var(--fh-gold), var(--fh-gold-light));
  color: var(--fh-primary-dark);
  font-family: 'Noto Serif', Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  padding: .3rem 1.4rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.fh-akreditasi .fh-rank-label {
  display: block;
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--fh-text-muted);
}

.fh-info-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.fh-info-table td {
  padding: .4rem 0;
  border-bottom: 1px dashed var(--fh-border);
  vertical-align: top;
}
.fh-info-table td:first-child {
  color: var(--fh-text-muted);
  width: 42%;
  font-weight: 600;
}
.fh-info-table tr:last-child td { border-bottom: none; }

/* -------------------------------------------------
   16. MENU TOMBOL (quick-link button block, untuk
   custom block "menu" — daftar tombol vertikal)
------------------------------------------------- */
.fh-menu-btns {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.fh-menu-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--fh-primary);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: .88rem;
  padding: .65rem 1rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--fh-gold);
  transition: var(--transition);
}
.fh-menu-btn:hover {
  background: var(--fh-gold);
  color: var(--fh-primary-dark) !important;
  border-left-color: var(--fh-accent);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}
.fh-menu-btn .fh-menu-emoji { font-size: 1rem; line-height: 1; }

/* -------------------------------------------------
   17. MENU TOMBOL BERSUSUN (stacked list, menyatu tanpa
   jarak — gaya seperti referensi jurnal.iaidarussalam)
------------------------------------------------- */
.fh-menu-stack {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--fh-primary-dark);
}
.fh-menu-stack a {
  display: block;
  text-align: center;
  background: var(--fh-primary);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .01em;
  padding: .7rem .6rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  transition: var(--transition);
}
.fh-menu-stack a:last-child { border-bottom: none; }
.fh-menu-stack a:hover {
  background: var(--fh-gold);
  color: var(--fh-primary-dark) !important;
  padding-left: 1.1rem;
}
.fh-menu-stack a:nth-child(even) {
  background: var(--fh-primary-light);
}
.fh-menu-stack a:nth-child(even):hover {
  background: var(--fh-gold-light);
}

/* -------------------------------------------------
   18. HOVER UNTUK MENU INLINE-STYLE
   Karena editor Custom Block membuang <div>/class/data-*,
   kita "kunci" efek hover lewat isi atribut style bawaan
   (warna 0D2B5B / 173f7a) memakai attribute selector.
   Tidak menambah atribut baru ke HTML — jadi aman dari sanitizer.
------------------------------------------------- */
.pkp_block a[style*="0D2B5B"]:hover,
.pkp_block a[style*="173f7a"]:hover {
  background: var(--fh-gold) !important;
  color: var(--fh-primary-dark) !important;
  padding-left: 16px !important;
  box-shadow: inset 0 0 0 1px var(--fh-gold-light);
}

/* Extend this file with journal-specific selectors as needed. */