/** Push menu onto new line **/ 
#mega-menu-wrap-primary { 
    clear: both; 
}
#mega-menu-wrap-primary {
  --wwrof-menu-nudge: -4px; /* tweak this until menu aligns with buttons */
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    padding-top: 8px !important; /* Adjust this number until it aligns */
    transform: translateY(var(--wwrof-menu-nudge));
}
/* =========================================================
   WWROF: vertically center the top-level menu inside the header row
   Put this in: Mega Menu > Menu Themes > Custom CSS
   ========================================================= */

/* 1) Make the menu wrapper a flex container so the whole UL centers */
#mega-menu-wrap-primary {
  display: flex !important;
  align-items: center !important;
}

/* 2) Make the UL itself align to the center of that wrapper */
#mega-menu-wrap-primary #mega-menu-primary {
  display: flex !important;
  align-items: center !important;
}

/* 3) Brute-force: match link line-height to your Menu Height (adjust this) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  line-height: normal !important;
}
/* =========================================================
   GROUP HEADERS (single source of truth)
   - Non-clickable headers: h4.mega-block-title (Text Widget titles)
   - Clickable headers: <li class="mega-group-title-link"> <a class="mega-menu-link">
   Goal: clickable headers look + behave exactly like non-clickable group headers.
   ========================================================= */

/* 1) ONE rule defines the header look for BOTH */
#mega-menu-wrap-primary .mega-sub-menu h4.mega-block-title,
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link,
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link .mega-menu-title {
  /* Copy the exact “Title” look (from your DevTools screenshot) */
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;

  /* Layout parity with the H4 title */
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1.2 !important;
  text-align: left !important;
  vertical-align: top !important;
  visibility: inherit !important;
}

/* Center category headers in their columns (both linked + non-linked) */
/*
#mega-menu-wrap-primary .mega-sub-menu h4.mega-block-title,
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link,
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link .mega-menu-title {
  text-align: center !important;
}
*/

/* 2) Clickable header should NOT behave like a normal menu link */
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link:hover,
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link:focus,
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link:active {
  color: var(--text) !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* 3) Disable the animated underline indicator on clickable group headers
      (so they behave like headings, not navigation items)*/
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link .mega-underline-indicator {
  display: none !important;
}

/* 4) Optional: keep an affordance that it’s clickable without changing “behavior”
      (cursor only; remove this if you want it to feel identical to non-clickable) */
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link {
  cursor: pointer;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* =========================================================
   Animated underline for clickable group headers
   (with adjustable offset)
   ========================================================= */

/* Set the offset once (adjust this value) */
:root{
  --wwrof-group-underline-offset: 3px;
}
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link{
  --wwrof-group-underline-offset: 3px;
}
/* Ensure the link can host an underline indicator */
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link {
  position: relative;
}

/* Underline indicator: start hidden/collapsed */
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link .mega-underline-indicator {
  display: block !important;
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(-1 * var(--wwrof-group-underline-offset)) !important;
  height: 2px;
  width: 0;
  opacity: 1;
  background: var(--accent);
  border-radius: 999px;
  pointer-events: none;
  transition: width 180ms ease;
}

/* Expand underline on hover/focus */
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link:hover .mega-underline-indicator,
#mega-menu-wrap-primary .mega-sub-menu li.mega-group-title-link > a.mega-menu-link:focus-visible .mega-underline-indicator {
  width: 100%;
}
/* =========================================================
   Suppress "current page" styling inside mega panels
   (keeps submenu items visually consistent)
   ========================================================= */

/* Make current/active submenu links look like normal items */
#mega-menu-wrap-primary .mega-sub-menu li.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary .mega-sub-menu li.mega-current_page_item > a.mega-menu-link,
#mega-menu-wrap-primary .mega-sub-menu li.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link[aria-current="page"],
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link[aria-current="true"]{
  color: var(--wwrof-text-soft) !important;
  background: transparent !important;
}

/* If MMM outputs a title span for described items, keep it inheriting */
#mega-menu-wrap-primary .mega-sub-menu
li.mega-current-menu-item a.mega-menu-link .mega-menu-title,
#mega-menu-wrap-primary .mega-sub-menu
li.mega-current_page_item a.mega-menu-link .mega-menu-title,
#mega-menu-wrap-primary .mega-sub-menu
li.mega-current-menu-ancestor a.mega-menu-link .mega-menu-title,
#mega-menu-wrap-primary .mega-sub-menu
a.mega-menu-link[aria-current="page"] .mega-menu-title{
  color: inherit !important;
}
/* =========================================================
   FINAL OVERRIDE: Beat MMM "current item" specificity
   (two IDs + mega-panel scope)
   ========================================================= */

