/*
 * Locations mega menu.
 *
 * Every colour and type value below is an existing Global Kit variable — no new
 * design tokens. Scoped entirely to .avatar-mega / .avatar-mega-parent so the
 * approved header is untouched.
 *
 * The panel is position:fixed so it is centred on the viewport regardless of
 * where the Locations item sits in the header, which keeps it inside the
 * viewport at every desktop width and avoids overriding Elementor's own
 * positioning on the nav widget, the <ul> or the <li>.
 */

.avatar-mega {
	position: fixed;
	/* The menu item ends at 54px and the header at 80px on every desktop width.
	   Starting the panel at the menu item and padding the difference makes the
	   26px gap part of the hovered element, so the pointer can travel into the
	   panel without the hover state dropping — no JavaScript needed. */
	top: 54px;
	/* The padding is a transparent hover bridge, so the visible card starts at
	   88px — clear of the 80px header — while the pointer can still travel from
	   the menu item into the panel without the hover state dropping. */
	padding-top: 34px;
	left: 50%;
	transform: translateX( -50% ) translateY( -6px );
	width: min( 1120px, calc( 100vw - 32px ) );
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.avatar-mega-parent:hover > .avatar-mega,
.avatar-mega-parent:focus-within > .avatar-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX( -50% ) translateY( 0 );
}

/* Submenu indicator on the Locations label. Sized in em so it tracks the nav
   type scale and cannot change the header height or wrap the label. */
.avatar-mega-parent > a.elementor-item .avatar-mega-caret {
	display: inline-flex;
	align-items: center;
	width: .7em;
	height: .7em;
	margin-inline-start: .4em;
	vertical-align: middle;
	transition: transform .18s ease;
}

.avatar-mega-parent > a.elementor-item .avatar-mega-caret svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.avatar-mega-parent:hover > a.elementor-item .avatar-mega-caret,
.avatar-mega-parent:focus-within > a.elementor-item .avatar-mega-caret {
	transform: rotate( 180deg );
}

/* The panel sits inside Elementor's nav <ul>, which styles every descendant
   <a> as a menu link (nowrap, padding, flex:1). Undo that for the panel only.
   The .avatar-mega-parent prefix raises specificity above Elementor's rule. */
.avatar-mega-parent .avatar-mega a,
.avatar-mega-parent .avatar-mega span {
	white-space: normal;
	letter-spacing: normal;
	text-transform: none;
}

.avatar-mega-parent .avatar-mega a {
	padding: 0;
	flex: 0 1 auto;
	width: auto;
	background: none;
}

.avatar-mega__inner {
	background-color: var( --e-global-color-surfwhite );
	border: 1px solid var( --e-global-color-outlinevar );
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba( 26, 27, 54, .12 );
	padding: 28px;
}

/* ---------- heading ---------- */

.avatar-mega__head {
	margin-bottom: 20px;
}

.avatar-mega__title {
	display: block;
	color: var( --e-global-color-primary );
	font-family: var( --e-global-typography-headlinemd-font-family ), sans-serif;
	font-size: var( --e-global-typography-headlinemd-font-size );
	font-weight: var( --e-global-typography-headlinemd-font-weight );
	line-height: var( --e-global-typography-headlinemd-line-height );
}

.avatar-mega__intro {
	display: block;
	margin-top: 4px;
	color: var( --e-global-color-text );
	font-family: var( --e-global-typography-bodymd-font-family ), sans-serif;
	font-size: var( --e-global-typography-bodymd-font-size );
	font-weight: var( --e-global-typography-bodymd-font-weight );
	line-height: var( --e-global-typography-bodymd-line-height );
}

/* ---------- grid ---------- */

.avatar-mega__grid {
	/* !important only where Elementor's own nav-menu reset would win. */
	display: grid !important;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 16px;
	margin: 0;
	padding: 0;
}

