/* ===============================
   Text-only zoom
================================ */
:root {
  --wb-drawer-bg: #4b1f6b;
  --zoom: 1;
}

main, .entry-content, footer {
  font-size: calc(1rem * var(--zoom));
  line-height: calc(1.5 * var(--zoom));
}

/* Mega Menu text scales */
#mega-menu-wrap-primary,
#mega-menu-wrap-primary .mega-menu-link,
#mega-menu-wrap-primary .mega-toggle-label {
  font-size: calc(1rem * var(--zoom)) !important;
}

/* ===============================
   Forced hamburger mode
================================ */
body.force-mega-mobile {
  --mega-bar-h: calc(52px * var(--zoom));
  /* In forced (zoom) mode, use a predictable drawer width.
     The site's collapsed Max Mega Menu drawer is ~375px wide. */
  --wb-drawer-w: auto;
}

/* Hide duplicate blocks */
body.force-mega-mobile .mega-toggle-blocks-left,
body.force-mega-mobile .mega-toggle-blocks-center {
  display: none !important;
}

/* Full-width bar */
body.force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: var(--mega-bar-h) !important;
  padding-left: calc(16px * var(--zoom)) !important;
  cursor: pointer !important;
}

/* Button fills bar, left aligned */
body.force-mega-mobile .mega-toggle-label {
  display: flex !important;
  align-items: center !important;
  gap: calc(10px * var(--zoom)) !important;
  height: 100% !important;
  width: 100% !important;
}

/* ===== Off-canvas drawer (forces the *mobile-style* menu even on wide viewports) ===== */

/* Keep the menu UL present, but move it off-canvas by default */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    /* Width is controlled by JS via --wb-drawer-w and capped at 70vw */
    width: min(var(--wb-drawer-w, 70vw), 70vw) !important;
    max-width: 70vw !important;
    background: rgba(108, 132, 170, 0.96) !important;
    box-shadow: 0 0 12px rgba(0,0,0,0.4) !important;
    /* Leave room for the injected close button */
    padding-top: calc(60px * var(--zoom)) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    transform: translateX(-110%) !important;
    transition: transform 0.25s ease !important;
    z-index: 100000 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

/* Ensure the MMM wrapper itself does NOT become the drawer width.
   We want the bar/brand area to stay full width; only the UL is the drawer. */
body.force-mega-mobile #mega-menu-wrap-primary {
  width: 100% !important;
  max-width: 100% !important;
}

/* Hard width override (some MMM mobile styles set width:100%).
   Clamp the drawer so it never fills the whole viewport. */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary {
  right: auto !important;
  box-sizing: border-box !important;
}

/* Ensure any full-width background from the wrapper doesn't make the drawer feel "full screen" */
body.force-mega-mobile #mega-menu-wrap-primary {
  background: transparent !important;
}

/* Force list items to stack vertically (overrides horizontal menu styling) */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li {
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li > a {
  display: block !important;
  width: 100% !important;
}


/* Make ALL submenus expand inline (same column) instead of flyouts (prevents clipping) */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  transform: none !important;
  box-shadow: none !important;
  background: rgba(255,255,255,0.06) !important;
  display: none !important; /* opened via toggle class */
}

/* In forced drawer mode we only open submenus when we explicitly apply mega-toggle-on */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-toggle-on > .mega-sub-menu {
  display: block !important;
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 999999 !important;
}

/* Indent submenu items for readability */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu > li > a {
  padding-left: calc(28px * var(--zoom)) !important;
}
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu .mega-sub-menu > li > a {
  padding-left: calc(44px * var(--zoom)) !important;
}

/* Keep the dropdown indicator (chevron) on the same line as the label */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: calc(10px * var(--zoom)) !important;
  flex-wrap: nowrap !important;
}
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary .mega-indicator {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}


/* Slide in when open */
body.force-mega-mobile.wb-mega-open #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile #mega-menu-wrap-primary.force-open #mega-menu-primary {
  transform: translateX(0) !important;

    visibility: visible !important;
    pointer-events: auto !important;
}

/* Overlay behind the drawer */
body.force-mega-mobile::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
  z-index: 999998;
}