/* Current/active submenu links inside mega panels */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu .mega-sub-menu li.mega-current_page_item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu .mega-sub-menu li.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu .mega-sub-menu li.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu .mega-sub-menu a.mega-menu-link[aria-current="page"],
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu .mega-sub-menu a.mega-menu-link[aria-current="true"]{
  color: var(--wwrof-text-soft) !important;
  background: transparent !important;
}

/* Title span inside those links (items with descriptions) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu .mega-sub-menu li.mega-current_page_item > a.mega-menu-link .mega-menu-title,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu .mega-sub-menu li.mega-current-menu-item > a.mega-menu-link .mega-menu-title,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu .mega-sub-menu li.mega-current-menu-ancestor > a.mega-menu-link .mega-menu-title,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu .mega-sub-menu a.mega-menu-link[aria-current="page"] .mega-menu-title{
  color: inherit !important;
}
/* Base row density for ALL submenu links in mega panels */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu
.mega-sub-menu li.mega-menu-item > a.mega-menu-link{
  line-height: 1.25 !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
/* Description spacing: remove bottom margin and reduce title→desc gap */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu
.mega-sub-menu .mega-menu-description{
  margin-top: 7px !important;   /* gap between title and description */
  margin-bottom: 0 !important;  /* remove the extra “breathing room” */
  line-height: 1.25 !important;
}
/* Tighten submenu item padding (was 15px on all sides) */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
  padding: 6px 12px !important; /* vertical horizontal */
  width: 100%;
}
/* Ensure widget-based group headers get the same row padding as normal items */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu
> ul.mega-sub-menu > li.mega-menu-row
.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item-type-widget,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu
> ul.mega-sub-menu > li.mega-menu-row
.mega-menu-column > ul.mega-sub-menu > li.widget,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu
> ul.mega-sub-menu > li.mega-menu-row
.mega-menu-column > ul.mega-sub-menu > li.widget_text{
  padding: 8px 12px !important; /* match your normal li padding */
  width: 100% !important;
  display: block !important;
}

/* Tighten gap immediately after a linked column header. */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu
> ul.mega-sub-menu > li.mega-menu-row
.mega-menu-column > ul.mega-sub-menu > li.mega-group-title-link
+ li.mega-menu-item-type-widget,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu
> ul.mega-sub-menu > li.mega-menu-row
.mega-menu-column > ul.mega-sub-menu > li.mega-group-title-link
+ li.widget,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu
> ul.mega-sub-menu > li.mega-menu-row
.mega-menu-column > ul.mega-sub-menu > li.mega-group-title-link
+ li.widget_text {
  padding-top: 0 !important;
}

/* =========================================================
   WWROF: Mega panel vertical offset + safe hover bridge
   - Keeps a “gap” below the main bar without losing hover
   - Works with hover_intent
   ========================================================= */

:root{
  /* MMM’s original top offset (your computed shows 40px) */
  --wwrof-mega-panel-top-base: 40px;

  /* The extra breathing room you want BELOW the bar */
  --wwrof-mega-panel-gap: 10px; /* try 10px–24px */
}

/* Ensure top-level mega item is the positioning context */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu{
  position: relative;
  overflow: visible; /* important: allow bridge to extend outside li box */
}

/* Actual mega panel UL: move it down by (base + gap) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu{
  top: calc(var(--wwrof-mega-panel-top-base) + var(--wwrof-mega-panel-gap)) !important;
}

/* Hover bridge: fills ONLY the gap area so you can “cross the void” safely */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  /* Start where MMM used to place the panel */
  top: var(--wwrof-mega-panel-top-base);

  /* Bridge height is exactly the gap (never negative) */
  height: var(--wwrof-mega-panel-gap);

  /* Must be able to catch the mouse */
  pointer-events: auto;
  background: transparent;
  z-index: 9999;
}

/* Debug helper: uncomment temporarily to SEE the bridge area */
/*
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu::after{
  background: rgba(255,0,0,.15);
}
*/

/* =========================================================
   Mega Menu: colors + underline indicator support
   ========================================================= */

