/* $Id: b7dfe1d859fe3e6ed541b806dabbaf1f3702cb55 $ */

HEADER > .container {
	position: relative;
}

HEADER #nav-button {
	position: absolute;
	top: 20px;
	right: 20px;
	width: auto;
	padding: 0;
	font-size: x-large;
	color: #777;
	cursor: pointer;
	/* reset the UA button chrome now that this is a real <button> (a11y: keyboard operable) */
	background: none;
	border: 0;
	line-height: 1;
}

HEADER #nav-button:focus-visible {
	outline: 2px solid #0076cf;
	outline-offset: 2px;
}

HEADER .navbar {
	font-family: 'Figtree Medium', Helvetica, Arial, sans-serif;
	font-size: 20px;
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: 0;
	min-height: inherit;
	border: none;
	padding: 0;
	width: auto;
}

HEADER .navbar .container-fluid {
	padding: 0;
}

HEADER li.dropdown {
	padding: 0 0 13px 0;
	margin: 0 4px 0 0;
}

/*HEADER ul.nav li.dropdown:hover > .arrow, -- causes bad UI on IPad; menus require dbl-clk to open */
HEADER ul.navbar-nav li.dropdown.on > .arrow {
	display: block;				/* the script has be able to change this */
}
HEADER ul.navbar-nav li.dropdown.show > .arrow {
	display: block !important;	/* must always override the script */
}

HEADER .navbar-nav A {
	padding: 10px 15px;
	color: var(--hej-ink);
	/* Names the weight ladder explicitly: HEADER .navbar sets 'Figtree Medium',
	   a single-weight alias, so a 600 there is synthesized on top of an already
	   medium face and reads too heavy. This draws real SemiBold instead. */
	font-family: var(--hej-font);
	font-weight: 600;
	line-height: 1.5;
}
HEADER .navbar-nav A:hover {
	text-decoration: none;
	color: var(--hej-ink);
}
HEADER .navbar-expand-md .navbar-nav .nav-link {
	padding: 10px 15px;
}

/* The panel's own surface is set once, further down, on HEADER .dropdown-menu.
   This rule used to cover the menu AND its links together at #333; links now sit
   transparently on that surface so hover can tint the row. */
HEADER .navbar-nav .dropdown-menu A {
	background-color: transparent;
	color: #fff;
	border-radius: 6px;
	transition: color .16s ease, background-color .16s ease, padding-left .2s ease;
}

/* Bring over old BS3 styling - only applies to My Account menu.

   RE-1130 P89: it said "only applies to My Account menu" and did not. Written
   unscoped, `.dropdown-menu > li > a` reached every <li><a> dropdown on the site --
   and the only other one is the in-page nav on
   www/articles/InclusiveWorkplaceSection.cfm, where the `margin-left: -12px` below
   hung each anchor 11px off the panel's left edge. Invisible at rest; on hover the
   item's background painted that overhang and the band jutted out to the left, which
   is what Marketing reported.

   The -12px is real and wanted HERE: the accent bar at `HEADER .dropdown-menu > li >
   a:before` (further down this file) is positioned `left: 0` against it. So the fix
   is to give the selector the scope its own comment already claimed.

   Surveyed before scoping, on / , /podcasts/, /search/today.cfm and the section page
   at 1400px and 390px with the mobile drawer open: 7 matches per page, all inside
   HEADER, plus the 3 on the section page. Nothing else depends on this rule --
   employer ApproveJobs.cfm looks like a counter-example but uses BS5's .dropdown-item,
   which this selector never matched. */
HEADER .dropdown-menu > li > a {
	display: block;
	padding: 5px 12px;
	margin-left: -12px;
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
	text-decoration: none;
}

HEADER .dropdown > .dropdown-toggle::after {
	display: none;
}

/* The active/open marker, converged on the design system's gold underline.
   The downward-pointing pennant that used to hang below it (a 100px-wide CSS
   triangle in :after) is gone - the DS marker is a plain rounded bar.

   The design system hides .arrow outright and draws the marker with
   .nav-item::after instead. Kept as a real element here on purpose:
   menuNav.bs5.js hides and restores it (lines ~142 and ~153) so that only ONE
   marker shows when a section is active AND another menu is open. A pure-CSS
   ::after on .on and :hover would show both, and would make that logic dead. */
