/* ======================================================================
   JPPAW HEADER THEME — Navy & Gold
   Untuk: Settings → Website → Appearance → Additional Style Sheet
   Struktur mengacu pada: lib/pkp/templates/frontend/components/header.tpl
   ====================================================================== */


/* ---------- 1. HEADER BAR ---------- */

.pkp_structure_head {
  background: linear-gradient(120deg, #001b42 0%, #002254 55%, #013a7a 100%);
  border-bottom: 4px solid #C18C27;
  border-image: linear-gradient(90deg, #8a6415, #C18C27, #e8c877, #C18C27, #8a6415) 1;
  min-height: 0 !important;
  height: auto !important;
}


/* ---------- 2. WRAPPER UTAMA (bungkus logo + seluruh nav) ---------- */

.pkp_head_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 24px !important;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 0 !important;
  height: auto !important;
  position: relative !important;
}


/* ---------- 3. LOGO & NAMA JURNAL ---------- */

.pkp_site_name_wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
}

.pkp_site_name img {
  max-height: 64px !important;
  height: 64px !important;
  width: auto !important;
  border-radius: 10px;
  background: #fbfbfa;
  padding: 4px;
}

.pkp_site_name a.is_text {
  color: #ffffff !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

.pkp_site_name a.is_img {
  display: flex;
  align-items: center;
}

/* Tombol hamburger — sembunyikan di desktop, tampil di mobile (lihat bagian 8) */
.pkp_site_nav_toggle {
  display: none;
}


/* ---------- 4. NAV UTAMA (bungkus menu + search + user) ---------- */

.pkp_site_nav_menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 16px !important;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;      /* jaring pengaman: scroll horizontal bila tetap kepanjangan */
  position: static !important;
  width: auto !important;
}

.pkp_navigation_primary_row {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
}

.pkp_navigation_primary_wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px !important;
  min-width: 0;
  background: transparent !important;
}


/* ---------- 5. MENU CURRENT / ARCHIVES / ANNOUNCEMENTS / ABOUT ---------- */

#navigationPrimary,
.pkp_navigation_primary {
  background: transparent !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pkp_navigation_primary > li {
  background: transparent !important;
  position: relative;
}

.pkp_navigation_primary > li > a {
  color: #e8e4d8 !important;
  font-family: Arial, sans-serif;
  font-size: 12.5px !important;
  letter-spacing: 0.3px;
  padding: 6px 2px !important;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.current > a {
  color: #ffffff !important;
  border-bottom-color: #C18C27;
}

/* Dropdown submenu "About" (Submissions, Editorial Masthead, dst) */
.pkp_navigation_primary li ul {
  background: #002254;
  border: 1px solid rgba(193,140,39,0.4);
  border-radius: 6px;
  padding: 6px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  min-width: 200px;
  position: absolute;
  z-index: 50;
}

.pkp_navigation_primary li ul a {
  color: #e8e4d8 !important;
  padding: 8px 16px !important;
  display: block;
  font-size: 13px;
  border-bottom: none !important;
  white-space: normal;
}

.pkp_navigation_primary li ul a:hover {
  background: rgba(193, 140, 39, 0.15);
  color: #ffffff !important;
}


/* ---------- 6. SEARCH (link ikon + teks, BUKAN input) ---------- */

.pkp_navigation_search_wrapper {
  display: flex;
  align-items: center;
}

.pkp_search.pkp_search_desktop {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e8e4d8 !important;
  font-family: Arial, sans-serif;
  font-size: 12.5px;
  text-decoration: none;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(193,140,39,0.4);
  border-radius: 20px;
  padding: 5px 12px !important;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.pkp_search.pkp_search_desktop:hover {
  background: rgba(193,140,39,0.15);
  color: #ffffff !important;
}

.pkp_search .fa-search {
  color: #C18C27;
}


/* ---------- 7. USER MENU (admin / Register / Login) ---------- */

#headerNavigationContainer .pkp_navigation_user_wrapper,
#navigationUserWrapper {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  float: none !important;
  transform: none !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 16px !important;
}

/* Menu level atas (admin / Register / Login) — HARUS flex */
#navigationUser.pkp_navigation_user {
  position: static !important;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#navigationUser.pkp_navigation_user > li {
  position: relative;
}

#navigationUser.pkp_navigation_user > li > a {
  font-family: Arial, sans-serif;
  font-size: 12.5px;
  text-decoration: none;
  color: #ffffff !important;
  white-space: nowrap;
}

