/**
 * IES ACF Mega Menu — desktop styles
 *
 * Selectors are deliberately scoped through .header-wrapper .main-navigation to
 * out-specify the legacy header rules in style.css.
 */

:root {
	/* Matches the site content container so the panel lines up with the page. */
	--ies-mega-max: 1280px;
	--ies-mega-gutter: 0px;

	/* The panel's main area is one shared grid of this many equal columns. A
	 * group's "Group columns" value is how many of them it spans, and its links
	 * subdivide that span into the same number of columns — so every link in
	 * the panel lines up on the same vertical rhythm. */
	--ies-mega-grid: 4;
	--ies-mega-col-gap: 32px;
}

.header-wrapper .main-navigation {
	position: static;
}

.header-wrapper .main-navigation #primary-menu.primary-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	/* Figma 619:4764 — 30px between first-tier items (no horizontal link padding). */
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.75rem 0;
	white-space: nowrap;
	text-decoration: none;
	font-family: Onest, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ies-navy, #11294B);
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item:hover > a,
.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item.open > a {
	color: var(--ies-button-primary, #5D43DE);
}

/* The theme's Font Awesome caret is replaced by our own chevron on the trigger. */
.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item > a::after {
	content: none;
}

/* CTA styles */
.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta {
	margin-left: 0.5rem;
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-primary > a {
	background: var(--ies-button-primary, #5D43DE);
	color: var(--ies-button-text, #fff);
	border-radius: 999px;
	padding: 0.7rem 1.5rem;
	transition: var(--ies-button-transition, background 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease);
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-primary > a:hover {
	background: var(--ies-button-hover, #4D4285);
	color: var(--ies-button-text-hover, #fff);
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-primary-white > a {
	background: var(--ies-button-primary-white-bg, #fff);
	color: var(--ies-button-primary-white-text, #5D43DE);
	border: 2px solid var(--ies-button-primary-white-bg, #fff);
	border-radius: 999px;
	padding: 0.7rem 1.5rem;
	transition: var(--ies-button-transition, background 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease);
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-primary-white > a:hover {
	background: var(--ies-button-primary-white-hover-bg, #D2D1F1);
	border-color: var(--ies-button-primary-white-hover-bg, #D2D1F1);
	color: var(--ies-button-primary-white-text, #5D43DE);
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-secondary > a {
	color: var(--ies-button-primary, #5D43DE);
	border: 2px solid var(--ies-button-primary, #5D43DE);
	border-radius: 999px;
	padding: 0.6rem 1.4rem;
	transition: var(--ies-button-transition, background 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease);
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-secondary > a:hover {
	background: transparent;
	border-color: var(--ies-button-hover, #4D4285);
	color: var(--ies-button-hover, #4D4285);
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-text-arrow > a::before {
	content: '\203A';
	order: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: 0.35rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease;
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-text-arrow > a:hover::before {
	background: var(--ies-button-hover, #4D4285);
	border-color: var(--ies-button-hover, #4D4285);
	color: var(--ies-button-text-hover, #fff);
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-text-arrow-white > a {
	color: var(--ies-white, #fff);
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-text-arrow-white > a::before {
	content: '';
	order: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ies-button-icon-size, 24px);
	height: var(--ies-button-icon-size, 24px);
	margin-left: 0.35rem;
	border: 0;
	border-radius: 50%;
	background-color: var(--ies-button-text-icon-white-icon-bg, #fff);
	background-image: var(--ies-button-icon-chevron-on-light);
	background-repeat: no-repeat;
	background-position: center;
	transition: background-color 0.2s ease;
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--cta-text-arrow-white > a:hover::before {
	background-color: var(--ies-button-text-icon-white-icon-hover-bg, #D2D1F1);
	background-image: var(--ies-button-icon-chevron-on-light);
	border: 0;
	color: transparent;
}

/* Dropdown trigger chevron */
.header-wrapper .main-navigation #primary-menu.primary-menu .menu-item__trigger {
	position: relative;
	inset: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 20px;
	margin-left: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ies-navy, #11294B);
	opacity: 1;
	cursor: pointer;
	z-index: auto;
}

.header-wrapper .main-navigation #primary-menu.primary-menu .menu-item__trigger::before {
	content: '';
	width: 12px;
	height: 7px;
	/* Masked so the glyph follows currentColor (navy → purple on hover/open). */
	background-color: currentColor;
	-webkit-mask-image: var(--ies-nav-chevron);
	mask-image: var(--ies-nav-chevron);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 12px 7px;
	mask-size: 12px 7px;
	/* SVG points up; closed menus show it pointing down. */
	transform: rotate(180deg);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item:hover > .menu-item__trigger,
.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item.open > .menu-item__trigger {
	color: var(--ies-button-primary, #5D43DE);
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.open > .menu-item__trigger::before {
	transform: rotate(0deg);
}

.menu-item__trigger .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Standard (non-mega) dropdown ---------- */
.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item:not(.menu-item--mega) > ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	margin: 0;
	padding: 0.75rem 0;
	list-style: none;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px color-mix(in srgb, var(--ies-navy, #11294B) 12%, transparent);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 1000;
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item:not(.menu-item--mega) > ul.sub-menu a {
	display: block;
	padding: 0.55rem 1rem;
	color: var(--ies-navy, #11294B);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item:not(.menu-item--mega) > ul.sub-menu a:hover {
	color: var(--ies-button-primary, #5D43DE);
	background: var(--ies-card-hover-bg, #EFECFC);
}

/* Click-driven only: no :hover rule here on purpose. */
.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item:not(.menu-item--mega).open > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* ---------- Mega panel (full bleed) ---------- */
.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--mega {
	position: static;
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--mega > .mega-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	transform: translateX(-50%) translateY(6px);
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border-top: 1px solid #E7E7EF;
	box-shadow: 0 24px 48px color-mix(in srgb, var(--ies-navy, #11294B) 12%, transparent);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 1000;
}

.header-wrapper .main-navigation #primary-menu.primary-menu > li.menu-item--mega.open > .mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/*
 * Page dimmer while a mega panel is open (BH-1470 / Figma). Neutral Gray @ 80%.
 * Sits under ticker (z-index 10), pre-header (9), and the header + panel (11).
 */
@media (min-width: 1025px) {
	body.ies-mega-open::before {
		content: '';
		position: fixed;
		inset: 0;
		background: var(--ies-nav-overlay);
		z-index: 8;
		pointer-events: auto;
	}

	body.ies-mega-open #masthead .header-wrapper {
		z-index: 11;
		overflow: visible;
	}
}

.mega-panel__inner {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
	max-width: var(--ies-mega-max);
	margin: 0 auto;
	padding: 36px var(--ies-mega-gutter) 40px;
}

.mega-panel__main {
	display: grid;
	grid-template-columns: repeat(var(--ies-mega-grid), minmax(0, 1fr));
	gap: 40px var(--ies-mega-col-gap);
	align-items: start;
	flex: 1 1 auto;
	min-width: 0;
}

.mega-panel__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 0 0 auto;
	width: 420px;
	max-width: 45%;
}

/* ---------- Link groups ---------- */
/* A group spans --mega-cols of the panel's shared columns. */
.mega-panel__group {
	grid-column: span var(--mega-cols, 1);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
}

.mega-panel__heading {
	display: block;
	margin: 0 0 6px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ies-neutral-gray, #D8D8E0);
	color: var(--ies-navy, #11294B);
	font-family: Onest, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

a.mega-panel__heading:hover,
.mega-panel__heading.is-current {
	color: var(--ies-button-primary, #5D43DE);
}

/* The links subdivide the group's span using the same gap as the shared grid,
 * so link columns sit exactly on the panel's column lines. */
.mega-panel__links {
	display: grid;
	grid-template-columns: repeat(var(--mega-cols, 1), minmax(0, 1fr));
	gap: 4px var(--ies-mega-col-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-panel__item {
	margin: 0;
	padding: 0;
}

/* Hover fills a 5px-radius #f7f7fd block that bleeds 10px past the text, so it
 * sits flush with the group's left edge (Figma 619:628). */
.mega-panel__link {
	display: block;
	padding: 10px;
	margin: 0 -10px;
	border-radius: 5px;
	text-decoration: none;
	color: var(--ies-navy, #11294B);
	transition: background 0.15s ease;
}

.mega-panel__link:hover,
.mega-panel__link:focus-visible,
.mega-panel__link.is-current {
	background: var(--ies-light-purple-gray, #F7F7FD);
}

.mega-panel__link-title {
	display: block;
	font-family: Onest, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ies-navy, #11294B);
	transition: color 0.15s ease;
}

/* Only the title turns purple; the description stays navy. */
.mega-panel__link:hover .mega-panel__link-title,
.mega-panel__link:focus-visible .mega-panel__link-title,
.mega-panel__link.is-current .mega-panel__link-title {
	color: var(--ies-button-primary, #5D43DE);
}

.mega-panel__link-desc {
	display: block;
	margin-top: 5px;
	font-family: Onest, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ies-navy, #11294B);
}

.mega-panel__group-actions {
	margin-top: 20px;
	margin-right: auto;
}

/* ---------- Buttons ----------
 * Three shared styles used by group buttons, card buttons and the header CTA.
 * Hover matches the theme's .button-container .button treatment.
 */
.mega-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ies-button-gap, 8px);
	text-decoration: none;
	font-family: var(--ies-font-display, Onest, sans-serif);
	font-size: var(--ies-button-font-size, 16px);
	font-weight: var(--ies-button-font-weight, 600);
	line-height: var(--ies-button-line-height, 1.2);
	transition: var(--ies-button-transition, background 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease);
}

.mega-btn--primary {
	background: var(--ies-button-primary, #5D43DE);
	border: 2px solid var(--ies-button-primary, #5D43DE);
	color: var(--ies-button-text, #fff);
	border-radius: var(--ies-button-radius, 50px);
	padding: var(--ies-button-pad-y, 10px) var(--ies-button-pad-x, 24px);
}

.mega-btn--primary:hover,
.mega-btn--primary:focus-visible {
	background: var(--ies-button-hover, #4D4285);
	border-color: var(--ies-button-hover, #4D4285);
	color: var(--ies-button-text-hover, #fff);
}

.mega-btn--primary-white {
	background: var(--ies-button-primary-white-bg, #fff);
	border: 2px solid var(--ies-button-primary-white-bg, #fff);
	color: var(--ies-button-primary-white-text, #5D43DE);
	border-radius: var(--ies-button-radius, 50px);
	padding: var(--ies-button-pad-y, 12px) var(--ies-button-pad-x, 24px);
}

.mega-btn--primary-white:hover,
.mega-btn--primary-white:focus-visible {
	background: var(--ies-button-primary-white-hover-bg, #D2D1F1);
	border-color: var(--ies-button-primary-white-hover-bg, #D2D1F1);
	color: var(--ies-button-primary-white-text, #5D43DE);
}

.mega-btn--secondary {
	background: transparent;
	border: 2px solid var(--ies-button-primary, #5D43DE);
	color: var(--ies-button-primary, #5D43DE);
	border-radius: var(--ies-button-radius, 50px);
	padding: var(--ies-button-pad-y, 10px) var(--ies-button-pad-x, 24px);
}

.mega-btn--secondary:hover,
.mega-btn--secondary:focus-visible {
	background: transparent;
	border-color: var(--ies-button-hover, #4D4285);
	color: var(--ies-button-hover, #4D4285);
}

/* Text + filled circle chevron (Figma 619:658). The chevron is the exported
 * path as a background image so it matches the design exactly; the circle is
 * the element's own background, which is what changes on hover. */
.mega-btn--text-arrow {
	color: var(--ies-button-link-color, #11294B);
	padding: 0;
	border: 0;
	background: none;
}

.mega-btn--text-arrow::after {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: var(--ies-button-icon-size, 24px);
	height: var(--ies-button-icon-size, 24px);
	border-radius: 50%;
	background-color: var(--ies-button-primary, #5D43DE);
	background-image: var(--ies-button-icon-chevron);
	background-repeat: no-repeat;
	background-position: center;
	transition: background-color 0.2s ease;
}

.mega-btn--text-arrow:hover,
.mega-btn--text-arrow:focus-visible {
	color: var(--ies-button-link-color, #11294B);
}

.mega-btn--text-arrow:hover::after,
.mega-btn--text-arrow:focus-visible::after {
	background-color: var(--ies-button-hover, #4D4285);
}

.mega-btn--text-arrow-white {
	color: var(--ies-button-text-icon-white-color, #fff);
	padding: 0;
	border: 0;
	background: none;
}

.mega-btn--text-arrow-white::after {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: var(--ies-button-icon-size, 24px);
	height: var(--ies-button-icon-size, 24px);
	border-radius: 50%;
	background-color: var(--ies-button-text-icon-white-icon-bg, #fff);
	background-image: var(--ies-button-icon-chevron-on-light);
	background-repeat: no-repeat;
	background-position: center;
	transition: background-color 0.2s ease;
}

.mega-btn--text-arrow-white:hover,
.mega-btn--text-arrow-white:focus-visible {
	color: var(--ies-button-text-icon-white-color, #fff);
}

.mega-btn--text-arrow-white:hover::after,
.mega-btn--text-arrow-white:focus-visible::after {
	background-color: var(--ies-button-text-icon-white-icon-hover-bg, #D2D1F1);
}

/* ---------- Cards ---------- */
.mega-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.mega-card__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.mega-card__eyebrow {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.85;
}

.mega-card__title {
	margin: 0 0 8px;
	font-family: Onest, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
}

.mega-card__excerpt {
	font-size: 14px;
	line-height: 1.6;
}

.mega-card__excerpt p {
	margin: 0 0 0.5rem;
}

.mega-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

/* Gradient promo: image beside text */
.mega-card--mega-gradient {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px;
	border-radius: 20px;
	background: var(--purples-grad, linear-gradient(89deg, #4D4285 0%, #5D43DE 70%, #A4A2E6 100%));
	color: #fff;
}

.mega-card--mega-gradient .mega-card__media {
	flex: 0 0 45%;
	max-width: 45%;
}

.mega-card--mega-gradient .mega-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.mega-card--mega-gradient .mega-card__title,
.mega-card--mega-gradient .mega-card__excerpt,
.mega-card--mega-gradient .mega-card__eyebrow {
	color: #fff;
}

/* On the gradient card every button inverts to white-on-purple. The demo link
 * is a white circle with a purple chevron (Figma 619:660). */
.mega-card--mega-gradient .mega-btn--text-arrow {
	color: var(--ies-white, #fff);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

.mega-card--mega-gradient .mega-btn--text-arrow::after {
	background-color: var(--ies-white, #fff);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M13.946 12L9.346 7.4L10.054 6.692L15.362 12L10.054 17.308L9.346 16.6Z' fill='%235D43DE'/%3E%3C/svg%3E");
}

.mega-card--mega-gradient .mega-btn--text-arrow:hover,
.mega-card--mega-gradient .mega-btn--text-arrow:focus-visible {
	color: var(--ies-white, #fff);
}

.mega-card--mega-gradient .mega-btn--text-arrow:hover::after,
.mega-card--mega-gradient .mega-btn--text-arrow:focus-visible::after {
	background-color: var(--ies-card-hover-bg, #EFECFC);
}

.mega-card--mega-gradient .mega-btn--primary {
	background: #fff;
	border-color: #fff;
	color: var(--ies-button-primary, #5D43DE);
}

.mega-card--mega-gradient .mega-btn--primary:hover,
.mega-card--mega-gradient .mega-btn--primary:focus-visible {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.mega-card--mega-gradient .mega-btn--secondary {
	border-color: #fff;
	color: #fff;
}

.mega-card--mega-gradient .mega-btn--secondary:hover,
.mega-card--mega-gradient .mega-btn--secondary:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--ies-button-primary, #5D43DE);
}

/* Box hover */
.mega-card--box-hover {
	padding: 12px;
	border-radius: 12px;
	transition: background 0.15s ease;
}

.mega-card--box-hover:hover {
	background: var(--ies-light-purple-gray, #F7F7FD);
}

.mega-card--box-hover .mega-card__title {
	font-size: 15px;
	font-weight: 600;
}

.mega-card--box-hover:hover .mega-card__title {
	color: var(--ies-button-primary, #5D43DE);
}

/* Feature */
.mega-card--feature {
	padding: 16px;
	border-radius: 12px;
	background: var(--ies-light-purple-gray, #F7F7FD);
}

.mega-card--feature .mega-card__media {
	margin-bottom: 12px;
}

.mega-card--feature .mega-card__title {
	font-size: 16px;
}

/* ---------- Panel footer bar (Figma 619:606) ---------- */
.mega-panel__footer {
	border-top: 1px solid var(--ies-neutral-gray, #D8D8E0);
	border-bottom: 1px solid var(--ies-neutral-gray, #D8D8E0);
	background: var(--ies-light-purple-gray, #F7F7FD);
}

.mega-panel__footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: var(--ies-mega-max);
	min-height: 44px;
	margin: 0 auto;
	padding: 10px var(--ies-mega-gutter);
}

ul.mega-panel__footer-menu {
	display: flex;
	align-items: center;
	gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.mega-panel__footer-menu li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

ul.mega-panel__footer-menu a,
.mega-panel__close {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	text-decoration: none;
	font-family: Onest, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ies-navy, #11294B);
	transition: color 0.15s ease;
}

.mega-panel__close {
	cursor: pointer;
}

ul.mega-panel__footer-menu a:hover,
ul.mega-panel__footer-menu a:focus-visible,
.mega-panel__close:hover,
.mega-panel__close:focus-visible {
	color: var(--ies-button-primary, #5D43DE);
}

.mega-panel__footer-icon {
	display: block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
}

/* Icons for menu-managed items, set with a CSS class on the menu item. */
ul.mega-panel__footer-menu > li.icon-calendar > a::before,
ul.mega-panel__footer-menu > li.icon-mail > a::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Don’t paint the CSS icon when the link already has an inline SVG. */
ul.mega-panel__footer-menu > li.icon-calendar > a:has(.mega-panel__footer-icon)::before,
ul.mega-panel__footer-menu > li.icon-mail > a:has(.mega-panel__footer-icon)::before {
	content: none;
}

ul.mega-panel__footer-menu > li.icon-calendar > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.30775 21.5C4.80258 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V6.30775C3.5 5.80258 3.675 5.375 4.025 5.025C4.375 4.675 4.80258 4.5 5.30775 4.5H6.69225V2.38475H8.23075V4.5H15.8077V2.38475H17.3077V4.5H18.6923C19.1974 4.5 19.625 4.675 19.975 5.025C20.325 5.375 20.5 5.80258 20.5 6.30775V19.6923C20.5 20.1974 20.325 20.625 19.975 20.975C19.625 21.325 19.1974 21.5 18.6923 21.5H5.30775ZM5.30775 20H18.6923C18.7693 20 18.8398 19.9679 18.9038 19.9038C18.9679 19.8398 19 19.7693 19 19.6923V10.3077H5V19.6923C5 19.7693 5.03208 19.8398 5.09625 19.9038C5.16025 19.9679 5.23075 20 5.30775 20ZM5 8.80775H19V6.30775C19 6.23075 18.9679 6.16025 18.9038 6.09625C18.8398 6.03208 18.7693 6 18.6923 6H5.30775C5.23075 6 5.16025 6.03208 5.09625 6.09625C5.03208 6.16025 5 6.23075 5 6.30775V8.80775Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.30775 21.5C4.80258 21.5 4.375 21.325 4.025 20.975C3.675 20.625 3.5 20.1974 3.5 19.6923V6.30775C3.5 5.80258 3.675 5.375 4.025 5.025C4.375 4.675 4.80258 4.5 5.30775 4.5H6.69225V2.38475H8.23075V4.5H15.8077V2.38475H17.3077V4.5H18.6923C19.1974 4.5 19.625 4.675 19.975 5.025C20.325 5.375 20.5 5.80258 20.5 6.30775V19.6923C20.5 20.1974 20.325 20.625 19.975 20.975C19.625 21.325 19.1974 21.5 18.6923 21.5H5.30775ZM5.30775 20H18.6923C18.7693 20 18.8398 19.9679 18.9038 19.9038C18.9679 19.8398 19 19.7693 19 19.6923V10.3077H5V19.6923C5 19.7693 5.03208 19.8398 5.09625 19.9038C5.16025 19.9679 5.23075 20 5.30775 20ZM5 8.80775H19V6.30775C19 6.23075 18.9679 6.16025 18.9038 6.09625C18.8398 6.03208 18.7693 6 18.6923 6H5.30775C5.23075 6 5.16025 6.03208 5.09625 6.09625C5.03208 6.16025 5 6.23075 5 6.30775V8.80775Z'/%3E%3C/svg%3E");
}

ul.mega-panel__footer-menu > li.icon-mail > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4.30775 19.5C3.80258 19.5 3.375 19.325 3.025 18.975C2.675 18.625 2.5 18.1974 2.5 17.6923V6.30775C2.5 5.80258 2.675 5.375 3.025 5.025C3.375 4.675 3.80258 4.5 4.30775 4.5H19.6923C20.1974 4.5 20.625 4.675 20.975 5.025C21.325 5.375 21.5 5.80258 21.5 6.30775V17.6923C21.5 18.1974 21.325 18.625 20.975 18.975C20.625 19.325 20.1974 19.5 19.6923 19.5H4.30775ZM12 12.5578L4 7.44225V17.6923C4 17.7821 4.02883 17.8558 4.0865 17.9135C4.14417 17.9712 4.21792 18 4.30775 18H19.6923C19.7821 18 19.8558 17.9712 19.9135 17.9135C19.9712 17.8558 20 17.7821 20 17.6923V7.44225L12 12.5578ZM12 11L19.8462 6H4.15375L12 11Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4.30775 19.5C3.80258 19.5 3.375 19.325 3.025 18.975C2.675 18.625 2.5 18.1974 2.5 17.6923V6.30775C2.5 5.80258 2.675 5.375 3.025 5.025C3.375 4.675 3.80258 4.5 4.30775 4.5H19.6923C20.1974 4.5 20.625 4.675 20.975 5.025C21.325 5.375 21.5 5.80258 21.5 6.30775V17.6923C21.5 18.1974 21.325 18.625 20.975 18.975C20.625 19.325 20.1974 19.5 19.6923 19.5H4.30775ZM12 12.5578L4 7.44225V17.6923C4 17.7821 4.02883 17.8558 4.0865 17.9135C4.14417 17.9712 4.21792 18 4.30775 18H19.6923C19.7821 18 19.8558 17.9712 19.9135 17.9135C19.9712 17.8558 20 17.7821 20 17.6923V7.44225L12 12.5578ZM12 11L19.8462 6H4.15375L12 11Z'/%3E%3C/svg%3E");
}

/* ---------- Cascade guard ----------
 * Storefront styles the whole nav tree generically (`.main-navigation ul ul`
 * parks submenus at left: -9999px, `.main-navigation ul li a` forces a 200px
 * block link). Those beat the single-class component rules above, so re-assert
 * the affected properties at a higher specificity. The unscoped rules stay
 * as-is for the cloned mobile panel, which lives outside .main-navigation.
 */
.header-wrapper .main-navigation .mega-panel ul {
	position: static;
	float: none;
	left: auto;
	right: auto;
	top: auto;
	z-index: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.header-wrapper .main-navigation .mega-panel li {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
}

.header-wrapper .main-navigation .mega-panel a {
	width: auto;
	min-width: 0;
	padding: 0;
}

/* Storefront shrinks every nested nav link to 0.875em; restore the design's
 * type scale at a specificity that beats it. */
.header-wrapper .main-navigation .mega-panel a.mega-panel__heading {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.1;
}

.header-wrapper .main-navigation .mega-panel a.mega-panel__link .mega-panel__link-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.header-wrapper .main-navigation .mega-panel a.mega-panel__link .mega-panel__link-desc {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
}

.header-wrapper .main-navigation .mega-panel a.mega-btn {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

.header-wrapper .main-navigation .mega-panel ul.mega-panel__footer-menu a,
.header-wrapper .main-navigation .mega-panel .mega-panel__close {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ies-navy, #11294B);
}

.header-wrapper .main-navigation .mega-panel ul.mega-panel__footer-menu a:hover,
.header-wrapper .main-navigation .mega-panel ul.mega-panel__footer-menu a:focus-visible,
.header-wrapper .main-navigation .mega-panel .mega-panel__close:hover,
.header-wrapper .main-navigation .mega-panel .mega-panel__close:focus-visible {
	color: var(--ies-button-primary, #5D43DE);
}

.header-wrapper .main-navigation .mega-panel a.mega-panel__link:hover,
.header-wrapper .main-navigation .mega-panel a.mega-panel__link:focus-visible,
.header-wrapper .main-navigation .mega-panel a.mega-panel__link.is-current {
	background: var(--ies-light-purple-gray, #F7F7FD);
}

.header-wrapper .main-navigation .mega-panel a.mega-panel__link:hover .mega-panel__link-title,
.header-wrapper .main-navigation .mega-panel a.mega-panel__link:focus-visible .mega-panel__link-title,
.header-wrapper .main-navigation .mega-panel a.mega-panel__link.is-current .mega-panel__link-title {
	color: var(--ies-button-primary, #5D43DE);
}

.header-wrapper .main-navigation .mega-panel ul.mega-panel__links {
	display: grid;
	grid-template-columns: repeat(var(--mega-cols, 1), minmax(0, 1fr));
	gap: 4px var(--ies-mega-col-gap);
}

.header-wrapper .main-navigation .mega-panel a.mega-panel__heading {
	display: block;
	padding: 0 0 12px;
}

.header-wrapper .main-navigation .mega-panel a.mega-panel__link {
	display: block;
	padding: 10px;
}

.header-wrapper .main-navigation .mega-panel a.mega-btn {
	display: inline-flex;
}

.header-wrapper .main-navigation .mega-panel a.mega-btn--primary,
.header-wrapper .main-navigation .mega-panel a.mega-btn--secondary {
	padding: 10px 24px;
}

.header-wrapper .main-navigation .mega-panel ul.mega-panel__footer-menu {
	display: flex;
	align-items: center;
	gap: 40px;
}

.header-wrapper .main-navigation .mega-panel ul.mega-panel__footer-menu > li {
	display: flex;
	align-items: center;
}

.header-wrapper .main-navigation .mega-panel ul.mega-panel__footer-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-wrapper .main-navigation .mega-panel a.mega-card {
	display: block;
}

.header-wrapper .main-navigation .mega-panel a.mega-card--mega-gradient {
	display: flex;
	padding: 20px;
}

.header-wrapper .main-navigation .mega-panel a.mega-card--box-hover {
	padding: 12px;
}

.header-wrapper .main-navigation .mega-panel a.mega-card--feature {
	padding: 16px;
}

/* ---------- Narrower desktops ---------- */
@media (max-width: 1327px) {
	:root {
		--ies-mega-gutter: 24px;
	}

	.mega-panel__inner,
	.mega-panel__footer-inner {
		max-width: 100%;
	}

	.mega-panel__aside {
		width: 340px;
	}
}

@media (max-width: 1024px) {
	.header-wrapper .main-navigation {
		display: none;
	}
}