/*
 * header.css
 * Migrated from Additional CSS (Total > Custom CSS) — "Navigation" section
 * Migrated on: 2026-08-10
 */

/*-----Navigation-----*/


header.sticky-header-shrunk{
	padding-top: 5px;
	padding-bottom: 5px;
}


/*Header Aside Buttons*/



.aside-list{
	margin-bottom: 0px;
}

.aside-list:hover{
	color: var(--wpex-palette-1268-color) !important;
}


/*Mobile Menu Phone*/

.mobile-menu-phone i.fa-solid.fa-phone{
	color: var(--wpex-palette-1268-color) !important;
	margin-right: 5px;
}

.mobile-menu-phone > .mega-menu-link{
	font-weight: 600 !important;
	font-size: 18px !important;
}



/*---Top Bar Mobile Fix---*/

/*move top bar above overlay at top of page, so it's consistent with when you scroll down and open mobile menu*/

div#top-bar-wrap{
	z-index: 99999;
   position: relative;
}


/*Moves mobile menu down, so it's not covered by top bar after you scroll down*/

@media (max-width: 767px) {

ul#mega-menu-main_menu{
	top: 40px !important;
}

button.mega-close{
	top: 40px !important;
}
}






/*-----Max Mega Menu-----*/



/*Makes left or right aligned menu possible and makes mega menus wider. You can adjust menu alignment (left, right, or center) in the Menu Bar settings*/

/* Navigation area fills available middle space */


#site-navigation {
	width: 100%;
}

#mega-menu-wrap-main_menu {
	width: fit-content !important;
}
#site-navigation {
	width: fit-content !important;
}

/* Top-level menu fills the full navigation width */
#mega-menu-main_menu {
	display: inline-flex !important;
	align-items: center;
	text-align: initial !important;
	/*gap: clamp(6px, 2vw, 30px) !important; original */
	gap: clamp(26px, 3vw, 50px) !important;
}

#mega-menu-wrap-main_menu #mega-menu-main_menu {
	margin-right: 2px !important;
}

/* nav-wrap itself shouldn't grow to fill all remaining header space --
   that's what was stretching the menu wide even with width:auto on
   the ul (auto on a block-level flex container just means "fill
   parent", not "hug content"). Let it hug its own content instead. */
div#site-navigation-wrap {
	flex-grow: 0 !important;
}

/* Each top-level menu item gets an equal share */
#mega-menu-main_menu > li.mega-menu-item {
	flex: 0 0 auto !important;
	margin-right: 0 !important;
}

/* Make the clickable area fill each menu item */
#mega-menu-main_menu > li.mega-menu-item > a.mega-menu-link {
	display: flex !important;
	align-items: center;
	justify-content: center;

	width: 100% !important;

	font-family: 'Noto Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}


/*Drop Down Arrow Spacing*/
span.mega-indicator{
	margin-left: 2px !important;
}

/*Correct font styling for top-level menu items.
  Total's native Customizer "Main Menu" typography setting targets
  .main-navigation-ul .link-inner, but this site uses the Max Mega Menu
  plugin markup instead, so that setting has no effect here.
  Applying directly to the real selector. Added 2026-08-10*/

#mega-menu-main_menu > li > a.mega-menu-link {
	font-family: 'Noto Sans', sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}




/*Applies to the Service Parents. "column-heading" is a custom class*/

.column-heading > a{
	font-weight: 600 !important;
	border-bottom: 2px solid var(--wpex-palette-1268-color) !important;
	font-size: 18px !important;
	margin-bottom:5px !important;
}






/*Adjusts Service Parent 1 columns at mobile menu breakpoint, so that it's only 1 column instead of 3 - match to your mobile menu breakpoint and column number usage*/

@media (max-width: 1360px) {
#mega-menu-wrap-main_menu #mega-menu-main_menu li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu li.mega-3-columns > ul.mega-sub-menu > li.mega-menu-item {
    float: left;
    width: 100% !important;
}
}


/*-----End Navigation Code-----*/



/*-----Dropdown / Mega Menu Panel Content-----*/
/*Press Release promo block inside "Product" mega menu dropdown (Custom HTML widget)
  Added 2026-08-10 per Figma node 1601-57902*/