/* Item pertama (biasanya "Register") ditonjolkan warna emas */
#navigationUser.pkp_navigation_user > li:first-child > a {
  color: #C18C27 !important;
}

/* Submenu dropdown milik "admin" (Dashboard/View Profile/Administration/Logout)
   — JANGAN dipaksa flex selalu tampil, harus tersembunyi & vertikal by default */
#navigationUser.pkp_navigation_user li.profile > ul {
  display: none !important;
  flex-direction: column !important;
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  background: #002254;
  border: 1px solid rgba(193,140,39,0.4);
  border-radius: 6px;
  padding: 6px 0;
  min-width: 180px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  z-index: 100;
  gap: 0 !important;
}

#navigationUser.pkp_navigation_user li.profile:hover > ul,
#navigationUser.pkp_navigation_user li.profile:focus-within > ul {
  display: flex !important;
}

#navigationUser.pkp_navigation_user li.profile > ul a {
  color: #e8e4d8 !important;
  padding: 8px 16px !important;
  display: block;
  font-size: 13px;
  white-space: nowrap;
}

#navigationUser.pkp_navigation_user li.profile > ul a:hover {
  background: rgba(193,140,39,0.15);
  color: #ffffff !important;
}


/* ---------- 8. RESPONSIF (mobile) ---------- */

@media (max-width: 900px) {
  .pkp_site_nav_toggle {
    display: block;
    background: transparent;
    border: 1px solid rgba(193,140,39,0.5);
    color: #ffffff;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0;
  }
  .pkp_site_nav_toggle::after {
    content: "☰";
    font-size: 16px;
    color: #C18C27;
  }
  .pkp_site_nav_menu {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    display: none;
  }
  .pkp_head_wrapper.nav_open .pkp_site_nav_menu,
  body:not(.pkp_no_js) .pkp_site_nav_menu.show {
    display: flex;
  }
  .pkp_navigation_primary_wrapper {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  #headerNavigationContainer .pkp_navigation_user_wrapper,
  #navigationUserWrapper {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-left: 0 !important;
    padding-top: 12px !important;
    width: 100%;
    margin-left: 0 !important;
  }
}

/* ====================================================================== */
/* ===== Patch v5: hilangkan kotak biru & paksa admin tetap sebaris ===== */

.pkp_site_nav_menu {
  background: transparent !important;
  flex-wrap: nowrap !important;   /* jangan biarkan turun baris di desktop */
}

.pkp_navigation_primary_wrapper,
#navigationPrimary,
.pkp_navigation_primary {
  flex-wrap: nowrap !important;
}

.pkp_navigation_primary > li > a {
  font-size: 12px !important;   /* sedikit dikecilkan supaya lebih muat */
}

/* Paksa user_wrapper TIDAK selebar 100% supaya tidak turun baris sendiri */
#headerNavigationContainer .pkp_navigation_user_wrapper,
#navigationUserWrapper {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  display: flex !important;
  background: transparent !important;
}

#navigationUser.pkp_navigation_user {
  width: auto !important;
  flex-basis: auto !important;
}

#navigationUser.pkp_navigation_user > li {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* ===== Patch v6: perbaiki dropdown "About" yang terpotong ===== */

.pkp_site_nav_menu {
  overflow: visible !important;
}

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
#navigationPrimary,
.pkp_navigation_primary {
  overflow: visible !important;
}

/* pastikan dropdown tampil di atas konten lain */
.pkp_navigation_primary li ul {
  overflow: visible !important;
}

/* ===== Patch v7: hover menu utama — background putih, teks navy tua ===== */

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li.current > a {
  background: #ffffff !important;
  color: #002254 !important;
  border-bottom-color: #C18C27;
  border-radius: 4px 4px 0 0;
}

/* Search juga disamakan gaya hover-nya biar konsisten */
.pkp_search.pkp_search_desktop:hover {
  background: #ffffff !important;
  color: #002254 !important;
  border-color: #C18C27;
}

.pkp_search.pkp_search_desktop:hover .fa-search {
  color: #002254 !important;
}

/* ===== Patch v8: perbesar logo 20% + tambah nama jurnal di samping logo ===== */

.pkp_site_name img {
  max-height: 80px !important;
  height: 80px !important;
  width: auto !important;
}