HEADER .dropdown .arrow {
	display: none;
	bottom: 0;
	left: 12px;
	right: 12px;
	position: absolute;
	background-color: var(--hej-gold);
	height: 5px;
	border-radius: 3px 3px 0 0;
	margin: 0;
	padding: 0;
	z-index: 1001;
}

HEADER li.dropdown.show .dropdown-menu {
	display: block;
}

/* Mega-menu panel converged on the design system's .hej-nav-panel (RE-1130
   Phase 5): one deep dark surface with a full 12px corner, a hairline edge, a
   deep lift, and a gold gradient hairline along the top.

   The panels were ALREADY dark before this - the links painted themselves #333
   onto a light container, which left pale seams between rows. This unifies that
   onto a single surface rather than inverting a light menu.

   Deliberately NOT adopting the prototype's opacity/visibility show-hide model.
   Our panels are opened by menuNav.bs5.js toggling .show, and the <noscript>
   block in pageHeader.bs5.cfm falls back to `display: block` on hover; both
   depend on display, so switching to opacity would break the no-JS path. Only
   appearance changes here. */
HEADER .dropdown-menu {
	top: 63px;
	left: 14px;
	width: 244px;
	margin-top: 12px;
	/* Design-system panel padding. Every width below is the old content width plus
	   these 64px of horizontal padding, so columns keep the room they had. */
	padding: 28px 32px;
	background-color: var(--hej-nav-panel);
	border: 1px solid var(--hej-nav-panel-line);
	border-radius: var(--hej-r-md);
	box-shadow: 0 32px 72px -20px rgba(0, 0, 0, .95);
}
/* The 12px gap above the panel would otherwise be dead space the pointer has to
   cross, which matters on the no-JS hover path. This bridges it invisibly. */
HEADER .dropdown-menu:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -13px;
	height: 13px;
}
/* Gold hairline along the panel's top edge. */
HEADER .dropdown-menu:after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	top: -1px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(240, 171, 0, .55) 20%,
	                            rgba(240, 171, 0, .55) 80%, transparent 100%);
}
HEADER .dropdown-menu.two-column {
	width: 404px;
}
HEADER .dropdown-menu.three-column {
	width: 614px;
}
HEADER .dropdown-menu.employer {
	width: 464px;
}
HEADER .dropdown-menu.right-hand {
	left: auto;
	right: 11px;
}
/* Was `left: auto; right: 11px` to hang a fixed-width 100px bar off the right
   for the right-aligned menus. The marker now stretches between the nav item's
   own edges, which is already correct on either side, so the override would only
   collapse it to zero width - it is neutralised rather than removed so the
   .right-hand markup needs no edit. */
HEADER .dropdown .arrow.right-hand {
	left: 12px;
	right: 12px;
}

HEADER .dropdown-menu li {
	padding: 0;
	margin-top: 2px;
}
/* The panel's own 28px top padding sets the first row off now, so the old 15px
   nudge here would double it. */
HEADER .dropdown-menu li:not(.megamenu):first-child {
	margin-top: 0;
}
/* Hover: the design system tints the row, turns the label gold and slides it off
   a gold rule that appears at the left edge. */
HEADER .dropdown-menu li:hover,
HEADER .dropdown-menu li a:hover {
	background-color: var(--hej-nav-panel-2);
	color: var(--hej-gold);
}
HEADER .dropdown-menu li.megamenu:hover,
HEADER .dropdown-menu li.megamenu a:hover {
	background-color: transparent;
}
HEADER .dropdown-menu .megamenu ul li a,
HEADER .dropdown-menu > li > a {
	position: relative;
}
HEADER .dropdown-menu .megamenu ul li a:before,
HEADER .dropdown-menu > li > a:before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 2px;
	border-radius: 2px;
	background-color: transparent;
	transition: background-color .2s ease;
}
HEADER .dropdown-menu .megamenu ul li a:hover,
HEADER .dropdown-menu > li > a:hover {
	background-color: var(--hej-nav-panel-2);
	color: var(--hej-gold);
	padding-left: 16px;
}
HEADER .dropdown-menu .megamenu ul li a:hover:before,
HEADER .dropdown-menu > li > a:hover:before {
	background-color: var(--hej-gold);
}

