/* GC mega-menu (GH-mega). Replaces the 5-item "Roles We Hire" desktop dropdown
   with a grouped mega-panel (5 columns: Engineering, Marketing, Sales & Support,
   Design & Creative stacked above Operations & Admin, By Region). Markup is
   injected by scripts/postprocess-lift.mjs in place of the desktop ul.sub-menu
   for that menu item only (mobile nav.elementor-nav-menu--dropdown is untouched
   and keeps its plain 5-item list). Positioned against the header's boxed inner
   wrapper (.e-con-inner, scoped to .elementor-location-header so this doesn't
   touch the many other .e-con-inner containers used throughout page bodies) so
   the panel spans the header content width and stays aligned with the logo's
   left edge and the Hire Now button's right edge at other viewport widths. */

.elementor-location-header .e-con-inner {
  position: relative;
}

/* Elementor's own per-page CSS sets position:relative on several ancestors
   between the Roles We Hire <li> and the header's boxed .e-con-inner above
   (the nav's own <ul>, the nav-menu widget wrapper elementor-element-c0b63eb,
   and its e-con-full parent elementor-element-78db505) -- each narrower than
   e-con-inner, so .gcx-mega's absolute positioning (explicit left/right
   insets below) would resolve against whichever of those is nearest instead
   of the full header width. Neutralize them so e-con-inner is the sole
   positioning context. These element ids are the shared header template's
   (elementor_library id 668) and are identical on every lifted page. */
.elementor-location-header .e-con-inner nav.elementor-nav-menu--main,
.elementor-location-header .e-con-inner nav.elementor-nav-menu--main ul.elementor-nav-menu,
.elementor-location-header .e-con-inner [data-id="c0b63eb"],
.elementor-location-header .e-con-inner [data-id="78db505"] {
  position: static;
}

.elementor-nav-menu--main .menu-item-860 {
  position: static;
}

.elementor-nav-menu--main .gcx-mega {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.12) 0 8px 24px 0;
  padding: 28px 32px 22px;
  z-index: 9999;
  text-align: left;
}

.elementor-nav-menu--main .menu-item-860:hover > .gcx-mega,
.elementor-nav-menu--main .menu-item-860:focus-within > .gcx-mega {
  display: block;
}

.gcx-mega__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}

.gcx-mega__col--stacked {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.gcx-mega__heading {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ececec;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #112241;
}

/* The lift's SmartMenus base stylesheet has broad, unscoped rules for ANY
   nested <ul> inside .elementor-nav-menu -- "display: none" (flyout-menu
   default-collapsed state) and "position: absolute; width: 12em" (classic
   dropdown sizing), the former plain and the latter (via the "> li ul"
   variant) shipping "top: 100% !important". Since .gcx-mega__list is a <ul>
   nested inside the Roles We Hire <li>, it matches all of those and would
   otherwise render at zero height, absolutely positioned, 12em wide. Force
   it back to a normal, static, full-width block; !important is required to
   beat the "top: 100% !important" rule regardless of stylesheet order. */
.elementor-nav-menu--main .gcx-mega__list {
  display: block !important;
  position: static !important;
  width: auto !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gcx-mega__list li {
  margin: 0;
}

.gcx-mega__list a {
  display: block;
  padding: 5px 0;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #333;
  white-space: normal;
  text-decoration: none;
}

.gcx-mega__list a:hover {
  color: #112241;
}

.gcx-mega__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #ececec;
}

.gcx-mega__viewall {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #112241;
  text-decoration: none;
  white-space: nowrap;
}

.gcx-mega__viewall:hover {
  text-decoration: underline;
}

.gcx-mega__note {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #767676;
  text-align: right;
}