@supports not (-ms-high-contrast: none) {
  .nav li.ia_mega ul.sub-menu {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
  }

  .nav li.ia_mega > ul.sub-menu {
    position: fixed;
  }

  .nav li.ia_mega:hover > ul.sub-menu,
  li.ia_mega[aria-expanded="true"] > ul.sub-menu {
    top: 100%;
    left: 0;
    width: min(1324px, calc(100vw - 55px));
  }

  .nav li.ia_mega > ul.sub-menu {
    width: 100%;
    padding: 40px 0px 15px 0px !important;
    background: none;
  }

  .nav li.ia_mega > ul.sub-menu::before {
    content: "";
    position: absolute;
    inset: 25px 0 0 0;
    background-color: #fff;
    border-radius: 8px;
  }

  .nav li.ia_mega > ul.sub-menu::after {
    display: none;
  }

  /* Panel = two columns: child list (flex 1) | featured image (flex 2) */
  .nav li.ia_mega > ul.sub-menu {
    /* Panel is at least ~5 child items tall; the featured image stretches to
       match but never drives the height (see .ia_mega_featured img). */
    --ia-mega-rows: 5;
    --ia-mega-item-h: 42px;
    --ia-mega-gap: 8px;
    --ia-mega-col-gap: max(1vw, 8px);
    display: flex;
    gap: var(--ia-mega-col-gap);
    align-items: stretch;
    box-sizing: border-box;
  }

  .nav li.ia_mega > ul.sub-menu > li {
    float: none;
    width: auto;
    max-width: none;
    position: relative !important;
  }

  /* Left column: vertical list of child items */
  .nav li.ia_mega .ia_mega_list_wrap {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    align-items: flex-start !important;
    /* At least ~5 items tall (rows * item height + gaps between rows). */
    min-height: calc(
      var(--ia-mega-item-h) * var(--ia-mega-rows) + var(--ia-mega-gap) *
        (var(--ia-mega-rows) - 1)
    );
  }

  /* Divider line centred in the 10vw gap between the two columns */
  .nav li.ia_mega .ia_mega_list_wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(min(1vw, 8px) / -2);
    width: 1px;
    background: #e0e0e0;
  }

  /* Right column: featured image. Image is absolutely positioned so its
     intrinsic size never contributes to the panel height; the column stretches
     to the left column's height and the image covers it. */
  .nav li.ia_mega .ia_mega_featured {
    flex: 2 1 0;
    min-width: 0;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin-right: 1rem;
  }

  .nav li.ia_mega .ia_mega_featured img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* A level-1 child's optional featured image. It overlays the right column
     using the same geometry as the level-2 list overlay, sitting above the
     default featured image (z 2) but below the list overlay (z 3). Hidden by
     default; fades in while that child is hovered. */
  .nav li.ia_mega ul.ia_mega_list > li > .ia_mega_child_featured {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: calc(100% + var(--ia-mega-col-gap)) !important;
    width: calc(200% - 1rem * 2) !important;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.25s ease,
      visibility 0s linear 0.25s;
  }

  .nav li.ia_mega ul.ia_mega_list > li:hover > .ia_mega_child_featured,
  .nav li.ia_mega ul.ia_mega_list > li.ia-active > .ia_mega_child_featured {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
  }

  .nav li.ia_mega ul.ia_mega_list > li > .ia_mega_child_featured img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .nav li.ia_mega ul.ia_mega_list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* children start from the top */
    align-items: stretch; /* each item fills the column width */
    gap: var(--ia-mega-gap);
    /* static (not relative) so this list is NOT the positioning anchor for the
       overlays inside it — they should anchor to .ia_mega_list_wrap (full column
       height) instead. static still defeats the parent's `left:-999em` hide,
       since `left` is ignored on static elements. */
    position: static !important;
    margin: 0 !important;
    width: 100%;
  }

  /* Each child item: bordered, rounded 4px */
  .nav li.ia_mega ul.ia_mega_list > li {
    border: 1px solid #0a0a0a;
    border-radius: 4px;
    position: relative !important;
    max-width: unset;
  }

  .nav li.ia_mega ul.ia_mega_list > li:hover,
  .nav li.ia_mega ul.ia_mega_list > li.ia-active {
    background-color: #e0e0e05b;
  }

  .nav li.ia_mega ul.ia_mega_list > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: none;
  }

  .nav li.ia_mega ul.ia_mega_list > li a {
    padding: 4px 8px !important;
    color: #0a0a0a;
    margin: 0 !important;
    width: 100%;
  }

  .nav li.ia_mega ul.ia_mega_list > li a:hover {
    text-decoration: none !important;
  }

  /* Leading icon in front of each child label */
  .nav li.ia_mega .ia_mega_icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
  }

  .nav li.ia_mega span.ia_mega_icon.dashicons {
    font-size: 20px;
    line-height: 20px;
  }

  .nav li.ia_mega img.ia_mega_icon--img {
    object-fit: contain;
  }

  /* Level-1 items must not be a containing block, so the overlay below anchors
     to .ia_mega_list_wrap (the left column) and fills it from the top, rather
     than to the hovered row. */
  .nav li.ia_mega ul.ia_mega_list > li {
    position: static !important;
  }

  /* Level-2+ subtree of a level-1 child: hovering that level-1 item replaces
     the featured image with this subtree, shown over the right column.
     Geometry mirrors .ia_mega_featured (left = 1 col + gap, width = 2 cols). */
  .nav li.ia_mega ul.ia_mega_list > li > ul {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important; /* span the full column reliably (percentage
       min-height can fail to resolve against the stretched .ia_mega_list_wrap,
       which left the overlay — and its hover bridge — too short for items lower
       down the list). */
    left: calc(100% + var(--ia-mega-col-gap)) !important;
    width: calc(200% - 1rem * 2) !important;
    margin: 0 !important;
    padding: 0 1rem 0 0;
    box-shadow: none;
    background: #fff;
    z-index: 3;
    /* Hidden until the level-1 item is hovered/active; the delayed-hide
       transition covers the moment between losing :hover and the saved
       `.ia-active` state taking over (ia-mega-menu.js). */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.15s ease,
      visibility 0s linear 0.15s;
  }

  /* Shown while the level-1 item is hovered OR while it is the saved-active
     child (ia-mega-menu.js). The `.ia-active` class is what keeps the subtree
     open as the cursor crosses the column gap toward it — no hover bridge
     needed; `:hover` is kept only for graceful degradation without JS. */
  .nav li.ia_mega ul.ia_mega_list > li:hover > ul,
  .nav li.ia_mega ul.ia_mega_list > li.ia-active > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 0.15s ease,
      visibility 0s;
  }

  /* Hide the featured image while a level-1 item with a subtree is active. */
  .nav
    li.ia_mega
    > ul.sub-menu:has(ul.ia_mega_list > li:hover > ul)
    .ia_mega_featured
    img,
  .nav
    li.ia_mega
    > ul.sub-menu:has(ul.ia_mega_list > li.ia-active > ul)
    .ia_mega_featured
    img {
    visibility: hidden;
  }

  /* Level-3+ deeper levels stay in normal flow inside the overlay, each level
     indented one step further from its parent. Their visibility / pointer-events
     are intentionally NOT forced here — they inherit from the level-2 overlay so
     that while the level-1 item is not hovered the whole subtree is hidden AND
     non-hit-testable. (Forcing them visible/auto made the invisible deeper list
     hoverable, which re-triggered the parent :hover and popped the overlay.) */
  .nav li.ia_mega ul.ia_mega_list > li > ul ul {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    min-height: 0;
    margin: 2px 0 0 16px !important;
    padding: 0;
    background: none;
    box-shadow: none;
    z-index: auto;
    transition: none;
  }

  /* Every item in the overlay subtree stacks vertically (not a horizontal
     row), full width, with its icon in front of the label. */
  .nav li.ia_mega ul.ia_mega_list > li > ul li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
  }

  .nav li.ia_mega ul.ia_mega_list > li > ul li > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 !important;
  }

  .nav li.ia_mega ul li > a {
    border-bottom: none;
  }

  .nav > .menu-item-has-children > a::after {
    top: 0;
    right: 0;
  }

  .nav
    > .menu-item-has-children.ia_mega
    .ia_mega_list
    .menu-item-has-children
    > a::after {
    top: 6px;
    right: 0;
  }

  .nav > .menu-item-has-children:not(.ia_mega) {
    & > .sub-menu {
      background: none;
      top: 100%;
      &::before {
        content: "";
        position: absolute;
        inset: 4px 0 0 0;
        background: #fff;
        border: 1px solid black;
      }
      &::after {
        border-left-color: black;
        top: -3px;
      }
      a {
        color: black;
        width: 100%;
        padding: 0 1rem !important;
        margin: 0;
      }
      li {
        padding: 0 !important;
        /* The parent theme is a superfish menu: it hides flyouts with
           `left: -999em` and, on :hover, flips this <li> to `position: static`
           (style.css:561) so its margin-based offset anchors to the top-level
           item. That static flip is what makes our flyout jump on hover.
           Keep this <li> relative so it stays the containing block, and only
           apply our anchoring in the shown state — otherwise our `left` would
           defeat the parent's `-999em` hide and the menu would never close. */
        position: relative;
        ul.sub-menu {
          border: 1px solid black;
        }
        &:hover > ul.sub-menu,
        &.sfhover > ul.sub-menu,
        &[aria-expanded="true"] > ul.sub-menu {
          top: 0;
          left: 100%;
          margin: 0;
        }
      }
    }
  }
}