body.force-mega-mobile.wb-mega-open::before {
  opacity: 1;
  pointer-events: auto;
}

/* Make top-level items comfortably tappable */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li > a {
  min-height: calc(44px * var(--zoom)) !important;
  padding: calc(10px * var(--zoom)) calc(16px * var(--zoom)) !important;
}

/* Allow long labels to wrap cleanly within the fixed 50vw drawer */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary a {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Ensure the built-in close button (if present) is visible above the drawer */
body.force-mega-mobile #mega-menu-wrap-primary .mega-close {
  position: fixed !important;
  top: calc(10px * var(--zoom)) !important;
  left: calc(var(--wb-drawer-w) - (54px * var(--zoom))) !important;
  z-index: 1000000 !important;
}


/* Match drawer background for nested submenus */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu {
  background: var(--wb-drawer-bg) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* Ensure label + chevron stay aligned; allow label to wrap while chevron stays fixed */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a {
  display: flex !important;
  align-items: center !important;
  gap: calc(10px * var(--zoom)) !important;
}
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a .mega-indicator,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a .mega-indicator:before {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a > span,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a {
  overflow-wrap: anywhere !important;
}


/* ===== Footer stacking when zoom is high ===== */
body.wb-footer-stack footer .wp-block-columns,
body.wb-footer-stack footer .elementor-container,
body.wb-footer-stack footer .elementor-row,
body.wb-footer-stack footer .footer-widgets,
body.wb-footer-stack footer .widgets,
body.wb-footer-stack footer .row {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
body.wb-footer-stack footer .wp-block-column,
body.wb-footer-stack footer .elementor-column,
body.wb-footer-stack footer .widget-area,
body.wb-footer-stack footer .widget,
body.wb-footer-stack footer [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Footer stacking helper (activated by JS): remove common divider styling */
body.wb-footer-stack footer *,
body.wb-footer-stack #colophon * {
  background-clip: padding-box;
}


/* ===== Footer: stack columns into one column when zoom is high ===== */
body.wb-footer-stack footer#colophon.site-footer,
body.wb-footer-stack #colophon.site-footer {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Some themes center individual footer blocks with align-self or auto margins.
   Force everything to stretch full width in stacked mode. */
body.wb-footer-stack #colophon.site-footer > * {
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.wb-footer-stack #colophon.site-footer .container.footercolumns,
body.wb-footer-stack #colophon.site-footer .footercolumns {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

body.wb-footer-stack #colophon.site-footer .column,
body.wb-footer-stack #colophon.site-footer nav.column,
body.wb-footer-stack #colophon.site-footer div.column {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

body.wb-footer-stack #colophon.site-footer .container.footercolumns > * {
  width: 100% !important;
  max-width: 100% !important;
}



/* === WB Accessibility: Footer force-stack + left-align (zoom mode) ===
   Targets footer structure seen on Working Blind theme:
   footer#colophon.site-footer contains:
   .container.footercolumns, nav.column.footerlinks, nav.column.footerlinks.secondfooterlinks, .column.footerdonate
*/
body.wb-footer-stack footer#colophon.site-footer,
body.wb-footer-stack #colophon.site-footer {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  /* Tighten vertical rhythm when the footer collapses into a single column */
  gap: 12px !important;
}

/* Ensure every direct child becomes a full-width row */
body.wb-footer-stack #colophon.site-footer > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  align-self: stretch !important;
  text-align: left !important;
}

/* Force the internal "footercolumns" group to stack too */
body.wb-footer-stack #colophon .container.footercolumns {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  /* Reduce the big gaps between stacked footer "columns" */
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* All footer "columns" become full-width, left aligned */
body.wb-footer-stack #colophon .container.footercolumns .column,
body.wb-footer-stack #colophon .column.footerlinks,
body.wb-footer-stack #colophon nav.column.footerlinks,
body.wb-footer-stack #colophon nav.column.footerlinks.secondfooterlinks,
body.wb-footer-stack #colophon .column.footerdonate {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  align-self: stretch !important;
  /* Prevent the theme from stretching "columns" and creating large blank gaps */
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  text-align: left !important;
}

