/* ==========================================================================
   AFP static mega menu  (salient-child)
   Desktop: opens on hover under the header.
   Mobile : only the first column (page links) is shown, as an accordion.
   ========================================================================== */

:root {
	--afp-mm-accent: #57b197;
	--afp-mm-ink: #221f20;
	--afp-mm-body: #3c4547;
	--afp-mm-panel-bg: #ffffff;
	--afp-mm-hover-bg: #dfdfdf;
	--afp-mm-max: 1250px;
}

/* --------------------------------------------------------------- base panel */
.afp-mega {
	display: block;
	box-sizing: border-box;
	background: var(--afp-mm-panel-bg);
	text-align: left;
}

.afp-mega *,
.afp-mega *::before,
.afp-mega *::after {
	box-sizing: border-box;
}

/* Salient styles every <ul> inside .sf-menu li as a dark absolute dropdown,
   and floats its <li>s right. Undo all of that inside our panel. */
#header-outer .sf-menu li .afp-mega ul,
#header-outer .sf-menu li ul.afp-mega__links,
.afp-mega ul {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	/* pointer-events is intentionally NOT forced here — it must keep
	   inheriting from .afp-mega (none while closed, auto once open/hover/
	   focus-within) or every link in every closed panel stays clickable/
	   hoverable and can pop its menu open from anywhere on the page. */
	transform: none !important;
	transition: none !important;
	display: block !important;
	float: none !important;
	list-style: none !important;
}

#header-outer .sf-menu li .afp-mega ul > li,
.afp-mega ul > li {
	position: relative !important;
	float: none !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	list-style: none !important;
	display: list-item !important;
}

#header-outer .sf-menu li .afp-mega ul > li::before,
#header-outer .sf-menu li .afp-mega ul > li::after,
#header-outer .sf-menu li .afp-mega ul > li > a::before,
#header-outer .sf-menu li .afp-mega ul > li > a::after {
	display: none !important;
	content: none !important;
}

.afp-mega__inner {
	display: grid;
	grid-template-columns: 25% 75%;
	grid-template-rows: auto 1fr;
	align-items: start;
	width: 100%;
	max-width: var(--afp-mm-max);
	margin: 0 auto;
	padding: 0 12px;
}

/* --- column 1 : page links ------------------------------------------------ */
.afp-mega__col--nav {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	padding: 20px 15px 0 0;
}

.afp-mega .afp-mega__links {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 240px;
}

.afp-mega .afp-mega__links li {
	margin: 0;
	padding: 0;
	width: 100%;
	border: 0;
	list-style: none;
}

#header-outer #top nav ul li .afp-mega.afp-mega .afp-mega__links.afp-mega__links li > a,
.afp-mega .afp-mega__links li > a {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	padding: 10px 10px 8px !important;
	margin: 0 !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	color: #000 !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: left !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	opacity: 1 !important;
	transition: background-color 0.25s ease, color 0.25s ease !important;
}

#header-outer #top nav ul li .afp-mega.afp-mega .afp-mega__links.afp-mega__links li > a:hover,
#header-outer #top nav ul li .afp-mega.afp-mega .afp-mega__links.afp-mega__links li > a:focus,
.afp-mega .afp-mega__links li > a:hover,
.afp-mega .afp-mega__links li > a:focus,
.afp-mega .afp-mega__links li > a.is-current {
	background-color: var(--afp-mm-hover-bg) !important;
	color: #000 !important;
}

/* --- column 2 + 3 : text/button + image ----------------------------------- */
.afp-mega__col--content {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: stretch;
	position: relative;
	z-index: 1 !important;
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	width: 100%;
	min-height: 330px;
	background: var(--afp-mm-panel-bg);
}

.afp-mega__text {
	width: 45%;
	padding: 20px 60px 150px 0;
}

.afp-mega .afp-mega__title {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding-bottom: 9px;
	font-family: "Poppins", sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--afp-mm-accent);
}

.afp-mega .afp-mega__desc p {
	margin: 0 0 20px;
	font-family: "Poppins", sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--afp-mm-body);
}

.afp-mega a.afp-mega__btn {
	display: inline-block;
	min-width: 230px;
	padding: 16px 20px;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: var(--afp-mm-accent);
	border: 0;
	border-radius: 0;
	transition: background-color 0.3s ease;
}

.afp-mega a.afp-mega__btn:hover,
.afp-mega a.afp-mega__btn:focus {
	background-color: var(--afp-mm-ink);
	color: #fff;
}

.afp-mega__media {
	position: relative;
	width: 55%;
	overflow: hidden;
}

