/**
 * HMT Navigation - the About, Find Your Pace and Destinations mega menus.
 *
 * Two layouts, chosen by where the panel is rendered rather than by viewport
 * width:
 *
 * - Desktop: inside the header menu while Avada has it in desktop mode
 *   (nav.awb-menu_desktop). The panel becomes a centered card with photos,
 *   a navy feature card and a tinted strip along the bottom.
 * - Everywhere else (the mobile drawer, at any width): a compact stacked list.
 *   The drawer's menu never carries awb-menu_desktop, so tablets between the
 *   menu's 1024px breakpoint and wider screens still get the stacked list.
 *
 * Colours are the Avada global palette (awb-color1-8); type follows Global
 * Options > Typography through the variables Avada emits.
 */

.hmt-mega {
	--hmt-navy: var(--awb-color8, #003d51);
	--hmt-blue: var(--awb-color7, #1082a0);
	--hmt-aqua: var(--awb-color5, #89d3cf);
	--hmt-aqua-tint: #eaf6f5;
	--hmt-aqua-mist: #f4faf9;
	--hmt-pink: #f1877f;
	--hmt-pink-hover: #f2756f;
	--hmt-muted: #4d6b77;
	--hmt-line: #e3eced;
	--hmt-sans: var(--body_typography-font-family, "Open Sans", Arial, Helvetica, sans-serif);
	--hmt-eyebrow-font: var(--h6_typography-font-family, Cinzel, Georgia, serif);

	width: 100%;
	color: var(--hmt-navy);
	font-family: var(--hmt-sans);
}

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

/* ------------------------------------------------------------ shared ---- */

.hmt-mega .hmt-mega__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-family: var(--hmt-eyebrow-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hmt-blue);
	text-decoration: none;
}

.hmt-mega .hmt-mega__eyebrow i {
	font-size: 14px;
}

.hmt-mega a.hmt-mega__eyebrow:hover,
.hmt-mega a.hmt-mega__eyebrow:focus {
	color: var(--hmt-navy);
}

.hmt-mega .hmt-mega__list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hmt-mega .hmt-mega__list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hmt-mega .hmt-mega__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	margin: 0 -10px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.hmt-mega .hmt-mega__link:hover,
.hmt-mega .hmt-mega__link:focus-visible {
	background: var(--hmt-aqua-mist);
	text-decoration: none;
}

.hmt-mega .hmt-mega__link:focus-visible {
	outline: 2px solid var(--hmt-blue);
	outline-offset: 0;
}

.hmt-mega .hmt-mega__thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 8px;
	object-fit: cover;
	background: var(--hmt-aqua-tint);
}

.hmt-mega .hmt-mega__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--hmt-aqua-tint);
	color: var(--hmt-blue);
	font-size: 15px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hmt-mega .hmt-mega__link:hover .hmt-mega__icon,
.hmt-mega .hmt-mega__link:focus-visible .hmt-mega__icon {
	background: var(--hmt-blue);
	color: #fff;
}

.hmt-mega .hmt-mega__text {
	min-width: 0;
}

.hmt-mega .hmt-mega__name {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--hmt-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hmt-navy);
	transition: color 0.15s ease;
}