/* Links lists: remove any centering and allow clean wrapping */
body.wb-footer-stack #colophon .column.footerlinks ul,
body.wb-footer-stack #colophon nav.column.footerlinks ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

/* Make the stacked footer feel like one continuous list */
body.wb-footer-stack #colophon .column.footerlinks li,
body.wb-footer-stack #colophon nav.column.footerlinks li,
body.wb-footer-stack #colophon .column.footerdonate li {
  margin: 0 0 10px 0 !important;
}
body.wb-footer-stack #colophon .column.footerlinks li:last-child,
body.wb-footer-stack #colophon nav.column.footerlinks li:last-child,
body.wb-footer-stack #colophon .column.footerdonate li:last-child {
  margin-bottom: 0 !important;
}

/* Remove extra top spacing above the donate button/logos in stacked mode */
body.wb-footer-stack #colophon .column.footerdonate .donatebutton,
body.wb-footer-stack #colophon .column.footerdonate .footer-logos,
body.wb-footer-stack #colophon .column.footerdonate .footerlogos {
  margin-top: 0 !important;
}

/* Vertical dividers: hide in stacked mode */
body.wb-footer-stack #colophon .container.footercolumns .column,
body.wb-footer-stack #colophon nav.column.footerlinks,
body.wb-footer-stack #colophon nav.column.footerlinks.secondfooterlinks {
  border-left: 0 !important;
}

/* Ensure footer groups don't keep old 'stretch / fill' behavior that creates big blank gaps */
body.wb-footer-stack #colophon .container.footercolumns > * {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

/* Donate/logo block: keep content left by default */
body.wb-footer-stack #colophon .column.footerdonate,
body.wb-footer-stack #colophon .column.footerdonate * {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}



/* === WB Accessibility: Footer links columns 2/3 hard-left-align === */
body.wb-footer-stack #colophon nav.column.footerlinks,
body.wb-footer-stack #colophon nav.column.footerlinks.secondfooterlinks {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

body.wb-footer-stack #colophon nav.column.footerlinks ul,
body.wb-footer-stack #colophon nav.column.footerlinks.secondfooterlinks ul {
  width: 100% !important;
  display: block !important;
  text-align: left !important;
}

body.wb-footer-stack #colophon nav.column.footerlinks li,
body.wb-footer-stack #colophon nav.column.footerlinks.secondfooterlinks li {
  width: 100% !important;
  text-align: left !important;
}

body.wb-footer-stack #colophon nav.column.footerlinks a,
body.wb-footer-stack #colophon nav.column.footerlinks.secondfooterlinks a {
  display: inline-block !important;
  text-align: left !important;
  margin-left: 0 !important;
}


/* === WB DOC TWEAKS (hamburger/footer) === */

/* Zoom-forced drawer: width should accommodate longest label (cap to viewport) */
body.wb-force-mega-mobile #mega-menu-wrap-primary {
  width: auto !important;           /* avoid MMM forcing full-width wrapper */
  max-width: 100% !important;
}

/* The actual menu panel */
body.wb-force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary {
  width: max-content !important;
  min-width: 375px !important;      /* matches measured MMM drawer feel */
  max-width: 90vw !important;       /* never exceed viewport */
  box-sizing: border-box !important;
}

/* Ensure list items don't create unexpected centering */
body.wb-force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.wb-force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary * {
  box-sizing: border-box !important;
}

/* Toggle bar: hamburger LEFT of "menu", vertically centered */
body.wb-force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle,
body.wb-force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right,
body.wb-force-mega-mobile #mega-menu-wrap-primary button.mega-toggle-animated,
body.wb-force-mega-mobile #mega-menu-wrap-primary button.mega-menu-toggle {
  align-items: center !important;
}

/* Common MMM structure: icon + label inside the toggle button */
body.wb-force-mega-mobile #mega-menu-wrap-primary button.mega-menu-toggle,
body.wb-force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle button {
  display: inline-flex !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

/* Put animated icon first, label second */
body.wb-force-mega-mobile #mega-menu-wrap-primary .mega-toggle-animated,
body.wb-force-mega-mobile #mega-menu-wrap-primary .mega-toggle-animated-inner,
body.wb-force-mega-mobile #mega-menu-wrap-primary .mega-toggle-animated-box {
  order: 1 !important;
}