/*
  Your JS uses .mega-underline-indicator and defaults its color to currentColor.
  So we simply ensure:
  - menu link baseline is neutral
  - hover/active state goes to WWROF accent
  - underline follows automatically
*/

/* Menu link baseline */
#mega-menu-wrap-primary a.mega-menu-link {
  color: var(--wwrof-text);
}

/* Hover/active state uses WWROF accent red */
#mega-menu-wrap-primary a.mega-menu-link:hover,
#mega-menu-wrap-primary .mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary .mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary .mega-menu-item.mega-toggle-on > a.mega-menu-link {
  color: var(--wwrof-accent);
}

/* Menu item positioning required for absolutely-positioned underline */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link {
  position: relative !important;
}

/* Ensure the text span used by JS behaves as expected */
#mega-menu-wrap-primary a.mega-menu-link .mega-text-wrap {
  display: inline !important;
  pointer-events: auto !important;
}

/* Indicator chevron rotation (kept from your current CSS) */
#mega-menu-wrap-primary .mega-menu-item > a.mega-menu-link .mega-indicator {
  pointer-events: inherit !important;
  display: inline-block !important;
  float: right !important;
  margin: 0 !important;
  transform-origin: center !important;
  transition: transform 0.2s ease-out !important;
}

#mega-menu-wrap-primary .mega-menu-item.mega-toggle-on > a.mega-menu-link .mega-indicator {
  transform: rotate(180deg) !important;
}

/* The underline indicator element created by menu-underline.js */
.mega-underline-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  border-radius: 999px;
  z-index: 2;
  transition:
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.20s ease-out;
}

/* Level-specific tweaks (kept; JS also sets these inline) */
.mega-underline-indicator[data-menu-level="1"] {
  height: 2px;
  bottom: 0;
}

.mega-underline-indicator[data-menu-level="2"] {
  height: 1px;
  bottom: 2px;
  opacity: 0.8;
}

/* Show/hide logic used by JS */
.mega-underline-indicator[data-hidden="false"] {
  opacity: 1 !important;
  visibility: visible !important;
}

.mega-underline-indicator[data-hidden="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
}

/* Mobile: underline off (JS config says mobileEnabled false; keep CSS guard) */
@media (max-width: 768px) {
  .mega-underline-indicator {
    display: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mega-underline-indicator {
    transition-duration: 0ms !important;
  }
}

/* =========================================================
   FORCE mega menu to follow tokens (override layer)
   ========================================================= */

/* Top nav links */
#mega-menu-wrap-primary a.mega-menu-link {
  color: var(--wwrof-text) !important;
}

/* Hover/active */
#mega-menu-wrap-primary a.mega-menu-link:hover,
#mega-menu-wrap-primary .mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary .mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary .mega-toggle-on > a.mega-menu-link {
  color: var(--wwrof-text) !important;
}

/* Mega menu panel background (dropdown) */
#mega-menu-wrap-primary .mega-sub-menu,
#mega-menu-wrap-primary .mega-menu-row,
#mega-menu-wrap-primary .mega-menu-columns,
#mega-menu-wrap-primary .mega-menu-column {
  background: var(--wwrof-bg) !important;
}

/* Recent news list in mega menu */
#mega-menu-wrap-primary .wwrof-recent-news {
  margin-top: 0;
  inline-size: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: block !important;
  float: none !important;
}

#mega-menu-wrap-primary .wwrof-recent-news__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wwrof-muted);
  margin-top: 14px;
  margin-bottom: 12px;
}

#mega-menu-wrap-primary .wwrof-recent-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  width: 100% !important;
  min-width: 0 !important;
  justify-items: stretch !important;
}

#mega-menu-wrap-primary .wwrof-recent-news__item {
  margin: 0;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 2px 0 2px 10px;
  border-left: 2px solid transparent;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

#mega-menu-wrap-primary #mega-menu-primary .wwrof-recent-news__item > .wwrof-recent-news__link {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  text-decoration: none;
  color: var(--wwrof-text);
  padding: 0;
  border-left: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  max-height: calc(2 * 1.35em);
  transition: color 0.18s ease;
}

/* If shortcode is rendered inside a text widget, force wrapper to full column width. */
#mega-menu-wrap-primary .mega-sub-menu .textwidget {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