.c-dropdown-promo {
	display: flex;
	align-items: flex-start;
	width: 556px;
	height: 191px;
	padding: 16px;
	gap: 26px;
	background: #F2EFE9;
	box-sizing: border-box;
}

.c-dropdown-promo__media {
	flex-shrink: 0;
	width: 233px;
	height: 159px;
	background: #D9D4C8;
	border-radius: 8px;
}

.c-dropdown-promo__content {
	width: 265px;
}

.c-dropdown-promo__title {
	margin: 0 0 4px;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	color: #333333;
}

.c-dropdown-promo__body {
	margin: 0;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 28px;
	color: #333333;
}

@media (max-width: 1330px){
	.c-dropdown-promo{
		width: 446px;
	}
	
	.c-dropdown-promo__media {
		width: 194px;
	}
}

/*-----End Dropdown / Mega Menu Panel Content-----*/



/*Unify mega menu dropdown panel heights across items with different content
  (e.g. Company has fewer columns and no Press Release panel than Product/Clients)
  Added 2026-08-10*/

ul.mega-sub-menu .mega-menu-row {
	min-height: 191px !important;
}



/*Vertical gap between stacked category items within a mega menu dropdown column
  (e.g. Services / Compliance stacked in the same column). Added 2026-08-10*/

.mega-sub-menu > li.mega-menu-item {
	margin-bottom: 20px !important;
}

.mega-sub-menu > li.mega-menu-item:last-child {
	margin-bottom: 0 !important;
}



/*Remove default rounded corners on mega menu panel, and position it flush
  below the full header (was overlapping ~5px into the header bottom edge)
  Added 2026-08-10*/

ul.mega-sub-menu {
	border-radius: 0 !important;
}

.mega-menu-megamenu > ul.mega-sub-menu {
	top: 75px !important;
}



/*Header aside (Request a Trial) button: keep it always visible and grouped
  tightly next to the mobile menu hamburger toggle once the nav menu collapses
  at the mobile menu breakpoint (959px, matches Header > Mobile Menu setting).
  Removed the space-evenly override added 2026-08-10 (caused an oversized,
  uneven gap once the nav item collapsed to 0 width) and restored the theme's
  native space-between behavior for #site-header-flex.
  Also stop the button from shrinking/wrapping onto two lines on phones
  (flex-shrink was letting it get squeezed once the aside was forced always
  visible) and shrink the desktop-only 74px logo gap (added 2026-08-10 for
  nav spacing, not needed once the nav collapses) so the logo has more room
  and only shrinks gracefully on the narrowest phones instead of always
  losing 74px of space it doesn't need on mobile.
  Added 2026-08-18*/

@media (max-width: 959px) {
	#site-header-flex-aside {
		margin-inline-start: auto;
		flex-shrink: 0;
	}
	div#site-logo {
		margin-inline-end: 16px !important;
	}
}

/*Mobile "Dropdown" menu (Header > Mobile Menu style = Dropdown): the open
  panel was only as tall as its menu items, so page content stayed visible
  behind/below it instead of covering the full screen. Force it to fill the
  remaining viewport height below the header and lock page scroll while
  open, so it reads as a full mobile menu screen (matches Figma) while
  keeping the header untouched and the existing accordion submenu toggles
  working.
  Also subtract the WP admin toolbar's height when logged in (32px at
  >=783px wide, 46px below that - WordPress core's own breakpoint), since
  the toolbar pushes the whole header down and isn't present for real
  (logged-out) site visitors.
  Added 2026-08-18*/

@media (max-width: 959px) {
	nav.mobile-toggle-nav {
		height: calc(100vh - var(--wpex-site-header-height, 90px)) !important;
		height: calc(100dvh - var(--wpex-site-header-height, 90px)) !important;
		overflow-y: auto !important;
	}
	body.mobile-menu-is-open {
		overflow: hidden !important;
	}
	body.admin-bar nav.mobile-toggle-nav {
		height: calc(100vh - var(--wpex-site-header-height, 90px) - 46px) !important;
		height: calc(100dvh - var(--wpex-site-header-height, 90px) - 46px) !important;
	}
}
@media (max-width: 959px) and (min-width: 783px) {
	body.admin-bar nav.mobile-toggle-nav {
		height: calc(100vh - var(--wpex-site-header-height, 90px) - 32px) !important;
		height: calc(100dvh - var(--wpex-site-header-height, 90px) - 32px) !important;
	}
}

