/* =========================
   MODULE WRAPPER
   ========================= */
.hj-overlay-menu-module {
  position: static;
  z-index: 1;
}

/* Icon button */
.hj-hamburger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Divi icon itself – adjust font-size to control icon size */
.hj-hamburger-icon {
  font-size: 28px;
  line-height: 1;
}

/* =========================
   FULLWIDTH DROPDOWN BAR
   ========================= */

.hj-overlay {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;               /* full browser width */
  top: 0;                      /* JS will override */
/*  background: rgba(255, 255, 255, 0.95); */
  background: rgba(239, 246, 244, 1);
  color: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  z-index: 99999;
}

.hj-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* We don't strictly need scroll lock, but it's harmless */
body.hj-overlay-open {
  overflow: hidden;
}

/* Inner container: constrain to your site width */
.hj-overlay-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;    /* adjust to match your main content width */
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2.5rem;
}

/* Close button (X) */
.hj-overlay-close {
  position: absolute;
  top: 0.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #000;
  font-size: 2.4rem;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}

/* =========================
   MENU LAYOUT
   Top levels: left → right
   Submenus: top → bottom
   ========================= */

/* Target the FIRST UL inside .hj-overlay-nav – whatever class it has */
.hj-overlay-nav > ul {
  list-style: none;
  margin: 0;
  padding: 1.8rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;  /* row gap, column gap */
  align-items: flex-start;
  justify-content: center;
}

/* Each top-level item becomes a column */
.hj-overlay-nav > ul > li {
  position: static !important;     /* kill Divi's dropdown positioning */
  min-width: 160px;                /* column width */
  text-align: left;
}

/* Top-level links (column headings) */
.hj-overlay-nav > ul > li > a {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: inherit;
}

/* ===== Submenus: force visible + stack vertically ===== */

/* Any submenu inside the overlay nav */
.hj-overlay-nav ul ul {
  position: static !important;     /* no absolute flyouts */
  display: block !important;       /* always visible */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Submenu items stacked top → bottom */
.hj-overlay-nav ul ul > li {
  margin: 0 0 0.25rem;
}

/* Submenu links */
.hj-overlay-nav ul ul a {
  display: block;
  font-weight: 400;
  font-size: 1.2rem;
  text-decoration: none;
  color: inherit;
}

/* Hover for all links */
.hj-overlay-nav a:hover {
  text-decoration: underline;
  opacity: 0.85;
}
