/**
 * "Hire a Role" mega menu: static multi-column panel built from a plain
 * nested WordPress menu (Appearance > Menus, menu id 6, item id 2039), not
 * a mega-menu plugin widget. Decision (2026-08-14): ElementsKit's Nav
 * Menu widget was the only drag-and-drop mega-menu option available, but it
 * reloads ~510 KB of widget-styles.css/elementor.js site-wide, undoing the
 * same day's ElementsKit icon-font removal. This CSS instead reveals the
 * normally hover-only nested submenu (the role list under each function
 * group) statically, so every column shows at once under one "Hire a Role"
 * hover instead of a second cascading flyout per group.
 *
 * Structure:
 *   li.menu-item-2039 ("Hire a Role")
 *     ul.sub-menu                       <- becomes the grid of columns
 *       li.mega-group-header ("Admin & Executive", etc. - 6 of these)
 *         a.elementor-sub-item          <- column title, not a real link
 *         ul.sub-menu                   <- forced static/visible = column body
 *           li.mega-role-link           <- one per role page
 *
 * "Industries We Serve", "Our Company" and "Resources" are plain single-level
 * dropdowns and need none of this - they are deliberately not matched here.
 *
 * TWO SCOPING RULES THIS FILE MUST KEEP, both learned the hard way:
 *
 * 1. Scope every layout rule to `.elementor-nav-menu--main`. The menu markup
 *    is rendered MORE THAN ONCE per page (desktop nav plus the mobile
 *    off-canvas copy, which reuses the same `menu-item-2039` class). Without
 *    this the grid is applied to the mobile accordion too and breaks it.
 *
 * 2. NEVER set `display` on the top-level panel unconditionally. Its closed
 *    state is `display:none`; an unconditional `display:grid !important`
 *    overrides that and leaves the entire panel hanging open on the page
 *    (observed live on dev 2026-08-14, before this was corrected). SmartMenus
 *    - which drives this menu - sets an inline `display:block` when opening,
 *    so the open state is matched via that inline style, with :hover and
 *    :focus-within as the no-JS fallback. The ONLY rule in this file that
 *    sets `display` on the panel is the open-state selector.
 *
 * WHY THE PANEL IS `position: fixed` (rewritten 2026-08-15, measured in real
 * Chrome). The panel used to be absolutely positioned against
 * `ul.elementor-nav-menu`, which is 938px wide and sits at x=512 in a 1521px
 * document. A containing block that is neither full-width nor centred cannot
 * produce a viewport-centred panel at ANY width: `max-width:100%` capped it at
 * 938px, and the usual `left:50%; margin-left:-50vw` breakout only works when
 * the containing block is itself centred, which this one is not.
 *
 * `position: fixed` makes the viewport the containing block, so `left:50%` +
 * `translateX(-50%)` centres exactly and `width` can be stated in `vw`.
 * Verified safe before adopting: NO ancestor of the panel has a `transform`,
 * `filter` or `perspective` (any of which would silently re-root a fixed
 * element), and no ancestor has `overflow:hidden`. The site header is itself
 * `position: fixed`, so a fixed panel tracks it correctly on scroll.
 *
 * THE COST of fixed positioning is that `top` can no longer be `100%` of an
 * ancestor - it has to be stated. `top:auto` does NOT work: it falls back to
 * the static position, which measured 770px down the page. Hence the two
 * constants below. They are the only layout numbers in this file tied to the
 * header's design, so if the header height is ever changed in Elementor,
 * THESE ARE WHAT NEEDS UPDATING - the symptom would be the panel detaching
 * from the header with a visible gap, or overlapping it.
 */

body {
	/* Distance from the top of the viewport to the BOTTOM of the header bar,
	   i.e. where the panel starts. Header is 126px tall at >=1025px. */
	--aseo-mega-top: 126px;

	/* Dead zone between the bottom of the menu ITEM (118px) and the top of the
	   panel (158px) when logged in - the header bar continues for 40px below
	   the nav row. Without a bridge across it the pointer leaves the <li> on
	   the way to the panel and the CSS :hover state drops. Admin-bar
	   independent: the bar shifts the item and the panel by the same 32px. */
	--aseo-mega-bridge: 40px;

	/* Panel width, stated once because the hover bridge below MUST span exactly
	   the same horizontal range - see that rule. Overridden at >=1300px. */
	--aseo-mega-width: min(94vw, 1180px);
}