.hmt-mega .hmt-mega__go {
	font-size: 12px;
	color: var(--hmt-pink);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.hmt-mega .hmt-mega__link:hover .hmt-mega__name,
.hmt-mega .hmt-mega__link:focus-visible .hmt-mega__name {
	color: var(--hmt-blue);
}

.hmt-mega .hmt-mega__link:hover .hmt-mega__go,
.hmt-mega .hmt-mega__link:focus-visible .hmt-mega__go {
	opacity: 1;
	transform: none;
}

.hmt-mega .hmt-mega__desc {
	display: -webkit-box;
	margin-top: 2px;
	overflow: hidden;
	font-family: var(--hmt-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--hmt-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	text-wrap: pretty;
}

/* In the drawer the feature cards and strips are left out: the drawer keeps
   its own request CTA, and the parent menu items already link to the pages
   the strips point at. */
.hmt-mega .hmt-mega__feature,
.hmt-mega .hmt-mega__strip {
	display: none;
}

.hmt-mega .hmt-mega__col + .hmt-mega__col {
	margin-top: 16px;
}

/* ------------------------------------------------- pace rail (drawer) --- */

.hmt-mega .hmt-pacemenu {
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
}

.hmt-mega .hmt-pacemenu__pace {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
}

.hmt-mega .hmt-pacemenu__pace:hover,
.hmt-mega .hmt-pacemenu__pace:focus-visible {
	background: var(--hmt-aqua-mist);
	text-decoration: none;
}

.hmt-mega .hmt-pacemenu__pace-img {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 8px;
	object-fit: cover;
}

.hmt-mega .hmt-pacemenu__pace-text {
	min-width: 0;
}

.hmt-mega .hmt-pacemenu__pace-label {
	display: block;
	font-family: var(--hmt-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hmt-navy);
}

.hmt-mega .hmt-pacemenu__pace-desc {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--hmt-muted);
	text-wrap: pretty;
}

.hmt-mega .hmt-pacemenu__caret {
	display: none;
	margin-left: auto;
	font-size: 13px;
	color: var(--hmt-pink);
}

.hmt-mega .hmt-pacemenu__panel {
	margin-left: 31px;
	padding: 8px 0 8px 20px;
	border-left: 1px solid var(--hmt-line);
}

.hmt-mega .hmt-pacemenu__panel .hmt-mega__eyebrow {
	display: none;
}

/* ============================================================ desktop === */

/* Avada wraps each panel in a full-width library container with its own
   white background and padding. On desktop that container becomes a
   transparent frame and the panel itself is the card. */
.awb-menu_desktop .awb-menu__mega-wrap .fusion-fullwidth:has(.hmt-mega) {
	padding: 0 !important;
	background: transparent !important;
}

.awb-menu_desktop .awb-menu__mega-wrap .fusion-fullwidth:has(.hmt-mega) .fusion-column-wrapper,
.awb-menu_desktop .awb-menu__mega-wrap .fusion-fullwidth:has(.hmt-mega) .fusion-text {
	margin: 0 !important;
	padding: 0 !important;
}

/* The destination request plugin's own CTA column: the Destinations card
   replaces it on desktop. It still shows in the drawer. */
.awb-menu_desktop .awb-menu__mega-wrap .hmt-destreq-cta,
.awb-menu_desktop .awb-menu__mega-wrap #destination-request-form {
	display: none !important;
}

.awb-menu_desktop .hmt-mega {
	max-width: 1240px;
	margin: 0 auto;
	overflow: hidden;
	border-top: 3px solid var(--hmt-aqua);
	border-radius: 0 0 14px 14px;
	background: #fff;
	box-shadow: 0 24px 50px -18px rgba(0, 30, 40, 0.45);
	text-align: left;
}

.awb-menu_desktop .hmt-mega .hmt-mega__body {
	display: flex;
	align-items: stretch;
}

.awb-menu_desktop .hmt-mega .hmt-mega__col {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 30px 32px;
}

.awb-menu_desktop .hmt-mega .hmt-mega__col + .hmt-mega__col {
	padding-left: 8px;
}

.awb-menu_desktop .hmt-mega .hmt-mega__eyebrow {
	margin-bottom: 14px;
}

.awb-menu_desktop .hmt-mega .hmt-mega__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--hmt-line);
}

.awb-menu_desktop .hmt-mega .hmt-mega__list {
	gap: 4px;
}

.awb-menu_desktop .hmt-mega .hmt-mega__list--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
}

.awb-menu_desktop .hmt-mega .hmt-mega__link {
	align-items: flex-start;
	gap: 14px;
	padding: 10px 14px;
	margin: 0 -14px;
}

.awb-menu_desktop .hmt-mega .hmt-mega__thumb {
	width: 52px;
	height: 52px;
	border-radius: 10px;
}

.awb-menu_desktop .hmt-mega .hmt-mega__icon {
	width: 40px;
	height: 40px;
	font-size: 16px;
}

.awb-menu_desktop .hmt-mega .hmt-mega__name {
	font-size: 15.5px;
}

.awb-menu_desktop .hmt-mega .hmt-mega__desc {
	font-size: 13.5px;
	line-height: 1.5;
}

/* Feature card */
.awb-menu_desktop .hmt-mega .hmt-mega__feature {
	position: relative;
	display: flex;
	flex: 0 0 300px;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px;
	background: var(--hmt-navy) center / cover no-repeat;
	color: #fff;
}

.awb-menu_desktop .hmt-mega--about .hmt-mega__feature {
	flex-basis: 340px;
}

.awb-menu_desktop .hmt-mega--dest .hmt-mega__feature {
	flex-basis: 280px;
}

.awb-menu_desktop .hmt-mega .hmt-mega__feature::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 61, 81, 0) 0%, rgba(0, 61, 81, 0.55) 35%, rgba(0, 61, 81, 0.96) 70%);
}

.awb-menu_desktop .hmt-mega .hmt-mega__feature--portrait {
	justify-content: center;
}

.awb-menu_desktop .hmt-mega .hmt-mega__feature--portrait::before {
	display: none;
}

.awb-menu_desktop .hmt-mega .hmt-mega__feature > * {
	position: relative;
}