HEADER .dropdown-menu li a {
	clear: none;
}
/* Panel link icons, per the design system: gold, on a fixed width so the labels
   line up whatever glyph precedes them. */
HEADER .dropdown-menu a i {
	width: 18px;
	margin-right: 2px;
	text-align: center;
	color: var(--hej-gold);
}

HEADER .dropdown-menu .megamenu .row {
	margin-left: 0;
	margin-right: 0;
}
/* The design system's .hej-nav-strip: the employer panel's sign-in actions as a
   row of buttons inside the panel, divided from the product columns beneath.
   This replaces a full-bleed black band, which fought the panel's rounded
   corners and read as a separate slab rather than part of the menu. */
HEADER .dropdown-menu .hej-nav-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 18px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--hej-nav-panel-line);
}
HEADER .navbar-nav .dropdown-menu .hej-nav-strip a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 0;
	padding: 8px 12px;
	border-radius: 6px;
	background-color: var(--hej-nav-panel-2);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
HEADER .navbar-nav .dropdown-menu .hej-nav-strip a:hover {
	background-color: #2c2c2c;
	color: var(--hej-gold);
	padding-left: 12px;
}
HEADER .dropdown-menu .megamenu .col-7,
HEADER .dropdown-menu .megamenu .col-6,
HEADER .dropdown-menu .megamenu .col-5,
HEADER .dropdown-menu .megamenu .col-md-4 {
	padding-left: 0;
	padding-right: 0;
}
HEADER .dropdown-menu .megamenu ul {
	padding-left: 0;
	font-size: 14px;
	list-style: outside none none;
}
HEADER .dropdown-menu .megamenu ul li a {
	display: block;
	padding: 5px 12px;
	margin-left: -12px;
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
}
HEADER .dropdown-menu .megamenu ul li a:hover {
	text-decoration: none;
}

/* The design system's .hej-nav-eyebrow. These were already gold and uppercase;
   this puts them on the eyebrow's tighter size, real 700 weight and wide
   tracking. font-family is named explicitly because 'Figtree Medium' is a
   single-weight alias - a weight of 700 on it would be synthesized rather than
   drawn. */
HEADER .dropdown-menu h5 {
	/* No horizontal padding: the links below sit flush with their column (their
	   12px padding is cancelled by a -12px margin), so a 20px inset here would
	   leave every heading hanging right of its own list.
	   The 20px top separates a second group from the list above it. */
	margin: 20px 0 8px;
	padding: 3px 0;
	font-family: var(--hej-font);
	font-size: var(--hej-fs-xs);
	font-weight: 700;
	letter-spacing: var(--hej-ls-eyebrow-strong);
	line-height: 1.42857143;
	color: var(--hej-gold);
	white-space: nowrap;
	text-transform: uppercase;
}
/* The eyebrows carry an icon in the markup for the mobile drawer's benefit, where
   these headings are the group toggles and the design system gives each one a gold
   glyph. The desktop panel eyebrows have no glyph, so it is hidden here and turned
   back on inside the drawer's media query. Declared as a base rule (rather than
   only overridden below md) so the desktop panels stay pixel-identical. */
HEADER .dropdown-menu h5 i {
	display: none;
}
/* Only the headings in the panel's FIRST row lose that top margin -- the panel's
   own padding (or the strip's divider) already sets them off. A plain
   `h5:first-child` also caught the second row's headings, since they are first in
   their own column, which collapsed the gap between the two groups.

   The last selector is for the FLAT panels only (My Account), whose first <li>
   carries the .hej-nav-authstate eyebrow. It must exclude .megamenu: that is the
   ONLY <li> child of a mega panel's .dropdown-menu, so without :not() it matches
   every heading in the panel and re-creates the exact bug the first selector
   exists to avoid. */
HEADER .dropdown-menu .megamenu > .row:first-child h5,
HEADER .dropdown-menu .hej-nav-strip + .row h5,
HEADER .dropdown-menu > li:first-child:not(.megamenu) h5 {
	margin-top: 0;
}

@media (max-width: 991px) {/* ipad size - down to 768 */
	HEADER {
		padding-bottom: 0;
	}
	NAV {
		clear: both;
	}
	HEADER .navbar {
		position: inherit;
		margin-left: auto;
	}
	HEADER li.dropdown {
		padding-bottom: 0;
	}
	HEADER .dropdown-menu {
		top: 50px;
	}
}