/*Mobile menu hamburger/close icon: force white in both the closed
  (hamburger) and open (X) states, regardless of any Customizer icon-color
  setting, since it sits on the black header bar in both states.
  Mobile menu open panel typography: menu titles (top-level items) vs
  sub-titles (nested submenu items) per Figma spec - both Noto Sans,
  titles 24px/600, sub-titles 20px/500.
  Added 2026-08-18*/

@media (max-width: 959px) {
	.mobile-menu-toggle .wpex-hamburger-icon span::before,
	.mobile-menu-toggle .wpex-hamburger-icon span::after {
		background-color: #FFFFFF !important;
	}
	/* Middle bar: visible (white) only in the closed/hamburger state - forcing
	   it white unconditionally (including the open/X state) was hiding the
	   fact it should disappear when open, making the X render as an asterisk
	   (the middle bar stayed on top of the two rotated bars). */
	.mobile-menu-toggle .wpex-hamburger-icon--inactive span {
		background-color: #FFFFFF !important;
	}
	.mobile-menu-toggle .wpex-hamburger-icon--active span {
		background-color: transparent !important;
	}
	nav.mobile-toggle-nav a.mobile-toggle-nav__link {
		font-family: "Noto Sans", sans-serif !important;
		font-size: 24px !important;
		font-weight: 600 !important;
	}
	nav.mobile-toggle-nav ul.sub-menu a.mobile-toggle-nav__link {
		font-family: "Noto Sans", sans-serif !important;
		font-size: 20px !important;
		font-weight: 500 !important;
	}
}

/*Mobile menu open panel: link text was inheriting the panel's muted gray
  text color (only turning black on :active/tap) - force pure black at
  rest, hover, focus and active so it reads black at all times. Also grow
  each menu item's vertical padding to 30px (top level titles and nested
  sub-titles), per Figma spec - was only 10px (wpex-py-10 utility).
  Added 2026-08-18*/

@media (max-width: 959px) {
	nav.mobile-toggle-nav a.mobile-toggle-nav__link,
	nav.mobile-toggle-nav a.mobile-toggle-nav__link:link,
	nav.mobile-toggle-nav a.mobile-toggle-nav__link:visited,
	nav.mobile-toggle-nav a.mobile-toggle-nav__link:hover,
	nav.mobile-toggle-nav a.mobile-toggle-nav__link:focus,
	nav.mobile-toggle-nav a.mobile-toggle-nav__link:active {
		color: #000000 !important;
	}
	nav.mobile-toggle-nav a.mobile-toggle-nav__link {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}
}

/*Mobile menu submenu-toggle chevron (Product/Clients/Company expand arrow):
  widen from its default ~15.75px to 20px, keeping proportions via
  height:auto (the SVG's own viewBox preserves aspect ratio).
  Added 2026-08-18*/

@media (max-width: 959px) {
	nav.mobile-toggle-nav .wpex-open-submenu__icon svg {
		width: 20px !important;
		height: auto !important;
	}
}


/* Nav items should sit left, right next to the logo -- not centered
   in the header. Total's header-eight style uses justify-content:
   space-between across [logo, nav, aside/CTA], which visually centers
   the nav between the other two. Switch to flex-start and push the
   CTA/aside area to the right instead.
   Added 2026-08-20 per feedback. */
@media (min-width: 1025px) {
	/* Cap the header container itself so gaps never grow unbounded on
	   very wide screens (the theme's own max-width:90% scales with
	   viewport with no upper limit, which combined with a wide gap
	   caused the logo/button to overflow past the edges entirely on
	   very wide monitors). */
	.header-eight-inner {
		max-width: min(90%, 1700px) !important;
	}
	.header-eight-inner > .wpex-flex.wpex-justify-between {
		justify-content: space-between !important;
	}
	.header-eight-inner .header-eight-aside {
		margin-left: 0 !important;
		white-space: nowrap !important;
	}
	.header-eight-inner .header-eight-aside a {
		white-space: nowrap !important;
	}
	div#site-navigation-wrap {
		margin-left: 0 !important;
	}
}