body.wb-force-mega-mobile #mega-menu-wrap-primary .mega-toggle-label,
body.wb-force-mega-mobile #mega-menu-wrap-primary .mega-toggle-label-open,
body.wb-force-mega-mobile #mega-menu-wrap-primary .mega-toggle-label-closed {
  order: 2 !important;
}

/* Accessible close button (X) inside drawer */
body.wb-force-mega-mobile .wb-drawer-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 99999 !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 44px !important;
  cursor: pointer !important;
}

body.wb-force-mega-mobile .wb-drawer-close:focus {
  outline: 3px solid rgba(255,255,255,0.85) !important;
  outline-offset: 2px !important;
}

/* Make sure drawer can position the close button */
body.wb-force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary {
  position: relative !important;
  padding-top: 56px !important; /* space for close button */
}

/* Footer stacked mode: add left padding and reduce excess space under nav columns */
body.wb-footer-stack #colophon.site-footer,
body.wb-footer-stack footer#colophon.site-footer {
  padding-left: 2em !important;
  padding-right: 2em !important;
}

body.wb-footer-stack #colophon nav.column.footerlinks,
body.wb-footer-stack #colophon nav.column.footerlinks.secondfooterlinks {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

body.wb-footer-stack #colophon nav.column.footerlinks ul,
body.wb-footer-stack #colophon nav.column.footerlinks.secondfooterlinks ul {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* Forced-drawer close button (appears only while drawer is open in forced mobile mode)
   IMPORTANT: Do NOT set #mega-menu-primary to position:relative; it must stay fixed/off-canvas.
*/
body.force-mega-mobile #mega-menu-wrap-primary.force-open #mega-menu-primary .wb-forced-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.75);
  background: rgba(0,0,0,0);
  color: #fff;
  cursor: pointer;
  z-index: 999999;
}
body.force-mega-mobile #mega-menu-wrap-primary.force-open #mega-menu-primary .wb-forced-close:focus {
  outline: 3px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}


/* ===============================
   MENU ALIGNMENT + WRAP CONTROL (SAFE PATCH)
   - Keep "Menu" label and hamburger icon on the same line
   - Prevent TOP-LEVEL menu item text from wrapping (submenus may wrap)
   =============================== */

/* 1) Hamburger toggle: force horizontal layout
   IMPORTANT: scope to our forced/zoom mobile mode only.
   If unscoped, this will override Max Mega Menu's desktop rule
   that hides the hamburger, making it appear even at full width.
*/
body.force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle,
body.force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle button,
body.force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Keep label and icon together */
body.force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-label,
body.force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Small gap between icon and label (works regardless of DOM order) */
body.force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-label {
  margin-left: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
}

/* If label appears before icon, also add right margin */
body.force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-label + .mega-toggle-animated {
  margin-left: 10px !important;
}

/* 2) Forced/zoom drawer: widen and keep TOP LEVEL items on one line */
body.force-mega-mobile #mega-menu-wrap-primary {
  /* Let the drawer size to content up to viewport */
  width: fit-content !important;
  max-width: 92vw !important;
}

/* Ensure the actual UL doesn’t get artificially narrow */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary {
  width: auto !important;
}

/* Top-level links: no wrapping */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  white-space: nowrap !important;
}

/* Submenus are allowed to wrap normally */
body.force-mega-mobile #mega-menu-wrap-primary .mega-sub-menu a.mega-menu-link {
  white-space: normal !important;
}


/* 3) Ensure submenu chevrons (mega-indicator) are not clipped in forced drawer */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link {
  padding-right: 0 !important; /* reserve space for indicator */
  overflow: visible !important;
}

body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link .mega-indicator,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link .mega-indicator {
  right: 16px !important;
  overflow: visible !important;
  display: inline-block !important;
}

/* Make sure list items don't clip absolutely-positioned indicators */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  overflow: visible !important;
}


/* ===============================
   CHEVRON SPACE – EM-BASED, WIDE
   =============================== */