/* WordPress adds `admin-bar` to <body> only when the 32px bar is rendered, so
   this is the standard way to keep a fixed element aligned for logged-in
   users without guessing. */
body.admin-bar {
	--aseo-mega-top: 158px;
}

@media (min-width: 1025px) {

	/* Layout only. No `display` here on purpose - see rule 2 above. These are
	   inert while the panel is closed.

	   `!important` on position/top/left/width/max-width/margin is not
	   defensive habit: the theme sets `top:100%` and `width:max-content` with
	   `!important` of its own, and without matching it the panel lands 770px
	   down the page at the wrong width. Measured, not assumed - a
	   higher-specificity selector without `!important` was tried first and
	   lost on exactly those two properties.

	   Narrow desktop (1025-1299px) gets TWO role columns: at 80vw a third
	   column drops the role names to 124px wide and wraps
	   "Email & Calendar Management Assistant" over five lines. It also takes a
	   larger share of the viewport (94vw), because there is simply less room
	   to give away down here. */
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu {
		box-sizing: border-box;
		position: fixed !important;
		/* Starts flush against the menu ITEM, not the visible header edge - see
		   the padding-top note below for why. */
		top: calc(var(--aseo-mega-top) - var(--aseo-mega-bridge)) !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translateX(-50%);
		width: var(--aseo-mega-width) !important;
		max-width: none !important;
		margin: 0 !important;

		/* A tall panel on a short laptop viewport would otherwise run off the
		   bottom with no way to reach the last row - measured 735px of content
		   against a 770px viewport. `contain` stops the scroll chaining to the
		   page behind it. Unchanged by the `top` shift above: the box now starts
		   --aseo-mega-bridge higher but keeps the same max-height, so it simply
		   ends that much further from the viewport bottom - harmless. */
		max-height: calc(100vh - var(--aseo-mega-top) - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;

		z-index: 999;

		grid-template-columns: repeat(2, minmax(0, 1fr)) 240px;
		/* Explicit rows are what makes `grid-row: 1 / -1` work on the promo
		   rail - see the .mega-promo rule. 6 groups across 2 columns = 3. */
		grid-template-rows: repeat(3, auto);
		gap: 26px 30px;
		/* Top padding is 28px of visible spacing PLUS --aseo-mega-bridge (40px)
		   of invisible hover-gap coverage - see the note below. Left/right/bottom
		   unchanged. */
		padding: calc(28px + var(--aseo-mega-bridge)) 30px 28px;

		background: #FFFFFF;
		border: 1px solid rgba(0, 0, 0, 0.10);
		/* Sits flush against the header bar, so the top edge would be a seam. */
		border-top: none;
		border-radius: 0 0 14px 14px;
		box-shadow: 0 18px 44px rgba(0, 0, 0, 0.13);
	}

	/* The open state, and the only place `display` is set. */
	.elementor-nav-menu--main .menu-item-2039:hover > .sub-menu,
	.elementor-nav-menu--main .menu-item-2039:focus-within > .sub-menu,
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu[style*="block"] {
		display: grid !important;
	}

	/* ★ THE DEAD ZONE (--aseo-mega-bridge, the 40px between the menu item's
	   118px bottom and the panel's un-padded 158px top) IS COVERED BY THE
	   PANEL'S OWN BOX, not a separate bridge element. Two approaches were
	   tried and rejected before this one, both live-tested in real Chrome on
	   dev 2026-08-19 after the bug was reported ("opens on hover, closes
	   before I can click a role"):

	   1. A `::after` pseudo-element on the menu item, geometrically matched to
	      the panel (fixed, same centring/width) but generated only while the
	      item is `:hover`. This is the standard mega-menu hover-bridge
	      pattern and it LOOKS correct - `document.styleSheets` confirmed the
	      exact intended rule was the only one loaded, and an identical real
	      (non-pseudo) `<div>` placed at the same coordinates DID hit-test
	      correctly via `elementFromPoint`, proving the geometry, z-index and
	      stacking context were all fine. But it still failed live: stepping
	      the pointer through five intermediate points from the item to a
	      column on the right, `.menu-item-2039:hover` still evaluated to
	      `false` and the panel stayed `display:none`. A pseudo-element's
	      existence depends on the very `:hover` state it's supposed to
	      sustain - real elements don't have that circularity, which is
	      exactly why the manual `<div>` test passed where the CSS pseudo
	      didn't. Do not reintroduce this approach without a live hover-path
	      test, not just a geometry check.
	   2. A pseudo on the PANEL instead of the item - rejected at design time
	      because the panel has `overflow-y:auto`, which clips absolutely
	      positioned children; making the pseudo `position:fixed` to escape
	      that clip just reintroduces failure mode 1 above.

	   The fix that actually held up: extend the panel's own real, always-
	   existing box upward by `--aseo-mega-bridge` via `top` and `padding-top`
	   (see the panel rule above) instead of adding a second element. The
	   panel is a DOM descendant of the `<li>`, so hovering the panel (now
	   including its extended top padding) keeps `.menu-item-2039:hover` true
	   through ordinary CSS ancestor propagation - no bridge, no pseudo, no
	   circularity. The header's own fixed wrapper measures `z-index: 99`
	   there (checked live), well under the panel's `999`, so the extension
	   doesn't get shadowed by header chrome. */

	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-group-header {
		min-width: 0;
	}

	/* Column title: a real <a href="#"> that must not behave like a link.

	   Was 12px uppercase at opacity 0.65, which computed to roughly 2.6:1
	   against white - below the 4.5:1 AA floor and hard to scan. Now Deep
	   Green (#1D7151, brand kit) at full opacity, ~5.5:1, sentence case and
	   larger. NEVER reintroduce `opacity` here: it multiplies against the
	   text colour, so any contrast the colour buys is silently given back. */
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-group-header > a.elementor-sub-item {
		display: block;
		pointer-events: none;
		cursor: default;
		color: #1D7151;
		font-weight: 700;
		font-size: 15px;
		line-height: 1.3;
		text-transform: none;
		letter-spacing: 0;
		padding: 0 0 9px;
		margin-bottom: 10px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.09);
		/* The theme sets nowrap on menu anchors. At 12px uppercase that was
		   invisible; at 15px "Sales & Business Development" runs straight over
		   the next column's heading. */
		white-space: normal;
	}

	/* SmartMenus injects a <span class="sub-arrow"> into every parent anchor.
	   Inside this panel the submenus are already forced open and static, so the
	   arrow points at nothing - it just rendered as a stray triangle under each
	   column title. Scoped to the panel so real dropdown arrows elsewhere in
	   the nav are untouched. */
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu .sub-arrow {
		display: none;
	}

	/* Force the role list open and static instead of its default hover
	   flyout. Safe to make unconditional: while the panel above is closed
	   these are inside a display:none ancestor and render nothing. */
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-group-header > .sub-menu {
		position: static !important;
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: transparent;
		box-shadow: none;
	}

	/* Role names wrap rather than force the column wider - several are long
	   ("Accounts Payable / Accounts Receivable Specialist"). Accent (#2C211B,
	   brand kit) rather than an inherited grey: ~14:1 against white. */
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-group-header > .sub-menu > .mega-role-link > a {
		display: block;
		padding: 6px 8px;
		margin: 0 -8px;
		border-radius: 6px;
		color: #2C211B;
		font-size: 14.5px;
		line-height: 1.45;
		white-space: normal;
		text-decoration: none;
	}

	/* Light green (brand-kit-sanctioned tint, not an ad-hoc hex): background
	   highlight for hover/focus, one shade stronger for the actual click
	   (:active). Text stays Deep Green/Darkest Green - both official brand
	   hexes - because the tints themselves are ~1.5-2:1 against white and
	   fail the 4.5:1 AA floor as TEXT colour (same reasoning as the column-
	   title contrast fix above in this file); as a background behind dark
	   text they carry no such constraint. `display:block` + horizontal
	   `margin/padding` make the highlight span the row rather than just the
	   text glyphs - `margin: 0 -8px` cancels the added `padding: 0 8px` so
	   the visible text position is unchanged from before this rule. */
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-group-header > .sub-menu > .mega-role-link > a:hover,
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-group-header > .sub-menu > .mega-role-link > a:focus-visible {
		background-color: #E4F6EC;
		color: #1D7151;
		text-decoration: underline;
	}

	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-group-header > .sub-menu > .mega-role-link > a:active {
		background-color: #6FCB9E;
		color: #194035;
		text-decoration: underline;
	}

	/* Promo card: the full-height right rail, divided from the role columns
	   the way a sidebar is.

	   `1 / -1` is correct ONLY because the panel now declares
	   `grid-template-rows` explicitly. It was previously `span 2`, because -1
	   counts back through the EXPLICIT row grid and the panel used to declare
	   columns only - so its rows were implicit, -1 resolved back to line 1, and
	   the rail's divider ran 403px of an 860px panel. With explicit rows the
	   rail spans whatever the current breakpoint declares, and the row count no
	   longer has to be restated here. Adding a 7th group means updating
	   `grid-template-rows` in the two panel rules; this rule is unaffected. */
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-promo {
		display: block;
		grid-column: -2;
		grid-row: 1 / -1;
		align-self: stretch;
		padding-left: 30px;
		border-left: 1px solid rgba(0, 0, 0, 0.09);
	}

	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-promo .mega-promo__card {
		background: #FAFAF7;
		border: 1px solid rgba(0, 0, 0, 0.07);
		border-radius: 10px;
		padding: 20px;
	}

	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-promo .mega-promo__heading {
		margin: 0 0 8px;
		color: #194035;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
	}

	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-promo .mega-promo__body {
		margin: 0 0 16px;
		color: #2C211B;
		font-size: 13.5px;
		line-height: 1.5;
	}

	/* Yellow on near-black (~11:1), matching the site's existing primary CTA.
	   White on brand green would only reach ~2.4:1 and fail AA. */
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-promo .mega-promo__cta {
		display: block;
		background: #F7CD40;
		color: #2C211B;
		border-radius: 999px;
		padding: 11px 16px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.25;
		text-align: center;
		text-decoration: none;
		/* Same inherited nowrap as the headings: the label is wider than the
		   rail, so without this it runs outside the pill. */
		white-space: normal;
	}

	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-promo .mega-promo__cta:hover,
	.elementor-nav-menu--main .menu-item-2039 > .sub-menu > .mega-promo .mega-promo__cta:focus-visible {
		background: #E9BE2E;
		color: #2C211B;
	}
}

