:root { 
  --mm-blue:#43976a; 
  --mm-black:#000; 
  --mm-text:#111; 
}

/* Base mobile overflow prevention from updated Belt */
html,
body {
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

/* Container */
.mega-menu { position: relative; width: 100%; z-index: 100; }

/* Toggle (mobile) */
.mega-menu .mega-menu-toggle{ display:none; background:none; border:0; cursor:pointer; padding:12px; }
.mega-menu .mega-menu-toggle .hamburger{ display:flex; flex-direction:column; width:24px; height:18px; justify-content:space-between; }
.mega-menu .mega-menu-toggle .hamburger span{ display:block; height:2px; width:100%; background:#fff; transition:all .3s ease; }
.mega-menu .mega-menu-toggle.active .hamburger span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.mega-menu .mega-menu-toggle.active .hamburger span:nth-child(2){ opacity:0; }
.mega-menu .mega-menu-toggle.active .hamburger span:nth-child(3){ transform:rotate(-45deg) translate(7px,-6px); }

/* Top bar (Preserved WMB padding) */
.mega-menu .mega-menu-list{
  display:flex; align-items:center; gap:1.2rem;
  list-style:none; margin:0; padding: 0 20px 0 40px;
  background:var(--mm-black);
  overflow:visible;
}
.mega-menu .mega-menu-list > li { position:relative; }

/* Preserved WMB link padding */
.mega-menu .mega-menu-list > li > a,
.mega-menu .mega-menu-list > li > a:visited{
  display:block; padding:16px 16px;
  text-transform: uppercase !important;
  text-decoration:none; color:#fff; font-weight:600; letter-spacing:.02em;
  transition:background .2s ease, color .2s ease;
  position:relative;
  white-space: nowrap;
}

/* Hanging teal strip */
.mega-menu .mega-menu-list > li > a::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:0;
  background:transparent; transition:background .2s ease, height .2s ease;
}

/* Functional Upgrade: @media (hover: hover) prevents sticky mobile states */
@media (hover: hover) {
  .mega-menu .mega-menu-list > li:hover > a,
  .mega-menu .mega-menu-list > li.current-menu-ancestor > a {
    background: var(--mm-blue); color:#fff;
  }
  
  .mega-menu .mega-menu-list > li:hover > a::after,
  .mega-menu .mega-menu-list > li.current-menu-ancestor > a::after {
    background:var(--mm-blue); height:4px;
  }
}

#site-navigation .mega-menu-list > li.current-menu-item > a {
  color: #fff !important;
  background-color: var(--mm-blue);
}

#site-navigation .mega-menu-list > li.current-menu-item:hover > a,
.mega-menu .mega-menu-list > li.current-menu-ancestor:hover > a {
  color: #fff !important;
}

/* Default dropdown (non-mega items) */
.mega-menu .mega-menu-list .sub-menu{
  position:absolute; top:100%; left:0; min-width:220px;
  background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12);
  border-radius:0 0 0px 0px; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:all .2s ease; padding:6px 0; z-index:1000; list-style:none;
}

@media (hover: hover) {
  .mega-menu .mega-menu-list > li:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
}

.mega-menu .mega-menu-list .sub-menu li > a{
  display:block; padding:10px 16px; color:var(--mm-text); text-decoration:none;
}

@media (hover: hover) {
  .mega-menu .mega-menu-list .sub-menu li > a:hover{ background:var(--mm-blue); color:#fff; }
}

/* Mega menu */
.mega-menu .mega-menu-list > li.mega-menu-item { position: static; }
.mega-menu .mega-menu-list > li.mega-menu-item > .mega-menu-content{
  position:absolute; left:0; right:0; background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.14); border-top:4px solid var(--mm-blue);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .22s ease;
  z-index:1000; padding:35px; /* Belt used 35px padding in overrides */
  top:100%;
}

/* Functional Upgrade: pointer events handling */
@media (hover: hover) {
  .mega-menu-item > .mega-menu-content {
    pointer-events: none !important;
  }
  .mega-menu-item:hover > .mega-menu-content {
    pointer-events: auto !important;
  }
}