.afp-mega .afp-mega__media img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
	object-position: center;
	-webkit-clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

/* --- sponsor banner ------------------------------------------------------- */
.afp-mega__banner {
	position: relative !important;
	z-index: 30 !important;
	grid-column: 1;
	grid-row: 2;
	align-self: end;
	width: 233.33%;   /* 58.33% of the panel, measured from the 25% column */
	max-width: none;
	margin: 24px 0 0;
	padding: 0 15px 30px 0;
}

.afp-mega__banner a {
	display: block;
	padding: 0;
	border: 0;
}

.afp-mega__banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Salient uses id-prefixed selectors such as `#top nav ul li a` for every link
   inside the header nav, which would otherwise recolour our panel. These
   mirror the rules above at a higher specificity.
   -------------------------------------------------------------------------- */
#header-outer #top nav ul li .afp-mega.afp-mega ul,
#header-outer #top nav ul li .afp-mega.afp-mega .afp-mega__links.afp-mega__links {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	/* pointer-events intentionally not forced here either — see the matching
	   comment on the base-specificity reset above. It must keep inheriting
	   from .afp-mega (none while closed) so closed panels can't be hovered
	   open from elsewhere on the page. */
	transform: none !important;
	display: block !important;
	float: none !important;
}

#header-outer #top nav ul li .afp-mega.afp-mega ul > li {
	position: relative !important;
	float: none !important;
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	display: list-item !important;
}

#header-outer .afp-mega .afp-mega__title,
#slide-out-widget-area .afp-mega .afp-mega__title {
	color: var(--afp-mm-accent) !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 24px !important;
	font-weight: 500 !important;
}

#header-outer .afp-mega .afp-mega__desc p {
	color: var(--afp-mm-body) !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 17px !important;
	line-height: 1.5 !important;
}

#header-outer #top nav ul li .afp-mega.afp-mega a.afp-mega__btn,
#header-outer .afp-mega a.afp-mega__btn {
	display: inline-block !important;
	width: auto !important;
	min-width: 230px !important;
	height: auto !important;
	padding: 16px 20px !important;
	margin: 0 !important;
	font-family: "Poppins", sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	text-align: center !important;
	text-decoration: none !important;
	color: #fff !important;
	background-color: var(--afp-mm-accent) !important;
	border: 0 !important;
	border-radius: 0 !important;
	opacity: 1 !important;
}

#header-outer #top nav ul li .afp-mega.afp-mega a.afp-mega__btn:hover,
#header-outer #top nav ul li .afp-mega.afp-mega a.afp-mega__btn:focus,
#header-outer .afp-mega a.afp-mega__btn:hover,
#header-outer .afp-mega a.afp-mega__btn:focus {
	background-color: var(--afp-mm-ink) !important;
	color: #fff !important;
}

#header-outer #top nav ul li .afp-mega.afp-mega .afp-mega__banner a,
#header-outer .afp-mega .afp-mega__banner a {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

#header-outer .afp-mega .afp-mega__banner img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
}

/* ==========================================================================
   DESKTOP  (>= 1000px) — hover panel anchored under the fixed header
   ========================================================================== */
@media only screen and (min-width: 1000px) {

	#header-outer .sf-menu > li.afp-has-mega {
		position: relative;
	}

	#header-outer .sf-menu > li.afp-has-mega > .afp-mega {
		position: absolute;
		top: 100%;
		left: 0;                 /* corrected to the viewport edge by JS */
		width: 100vw;
		z-index: 9990;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-6px);
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	}

	#header-outer .sf-menu > li.afp-has-mega:hover > .afp-mega,
	#header-outer .sf-menu > li.afp-has-mega:focus-within > .afp-mega,
	#header-outer .sf-menu > li.afp-has-mega.afp-mega-open > .afp-mega {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	/* Salient's own stylesheet has a blanket ".sf-menu ul { pointer-events:
	   none; }" rule (for its normal, JS-toggled submenus). That rule targets
	   our .afp-mega__links <ul> directly — not just as an inherited value —
	   so it wins over .afp-mega's own pointer-events regardless of open/
	   closed state and made every link in the nav column unclickable even
	   while the panel was open. Explicitly re-enable it here once the panel
	   is open, matching the states above. */
	#header-outer .sf-menu > li.afp-has-mega:hover > .afp-mega .afp-mega__links,
	#header-outer .sf-menu > li.afp-has-mega:focus-within > .afp-mega .afp-mega__links,
	#header-outer .sf-menu > li.afp-has-mega.afp-mega-open > .afp-mega .afp-mega__links {
		pointer-events: auto;
	}

	/* Salient adds its own caret/arrow for real sub-menus — nothing to hide here,
	   but keep the parent link underline behaving like the other items. */
	#header-outer .sf-menu > li.afp-has-mega > a {
		position: relative;
		z-index: 2;
	}

	/* The off-canvas copy of the menu must stay closed on desktop. */
	#slide-out-widget-area .afp-mega,
	#slide-out-widget-area-bg .afp-mega {
		display: none;
	}
}