/* Give top-level items WITH children generous space for chevrons */
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link {
  padding-right: 5.5em !important;   /* room for chevron + touch target */
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Position the chevron comfortably inside that space */
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children
> a.mega-menu-link .mega-indicator {
  right: 1.5em !important;
  font-size: 1.25em;   /* scales with zoom */
  line-height: 1;
  display: inline-block !important;
}

/* Ensure nothing clips the indicator */
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item {
  overflow: visible !important;
}


/* ===============================
   CHEVRONS: FORCE VISIBLE + RIGHT-ALIGNED
   Goal:
   - chevrons always visible
   - chevrons right-aligned
   - ~5 character spaces between text and chevron area
   - ~5 character spaces between chevron and right edge
   =============================== */

body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link {
  /* Put text + chevron in the same flow so nothing gets clipped */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  /* Ensure the row can expand to fit its contents */
  width: max-content !important;
  min-width: max-content !important;

  /* Keep top-level items on one line */
  white-space: nowrap !important;

  /* Reserve "5 character spaces" at the right edge */
  padding-right: 5ch !important;
}

body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link .mega-indicator {
  /* Remove absolute positioning if MMM uses it */
  position: static !important;

  /* Push it to the far right within the flex row */
  margin-left: 5ch !important; /* ~5 character spaces after the text */
  flex: 0 0 auto !important;

  /* Force visibility */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* Make it readable at all zoom levels */
  font-size: 1.25em !important;
  line-height: 1 !important;
}

/* ===============================
   Chevron direction (forced drawer)
   In the zoom-forced drawer menu, always show a DOWN chevron.
   (Max Mega Menu sometimes uses a RIGHT chevron for collapsed submenus.)
   =============================== */

body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link .mega-indicator:after,
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link .mega-indicator:after {
  content: "\f347" !important; /* dashicons-arrow-down-alt2 */
  font-family: dashicons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: none !important;
}

/* Ensure the indicator never rotates sideways in any open/hover state */
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary li.mega-toggle-on > a.mega-menu-link .mega-indicator:after,
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary li:hover > a.mega-menu-link .mega-indicator:after {
  transform: none !important;
}

/* Forced drawer: always show DOWN chevrons (not sideways) */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary .mega-indicator:after {
  content: "\f347" !important; /* dashicons-arrow-down-alt2 */
  font-family: dashicons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: none !important;
}

/* Some MegaMenu themes rotate the indicator on open/hover; override to keep it DOWN */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-toggle-on > a.mega-menu-link .mega-indicator:after,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children:hover > a.mega-menu-link .mega-indicator:after {
  transform: none !important;
}

/* Make sure LI/UL never clip the indicator */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  overflow: visible !important;
}

/* Drawer: allow it to expand to the widest top-level row (text + chevron + padding) */
body.force-mega-mobile #mega-menu-wrap-primary {
  width: max-content !important;
  max-width: 92vw !important;
}


/* ===============================
   V6: tighten spacing + ensure background covers chevrons
   =============================== */

/* Reduce "character space" buffers from 5ch to 2ch */
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link {
  padding-right: 2ch !important;
}

body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link .mega-indicator {
  margin-left: 2ch !important;
}

/* Make the drawer panel itself expand to include the widest item + chevron */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary {
  width: max-content !important;
}

/* Ensure the visible purple background covers the full panel width */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  box-sizing: border-box !important;
}

/* Some themes apply background to LI/A; make sure it reaches full width */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  width: 100% !important;
}

body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  width: 100% !important; /* stretches the purple background across the panel */
}


/* ===============================
   V7: keep chevrons INSIDE panel (no overflow escape)
   - UL has inline fixed width (e.g., 375px). Do NOT use max-content/overflow-visible tricks.
   - Lay out text + chevron within 100% width so background always covers.
   =============================== */

/* Top-level items WITH children: flex row inside the fixed-width panel */
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link {
  display: flex !important;
  align-items: center !important;

  /* Critical: stay within the UL's width */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  /* Keep the label on one line */
  white-space: nowrap !important;

  /* Two "character spaces" on the right edge of the panel */
  padding-right: 2ch !important;

  /* Space between label and chevron */
  column-gap: 2ch !important;
}