/* @ia_mega mobile — collapse the desktop two-column mega panel back into the
   standard stacked accordion, matching how .mega behaves on mobile. The
   parent's general mobile rules + the .active toggle (ownScript.js) already
   drive show/hide; these rules only undo the desktop layout that our
   high-specificity / !important desktop rules would otherwise keep applying.
   Breakpoint mirrors the parent's .mega rules (style-mobile.css). */
@media screen and (max-width: 1155px) {
  /* Panel: drop fixed positioning / flex; let .active control visibility. */
  .nav li.ia_mega > ul.sub-menu {
    gap: 0 !important;
    padding: 0 0 0 20px !important;
  }

  /* No white panel backdrop or column divider on mobile. */
  .nav li.ia_mega > ul.sub-menu::before {
    display: none !important;
  }
  .nav li.ia_mega .ia_mega_list_wrap::after {
    display: none !important;
  }

  /* Left column: no enforced ~5-item min height. */
  .nav li.ia_mega .ia_mega_list_wrap {
    min-height: 0 !important;
  }

  /* Featured images are desktop-only (matches .mega, which has no image). */
  .nav li.ia_mega .ia_mega_featured,
  .nav li.ia_mega ul.ia_mega_list > li > .ia_mega_child_featured {
    display: none !important;
  }

  /* Child list: plain full-width block list. */
  .nav li.ia_mega ul.ia_mega_list {
    display: block !important;
    width: 100% !important;
  }

  /* Level-2+ subtree: back into normal flow (no right-column overlay), full
     width, fully visible. Display itself stays under the general
     .sub-menu / .active .sub-menu accordion rules — same as .mega. */
  .nav li.ia_mega ul.ia_mega_list > li > ul,
  .nav li.ia_mega ul.ia_mega_list > li > ul ul {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 0 16px !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}