/* Narrower desktops: pull the inner padding in a little. */
@media only screen and (min-width: 1000px) and (max-width: 1300px) {
	.afp-mega__inner {
		padding: 0 25px;
	}
	.afp-mega__text {
		padding-right: 35px;
	}
}

/* ==========================================================================
   MOBILE / TABLET  (<= 999px) — first column only, accordion
   ========================================================================== */
@media only screen and (max-width: 999px) {

	/* The desktop header menu is hidden by Salient; make sure nothing leaks. */
	#header-outer .sf-menu .afp-mega {
		display: none !important;
	}

	/* Off-canvas menu ------------------------------------------------------ */
	#slide-out-widget-area .afp-has-mega {
		position: relative;
	}

	#slide-out-widget-area .afp-has-mega > a {
		display: inline-block;
		max-width: calc(100% - 46px);
	}

	/* toggle caret injected by the JS */
	.afp-mega-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 38px;
		height: 38px;
		padding: 0;
		margin: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		line-height: 0;
		-webkit-appearance: none;
		appearance: none;
	}

	.afp-mega-toggle::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 9px;
		height: 9px;
		margin: -7px 0 0 -5px;
		border-left: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(-45deg);
		transition: transform 0.3s ease;
		opacity: 0.85;
	}

	.afp-has-mega.afp-mega-open > .afp-mega-toggle::before {
		margin-top: -2px;
		transform: rotate(135deg);
	}

	#slide-out-widget-area .afp-has-mega > .afp-mega {
		display: none;
		position: static;
		width: 100%;
		max-width: 100%;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		margin: 6px 0 4px;
	}

	/* Belt-and-braces: explicitly re-enable the links here too, in case this
	   off-canvas copy of the menu ever ends up under Salient's .sf-menu
	   class (see the matching desktop-block comment above for why this is
	   needed — Salient's own ".sf-menu ul { pointer-events: none; }" rule
	   targets the <ul> directly, not just as an inherited value). */
	#slide-out-widget-area .afp-has-mega > .afp-mega .afp-mega__links {
		pointer-events: auto;
	}

	#slide-out-widget-area .afp-has-mega.afp-mega-open > .afp-mega {
		display: block;
	}

	#slide-out-widget-area .afp-mega__inner,
	.afp-mega__inner {
		display: block;
		padding: 0;
		max-width: 100%;
	}

	/* Columns 2 and 3 and the banner are not shown on mobile. */
	#slide-out-widget-area .afp-mega__col--content,
	#slide-out-widget-area .afp-mega__banner {
		display: none !important;
	}

	#slide-out-widget-area .afp-mega__col--nav {
		width: 100%;
		padding: 0 0 0 12px;
		border-left: 2px solid rgba(255, 255, 255, 0.3);
	}

	#slide-out-widget-area .afp-mega .afp-mega__links li {
		margin: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		opacity: 1 !important;
	}

	/* Salient collapses every <ul> inside an off-canvas <li> to max-height:0. */
	#slide-out-widget-area .afp-mega ul,
	#slide-out-widget-area .off-canvas-menu-container li .afp-mega ul {
		max-height: none !important;
		height: auto !important;
		overflow: visible !important;
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	#slide-out-widget-area .afp-mega .afp-mega__links li > a {
		padding: 9px 0 !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		line-height: 1.35 !important;
		color: inherit !important;
		opacity: 0.85 !important;
		background: transparent !important;
	}

	/* Salient animates an underline on off-canvas links — not wanted here. */
	#slide-out-widget-area .afp-mega .afp-mega__links li > a::before,
	#slide-out-widget-area .afp-mega .afp-mega__links li > a::after {
		display: none !important;
		content: none !important;
	}

	#slide-out-widget-area .afp-mega .afp-mega__links li > a:hover,
	#slide-out-widget-area .afp-mega .afp-mega__links li > a:focus {
		background: transparent !important;
		opacity: 1 !important;
		color: inherit !important;
	}

	/* If the theme ever renders this menu outside the off-canvas on mobile,
	   keep the same "column 1 only" rule. */
	.afp-mega__col--content,
	.afp-mega__banner {
		display: none;
	}

	.afp-mega__col--nav {
		width: 100%;
		padding-right: 0;
	}
}