.awb-menu_desktop .hmt-mega .hmt-mega__portrait {
	width: 84px;
	height: 84px;
	margin: 0 0 16px;
	border: 3px solid var(--hmt-aqua);
	border-radius: 50%;
	object-fit: cover;
	object-position: center 22%;
}

.awb-menu_desktop .hmt-mega .hmt-mega__feature-eyebrow {
	margin: 0 0 8px;
	font-family: var(--hmt-eyebrow-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hmt-aqua);
}

.awb-menu_desktop .hmt-mega .hmt-mega__feature-title {
	margin: 0 0 8px;
	font-family: var(--hmt-sans);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #fff;
}

.awb-menu_desktop .hmt-mega .hmt-mega__feature-text {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.55;
	color: #dcecef;
}

.awb-menu_desktop .hmt-mega .hmt-mega__feature-btn {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: 4px;
	background: var(--hmt-pink);
	color: #fff;
	font-family: var(--hmt-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.awb-menu_desktop .hmt-mega .hmt-mega__feature-btn:hover,
.awb-menu_desktop .hmt-mega .hmt-mega__feature-btn:focus-visible {
	background: var(--hmt-pink-hover);
	color: #fff;
}

/* Bottom strip: the text and its link sit together on the left. */
.awb-menu_desktop .hmt-mega .hmt-mega__strip {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	padding: 15px 32px;
	border-top: 1px solid var(--hmt-line);
	background: var(--hmt-aqua-tint);
	font-size: 14px;
	color: var(--hmt-navy);
}

.awb-menu_desktop .hmt-mega .hmt-mega__strip-text i {
	margin-right: 10px;
	font-size: 15px;
	color: var(--hmt-pink);
}

.awb-menu_desktop .hmt-mega .hmt-mega__strip-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	color: var(--hmt-blue);
	text-decoration: none;
}

.awb-menu_desktop .hmt-mega .hmt-mega__strip-link i {
	font-size: 12px;
	transition: transform 0.15s ease;
}

.awb-menu_desktop .hmt-mega .hmt-mega__strip-link:hover {
	color: var(--hmt-navy);
}

.awb-menu_desktop .hmt-mega .hmt-mega__strip-link:hover i {
	transform: translateX(3px);
}

/* ------------------------------------------------ pace rail (desktop) --- */

/* The rail and the panels are interleaved in source order (pace, panel, pace,
   panel...) so the drawer can show each pace above its own destinations.
   Here grid pulls the paces into column 1 and stacks every panel in column 2;
   only the active panel is displayed. */
.awb-menu_desktop .hmt-mega .hmt-pacemenu {
	--hmt-rail: 330px;

	grid-template-columns: var(--hmt-rail) minmax(0, 1fr);
	/* One auto row per pace, then a 1fr row that soaks up the active panel's
	   extra height, so the paces stay stacked at the top of the rail. */
	grid-template-rows: repeat(var(--hmt-paces, 3), auto) 1fr;
	align-items: start;
	/* The rail's tint and divider run the full height of the card, however
	   tall the active panel is. */
	background: linear-gradient(
		to right,
		var(--hmt-aqua-mist) var(--hmt-rail),
		var(--hmt-line) var(--hmt-rail),
		var(--hmt-line) calc(var(--hmt-rail) + 1px),
		transparent calc(var(--hmt-rail) + 1px)
	);
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__pace {
	grid-column: 1;
	grid-row: var(--hmt-row, auto);
	position: relative;
	z-index: 1;
	gap: 14px;
	margin: 0 16px 6px;
	padding: 14px 16px;
	border-radius: 10px;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__pace:first-of-type {
	margin-top: 22px;
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__pace:hover {
	background: rgba(255, 255, 255, 0.7);
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__pace.is-active {
	background: #fff;
	box-shadow: 0 6px 18px -10px rgba(0, 61, 81, 0.35);
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__pace-img {
	width: 64px;
	height: 64px;
	border-radius: 10px;
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__pace.is-active .hmt-pacemenu__pace-label {
	color: var(--hmt-blue);
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__caret {
	display: block;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__pace.is-active .hmt-pacemenu__caret {
	opacity: 1;
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__pace:last-of-type {
	margin-bottom: 22px;
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__panel {
	display: none;
	grid-column: 2;
	grid-row: 1 / -1;
	min-width: 0;
	margin: 0;
	padding: 28px 32px 26px;
	border: 0;
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__panel.is-active {
	display: block;
}

.awb-menu_desktop .hmt-mega .hmt-pacemenu__panel .hmt-mega__eyebrow {
	display: flex;
}

@media (prefers-reduced-motion: reduce) {
	.hmt-mega *,
	.hmt-mega *::before {
		transition: none !important;
	}
}