/* Switch to the mobile hamburger menu earlier -- around 973px the
   desktop nav starts breaking (Contact Us wraps/overlaps). Force the
   switch at 1024px instead of the theme's default breakpoint.
   Added 2026-08-20 per feedback. */
@media (max-width: 1024px) {
	.hide-at-mm-breakpoint {
		display: none !important;
	}
	.show-at-mm-breakpoint {
		display: flex !important;
	}
}


/* ================================================================
   Nav item spacing + header side padding, made fluid.
   Figma spec: ~74px gap between nav items (Product/Clients/etc),
   ~72px side padding for the header container -- both currently
   FIXED, which is why they don't shrink as the window narrows and
   nav items start overlapping/clipping before the mobile breakpoint
   kicks in. Using clamp() so both scale down gracefully instead.
   Added 2026-08-20 per feedback.
   ================================================================ */

#site-navigation ul.mega-menu > li > a {
	padding-left: 0 !important;
	padding-right: 0 !important;
	white-space: nowrap !important;
}

#site-navigation ul.mega-menu {
	flex-wrap: nowrap !important;
}

.header-eight-inner.container {
	/*padding-left: clamp(16px, 5vw, 72px) !important; removing padding on either side of main header to fill 1440
	padding-right: clamp(16px, 5vw, 72px) !important;*/
	
	box-sizing: border-box !important;
}


/* Mobile header (<=1024px): the desktop nav (.navbar-style-eight) is
   hidden via display:none, leaving 3 visible flex children: logo,
   CTA button, hamburger toggle. The default space-between then
   spreads them evenly (logo-left, button-CENTERED, hamburger-right)
   instead of clustering the button next to the hamburger.
   Fix: flex-start + push [button, hamburger] together as a group via
   margin-left:auto on the button's own wrapper.
   Added 2026-08-25 per feedback. */
@media (max-width: 1024px) {
	.header-eight-inner > .wpex-flex.wpex-justify-between {
		justify-content: flex-start !important;
	}
	.header-eight-inner .header-eight-aside {
		margin-left: auto !important;
	}
}
@media (max-width: 767px) {
	.header-fixed-height #site-header-inner{
		padding-left:15px !important;
		padding-right:15px !important;
		max-width:100% !important
	}
}


/* Monika (feedback): on very wide screens, the mega-menu submenu
   panel (dropdown) stretches full-width, spreading the links (About,
   Careers, Resources, FAQs, etc) apart oddly. Lock the CONTENT to a
   1440px max-width while letting the white background bar stay full
   width, matching the "content vs full-bleed background" pattern
   used elsewhere on the site.
   Added 2026-08-25. */
#mega-menu-wrap-main_menu #mega-menu-main_menu li.mega-menu-row {
	max-width: 1440px !important;
	width: 95vw !important;
	margin: 0 auto !important;
	left: 50% !important;
	position: relative !important;
	transform: translateX(-50%) !important;
}
@media (min-width: 1517px) {
	#mega-menu-wrap-main_menu #mega-menu-main_menu li.mega-menu-row {
		width: 1440px !important;
	}
}

/* Max Mega Menu's own JS sets an inline "left" offset on .mega-sub-menu
   to position the panel, calculated before/independent of our
   max-width change above -- it doesn't reliably keep the panel itself
   centered on screen. Force true CSS centering instead, overriding
   the JS-set inline left value. */
.mega-menu-megamenu > .mega-sub-menu {
	position: fixed !important;
	left: 50% !important;
	right: auto !important;
	top: 90px !important;
	transform: translateX(-50%) !important;
}
body.admin-bar .mega-menu-megamenu > .mega-sub-menu {
	top: 122px !important;
}


/* Monika/Nic feedback: hide the "Press Release" promo card from the
   mega menu dropdown, reduce the panel's outer padding, and increase
   spacing between stacked sub-menu items by 20px.
   Added 2026-08-25. */
.c-dropdown-promo {
	display: none !important;
}

.mega-menu-megamenu > .mega-sub-menu {
	padding: 12px 16px 16px !important;
}

.mega-menu-column .mega-sub-menu > li.mega-menu-item {
	margin-bottom: 40px !important;
}