/* =======================================================
   IJDM NAVBAR CLEAN FINAL (OJS 3 Manuscript) - SINGLE CSS
   - Font Lato
   - Outer BG pattern repeat + nuansa orange
   - Navbar ORANGE, item kotak (no rounded)
   - Hover premium
   - Dropdown ABOUT muncul (hover + click)
   - Search kanan kena style + hilang ikon/petak
   ======================================================= */

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");

:root {
  --ijdm-orange: #f2a018;
  --ijdm-orange-2: #e08f00;
  --ink: #0f172a;
  --muted: #1f2937;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* =========================
   0) FONT GLOBAL
   ========================= */
html,
body {
  font-family: "Lato", Arial, Helvetica, sans-serif !important;
}

/* =========================
   1) OUTER BACKGROUND (pattern)
   ========================= */
body {
  background: var(--ijdm-orange) !important;
}

/* Pattern layer (JANGAN taruh di html/body langsung) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-color: #fff6e5; /* soft orange base */
  background-image: url("https://res.cloudinary.com/dwixbreak/image/upload/v1769576286/414_btjaf6.jpg");
  background-repeat: repeat;
  background-size: 420px 420px;
  background-attachment: fixed;
  opacity: 0.55;
}

/* Kotak OJS tetap putih + shadow */
.pkp_structure_page {
  background: #ffffff !important;
  box-shadow: var(--shadow);
}

/* Wrapper lain dibuat transparan biar outer pattern kelihatan */
.pkp_site,
.pkp_structure_content,
.pkp_structure_wrapper,
.pkp_structure_main,
.pkp_structure_body,
.pkp_footer,
.pkp_footer_wrapper,
.pkp_footer_content,
.pkp_structure_footer,
.pkp_site_footer {
  background: transparent !important;
  border: 0 !important;
}

/* =========================
   2) NAVBAR ORANGE (1 baris, HOME kiri, SEARCH kanan)
   ========================= */
.pkp_navigation_primary_row {
  background: var(--ijdm-orange) !important;
  border-bottom: 4px solid var(--ijdm-orange-2) !important;
}

/* penting: dropdown tidak ketutup */
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_structure_head {
  overflow: visible !important;
}

/* Flex layout */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* jangan center */
  gap: 14px !important;

  padding: 10px 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

/* Menu UL kiri */
.pkp_navigation_primary {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* SEARCH wrapper dipaksa kanan */
.pkp_navigation_search_wrapper {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  text-align: right !important;
  align-self: center !important;
}

/* =========================
   3) MENU ITEM STYLE (kotak, bagus seperti screenshot)
   ========================= */
.pkp_navigation_primary > li {
  position: relative !important;
}

.pkp_navigation_primary > li > a {
  display: inline-block !important;

  padding: 10px 16px !important;
  border-radius: 0 !important; /* KOTAK */
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;

  color: var(--ink) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.45px !important;

  text-decoration: none !important;
  box-shadow: none !important;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

/* hover keren */
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  background: rgba(255, 255, 255, 0.46) !important;
  color: var(--ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

/* active/current */
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
}

/* =========================
   4) SEARCH BUTTON (hapus ikon/petak + kotak)
   ========================= */

/* matikan semua pseudo/icon aneh */
.pkp_navigation_search_wrapper a::before,
.pkp_navigation_search_wrapper a::after,
.pkp_navigation_search_wrapper span::before,
.pkp_navigation_search_wrapper span::after,
a.pkp_search::before,
a.pkp_search::after,
.pkp_navigation_search_wrapper i,
.pkp_navigation_search_wrapper svg {
  content: none !important;
  display: none !important;
}

/* tombol search (selector dibuat cukup luas tapi tidak spam) */
.pkp_navigation_search_wrapper a,
a.pkp_search,
.pkp_navigation_search_wrapper .pkp_search a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 18px !important;
  border-radius: 0 !important; /* KOTAK */
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;

  color: var(--ink) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.45px !important;

  text-decoration: none !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
  white-space: nowrap !important;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.pkp_navigation_search_wrapper a:hover,
a.pkp_search:hover,
.pkp_navigation_search_wrapper .pkp_search a:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

/* =========================
   5) DROPDOWN ABOUT (hover + click)
   ========================= */

/* panel dropdown (ul / dropdown-menu) */
.pkp_navigation_primary > li > ul,
.pkp_navigation_primary > li > .dropdown-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;

  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;

  min-width: 280px !important;
  padding: 10px !important;

  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-left: 6px solid var(--ijdm-orange) !important;
  border-radius: 0 !important; /* KOTAK */
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22) !important;

  transform: translateY(-6px) !important;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s ease !important;
  z-index: 999999 !important;
}

/* muncul saat hover + saat klik (focus-within) */
.pkp_navigation_primary > li:hover > ul,
.pkp_navigation_primary > li:focus-within > ul,
.pkp_navigation_primary > li:hover > .dropdown-menu,
.pkp_navigation_primary > li:focus-within > .dropdown-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* item dropdown */
.pkp_navigation_primary > li > ul a,
.pkp_navigation_primary > li > .dropdown-menu a {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 0 !important; /* KOTAK */
  background: #ffffff !important;

  color: var(--ink) !important;
  font-weight: 900 !important;
  text-decoration: none !important;

  transition:
    background 0.15s ease,
    padding-left 0.15s ease;
}

.pkp_navigation_primary > li > ul a:hover,
.pkp_navigation_primary > li > .dropdown-menu a:hover {
  background: rgba(242, 160, 24, 0.16) !important;
  padding-left: 16px !important;
}