/* ================================================================
   MAX MEGA MENU — CUSTOM STYLING TAB
   
   Structure targeted:
     ul.mega-sub-menu[style*="--columns:12"]           ← outer grid wrapper
       └─ li.mega-menu-column.mega-menu-columns-4-of-12  ← 3 equal columns
            └─ ul.mega-sub-menu                          ← inner list
                 └─ li.mega-menu-item                    ← widget item
                      ├─ h4.mega-block-title             ← section heading
                      └─ div.menu-*-container > ul > li  ← nav links
   
   All text: white / rgba(255,255,255,x)
   ================================================================ */


/* ----------------------------------------------------------------
   1. OUTER GRID WRAPPER
   Force the 3-column grid on the <ul> that holds the columns.
   The plugin writes style="--columns:12" on this element.
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] {
  display:               grid !important;
/*   grid-template-columns: repeat(4, 1fr) !important; */
  grid-auto-rows:        auto !important;
  align-items:           start !important;
  gap:                   0 !important;           /* dividers handle spacing */

  width:                 100% !important;
  padding:               0 !important;
  margin:                0 !important;
  list-style:            none !important;
  box-sizing:            border-box !important;

  /* reset any flex the plugin sets */
  flex-direction:        unset !important;
  flex-wrap:             unset !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
    display: flex !important;
    flex-direction: row;
    gap: 15px !important;
}


/* ----------------------------------------------------------------
   2. COLUMN  <li> ITEMS
   Each column is a <li role="presentation"> inside the grid.
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column {
  display:    block !important;
  float:      none !important;
  width:      100% !important;     /* let grid control width */
  max-width:  none !important;
  min-width:  0 !important;        /* prevent blowout */
  padding-top:    1.5rem!important;
  box-sizing: border-box !important;

  /* vertical divider between columns */
}


/* ----------------------------------------------------------------
   3. INNER SUB-MENU  <ul>  (one per column)
   Needs to be a plain vertical flex list — NOT inherit the outer grid.
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column > ul.mega-sub-menu {
  display:               flex !important;
  flex-direction:        column !important;
  grid-template-columns: unset !important;
  gap:                   0 !important;
  padding:               0 !important;
  margin:                0 !important;
  list-style:            none !important;
  width:                 100% !important;
  background:            transparent !important;
  box-shadow:            none !important;
  border:                none !important;
}


/* ----------------------------------------------------------------
   4. WIDGET ITEM wrapper  (li.mega-menu-item inside each column)
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a {
  display:         block !important;
  width:           100% !important;
  padding:         0.15rem 0 !important;
  border-radius:   3px !important;
  box-sizing:      border-box !important;
  white-space:     normal !important;

  font-size:       18px !important;
  font-weight:     400 !important;
  line-height:     1.2 !important;
  color:           rgba(255, 255, 255, 1) !important;
  text-decoration: none !important;

  transition: color 0.09s ease,
              padding-left 0.09s ease !important;
}


/* ----------------------------------------------------------------
   5. SECTION HEADINGS  h4.mega-block-title
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] .mega-block-title {
  display:        block !important;
  margin:         1.7rem 0 1rem 0 !important;
  padding:        0 0 0 0 !important;
/*   border-bottom:  1px solid rgba(255, 255, 255, 0.25) !important; */

  font-size:      18px !important;
  font-weight:    700 !important;
  text-transform: none !important;
  color:          var(--color10) !important;
  line-height:    1.2 !important;
  white-space:    nowrap !important;
}


/* ----------------------------------------------------------------
   6. NAV CONTAINERS  .menu-find-container etc.
   ---------------------------------------------------------------- */
.menu-find-container,
.menu-do-container,
.menu-learn-container {
  display: block !important;
  width:   100% !important;
}

.menu-find-container ul,
.menu-do-container   ul,
.menu-learn-container ul {
  display:               flex !important;
  flex-direction:        column !important;
  grid-template-columns: unset !important;
  list-style:            none !important;
  margin:                0 !important;
  padding:               0 !important;
  background:            transparent !important;
  box-shadow:            none !important;
  border:                none !important;
}