#mega-menu-wrap-primary .mega-sub-menu .widget_text .textwidget,
#mega-menu-wrap-primary .mega-sub-menu .widget_text .textwidget > div,
#mega-menu-wrap-primary .mega-sub-menu .widget_text .textwidget > p {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

#mega-menu-wrap-primary .wwrof-recent-news__item:hover,
#mega-menu-wrap-primary .wwrof-recent-news__item:focus-within {
  background-color: var(--wwrof-surface);
  border-left-color: var(--wwrof-accent);
}

#mega-menu-wrap-primary .wwrof-recent-news__item:hover .wwrof-recent-news__link,
#mega-menu-wrap-primary .wwrof-recent-news__item:focus-within .wwrof-recent-news__link {
  color: var(--wwrof-accent);
}

/* Dropdown text */
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link {
  color: var(--wwrof-text) !important;
}
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link:hover {
  color: var(--wwrof-accent) !important;
}

/* =========================================
   MAIN NAV: calmer typography + less padding
   ========================================= */

/* Main menu links */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  font-size: 14px !important;
  font-weight: 500 !important;          /* calmer than the current heavy look */
  letter-spacing: -0.01em !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Reduce the menu item vertical padding (this is usually the #1 culprit) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 1.1 !important;
}

/* Reduce spacing between top-level items */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  margin: 0 6px !important;
}

/* Make dropdown indicators feel lighter */
#mega-menu-wrap-primary .mega-menu-item > a.mega-menu-link .mega-indicator {
  opacity: 0.65 !important;
}

/* =========================================================
   Submenu: keep text neutral (do NOT go red)
   Underline remains accent via JS/config
   ========================================================= */

/* Default submenu link color */
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link {
  color: var(--wwrof-text, #0b1220) !important;
}

/* Hover/focus/active submenu link color */
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link:hover,
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link:focus,
#mega-menu-wrap-primary .mega-sub-menu li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary .mega-sub-menu li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link {
  color: var(--wwrof-text, #0b1220) !important;
}

/* Optional: if the plugin applies opacity changes on hover, normalize it */
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link:hover {
  opacity: 1.0 !important;
}

/* =========================================================
   Mega Menu: vertical centering (works with "Menu Height")
   ========================================================= */

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  /* keep your typography */
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;

  /* let Mega Menu control the height; we just center inside it */
  display: inline-flex !important;
  align-items: center !important;

  /* IMPORTANT: remove tight line box + extra vertical padding */
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  /* set this to EXACTLY the Menu Height you chose in Mega Menu */
  height: 44px !important; /* <-- change to your Mega "Menu Height" value */
}

/* =========================================================
   Max Mega Menu: force top-level links to center vertically
   ========================================================= */

/* Set this to the EXACT value you chose in Mega Menu -> Menu Height */
:root { --wwrof-mainmenu-height: 40px; }  /* <-- change to your Menu Height */

/* Force the link itself to be the centered box */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  height: var(--wwrof-mainmenu-height) !important;

  display: flex !important;
  align-items: center !important;

  /* kill vertical bias */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
}

/* Center the inner text wrapper and caret */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link .mega-text-wrap,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link .mega-indicator {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link .mega-indicator {
  position: relative;
  top: 1px; /* try 1px, or remove if not needed */
}

/* =========================================================
   Smooth hover: remove LI gaps, keep spacing on the link
   ========================================================= */

/* 1) Kill horizontal gaps on the LI */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Put spacing on the clickable link instead */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Disable arrows in submenus */
#mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link .mega-indicator {
  display: none !important;
}

/* =========================================================
   DARK THEME: make header typography follow our tokens
   ========================================================= */

/* Primary menu (top-level + dropdown) */
html.dark #mega-menu-wrap-primary a.mega-menu-link {
  color: var(--text) !important;
}

html.dark #mega-menu-wrap-primary a.mega-menu-link:hover,
html.dark #mega-menu-wrap-primary .mega-current-menu-item > a.mega-menu-link,
html.dark #mega-menu-wrap-primary .mega-current-menu-ancestor > a.mega-menu-link,
html.dark #mega-menu-wrap-primary .mega-toggle-on > a.mega-menu-link {
  color: var(--text) !important; /* underline provides the accent */
}

/* Dark mode only: panel widget/column titles */
html.dark #mega-menu-wrap-primary .mega-sub-menu .mega-block-title,
body.dark #mega-menu-wrap-primary .mega-sub-menu .mega-block-title {
  color: var(--text) !important;   /* or var(--muted) if you want softer */
}