/* Make the label take remaining space and ellipsis if absolutely necessary */
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link .mega-menu-link-text,
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link > span:not(.mega-indicator) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Chevron: in-flow, pinned to the right INSIDE the panel */
body.force-mega-mobile #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link .mega-indicator {
  position: static !important;
  margin-left: auto !important;   /* right align */
  flex: 0 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  visibility: visible !important;
  opacity: 1 !important;

  font-size: 1.25em !important;
  line-height: 1 !important;
}

/* Stop indicators from rendering outside the panel (this was causing the "floating chevron") */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item,
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  overflow: hidden !important;
}

/* Do NOT force max-content widths in force mode (UL has inline width) */
body.force-mega-mobile #mega-menu-wrap-primary {
  width: auto !important;
}
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary {
  width: 100% !important;
}

/* ===============================
   V13: Toggle visibility rules
   - On small screens, MegaMenu may rely on the toggle; do NOT hide it.
   - On desktop widths, hide the toggle unless we're forcing mobile mode.
   =============================== */
@media (min-width: 48em) { /* ~768px at 16px base */
  }

/* ===============================
   V14: Keyboard open state fix
   MegaMenu can mark the toggle/panel as open without our "force-open" class (e.g., Enter key).
   When toggle reports open (aria-expanded="true" or .mega-toggle-on), ensure the panel is on-screen.
   =============================== */
body.force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle[aria-expanded="true"] ~ #mega-menu-primary,
body.force-mega-mobile #mega-menu-wrap-primary .mega-menu-toggle.mega-toggle-on ~ #mega-menu-primary {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* =========================================================
   Fix: forced (high-zoom) mobile menu visuals
   Keep MMM's keyboard/tab behaviour, but ensure the off-canvas
   panel looks like the expected stacked drawer.
   ========================================================= */

/* Ensure the menu UL behaves like an off-canvas vertical drawer (not the horizontal desktop bar) */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary {
  /* force vertical drawer layout */
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* visual panel */
  background: #4b1c6b !important;
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.35) !important;

  /* off-canvas motion */
  transform: translateX(-110%) !important;
  transition: transform 0.2s ease !important;

  /* keep above the page */
  z-index: 999999 !important;
}

/* Open state: support both our class and MMM's off-canvas class */
body.force-mega-mobile.wb-mega-open #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile #mega-menu-wrap-primary.force-open #mega-menu-primary,
html.mega-menu-primary-off-canvas-open body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.mega-menu-primary-off-canvas-open.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary {
  transform: translateX(0) !important;
}

/* Stack top-level items vertically */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li {
  display: block !important;
  width: 100% !important;
}

/* Full-width clickable rows */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li > a.mega-menu-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Submenu containers should also be vertical */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu {
  display: block !important;
  position: static !important;
  width: 100% !important;
  background: transparent !important;
}

body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu > li {
  display: block !important;
  width: 100% !important;
}

body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu > li > a.mega-menu-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* If MMM sets the UL to flex/horizontal for desktop, override it in forced-mobile mode */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary.mega-menu-horizontal {
  display: block !important;
}

/* --- Override MMM off-canvas open styles so our forced drawer keeps its layout --- */
html.mega-menu-primary-off-canvas-open body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.mega-menu-primary-off-canvas-open.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile.mega-menu-primary-mobile-open #mega-menu-wrap-primary #mega-menu-primary {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Use the site purple for the drawer */
  background: rgba(76, 36, 112, 0.98) !important;
  display: block !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* Force top-level items to stack vertically even if MMM re-applies desktop styles when off-canvas opens */
html.mega-menu-primary-off-canvas-open body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li,
body.force-mega-mobile.mega-menu-primary-mobile-open #mega-menu-wrap-primary #mega-menu-primary > li {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
}

html.mega-menu-primary-off-canvas-open body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li > a,
body.force-mega-mobile.mega-menu-primary-mobile-open #mega-menu-wrap-primary #mega-menu-primary > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}


/* --- Override MMM off-canvas open styles so our forced drawer keeps its layout --- */
html.mega-menu-primary-off-canvas-open body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.mega-menu-primary-off-canvas-open.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile.mega-menu-primary-mobile-open #mega-menu-wrap-primary #mega-menu-primary {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;

  display: block !important;
  width: auto !important;
  max-width: 70vw !important;

  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  background: rgba(76, 36, 112, 0.98) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset !important;

  /* Make sure we are not inheriting a desktop horizontal layout */
  flex-direction: column !important;
}

