#mega-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4); /* semi-transparent black */
  z-index: 999; /* lower than header and mega menu */
  display: none;
  pointer-events: auto;
}

#site-header {
  position: relative;
  z-index: 1001;
}

#mega-menu-overlay.active {
  display: block; /* Show when active */
}




.main-nav {
  background: transparent;
  position: relative;  /* Key: for absolute positioning inside */
}

.menu {
  display: flex;
  margin: 0;
  padding: 0 0 0 24px;
  list-style: none;
  align-items: center;
  height: 52px;
  background: none;
}


.menu > .menu-item > a {
    display: block;
    padding: 0 12px;
    color: #fff;
    text-decoration: none;
    font-size: 1.04rem;
    font-weight: 500;
    line-height: 52px;
    border-radius: 7px;
    transition: background 0.18s, color 0.18s;
    text-transform: uppercase;
    letter-spacing: -.1px;
    white-space: nowrap;
}

@media (max-width: 1366px) {
  .menu > .menu-item > a {
      padding: 0 12px;
      font-size: .9rem;
      white-space: nowrap;
  }
}

.menu > .menu-item > a:hover,
.menu > .menu-item.active > a {
  /*background: #fff;
  border: 1.5px solid #e3eaf1;*/
  color: var(--e-global-secondary-color, #ffca2c);
}

/*.mega-parent:hover .mega-menu,
.mega-parent:focus-within .mega-menu {
  display: flex;
}*/

.mega-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 102px;
  width: 100vw;
  min-width: 0;
  background: #fff;
  border: 1px solid #e3eaf1;
  border-radius: 0 0 9px 9px;
  box-shadow: 0 4px 24px rgba(30,50,90,0.09);
  padding: 32px 24px 24px 24px;
  gap: 16px;
  z-index: 1002;
}

.mega-menu.active {
  display: flex;
}



/* Optional: Make sure .main-nav has the correct stacking context */
.main-nav {
  z-index: 10;
}

.mega-column {
    min-width: auto;
    max-width: fit-content;
    flex: 1;
    margin: 0 5px;
}

.mega-heading {
  font-size: .9rem;
  font-weight: 600;
  /*border-bottom: 2px solid var(--e-global-color-secondary);*/
  padding-bottom: 2px;
  color: var(--e-global-color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}

.mega-menu h3 {
    height: 50px;
    border-bottom: 2px solid var(--e-global-color-secondary);
    bottom: 0;
    display: flex;
    align-items: center;
    letter-spacing: -.75px;
    line-height: 1rem;
}

/*.mega-heading .arrow {
  font-size: 1.15em;
  color: #6dd47e;
  margin-left: 7px;
  font-weight: bold;
}*/

.mega-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-column ul li {
    border-bottom: 1px solid #0356A725;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.mega-column ul li a {
  display: block;
  color: #323d4d;
  padding: 5px 0;
    font-size: .8rem;
  text-decoration: none;
  transition: color 0.16s;
  line-height: 130%;
}


.mega-column ul li a:hover {
    /*color: var(--e-global-color-primary);*/
    color: var(--ast-global-color-0);
    text-decoration: none;
}



@media (max-width: 900px) {
  .main-nav { padding: 0; }
  .menu { flex-direction: column; height: auto; }
  .mega-menu {
    position: static;
    min-width: 0;
    flex-direction: column;
    gap: 0;
    border-radius: 0;
    padding: 18px 8px;
  }
  .mega-column { min-width: 0; }
}