/* Wide desktop: three role columns plus the rail, at 80% of the viewport.
   1300px is where 80vw leaves each role column at least ~200px, which is the
   width at which no role name wraps past two lines. Measured across the panel
   widths 80vw produces: 820px/124px per column (5 lines), 960px/171px (3
   lines), 1152px/235px (2 lines), 1500px/351px (2 lines). The 1500px cap stops
   the panel becoming a full-bleed band on ultrawide monitors. */
@media (min-width: 1300px) {
	body {
		--aseo-mega-width: min(80vw, 1500px);
	}

	.elementor-nav-menu--main .menu-item-2039 > .sub-menu {
		grid-template-columns: repeat(3, minmax(0, 1fr)) 260px;
		/* 6 groups across 3 columns = 2. */
		grid-template-rows: repeat(2, auto);
		gap: 30px 40px;
		/* Same +bridge top pad as the 1025px rule - see that rule's comment. */
		padding: calc(34px + var(--aseo-mega-bridge)) 40px 34px;
	}
}

/* The promo item is appended to EVERY render of this menu (inc/mega-menu.php
   explains why it cannot be limited to the desktop copy), so it is hidden by
   default and revealed only by the desktop rules above. Without this it drops
   into the mobile accordion as a stray card. */
.mega-promo {
	display: none;
}

/**
 * Placeholder nav entries for sections that are announced but not built yet
 * (currently "Case Studies (Coming Soon)" under Resources). Applied via the
 * menu item's own CSS Classes field in Appearance > Menus, so retiring one is
 * a menu edit, not a code change. Unscoped on purpose - it should hold on
 * mobile too.
 *
 * pointer-events:none is what actually makes it unclickable; the cursor and
 * opacity changes are so it reads as deliberately inactive rather than as a
 * broken link. aria-disabled is not set (WordPress offers no way to add it to
 * a menu item's anchor), so this is a visual/pointer affordance only.
 */
.nav-coming-soon > a {
	pointer-events: none;
	cursor: default;
	opacity: 0.55;
}