/* OPEN only when the top-level link is hovered OR the panel is hovered */
.mega-menu .mega-menu-list > li.mega-menu-item > a:hover + .mega-menu-content,
.mega-menu .mega-menu-list > li.mega-menu-item > .mega-menu-content:hover{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* Grid - Preserved WMB's 3 column structure */
.mega-menu .mega-menu-grid{
  max-width:1200px; margin:0 auto;
  display:grid !important; 
  grid-template-columns:repeat(3, minmax(220px, 1fr)) !important; 
  gap:10px !important;
}

/* Column headings (clickable links, teal text only) */
.mega-menu .mega-menu-column{ background:#fff; border-radius:0px; overflow:hidden; }
.mega-menu .mega-menu-column > h3{
  margin:0 0 0px 0; padding:2px 7px;
  background:transparent; color:var(--mm-blue);
  font-size:14px; font-weight:700; letter-spacing:.03em;
  border-left: 6px solid #000;
  text-transform: uppercase;
}

/* Depth-2 links */
.mega-menu .mega-menu-column > ul{ list-style:none; margin:0; padding:6px 0; }
.mega-menu .mega-menu-column > ul li a{
  display:block; padding:10px 14px; color:var(--mm-text); text-decoration:none;
  transition:background .15s ease, color .15s ease;
}

@media (hover: hover) {
  .mega-menu .mega-menu-column > ul li a:hover{ background:var(--mm-blue); color:#fff; }
}


/* Mobile Breakpoint updated to 1190px per Belt functionality */
@media (max-width:1190px){
  .mega-menu .mega-menu-toggle{ display:block; }
  .mega-menu .mega-menu-container{
    position:absolute; top:100%; right:0%; background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.1);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:all .22s ease; z-index:1000;
  }

  /* === SIMPLE MOBILE SUBMENU (single column, teal bg, white links) === */
  .mega-menu.is-mobile .mega-menu-grid{ display:block !important; }
  .mega-menu.is-mobile .mega-menu-column{
    display:block !important; margin:0 !important; padding:0 !important; border:0 !important;
    background:transparent !important; border-radius:0 !important;
  }

  /* === FIX FOR STANDARD DROPDOWNS ON MOBILE === */
  .mega-menu.is-mobile .mega-menu-list > .menu-item-has-children > .sub-menu > li {
    display: block !important;
  }

  /* Show depth-1 headings in mobile mega panels */
  .mega-menu.is-mobile .mega-menu-column > h3{
    display:block !important; margin:0 !important; padding:0 !important;
  }

  /* Make the heading links look like normal items in the teal panel */
  .mega-menu.is-mobile .mega-menu-column > h3 > a{
    display:block !important; padding:14px 16px !important; color:#fff !important;
    text-decoration:none !important; border-bottom:1px solid rgba(255,255,255,.15) !important;
    background:transparent !important; line-height:1.35 !important;
  }

  /* Tidy edges + hide truly empty ULs under those columns */
  .mega-menu.is-mobile .mega-menu-column > h3:last-of-type > a{ border-bottom:0 !important; }
  .mega-menu.is-mobile .mega-menu-column > ul:empty{ display:none !important; }

  /* Touch scrolling and visibility fixes from Belt applied, but kept WMB teal color #43976a */
  .mega-menu.is-mobile .mega-menu-list .sub-menu,
  .mega-menu.is-mobile .mega-menu-list .mega-menu-content{
    position:static !important; transform:none !important; visibility:visible !important; opacity:1 !important;
    display:none; margin:6px 0 12px !important; padding:0 !important; width:100% !important;
    background:#43976a !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
    max-height:65vh; overflow:auto; -webkit-overflow-scrolling: touch;
  }
  
  .mega-menu.is-mobile .mega-menu-list .sub-menu.active,
  .mega-menu.is-mobile .mega-menu-list .mega-menu-content.active,
  .mega-menu.is-mobile .menu-item-has-children.open > .sub-menu,
  .mega-menu.is-mobile .menu-item-has-children.open > .mega-menu-content{ display:block !important; }
  
  .mega-menu.is-mobile .mega-menu-list .sub-menu li a,
  .mega-menu.is-mobile .mega-menu-column > ul li a{
    display:block; padding:14px 16px; min-height:44px; box-sizing:border-box; color:#fff !important; 
    text-decoration:none; line-height:1.35; white-space:normal; 
    border-bottom:1px solid rgba(255,255,255,.15); background:transparent !important;
    cursor:pointer; -webkit-tap-highlight-color: rgba(0,0,0,.08);
  }
  
  .mega-menu.is-mobile .mega-menu-list .sub-menu li:last-child a,
  .mega-menu.is-mobile .mega-menu-column > ul li:last-child a{ border-bottom:0; }
  .mega-menu.is-mobile .mega-menu-list .sub-menu .sub-menu li a{ padding-left:28px; }
  .mega-menu.is-mobile .mega-menu-list > li > a:hover,
  .mega-menu.is-mobile .mega-menu-list > li > a:focus{ background:transparent !important; color:var(--mm-text) !important; }

  .mega-menu .mega-menu-container.active{ 
    opacity:1; visibility:visible; transform:translateY(0); width:100%; 
    pointer-events: auto; touch-action: manipulation;
  }
  .mega-menu .mega-menu-list{ background:#fff; flex-direction:column; gap:0; padding:8px 12px; }
  .mega-menu .mega-menu-list > li{ width:100%; }
  .mega-menu .mega-menu-list > li > a,
  .mega-menu .mega-menu-list > li > a:visited{ color:var(--mm-text) !important; padding:8px 0; background:transparent; }
  
  .mega-menu .mega-menu-list .sub-menu,
  .mega-menu .mega-menu-list .mega-menu-content{
    position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; padding:0; border-top:0;
  }
  .mega-menu .mega-menu-list .sub-menu.active,
  .mega-menu .mega-menu-list .mega-menu-content.active{ display:block; }

  .mega-menu.is-mobile .mega-menu-list > li { display:flex; align-items:center; gap:8px; }
  .mega-menu.is-mobile .mega-menu-list > li > a { flex:1 1 auto; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,.08); }
  
  .mega-menu.is-mobile .submenu-toggle{
    flex:0 0 auto; appearance:none; background:none; border:0; width:44px; height:44px; cursor:pointer;
    display:grid; place-items:center;
  }
  .mega-menu.is-mobile .submenu-toggle .chevron{
    width:10px; height:10px; border-right:2px solid var(--mm-text); border-bottom:2px solid var(--mm-text);
    transform:rotate(-45deg); transition:transform .2s ease;
  }
  .mega-menu.is-mobile .menu-item-has-children.open > .submenu-toggle .chevron{ transform:rotate(45deg); }

  /* === NEW STYLES FOR ACTIVE MOBILE LINK === */
  .mega-menu.is-mobile .mega-menu-list > li.current-menu-item > a,
  .mega-menu.is-mobile .mega-menu-list > li.current-menu-ancestor > a {
    color: var(--mm-blue) !important; background: transparent !important;
  }
  .mega-menu.is-mobile .mega-menu-list > li > a::after { display: none !important; }
}

/* Tablet & smaller limits */
@media (max-width: 768px) {
  .mega-menu .mega-menu-container.active { 
    width: auto; min-width: 360px; max-width: 420px; 
  }
}

/* -----------------------------
    MIGRATED FROM ADDITIONAL CSS
    (kept at end to safely override)
    ----------------------------- */

/* Special list item inside mega columns styled as a heading on desktop */
.menu-heading-item {
  margin-top: 14px !important; margin-bottom: 14px !important; padding: 0 !important; line-height: 1 !important;
  font-size: 14px !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 0.03em !important; border-left: 6px solid #000 !important; padding-left: 0 !important;
  color: #43976a !important; background: transparent !important; list-style: none !important;
}

/* Force link color for heading items */
.mega-menu .mega-menu-column .mega-submenu > li.menu-heading-item > a,
.mega-menu .mega-menu-column .mega-submenu > li.menu-heading-item > a:link,
.mega-menu .mega-menu-column .mega-submenu > li.menu-heading-item > a:visited {
  color:#43976a !important;
}

.mega-menu .mega-menu-column .mega-submenu > li.menu-heading-item > a:focus {
  color:#43976a !important; text-decoration:none;
}

/* Keep heading look consistent on hover/active */
.menu-heading-item > a:hover,
.menu-heading-item > a:focus,
.menu-heading-item > a:active {
  color:#43976a !important; text-decoration:none !important; background:transparent !important;
  margin-left:-5px; margin-bottom:14px;
}

/* Lock a specific heading link look (Wire Mesh Belts note kept generic) */
.mega-menu .mega-menu-column .mega-submenu li.menu-heading-item > a,
.mega-menu .mega-menu-column .mega-submenu li.menu-heading-item > a:hover,
.mega-menu .mega-menu-column .mega-submenu li.menu-heading-item > a:focus,
.mega-menu .mega-menu-column .mega-submenu li.menu-heading-item > a:active {
  color:#43976a !important; text-decoration:none !important; background:transparent !important;
  margin-left:-5px; margin-bottom:10px;
}

/* ======================================
   Mobile: make .menu-heading-item look like <h3> desktop headings
   ====================================== */
.mega-menu.is-mobile .mega-menu-list .mega-submenu > li.menu-heading-item,
.mega-menu.is-mobile .mega-menu-list .sub-menu > li.menu-heading-item {
  margin: 10px 0 !important; padding: 0 !important; border: 0 !important;
  list-style: none !important; background: transparent !important;
}

/* Bold, uppercase teal heading style with left black bar */
.mega-menu.is-mobile .mega-menu-list .mega-submenu > li.menu-heading-item > a,
.mega-menu.is-mobile .mega-menu-list .sub-menu > li.menu-heading-item > a {
  display: block !important; padding: 8px 14px !important; color: #ffffff !important;
  text-decoration: none !important; background: transparent !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.03em !important; font-size: 14px !important;
  line-height: 1.4 !important; border-left: 11px solid #000 !important; border-bottom: none !important;
}

/* Consistent hover/focus/active behavior */
.mega-menu.is-mobile .mega-menu-list .mega-submenu > li.menu-heading-item > a:hover,
.mega-menu.is-mobile .mega-menu-list .mega-submenu > li.menu-heading-item > a:focus,
.mega-menu.is-mobile .mega-menu-list .mega-submenu > li.menu-heading-item > a:active {
  color: #ffffff !important; background: transparent !important; text-decoration: none !important;
}

/* Remove empty ULs below headings if present */
.mega-menu.is-mobile .mega-menu-list .mega-submenu > li.menu-heading-item > ul:empty {
  display: none !important;
}

/* ========= MEGAMENU OVERRIDES ========= */

/* Invisible bridge to prevent flicker under top link */
.mega-menu .mega-menu-list > li.mega-menu-item::after {
  content:""; position:absolute; left:0; right:0; top:100%; height:6px; pointer-events:none;
}

/* Keep panel above other layers; close underline gap */
.mega-menu .mega-menu-list > li.mega-menu-item > .mega-menu-content {
  z-index:9999 !important; top:calc(100% - 4px) !important;
}

/* Open states (hover/focus and JS .is-open) */
.mega-menu .mega-menu-list > li.mega-menu-item > a:hover + .mega-menu-content,
.mega-menu .mega-menu-list > li.mega-menu-item > .mega-menu-content:hover {
  opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; pointer-events:auto !important;
}

.mega-menu .mega-menu-column > ul.sub-menu {
  display:block !important; visibility:visible !important; opacity:1 !important; position:static !important;
  width:auto !important; min-width:0 !important; padding:0 !important; margin:0 !important;
  box-shadow:none !important; transform:none !important; line-height:1.1 !important;
}
.mega-menu .mega-menu-column > ul.sub-menu > li { display:block !important; }
.mega-menu .mega-menu-column > ul.sub-menu > li > a {
  display:block !important; padding:5px 10px !important; color:var(--mm-text) !important; text-decoration:none !important;
}
.mega-menu .mega-menu-column > ul.sub-menu > li > a:hover {
  background:var(--mm-blue) !important; color:#fff !important;
}

/* Hide tiny default dropdown under mega parents */
.mega-menu .mega-menu-list > li.mega-menu-item > ul.sub-menu { display:none !important; }

/* Remove last column border if used */
.mega-menu .mega-menu-grid > div:last-child { border-right:none; }

/* :has open and focus-within support */
.mega-menu .mega-menu-list > li.mega-menu-item:has(> a:hover) > .mega-menu-content,
.mega-menu .mega-menu-list > li.mega-menu-item:has(> .mega-menu-content:hover) > .mega-menu-content,
.mega-menu .mega-menu-list > li.mega-menu-item:focus-within > .mega-menu-content {
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}

/* JS fallback: open via .is-open */
.mega-menu .mega-menu-list > li.mega-menu-item.is-open > .mega-menu-content{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}

/* Top-level link state */
.mega-menu-item:hover > a,
.mega-menu-item.current-page-item > a { color:#fff !important; }

/* Chevron hard reset (mobile only – tied to .is-mobile) */
.mega-menu.is-mobile .submenu-toggle{
  all:unset; display:grid !important; place-items:center !important; width:44px !important; height:44px !important;
  cursor:pointer !important; margin-left:auto; background:transparent !important; border:0 !important; box-shadow:none !important;
  outline:none !important; -webkit-appearance:none !important; appearance:none !important;
}
.mega-menu.is-mobile .submenu-toggle::before,
.mega-menu.is-mobile .submenu-toggle::after{ content:none !important; }
.mega-menu.is-mobile .submenu-toggle .chevron{
  width:10px; height:10px; border-right:2px solid var(--mm-text) !important; border-bottom:2px solid var(--mm-text) !important;
  transform:rotate(-45deg); transition:transform .2s ease; background:transparent !important;
}
.mega-menu.is-mobile .menu-item-has-children.open > .submenu-toggle .chevron{ transform:rotate(45deg); }

/* --- MOBILE: ensure link and chevron never overlap --- */
@media (max-width: 1190px) {
  .mega-menu.is-mobile .mega-menu-list > li { position: relative; }

  /* Give the link full row, but leave space for the chevron button */
  .mega-menu.is-mobile .menu-item-has-children > a {
    position: relative; z-index: 1; display: block; padding-right: 56px !important; /* room for the 44px chevron + spacing */
  }

  /* Chevron lives on the far right and sits above the background only */
  .mega-menu.is-mobile .submenu-toggle {
    position: absolute !important; right: 0; top: 0; width: 44px !important; height: 44px !important;
    z-index: 2; margin: 0 !important;
  }
  
  .mega-menu.is-mobile .mega-menu-list > .menu-item {
    flex-direction: column; align-items: flex-start !important;
  }
  
  .mega-menu.is-mobile .submenu-toggle * { pointer-events: none; }
}