.avatar-mega__item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.avatar-mega-parent .avatar-mega a.avatar-mega__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var( --e-global-color-outlinevar );
	border-radius: 12px;
	background-color: var( --e-global-color-surfwhite );
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.avatar-mega-parent .avatar-mega a.avatar-mega__card:hover,
.avatar-mega-parent .avatar-mega a.avatar-mega__card:focus-visible {
	border-color: var( --e-global-color-secondary );
	box-shadow: 0 10px 26px rgba( 26, 27, 54, .10 );
	transform: translateY( -2px );
}

/* ---------- media ---------- */

.avatar-mega-parent .avatar-mega__media {
	display: block;
	width: 100%;
	/* Shorter than the 16:9 used at three-up: four narrower cards still show
	   enough of the facility without making the panel tall. */
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background-color: var( --e-global-color-surflow );
}

.avatar-mega__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Shown when a Location has no featured image. */
.avatar-mega-parent .avatar-mega__media--empty {
	display: flex;
	width: 100%;
	aspect-ratio: 2 / 1;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var( --e-global-color-outlinevar );
	color: var( --e-global-color-secondary );
}

/* ---------- body ---------- */

.avatar-mega-parent .avatar-mega__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
}

.avatar-mega__name {
	color: var( --e-global-color-primary );
	font-family: var( --e-global-typography-labelbold-font-family ), sans-serif;
	font-size: var( --e-global-typography-labelbold-font-size );
	font-weight: var( --e-global-typography-labelbold-font-weight );
	line-height: var( --e-global-typography-labelbold-line-height );
}

.avatar-mega__place {
	color: var( --e-global-color-secondary );
	font-family: var( --e-global-typography-caption-font-family ), sans-serif;
	font-size: var( --e-global-typography-caption-font-size );
	font-weight: var( --e-global-typography-caption-font-weight );
	line-height: var( --e-global-typography-caption-line-height );
}

.avatar-mega__desc {
	margin-top: 4px;
	color: var( --e-global-color-text );
	font-family: var( --e-global-typography-bodymd-font-family ), sans-serif;
	font-size: 14px;
	font-weight: var( --e-global-typography-bodymd-font-weight );
	line-height: 21px;
	/* Keeps every card the same height whatever the client types. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.avatar-mega-parent .avatar-mega__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	color: var( --e-global-color-primary );
	font-family: var( --e-global-typography-labelbold-font-family ), sans-serif;
	font-size: var( --e-global-typography-labelbold-font-size );
	font-weight: var( --e-global-typography-labelbold-font-weight );
	line-height: var( --e-global-typography-labelbold-line-height );
}

.avatar-mega__arrow {
	transition: transform .18s ease;
}

.avatar-mega__card:hover .avatar-mega__arrow,
.avatar-mega__card:focus-visible .avatar-mega__arrow {
	transform: translateX( 3px );
}

/* ---------- footer CTA (matches the approved accent button treatment) ---------- */

.avatar-mega__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var( --e-global-color-outlinevar );
}

.avatar-mega-parent .avatar-mega a.avatar-mega__cta {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 8px;
	background-color: var( --e-global-color-accent );
	color: var( --e-global-color-primary );
	text-decoration: none;
	font-family: var( --e-global-typography-labelbold-font-family ), sans-serif;
	font-size: var( --e-global-typography-labelbold-font-size );
	font-weight: var( --e-global-typography-labelbold-font-weight );
	line-height: var( --e-global-typography-labelbold-line-height );
	box-shadow: 0 8px 24px rgba( 26, 27, 54, .12 );
	transition: box-shadow .18s ease;
}

.avatar-mega-parent .avatar-mega a.avatar-mega__cta:hover,
.avatar-mega-parent .avatar-mega a.avatar-mega__cta:focus-visible {
	box-shadow: 0 12px 32px rgba( 26, 27, 54, .16 );
}

/* ---------- narrower desktops ---------- */

/* Four 237px cards still read well at 1100; below ~1080 they get cramped, so
   the grid steps down to three rather than shrinking further. */
@media ( max-width: 1080px ) {
	.avatar-mega__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	}
}

/* ---------- mobile: Elementor's own dropdown handles Locations ---------- */

@media ( max-width: 1024px ) {
	.avatar-mega {
		display: none;
	}
}

.elementor-nav-menu--dropdown .avatar-mega {
	display: none;
}