/* ===================== New simplified mega-menu styles ===================== */
/* Used by includes/menu-new.php (the redesigned Company / Product /
   Services / Resources dropdown menu). Extracted from an inline <style>
   block into this external file. */

.biz4-menu-new .list-wrapper {
   position: static;
}

.biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper {
   position: relative;
}

.biz4-menu-new .list-wrapper .simple-menu .simple-link {
   cursor: pointer;
}

.biz4-menu-new .list-wrapper .dropDownMenu-Wrapper:hover>.simple-link {
   color: #3398CC;
}

.biz4-menu-new .list-wrapper .dropDownMenu-Wrapper:hover .down svg path {
   fill: #3398CC;
}

/* dropdown panel
   Anchored to the left of its trigger by default, but never wider than
   the viewport (minus a 16px gutter each side) so it can't be clipped
   by the browser edge at any breakpoint. Columns dropdowns (Product /
   Services) additionally scroll horizontally once they can't fit all
   columns side by side at their natural width. */
.biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper .simple-dropdown {
   display: none;
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
   min-width: 260px;
   max-width: calc(100vw - 32px);
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 12px 40px rgba(20, 30, 60, 0.14);
   border: 1px solid #EEF1F6;
   padding: 8px 0;
   margin: 0;
   z-index: 999;
   list-style: none;
   overflow-x: hidden;
   overflow-y: visible;
   -webkit-overflow-scrolling: touch;
}

/* Only constrain height and scroll on short viewports (e.g. laptops
   with the browser window shrunk down) — at normal heights the panel
   should size to its content, not scroll. */
@media (max-height: 580px) {
   .biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper .simple-dropdown {
      max-height: calc(100vh - 100px);
      overflow-y: auto;
   }
}

/* invisible bridge over the gap so the pointer never leaves the
   hoverable area between the nav item and the dropdown panel */
.biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper .simple-dropdown::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -8px;
   height: 8px;
}

.biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper .simple-dropdown.simple-dropdown-columns {
   display: none;
   flex-wrap: nowrap;
   gap: 0;
   /* no vertical padding here — each .simple-dropdown-col carries its
      own top/bottom padding instead (see below), so the space at the
      end of a scrolled column is real content-box padding rather
      than padding on this flex container, which didn't reliably
      reserve space once overflow-y:auto + a fixed max-height forced
      this element to scroll. */
   width: max-content;
   min-width: 0;
   /* left/transform are set dynamically by JS on open (see script
      below) — it measures the panel's actual rendered width and
      nudges it left/right only as much as needed to stay fully
      inside the viewport, regardless of where the trigger sits. */
}

/* Visibility is primarily driven by JS toggling .is-open (see script
   below) — because the panel can be shifted away from being directly
   under its trigger (see JS positioning), a plain :hover-adjacency
   rule alone loses the hover state while the pointer travels between
   the two, closing the menu prematurely. JS treats "hovering the
   trigger OR the panel" as one continuous hover state.
   The plain :hover selector is also kept here (in addition to
   .is-open) purely so DevTools' "Force element state > :hover"
   still shows the panel for design/QA inspection — real mouse use
   goes through the JS path above. */
.biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper .simple-dropdown.is-open,
.biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper:hover .simple-dropdown {
   display: block;
}

.biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper .simple-dropdown.simple-dropdown-columns.is-open,
.biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper:hover .simple-dropdown.simple-dropdown-columns {
   display: flex;
}

.biz4-menu-new .simple-dropdown-col {
   flex: 0 0 auto;
   padding: 20px 28px;
   list-style: none;
}

/* ---- breakpoint tuning ----
   >=1200px : full-size columns, generous padding (default rules above)
   992-1199px : slightly tighter column padding so 3-column panels
                (Services) are more likely to fit without scrolling
   768-991px  : the desktop mega-menu is hidden by hidden-xs/hidden-sm
                below 992px anyway (mobile slide-menu takes over), but
                these rules keep the dropdown safe if it is ever shown
   320-767px  : same safety as above */
@media (max-width: 1199px) {
   .biz4-menu-new .simple-dropdown-col {
      padding: 20px 20px;
   }
}

@media (max-width: 991px) {
   /* Anchor to the viewport (position: fixed) instead of the trigger,
      so the panel is always fully on-screen no matter where its nav
      item sits (e.g. Resources near the right edge). The exact `top`
      is set inline by JS (see script below) to sit right under the
      nav bar, since that height varies by breakpoint. */
   .biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper .simple-dropdown {
      position: fixed;
      left: 16px;
      right: 16px;
      width: auto;
      max-width: none;
      transform: none;
   }

   .biz4-menu-new .list-wrapper .simple-menu.dropDownMenu-Wrapper .simple-dropdown.simple-dropdown-columns {
      flex-wrap: wrap;
      width: auto;
      transform: none;
   }

   .biz4-menu-new .simple-dropdown-col {
      flex: 1 1 100%;
   }
}

/* Mobile slide-out submenu (Company / Product / Services / Resources
   panels under 992px): only the link list itself scrolls, capped to
   350px — the "Back" button and panel title stay fixed in place
   above it instead of scrolling away with the links. */
.biz4-mobile-menu.biz4-menu-new .submenu .navlink-wrapper {
   max-height: 350px;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}