/* =========================================================
   Vercel-style: bounded mega panel with fixed position
   (panel does NOT slide per top-level item)
   ========================================================= */

/* 1) Ensure the wrap is a positioning context */
#mega-menu-wrap-primary {
  position: relative;
}

/* 2) Remove the top-level <li> as positioning context */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu {
  position: static !important;
}

/* 3) Anchor each mega panel to the left edge of the main menu bar */
#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu {
  left: 0 !important;
  right: auto !important;
  transform: none !important;

  /* Keep a consistent bounded panel width */
  width: var(--wwrof-mega-panel-max, 980px);
  max-width: calc(100vw - 24px);
}

/* =========================================================
   TEST MODE: full-viewport mega panel
   Revert by removing this block.
   ========================================================= */
#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu {
  position: fixed !important;
  top: var(--wwrof-mega-panel-fixed-top, 126px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  transform: none !important;
  margin-left: 0 !important;
  z-index: 120 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> li.mega-menu-row {
  width: min(calc(100vw - (2 * var(--wwrof-gutter, 24px))), calc(var(--ast-normal-container-width, var(--wwrof-content-max, 1152px)) + 40px)) !important;
  max-width: min(calc(100vw - (2 * var(--wwrof-gutter, 24px))), calc(var(--ast-normal-container-width, var(--wwrof-content-max, 1152px)) + 40px)) !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> li.mega-menu-row
> ul.mega-sub-menu {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}

#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu
> li.mega-menu-row
> ul.mega-sub-menu
> li.mega-menu-column {
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box !important;
}

/* Optional: tighter on smaller screens */
@media (max-width: 1080px) {
  #mega-menu-wrap-primary
  #mega-menu-primary
  > li.mega-menu-megamenu
  > ul.mega-sub-menu {
    max-width: calc(100vw - 24px);
  }
}
#mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu {
  background: var(--wwrof-bg) !important;
  border: 1px solid var(--wwrof-border) !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background-clip: padding-box !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

html.dark #mega-menu-wrap-primary
#mega-menu-primary
> li.mega-menu-megamenu
> ul.mega-sub-menu {
  box-shadow: none !important;
}

/* Ensure no inherited plugin borders draw a thick frame */
#mega-menu-wrap-primary .mega-sub-menu,
#mega-menu-wrap-primary .mega-menu-row,
#mega-menu-wrap-primary .mega-menu-columns,
#mega-menu-wrap-primary .mega-menu-column {
  border: 0 !important;
  outline: 0 !important;
}

/* =========================================================
   Mega panel typography (single source of truth)
   Applies to items WITH and WITHOUT descriptions
   ========================================================= */

/* Base typography for NORMAL submenu items only (EXCLUDES group headers) */
#mega-menu-wrap-primary .mega-sub-menu li.mega-menu-item:not(.mega-group-title-link):not(.mega-menu-row):not(.mega-menu-column) > :is(a.mega-menu-link, span.mega-menu-link) {
  display: block;
  color: var(--wwrof-text) !important; /* your new token */
  font-weight: 600 !important;             /* keep 600; soften via token */
  font-size: 0.97em;        /* makes 600 feel less heavy */
  letter-spacing: 0.01em;   /* tiny tracking also softens the look */
  line-height: 1.2 !important;
  text-decoration: none !important;

  /* Keep this OFF unless you really want fading; opacity affects description too */
  opacity: 1 !important;
}

/* If MMM outputs a title span (items WITH descriptions), keep it aligned with the base */
#mega-menu-wrap-primary .mega-sub-menu :is(a.mega-menu-link, span.mega-menu-link) .mega-menu-title {
  display: block;
  color: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

/* Description line (only exists when description is filled in) */
#mega-menu-wrap-primary .mega-sub-menu :is(a.mega-menu-link, span.mega-menu-link) .mega-menu-description {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.25;
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}

/* =========================================================
   Linked group headers: align vertical spacing with non-linked headers
   ========================================================= */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu
> ul.mega-sub-menu > li.mega-menu-row
.mega-menu-column > ul.mega-sub-menu > li.mega-group-title-link {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu
> ul.mega-sub-menu > li.mega-menu-row
.mega-menu-column > ul.mega-sub-menu > li.mega-group-title-link > a.mega-menu-link {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
}