/* Mega Menu Proxy Styles */

/* 
  Target the 'About Us' list item in the main nav. 
  Selector uses .menu__item--about-us (double underscore) based on DOM inspection.
*/
.menu__item--about-us.fake-active {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  /* Position below the parent container */
  width: 100% !important;
  z-index: 500 !important;
  background: white !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Hide the link text ("About us") to avoid duplication in the mega menu strip */
.menu__item--about-us.fake-active>a.mobile__only__link {
  display: none !important;
}

/* Show the dropdown, which is a simple UL */
.menu__item--about-us.fake-active>ul {
  display: flex !important;
  /* Display as a horizontal strip */
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  /* Inside the absolute LI */
  width: 100% !important;
  padding: 2.5rem !important;
  margin: 0 !important;
  list-style: none !important;
  justify-content: center;
  /* Center the items */
  gap: 3rem;
  /* Spacing between items */
}

/* Style the links inside the dropdown for a better look */
.menu__item--about-us.fake-active>ul>li {
  display: inline-block;
}

.menu__item--about-us.fake-active>ul>li>a {
  font-weight: 600;
  color: #333;
  text-decoration: none;
  font-size: 1.1rem;
}

.menu__item--about-us.fake-active>ul>li>a:hover {
  text-decoration: underline;
  color: #d13000;
  /* Zap-Map orange usually */
}