/* Category labels inside the mobile Product / Services lists — mirrors
   the desktop mega-menu's grouping (e.g. "AI Services", "Industries
   Solutions") as plain, non-clickable section headings rather than a
   flat list of links with no grouping context. */
.biz4-mobile-menu.biz4-menu-new .navlink-wrapper li.mobile-category-heading {
   padding: 14px 12px 4px;
   margin: 0;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.4px;
   color: #8A93A6;
}

.biz4-mobile-menu.biz4-menu-new .navlink-wrapper li.mobile-category-heading:first-child {
   padding-top: 4px;
}

.biz4-menu-new .simple-dropdown-heading {
   font-size: 16px;
   font-weight: 700;
   text-transform: none;
   color: #273C59;
   margin: 0 0 8px;
   padding: 0 24px;
   letter-spacing: 0.2px;
}

.biz4-menu-new .simple-dropdown-columns .simple-dropdown-heading {
   padding: 0;
   margin: 0 0 4px;
}

/* Symmetric spacing above every heading that starts a new group after
   a previous one (list or subtext) — single rule so any column's
   groups stay evenly spaced regardless of what the prior group ends
   with. */
.biz4-menu-new .simple-dropdown-columns .simple-dropdown-list+.simple-dropdown-heading,
.biz4-menu-new .simple-dropdown-columns .simple-dropdown-subtext+.simple-dropdown-heading {
   margin-top: 14px;
}

.biz4-menu-new .simple-dropdown-heading-link {
   color: #3398CC;
   margin-top: 14px;
}

.biz4-menu-new .simple-dropdown-subtext {
   font-size: 12px;
   color: #8A93A6;
   margin: 0 0 8px;
   padding: 0 0 12px;
   white-space: nowrap;
}

/* "Svermo.ai" is a link to the external product site, but keeps the
   exact same look as the plain subtext it replaced — no blue link
   color or underline, just the same muted gray text. */
.biz4-menu-new .simple-dropdown-subtext-link {
   /* color: #31313399; */
   color: #000;
   font-size: 13px;
   font-weight: 500;
   text-decoration: none;
}

.biz4-menu-new .simple-dropdown-subtext-link:hover {
   text-decoration: underline;
}

/* bottom border under a whole group (heading + its list), used where a
   group needs to be visually closed off, e.g. "Metric Flow" and
   "AI for Real Estate" / Svermo.ai */
.biz4-menu-new .simple-dropdown-subtext-bordered {
   border-bottom: 1px solid #EEF1F6;
}

.biz4-menu-new .simple-dropdown-list-bordered {
   padding-bottom: 10px;
   margin-bottom: 8px;
   border-bottom: 1px solid #EEF1F6;
}

.biz4-menu-new .simple-dropdown-list {
   list-style: none !important;
   margin: 0;
   padding: 0;
}

.biz4-menu-new .simple-dropdown-list li {
   margin: 0;
   padding: 0;
   list-style: none;
}

/* row separators between simple (non-column) dropdown links, e.g. Company / Resources */
.biz4-menu-new .simple-dropdown:not(.simple-dropdown-columns) .simple-dropdown-list li+li {
   border-top: 1px solid #EEF1F6;
}

.biz4-menu-new .simple-dropdown-list li a {
   display: block;
   padding: 12px 24px;
   font-size: 14px;
   font-weight: 600;
   color: #273C59;
   text-decoration: none;
   border-radius: 6px;
   transition: background 0.15s ease, color 0.15s ease;
   letter-spacing: normal;
}

/* title: same look as before (was plain text directly inside <a>),
   now wrapped in its own tag so title and description are two
   distinct elements with matching styling to today's output */
.biz4-menu-new .simple-dropdown-title {
   display: block;
   margin: 0;
   padding: 0;
   font-size: 14px;
   font-weight: 600;
   color: #273C59;
   letter-spacing: normal;
}

/* Same rounded, inset hover box as the simple dropdowns (Company /
   Resources): horizontal padding + border-radius on the link, offset
   by a matching negative margin so the column's visible content
   width and the row dividers below are unaffected. */
.biz4-menu-new .simple-dropdown-columns .simple-dropdown-list li a {
   padding: 12px 10px;
   margin: 0 -10px;
   border-radius: 6px;
   max-width: 400px;
   line-height: normal;
}

.biz4-menu-new .simple-dropdown-list li a span {
   display: block;
   font-size: 13px;
   font-weight: 500;
   /* color: #31313399; */
   color: #000;
   margin-top: 2px;
}

.biz4-menu-new .simple-dropdown-columns .simple-dropdown-list li a span {
   margin-top: 5px;
}

/* row separators between links inside multi-column dropdowns, e.g. Product / Services */
.biz4-menu-new .simple-dropdown-columns .simple-dropdown-list li+li {
   border-top: 1px solid #EEF1F6;
   margin-top: 0;
   padding-top: 0;
}

.biz4-menu-new .simple-dropdown-list-plain li a {
   padding: 9px 0;
}

/* Hover feedback (text color + background) is identical across every
   dropdown — Company, Product, Services, Resources — so the menu
   reads as one consistent system rather than each panel having its
   own hover behavior. */
.biz4-menu-new .simple-dropdown-list li a:hover {
   color: #3398CC;
   background: #F5F8FC;
   text-decoration: none;
}

.biz4-menu-new .simple-dropdown-list li a:hover .simple-dropdown-title {
   color: #3398CC;
}

/* mobile: keep default biz4-mobile-menu look from main-menu.css */