@media (max-width: 767px) {/* small pad size - down to 560 -- THE NAV DRAWER */
	/* ------------------------------------------------------------------------
	   Off-canvas nav drawer, converged on the design system's .m-drawer
	   (RE-1130 mobile drop, 2026-08-18).

	   ONE markup tree: this is the same NAV / ul.navbar-nav the desktop
	   mega-menus use, restyled. The prototype shipped a second .view-mobile
	   DOM; we render the nav once and let it reflow, so there is no duplicated
	   link set to drift out of step.

	   Tier mapping (chrisl, 2026-08-18 -- the "DS-faithful" option):
	     li.dropdown > .nav-link   -> the DS section eyebrow (gold, uppercase).
	                                  Every section is open; this is a heading.
	     .dropdown-menu h5         -> the DS group toggle (white row + chevron).
	                                  Collapsed by default, tap to expand.
	   So the panels no longer open and close below this breakpoint -- the
	   groups inside them do. menuNav.bs5.js stops intercepting the top-level
	   tap here, which means the eyebrow keeps working as a real link to its
	   section landing page. That is a deliberate departure: the DS eyebrow is
	   inert text, but making ours inert would delete the only mobile route to
	   /search/, /myHigherEdJobs/, /career/ and /employers/.

	   This block REPLACES the old stacked-in-flow mobile menu (grey #eee rows
	   on a full-width bar) rather than layering over it. Safe to replace
	   outright: templates/Employer/pageHeader.bs5.cfm loads its own
	   assets/employer/css/navigation.bs5.css, so this file only ever styles
	   templates/pageNavigation.bs5.cfm. (templates/pageBegin.bs5.cfm:226 can
	   in principle include pageNavigationEmp.v4.cfm under this stylesheet, but
	   that needs request.inEmpSection EQ 1, which only
	   www/employers/Accounts/application.cfc sets -- and nothing under
	   Accounts/ uses the public pageBegin. If that ever changes, that include
	   needs the drawer chrome from templates/pageNavigation.bs5.cfm adding.)
	   ------------------------------------------------------------------------ */

	/* The drawer surface. #nav-button toggles `d-none` (display), so the panel
	   is not in the layout when shut -- hence a keyframe on open rather than a
	   transition on transform, which cannot animate out of display:none. */
	HEADER NAV.navbar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: auto;
		width: 82%;
		max-width: 380px;
		display: flex;
		flex-direction: column;
		/* Bootstrap's .navbar ships flex-wrap:wrap, align-items:center and
		   justify-content:space-between for a horizontal bar. All three have to go:
		   with flex-direction:column, `wrap` sends the tall section list into a
		   SECOND COLUMN instead of scrolling, and `center` stops the rows filling
		   the drawer's width. */
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		margin: 0;
		padding: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background-color: var(--hej-nav-panel);
		box-shadow: 0 0 40px rgba(0, 0, 0, .5);
		/* above .arrow's 1001 */
		z-index: 1080;
		animation: hejDrawerIn .28s cubic-bezier(.2, .7, .2, 1);
	}

	/* Scrim + scroll lock. menuNav.bs5.js adds .hej-nav-open to BODY alongside
	   the existing d-none toggle on NAV. */
	BODY.hej-nav-open {
		overflow: hidden;
	}
	BODY.hej-nav-open:before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(10, 12, 15, .6);
		z-index: 1070;
		animation: hejScrimIn .28s ease;
	}

	/* --- drawer chrome (logo row + auth strip), d-md-none in the template --- */
	/* The logo row and the auth buttons stay put while the sections scroll under
	   them -- Marketing liked that in the prototype. NAV is the scroll container
	   (overflow-y:auto, flex column), so both are sticky flex items inside it.

	   The auth strip has to be offset by exactly the head's height, so that height
	   is a token rather than an assumption, and the head PINS itself to it with
	   min-height. 69px is what the row measures at every width from 320 to 767: the
	   close button's 44px hit target, plus 12px of padding either side, plus the
	   1px rule. Both already paint an opaque --hej-nav-feature, so rows pass behind
	   them cleanly; the head sits above the strip in case they ever meet. */
	HEADER NAV.navbar {
		--hej-drawer-head-h: 69px;
	}
	HEADER NAV.navbar .hej-drawer-head {
		flex: 0 0 auto;
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		min-height: var(--hej-drawer-head-h);
		padding: 12px 20px;
		background-color: var(--hej-nav-feature);
		border-bottom: 1px solid var(--hej-nav-panel-line);
	}
	/* The same gold gradient hairline the desktop panel carries along its top. */
	HEADER NAV.navbar .hej-drawer-head:after {
		content: "";
		position: absolute;
		left: 20px;
		right: 20px;
		bottom: -1px;
		height: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, transparent 0%, rgba(240, 171, 0, .55) 20%,
		                            rgba(240, 171, 0, .55) 80%, transparent 100%);
	}
	HEADER NAV.navbar .hej-drawer-head A {
		display: block;
		padding: 0;
	}
	HEADER NAV.navbar .hej-drawer-head IMG {
		display: block;
		width: auto;
		height: 40px;
	}
	HEADER NAV.navbar .hej-drawer-close {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		/* DS: 44x44 minimum hit target */
		min-width: 44px;
		min-height: 44px;
		margin: 0 -8px 0 0;
		padding: 0;
		border: 0;
		background-color: transparent;
		color: #fff;
		font-size: 22px;
		line-height: 1;
		cursor: pointer;
	}
	HEADER NAV.navbar .hej-drawer-close:hover {
		color: var(--hej-gold);
	}

	HEADER NAV.navbar .hej-drawer-auth {
		flex: 0 0 auto;
		position: sticky;
		top: var(--hej-drawer-head-h);
		z-index: 1;
		display: flex;
		gap: 8px;
		padding: 14px 20px;
		background-color: var(--hej-nav-feature);
		border-bottom: 1px solid var(--hej-nav-panel-line);
	}
	HEADER NAV.navbar .hej-drawer-auth A {
		flex: 1 1 0;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px;
		border-radius: var(--hej-r-sm);
		font-family: var(--hej-font);
		font-size: var(--hej-fs-base);
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
	}
	HEADER NAV.navbar .hej-drawer-auth .login,
	HEADER NAV.navbar .hej-drawer-auth .login:visited,
	HEADER NAV.navbar .hej-drawer-auth .login:active,
	HEADER NAV.navbar .hej-drawer-auth .login:focus,
	HEADER NAV.navbar .hej-drawer-auth .login:focus-visible {
		background-color: var(--hej-nav-panel-2);
		border: 1.5px solid #3a3a3a;
		color: #fff;
		text-decoration: none;
	}
	HEADER NAV.navbar .hej-drawer-auth .login:hover {
		border-color: var(--hej-gold);
		color: var(--hej-gold);
		text-decoration: none;
	}
	/* The design system's button "state lock": these are anchors styled as
	   buttons, so :visited/:active must be pinned or the browser's visited-link
	   blue leaks through the gold after the first tap. */
	HEADER NAV.navbar .hej-drawer-auth .signup,
	HEADER NAV.navbar .hej-drawer-auth .signup:visited,
	HEADER NAV.navbar .hej-drawer-auth .signup:active,
	HEADER NAV.navbar .hej-drawer-auth .signup:focus,
	HEADER NAV.navbar .hej-drawer-auth .signup:focus-visible {
		background-color: var(--hej-gold);
		border: 1.5px solid var(--hej-gold);
		color: var(--hej-ink);
		text-decoration: none;
	}
	HEADER NAV.navbar .hej-drawer-auth .signup:hover {
		background-color: var(--hej-gold-light);
		border-color: var(--hej-gold-light);
		color: var(--hej-ink);
		text-decoration: none;
	}

	/* --- the scrolling section list --- */
	HEADER NAV.navbar ul.navbar-nav {
		flex: 1 1 auto;
		display: block;
		width: 100%;
		margin: 0;
		padding: 4px 0 40px;
	}
	/* Sections are the ONLY thing the drawer rules off. The groups inside a section
	   are separated by their surface, not by hairlines -- the prototype's group
	   toggles carry `border: 0`. (The old grey mobile menu ruled off every row;
	   that is what this replaces.) */
	HEADER NAV.navbar ul.navbar-nav li.dropdown {
		margin: 0;
		padding: 0 0 8px;
		border-top: 1px solid var(--hej-nav-panel-line);
		background-color: transparent;
	}
	/* The auth strip (or the drawer header when signed in) already rules off above
	   the first section. */
	HEADER NAV.navbar ul.navbar-nav li.dropdown:first-child {
		border-top: 0;
	}

	/* Top level -> DS section eyebrow. Still an A to its landing page. */
	HEADER NAV.navbar ul.navbar-nav > li.dropdown > A.nav-link {
		display: block;
		margin: 0;
		padding: 20px 20px 4px;
		background-color: transparent;
		color: var(--hej-gold);
		font-family: var(--hej-font);
		font-size: var(--hej-fs-xs);
		font-weight: 700;
		letter-spacing: var(--hej-ls-eyebrow-strong);
		line-height: 1.35;
		text-transform: uppercase;
	}
	HEADER NAV.navbar ul.navbar-nav > li.dropdown > A.nav-link:hover {
		color: var(--hej-gold-light);
		text-decoration: none;
	}
	/* The chevron on the top-level link and the desktop active-section marker
	   are both meaningless now the sections do not collapse. .arrow is only
	   hidden, never removed -- menuNav.bs5.js hides and restores it, and that
	   logic has to stay live for the desktop breakpoint. */
	HEADER NAV.navbar ul.navbar-nav > li.dropdown > A.nav-link > .fa,
	HEADER NAV.navbar .dropdown .arrow {
		display: none;
	}
	/* ...but that rule alone does not hold. The base stylesheet re-shows .arrow
	   for the ACTIVE section (`li.dropdown.on > .arrow`, higher specificity) and
	   for an OPEN one (`li.dropdown.show > .arrow`, with !important so the script
	   cannot lose to it). Below md that leaked a full-width 5px gold bar under
	   whichever section the current page belongs to -- reported by Marketing.
	   Matching both states here, with !important, is what actually suppresses it;
	   the element still exists, so the desktop show/restore logic is untouched. */
	HEADER NAV.navbar ul.navbar-nav > li.dropdown.on > .arrow,
	HEADER NAV.navbar ul.navbar-nav > li.dropdown.show > .arrow {
		display: none !important;
	}

	/* Panels are always open below this breakpoint, and lose the floating-panel
	   chrome: they are part of the drawer surface now, not a card on top of it. */
	HEADER NAV.navbar ul.navbar-nav .dropdown-menu {
		display: block;
		position: static;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		margin: 0;
		padding: 0;
		background-color: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	/* :before is the invisible hover bridge across the gap between nav item and
	   floating panel -- there is no gap and no hover here. :after is the panel's
	   gold top hairline, which belongs to a card edge the drawer does not have;
	   left alone it reappears above every section eyebrow, because Bootstrap
	   makes li.dropdown position:relative and so becomes its containing block. */
	HEADER NAV.navbar ul.navbar-nav .dropdown-menu:before,
	HEADER NAV.navbar ul.navbar-nav .dropdown-menu:after {
		display: none;
	}

	/* The desktop panel lays groups out in a .row of .col-*; the drawer is one
	   column. display:block sidesteps the flex-basis fight entirely. */
	HEADER NAV.navbar .dropdown-menu .megamenu > .row {
		display: block;
		margin: 0;
	}
	HEADER NAV.navbar .dropdown-menu .megamenu > .row > [class*="col-"] {
		width: 100%;
		max-width: 100%;
		flex: none;
		padding: 0;
	}
	HEADER NAV.navbar .dropdown-menu LI {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/* h5 -> DS group toggle. menuNav.bs5.js stamps data-open on exactly those
	   headings that have a list to show, so the ones that are pure labels
	   (My Account's "Signed in"/"Signed out") get no chevron and no cursor. */
	HEADER NAV.navbar .dropdown-menu H5 {
		display: flex;
		align-items: center;
		/* flex-start, not space-between: the row is icon + label + chevron, and
		   space-between would strand the label in the middle. The chevron is
		   pushed right with an auto margin instead. */
		justify-content: flex-start;
		gap: 12px;
		min-height: 48px;
		margin: 0;
		padding: 12px 20px;
		color: #fff;
		font-family: var(--hej-font);
		font-size: var(--hej-fs-base);
		font-weight: 600;
		letter-spacing: normal;
		line-height: 1.35;
		text-transform: none;
		white-space: normal;
	}
	/* Pure labels: not a control, so read them back as muted micro-copy. */
	/* The account panel's Signed in / Signed out eyebrow is dropped in the drawer:
	   under the gold "MY ACCOUNT" section heading it reads as a second heading, and
	   the state is already carried by the auth strip when signed out and by the
	   Sign out row when signed in. It stays at md and up (RE-1130 Phase 5 added it
	   to the desktop account panel deliberately). */
	HEADER NAV.navbar .dropdown-menu H5.hej-nav-authstate {
		display: none;
	}
	HEADER NAV.navbar .dropdown-menu H5[data-open] {
		cursor: pointer;
		transition: background-color .15s ease, color .15s ease;
	}
	/* Group toggles are rows like the links beneath them, so they answer to the
	   pointer the same way: tint the row, turn the label gold. Only the headings
	   that ARE toggles -- the inert "Signed in" label is not a control.
	   The chevron deliberately stays grey here (its own border-color out-specifies
	   the inherited colour): going gold is reserved for the OPEN state, so hover
	   and open stay tellable apart. */
	HEADER NAV.navbar .dropdown-menu H5[data-open]:hover {
		background-color: var(--hej-nav-panel-2);
		color: var(--hej-gold);
	}
	/* Group icons, per the design system's drawer toggles. Same 20px box the link
	   icons use, so labels line up down the whole drawer. Hidden at md and up --
	   see the base rule above; the desktop panel eyebrows carry no glyph. */
	HEADER NAV.navbar .dropdown-menu H5 I {
		display: inline-block;
		flex: 0 0 auto;
		width: 20px;
		text-align: center;
		font-size: 15px;
		color: var(--hej-gold);
	}
	/* Chevron drawn from borders, not a glyph: the public bundle's Font Awesome
	   family name is not something to bet a silent blank on. */
	HEADER NAV.navbar .dropdown-menu H5[data-open]:after {
		content: "";
		flex: 0 0 auto;
		margin-left: auto;
		width: 8px;
		height: 8px;
		margin-right: 3px;
		border-right: 2px solid rgba(255, 255, 255, .45);
		border-bottom: 2px solid rgba(255, 255, 255, .45);
		transform: rotate(-45deg);
		transition: transform .2s ease, border-color .2s ease;
	}
	/* Open group: tinted row + gold label. The tint (rather than the prototype's
	   #141414, which matches its own sub-list) is what separates the toggle from
	   the list it opened, so neither needs a hairline. */
	HEADER NAV.navbar .dropdown-menu H5[data-open="true"] {
		background-color: var(--hej-nav-panel-2);
		color: var(--hej-gold);
	}
	HEADER NAV.navbar .dropdown-menu H5[data-open="true"]:after {
		margin-right: 0;
		border-color: var(--hej-gold);
		transform: rotate(45deg);
	}
	HEADER NAV.navbar .dropdown-menu H5[data-open="false"] + UL {
		display: none;
	}

	/* Group contents + the flat link lists (My Account, Employer Home). */
	HEADER NAV.navbar .dropdown-menu UL {
		margin: 0;
		padding: 0;
		background-color: var(--hej-nav-feature);
		list-style: none;
	}
	HEADER NAV.navbar .dropdown-menu .megamenu UL LI A,
	HEADER NAV.navbar .dropdown-menu > LI > A {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 44px;
		margin: 0;
		padding: 11px 20px 11px 34px;
		background-color: transparent;
		border-radius: 0;
		color: #c9c9c9;
		font-family: var(--hej-font);
		font-size: var(--hej-fs-base);
		font-weight: 500;
		line-height: 1.35;
		/* Desktop keeps labels on one line inside a fixed-width column; here
		   they have to wrap ("Inclusive Workplace Spotlight" does not fit). */
		white-space: normal;
	}
	/* Group children line up with their group's LABEL, not its icon: 20px of row
	   padding + a 20px icon + the 12px gap. */
	HEADER NAV.navbar .dropdown-menu .megamenu UL LI A {
		padding-left: 52px;
	}
	/* No hover slide: on touch :hover sticks after a tap, so the desktop rules'
	   16px padding-left shift reads as the row twitching. Re-assert the rest
	   padding instead -- on the ANCHORS ONLY.
	   Do NOT add padding to an `LI:hover` selector here: li.megamenu is itself an
	   LI inside .dropdown-menu, so padding on that selector shifts the WHOLE
	   group 34px right whenever anything inside it is hovered (and the inner LI
	   shifts its own link again on top of that). The row tint is left to the
	   existing desktop li:hover rules, which already exclude li.megamenu. */
	HEADER NAV.navbar .dropdown-menu .megamenu UL LI A:hover {
		padding-left: 52px;
		background-color: var(--hej-nav-panel-2);
		color: var(--hej-gold);
	}
	HEADER NAV.navbar .dropdown-menu .megamenu UL LI A:before,
	HEADER NAV.navbar .dropdown-menu > LI > A:before {
		display: none;
	}
	/* The flat lists sit at the section's own indent, not a group's. */
	HEADER NAV.navbar .dropdown-menu > LI > A,
	HEADER NAV.navbar .dropdown-menu > LI:hover > A {
		padding-left: 20px;
	}
	HEADER NAV.navbar .dropdown-menu A I {
		flex: 0 0 auto;
		width: 20px;
		margin-right: 0;
		text-align: center;
		color: var(--hej-gold);
	}

	/* Sign-out keeps its footer treatment. */
	HEADER NAV.navbar .dropdown-menu LI.hej-nav-signout {
		margin-top: 8px;
		border-top: 1px solid var(--hej-nav-panel-line);
	}

	/* The employer sign-in actions are ROWS here, not buttons -- Marketing:
	   "'Employers' nav should all be styled the same on mobile. Referring to 'Home'
	   'Login' and 'Create Account'". They keep the desktop strip's button treatment
	   at md and up; below it they take the same shape as every other link row in
	   the drawer, so the section reads as one list.

	   The strip's divider goes with them. It was kept when these were buttons
	   because it bracketed a button GROUP; once they are rows it would be a rule
	   between individual items, which is exactly what the drawer does not do -- it
	   rules off between sections only. */
	HEADER NAV.navbar .dropdown-menu .hej-nav-strip {
		display: block;
		gap: 0;
		margin: 0;
		padding: 0;
		border-bottom: 0;
	}
	HEADER NAV.navbar .navbar-nav .dropdown-menu .hej-nav-strip A {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		min-height: 44px;
		margin: 0;
		padding: 11px 20px;
		background-color: transparent;
		border-radius: 0;
		color: #c9c9c9;
		font-family: var(--hej-font);
		font-size: var(--hej-fs-base);
		font-weight: 500;
		line-height: 1.35;
		white-space: normal;
	}
	HEADER NAV.navbar .navbar-nav .dropdown-menu .hej-nav-strip A:hover {
		padding-left: 20px;
		background-color: var(--hej-nav-panel-2);
		color: var(--hej-gold);
	}

	HEADER NAV.navbar .dropdown-menu .megamenu .empMenuJobs {
		padding-bottom: 0;
	}
}

@keyframes hejDrawerIn {
	from { transform: translateX(-100%); }
	to   { transform: none; }
}
@keyframes hejScrimIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
/* The design system's motion rule: things snap rather than slide when the user
   asks for less movement. */
@media (prefers-reduced-motion: reduce) {
	HEADER NAV.navbar,
	BODY.hej-nav-open:before {
		animation: none;
	}
	HEADER NAV.navbar .dropdown-menu H5[data-open]:after {
		transition: none;
	}
}

@media (min-width: 768px) {/* MD and above */
}

@media (max-width: 559px) {/* mobile phone size - down to 320 or lower */
}

@media (max-width: 350px) {/* definitely mobile phone size */
}

@media print {
}

/* Sign-out footer in the account panel, per the design system's .hej-nav-signout:
   a separator, then a de-emphasised action. It deliberately does NOT take the row
   tint or the gold rule the list items use -- it is a footer action, not a
   destination, and the prototype keeps it quiet until hovered. */
HEADER .dropdown-menu .hej-nav-signout {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--hej-nav-panel-line);
}
HEADER .navbar-nav .dropdown-menu .hej-nav-signout a {
	color: #c9c9c9;
}
HEADER .navbar-nav .dropdown-menu .hej-nav-signout a:hover {
	background-color: transparent;
	color: var(--hej-gold);
	padding-left: 12px;
}
HEADER .dropdown-menu .hej-nav-signout a:hover:before {
	background-color: transparent;
}