/**
 * Packpals header menu — sama persis dengan original demo (override Jeg default #707070, 15px).
 * Selector mengikuti: .jkit-menu-wrapper .jkit-menu > li > a
 */
/* Override Jeg .jkit-menu-wrapper .jkit-menu > li > a (yang pakai color #707070, padding 15px) */
body.elementor-page .elementor-location-header .elementor-widget-jkit_nav_menu .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper:not(.active) .jkit-menu
{
  margin: 0 !important;
}
body.elementor-page .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li > a,
.elementor .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li > a {
  display: flex !important;
  align-items: center !important;
  font-family: var(--e-global-typography-accent-font-family, "Red Hat Display", inherit), Sans-serif !important;
  font-size: var(--e-global-typography-accent-font-size, 16px) !important;
  font-weight: var(--e-global-typography-accent-font-weight, 500) !important;
  line-height: var(--e-global-typography-accent-line-height, 1em) !important;
  padding: 0 18px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.4s ease !important;
}
body.elementor-page .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li > a:hover,
body.elementor-page .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li.current-menu-item > a,
.elementor .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li > a:hover,
.elementor .jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li.current-menu-item > a {
  color: #BFE35C !important;
}

/* =============================================
   FIX: dropdown submenu style
   Samakan dengan demo: white bg, dark text, green hover.
   ============================================= */
.elementor-location-header .jkit-menu-wrapper .jkit-menu li.menu-item-has-children .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1001 !important;
}
.jkit-menu-wrapper .jkit-menu .sub-menu {
  background-color: #ffffff !important;
  padding: 8px 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  margin-top: 30px !important;
  min-width: 200px !important;
}
.jeg-elementor-kit.jkit-nav-menu .jkit-menu-wrapper .jkit-menu{
  margin-top: 0 !important;
}
.jkit-menu-wrapper .jkit-menu .sub-menu li {
  display: block !important;
  width: 100% !important;
  background-color: #ffffff !important;
}
.jkit-menu-wrapper .jkit-menu .sub-menu li > a {
  display: flex !important;
  align-items: center !important;
  padding: 12px 24px !important;
  color: #0E1C24 !important;
  background-color: transparent !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.jkit-menu-wrapper .jkit-menu .sub-menu li:hover,
.jkit-menu-wrapper .jkit-menu .sub-menu li.current-menu-item {
  background-color: #BFE35C !important;
}
.jkit-menu-wrapper .jkit-menu .sub-menu li:hover > a,
.jkit-menu-wrapper .jkit-menu .sub-menu li.current-menu-item > a {
  color: #0E1C24 !important;
  background-color: transparent !important;
}

/* =============================================
   FIX: offcanvas contact icon list — prevent text wrap
   ============================================= */
.jeg-elementor-kit.jkit-off-canvas .elementor-icon-list-text,
.elementor-193 .elementor-icon-list-text {
  white-space: nowrap !important;
}

/* =============================================
   FIX: offcanvas template (ID 193) layout — 1 kolom vertikal
   ============================================= */
.elementor-193 .elementor-container {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  max-width: 100% !important;
}
.elementor-193 .elementor-column {
  width: 100% !important;
  max-width: 100% !important;
}
.elementor-193 .elementor-widget-wrap {
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* =============================================
   FIX: nav menu di dalam offcanvas — paksa selalu tampil vertikal
   JKit menganggap panel offcanvas (narrow) sebagai mobile,
   lalu menyembunyikan .jkit-menu. Override semua hidden states.
   ============================================= */
.jeg-elementor-kit.jkit-off-canvas .jkit-nav-menu .jkit-menu-wrapper,
.elementor-193 .jkit-nav-menu .jkit-menu-wrapper {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.jeg-elementor-kit.jkit-off-canvas .jkit-nav-menu .jkit-menu-wrapper .jkit-menu,
.elementor-193 .jkit-nav-menu .jkit-menu-wrapper .jkit-menu {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  top: auto !important;
  transform: none !important;
}
.jeg-elementor-kit.jkit-off-canvas .jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li,
.elementor-193 .jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li {
  width: 100% !important;
  display: block !important;
}
.jeg-elementor-kit.jkit-off-canvas .jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li > a,
.elementor-193 .jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li > a {
  display: block !important;
  padding: 8px 0 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  width: 100% !important;
}
.jeg-elementor-kit.jkit-off-canvas .jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li > a:hover,
.elementor-193 .jkit-nav-menu .jkit-menu-wrapper .jkit-menu > li > a:hover {
  color: #BFE35C !important;
}
/* Sembunyikan sub-menu dan hamburger di offcanvas */
.jeg-elementor-kit.jkit-off-canvas .jkit-nav-menu .jkit-menu > li > .sub-menu,
.elementor-193 .jkit-nav-menu .jkit-menu > li > .sub-menu {
  display: none !important;
}
.jeg-elementor-kit.jkit-off-canvas .jkit-nav-menu .jkit-menu-arrow,
.elementor-193 .jkit-nav-menu .jkit-menu-arrow {
  display: none !important;
}
.jeg-elementor-kit.jkit-off-canvas .jkit-nav-menu .jkit-hamburger-menu,
.elementor-193 .jkit-nav-menu .jkit-hamburger-menu {
  display: none !important;
}

/* =============================================
   FIX: outer page container full width
   e-con-boxed set max-width via CSS variable,
   override variable + inner padding sekaligus
   ============================================= */
.elementor[data-elementor-type="wp-page"] > .e-con.e-parent {
  --container-max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.elementor[data-elementor-type="wp-page"] > .e-con.e-parent > .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =============================================
   FIX: hero section nempel ke header (seperti demo)
   Demo pakai margin-bottom: -85px di header section
   ============================================= */
.elementor-location-header .elementor-section:last-child,
.elementor-location-header > .elementor > .elementor-section:last-child {
  margin-bottom: -85px !important;
  position: relative;
  z-index: 10;
}

/* =============================================
   FIX: site-main padding untuk Elementor pages
   header.php menambahkan class site-main--elementor
   ============================================= */
.site-main--elementor {
  padding-block: 0 !important;
}

/* =============================================
   FIX: jarak antara heading dan breadcrumb di hero
   Semua halaman Packpals: heading ada di dalam
   inner-section yang terbungkus kolom 50%
   ============================================= */
.elementor-col-50 .elementor-inner-section .elementor-widget-heading,
.elementor-top-section .elementor-inner-section .elementor-widget-heading {
  margin-bottom: 20px !important;
}


/* ============================================================
   FIX: Archive/Category page hero gap
   Pull first section of archive template behind transparent header
   so hero fills the full viewport same as home page.
   ============================================================ */
.elementor-218.elementor-location-archive > section:first-child,
.elementor-location-archive .elementor-element-1b045d7 {
  margin-top: -88px !important;
}

/* Ensure archive content doesn't clip behind header */
.elementor-location-archive {
  position: relative;
  z-index: 0;
}