.pkp_site_name a.is_img {
  display: flex !important;
  align-items: center;
  gap: 14px;
}

/* Tambahkan nama jurnal via CSS di sebelah kanan logo */

div.pkp_site_name a,
div.pkp_site_name a.is_img,
div.pkp_site_name a.is_img:hover,
div.pkp_site_name a.is_img:visited {
  text-decoration: none !important;
}

.pkp_site_name a.is_img::after {
text-decoration: none !important;
  content: "JURNAL PENGABDIAN DAN PEMBERDAYAAN ARTHA WACANA"; /* teks nama jurnal yang dimunculkan lewat CSS (tidak ada di HTML asli) */
  display: block;                    /* jadikan blok agar bisa diatur lebar & baris barunya (max-width, white-space) */
  color: #ffffff;                    /* warna teks putih, kontras dengan latar navy header */
  font-family: Georgia, 'Times New Roman', serif; /* font serif, senada dengan gaya logo JPPAW */
  font-weight: 700;                  /* teks tebal supaya terlihat sebagai judul/branding */
  font-size: 20px;                   /* ukuran huruf */
  line-height: 1.35;                 /* jarak antar baris, sedikit longgar karena teksnya panjang & bisa turun 2 baris */
  letter-spacing: 0.5px;             /* jarak antar huruf sedikit direnggangkan, gaya khas judul formal */
  max-width: 440px;                  /* batasi lebar supaya teks turun ke baris baru, tidak memanjang ke luar header */
  white-space: normal;               /* izinkan teks membungkus/wrap ke baris berikutnya (default anchor biasanya nowrap) */
  
}

.pkp_site_name a.is_img:hover::after {
  text-decoration: none !important;             /* pastikan garis bawah tetap hilang juga saat logo/teks di-hover (mouse di atasnya) */
}


/* ===== Image Carousel untuk Additional Content ===== */

.jppaw-carousel {
  position: relative;          /* jadi acuan posisi gambar-gambar di dalamnya */
  max-width: 700px;            /* lebar maksimal carousel */
  margin: 16px auto;           /* rata tengah horizontal, ada jarak atas-bawah */
  aspect-ratio: 400 / 187;     /* rasio sama seperti gambar aslinya (400x187) */
  border-radius: 12px;         /* sudut membulat */
  overflow: hidden;            /* potong bagian gambar yang meluber dari kotak */
  box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* bayangan halus */
}

.jppaw-carousel img {
  position: absolute;          /* semua gambar ditumpuk di posisi yang sama */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* gambar mengisi penuh kotak tanpa gepeng */
  opacity: 0;                  /* default tak terlihat, dimunculkan lewat animasi */
  animation: jppawFade 12s infinite; /* animasi fade berulang tiap 12 detik */
}

.jppaw-carousel img:nth-child(1) { animation-delay: 0s; }  /* gambar 1 muncul duluan */
.jppaw-carousel img:nth-child(2) { animation-delay: 4s; }  /* gambar 2 muncul di detik ke-4 */
.jppaw-carousel img:nth-child(3) { animation-delay: 8s; }  /* gambar 3 muncul di detik ke-8 */

@keyframes jppawFade {
  0%   { opacity: 0; }   /* mulai transparan */
  5%   { opacity: 1; }   /* fade in cepat */
  30%  { opacity: 1; }   /* tetap terlihat penuh */
  35%  { opacity: 0; }   /* fade out */
  100% { opacity: 0; }   /* tetap transparan sampai giliran berikutnya */
}



/* ===== QUICK MENU (Custom Block) ===== */

.pkp_block {
    border-radius: 0 !important;
    overflow: hidden;
    border: 1px solid #d5dde3;
    box-shadow: 0 3px 8px rgba(26, 82, 118, 0.12);
    background: #ffffff;
}