/* ----------------------------------------------------------------
   7. INDIVIDUAL LIST ITEMS
   ---------------------------------------------------------------- */
.menu-find-container .menu-item,
.menu-do-container   .menu-item,
.menu-learn-container .menu-item {
  display: block !important;
  float:   none !important;
  width:   100% !important;
  margin:  0 !important;
  padding: 0 !important;
}


/* ----------------------------------------------------------------
   8. LINKS  — white text, subtle hover
   ---------------------------------------------------------------- */
ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a {
  display:         block !important;
  width:           100% !important;
  padding:         0.35rem 0 !important;
  border-radius:   3px !important;
  box-sizing:      border-box !important;
  white-space:     normal !important;

  font-size:       18px !important;
  font-weight:     400 !important;
  line-height:     1.2 !important;
  color:           rgba(255, 255, 255, 1) !important;
  text-decoration: none !important;

  transition: color 0.09s ease,
              padding-left 0.09s ease !important;
}

/* Hover / focus */
ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a:hover,
ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a:focus-visible {
  color:            #D7B623 !important;
  padding-left:     0 !important;
  outline:          none !important;
}

/* Active / current page */
ul.mega-sub-menu[style*="--columns:12"] .mega-menu-item > div > ul > li > a[aria-current="page"] {
  color:            #ffffff !important;
/*   font-weight:      600 !important; */
}



/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Tablet (≤ 1024px) — 2 columns, last column spans full width */
@media (max-width: 1024px) {
  ul.mega-sub-menu[style*="--columns:12"] {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:first-child {
/*     border-right:  1px solid rgba(255, 255, 255, 0.12) !important; */
/*     border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; */
  }

  ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:nth-child(2) {
    border-right:  none !important;
/*     border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; */
  }

  ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:last-child {
    grid-column:   1 / -1 !important;
    border-right:  none !important;
    border-bottom: none !important;
  }
}

/* Mobile (≤ 768px) — single column stack */
@media (max-width: 768px) {
  ul.mega-sub-menu[style*="--columns:12"] {
    grid-template-columns: 1fr !important;
  }

  ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column {
    border-right:  none !important;
/*     border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; */
    padding:       1.25rem 0rem !important;
  }

  ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:first-child {
/*     border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; */
  }

  ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:nth-child(2) {
/*     border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; */
  }

  ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column:last-child {
    grid-column:   auto !important;
    border-bottom: none !important;
  }

  .menu-find-container a,
  .menu-do-container   a,
  .menu-learn-container a {
    font-size: 18px; !important;
    padding:   0.45rem 0rem !important;
  }
	
	#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-megamenu>ul.mega-sub-menu {
    background: #3d4539;
    width: 100vw;
    max-width: fit-content!important;
    opacity: 1 !important;
		
}
}

/* Very small (≤ 480px) */
@media (max-width: 480px) {
  ul.mega-sub-menu[style*="--columns:12"] > li.mega-menu-column {
    padding: 1rem 0.75rem !important;
  }
	#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-megamenu>ul.mega-sub-menu {
    background: #3d4539;
    max-width: 100%!important;
    opacity: 1 !important;
		width: 100%!important
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}
	ul.mega-sub-menu[style*="--columns:12"] h4.mega-block-title {
		margin-top: 0px!important;
		margin-bottom: 10px!important;
		}
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu>ul.mega-sub-menu>li.mega-menu-row {
    width: 100%!important;
}

#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-megamenu>ul.mega-sub-menu {
    background: #3d4539;
    width: 100vw;
    max-width: 100vw;
    opacity: 1 !important;
	padding-bottom: 2em!important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
	background: var(--color3)!important;
	z-index: 9999
}


.mega-sub-menu {
    opacity: 1 !important;
}

#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    background: var(--color8);
    color: var(--color7);
    opacity: 1 !important;
    font-size: 16px;
}

.mega-sub-menu a:hover {
    color: #D7B623 !important;
}

#mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
	font-size: 18px;
}

@media only screen and (max-width: 991px) {
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
        float: right !important;
    }
	
}

h4.mega-block-title a {
	color: var(--color10) !important;
}

h4.mega-block-title a:hover {
	color: var(--color4) !important;
}