html.mega-menu-primary-off-canvas-open body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li,
body.mega-menu-primary-off-canvas-open.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li,
body.force-mega-mobile.mega-menu-primary-mobile-open #mega-menu-wrap-primary #mega-menu-primary > li {
  display: block !important;
  width: 100% !important;
}

html.mega-menu-primary-off-canvas-open body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li > a.mega-menu-link,
body.mega-menu-primary-off-canvas-open.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary > li > a.mega-menu-link,
body.force-mega-mobile.mega-menu-primary-mobile-open #mega-menu-wrap-primary #mega-menu-primary > li > a.mega-menu-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: calc(10px * var(--zoom)) !important;
  width: 100% !important;

  color: #ffffff !important;
  text-decoration: none !important;
  background: transparent !important;
}

/* Submenus should also stack vertically and inherit the drawer background */
html.mega-menu-primary-off-canvas-open body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu,
body.mega-menu-primary-off-canvas-open.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu,
body.force-mega-mobile.mega-menu-primary-mobile-open #mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu {
  /* Keep submenus collapsed by default; MMM opens them via .mega-toggle-on */
  display: none !important;
  position: static !important;
  width: 100% !important;
  background: rgba(76, 36, 112, 0.98) !important;
}

/* Ensure open state still uses fixed off-canvas positioning (MMM may switch to relative when opening) */
html.mega-menu-primary-off-canvas-open body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile.mega-menu-primary-mobile-open #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile.wb-mega-open #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile #mega-menu-wrap-primary.force-open #mega-menu-primary {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  background: rgba(76, 36, 112, 0.98) !important;
  display: block !important;
  flex-direction: column !important;
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Ensure open state still uses fixed off-canvas positioning (MMM may switch to relative when opening) */
html.mega-menu-primary-off-canvas-open body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile.mega-menu-primary-mobile-open #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile.wb-mega-open #mega-menu-wrap-primary #mega-menu-primary,
body.force-mega-mobile #mega-menu-wrap-primary.force-open #mega-menu-primary {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  background: rgba(76, 36, 112, 0.98) !important;
  display: block !important;
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 999999 !important;
}

/* ---------- Forced drawer visual fixes (v21) ----------
   Some site/MMM styles set #mega-menu-primary to flex, which can cause items to
   distribute across the container height and look like everything is expanded.
   In forced drawer mode we always want a plain vertical list.
*/
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Defensive: ensure closed submenus take zero space */
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu {
  display: none !important;
}
body.force-mega-mobile #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-toggle-on > .mega-sub-menu {
  display: block !important;
}


/* --- WB: tighten stacked footer gaps across ALL column groups (v28) --- */
body.wb-footer-stack #colophon.site-footer .container.footercolumns,
body.wb-footer-stack #colophon.site-footer .container.footercolumns .wp-block-columns {
  row-gap: 8px !important;
  column-gap: 0 !important;
}

/* Remove any leftover top/bottom margins on stacked "column groups" */
body.wb-footer-stack #colophon.site-footer .container.footercolumns > *,
body.wb-footer-stack #colophon.site-footer .container.footercolumns .wp-block-column,
body.wb-footer-stack #colophon.site-footer .container.footercolumns .wp-block-columns > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* Normalize common theme elements that often add big separation between footer columns */
body.wb-footer-stack #colophon.site-footer .container.footercolumns nav,
body.wb-footer-stack #colophon.site-footer .container.footercolumns section,
body.wb-footer-stack #colophon.site-footer .container.footercolumns .widget,
body.wb-footer-stack #colophon.site-footer .container.footercolumns .wp-block-group,
body.wb-footer-stack #colophon.site-footer .container.footercolumns .wp-block-navigation {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Keep list spacing consistent so the stacked footer reads like one continuous column */
body.wb-footer-stack #colophon.site-footer .container.footercolumns ul,
body.wb-footer-stack #colophon.site-footer .container.footercolumns ol {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}