.pkp_block .title,
.pkp_block h2 {
    background: linear-gradient(135deg, #1a5276 0%, #2874a6 100%);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 14px 18px;
    text-transform: uppercase;
    font-size: 14px;
    border: none;
    border-radius: 0 !important;
}

.pkp_block .content {
    padding: 6px 0;
}

/* Sasar SEMUA link di dalam content, apapun tag pembungkusnya (p, div, li) */
.pkp_block .content a {
    display: block;
    padding: 10px 18px;
    color: #1a5276;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
}

.pkp_block .content a:hover {
    background-color: #eaf2f8;
    color: #154360;
    border-left: 3px solid #f4d03f;
    padding-left: 24px;
}

.pkp_block .content a::after {
    content: "→";
    position: absolute;
    right: 18px;
    color: #2874a6;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.25s ease;
}

.pkp_block .content a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Hilangkan margin bawaan paragraf editor supaya rapat & rapi */
.pkp_block .content p {
    margin: 0;
}

/* ===== LOGIN PAGE — ESTETIK ===== */

.pkp_page_login #main,
.pkp_page_login .page {
    max-width: 480px;
    margin: 40px auto;
    padding: 28px 32px;
    background: #ffffff;
    border: 1px solid #e0e4e8;
    box-shadow: 0 8px 24px rgba(26, 82, 118, 0.12);
    border-radius: 0;
}

/* Judul Login - jarak bawah dipangkas */
.pkp_page_login h1,
.pkp_page_login .page_title {
    font-size: 24px;
    font-weight: 800;
    color: #1a5276;
    margin: 0 0 4px 0;
    position: relative;
    padding-bottom: 8px;
}

.pkp_page_login h1::after,
.pkp_page_login .page_title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: #f4d03f;
}

/* Teks "Required fields..." - rapatkan ke judul & field pertama */
.pkp_page_login .form_notice,
.pkp_page_login .app_form > p {
    margin: 6px 0 14px 0 !important;
    font-size: 13px;
    color: #7b8a99;
}

.pkp_page_login .breadcrumb,
.pkp_page_login nav[aria-label="You are here:"] {
    font-size: 13px;
    color: #7b8a99;
    margin-bottom: 12px;
}

/* Setiap kelompok field (label + input) dirapatkan */
.pkp_page_login .form_group,
.pkp_page_login .pkp_form_field {
    margin-bottom: 10px !important;
}

.pkp_page_login label {
    display: block;
    font-weight: 600;
    color: #1a5276;
    margin-bottom: 4px;
    font-size: 13px;
}

.pkp_page_login input[type="text"],
.pkp_page_login input[type="email"],
.pkp_page_login input[type="password"] {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #d5dde3;
    border-radius: 0;
    font-size: 14px;
    background: #f9fbfc;
    transition: all 0.2s ease;
    margin-bottom: 6px !important;
    box-sizing: border-box;
}

.pkp_page_login input[type="text"]:focus,
.pkp_page_login input[type="email"]:focus,
.pkp_page_login input[type="password"]:focus {
    border-color: #2874a6;
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(40, 116, 166, 0.15);
}

/* Link Forgot password - tempel lebih dekat ke input password */
.pkp_page_login a {
    color: #2874a6;
    font-weight: 500;
    text-decoration: none;
    font-size: 12.5px;
    transition: color 0.2s ease;
}

.pkp_page_login a:hover {
    color: #f4d03f;
    text-decoration: underline;
}

/* Checkbox Keep me logged in - rapatkan */
.pkp_page_login .form_group:has(input[type="checkbox"]) {
    margin: 10px 0 !important;
}

.pkp_page_login input[type="checkbox"] {
    accent-color: #2874a6;
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 5px;
}

/* Footer tombol - jarak atas dipangkas */
.pkp_page_login .form_footer,
.pkp_page_login .buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    border-top: 1px solid #eef1f4;
    padding-top: 14px;
}

.pkp_page_login button.submitFormButton,
.pkp_page_login input[type="submit"],
.pkp_page_login .pkp_button.pkp_button_primary {
    background: linear-gradient(135deg, #1a5276, #2874a6);
    color: #ffffff !important;
    font-weight: 700;
    padding: 9px 24px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    box-shadow: 0 3px 8px rgba(26, 82, 118, 0.25);
}

.pkp_page_login button.submitFormButton:hover,
.pkp_page_login input[type="submit"]:hover,
.pkp_page_login .pkp_button.pkp_button_primary:hover {
    background: linear-gradient(135deg, #154360, #1a5276);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(26, 82, 118, 0.35);
}

.pkp_page_login a.pkp_button,
.pkp_page_login .register_link a {
    color: #1a5276 !important;
    font-weight: 600;
    padding: 8px 16px;
    font-size: 14px;
    border: 1.5px solid #1a5276;
    background: transparent;
    transition: all 0.2s ease;
}

.pkp_page_login a.pkp_button:hover,
.pkp_page_login .register_link a:hover {
    background: #1a5276;
    color: #ffffff !important;
}