/*
 * Mega menu (see src/MegaMenu.php). Desktop only: on smaller screens Elementor's own dropdown is used, where the
 * extra parts are hidden. The panel hangs under the whole (sticky) header bar instead of under its menu item.
 */
.kmp-mega__icon, .kmp-mega__desc, .kmp-mega__photo, .kmp-mega__call, .kmp-mega__count { display: none; }

@media (min-width: 1025px) {
	/* Let the panel position itself against the header bar, not against the menu item or the menu column. */
	.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu,
	.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu > .kmp-mega,
	.elementor-location-header .elementor-widget-nav-menu,
	.elementor-location-header .e-con:has(> .elementor-widget-nav-menu) { position: static !important; }

	body .elementor-location-header .kmp-mega > .sub-menu {
		/* Full width under the header bar; the cards line up with the header and the site (1400px). */
		--kmp-mega-pad: max(20px, calc((100% - 1400px) / 2));
		position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
		width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important;
		grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px;
		padding: 28px var(--kmp-mega-pad) 32px !important;
		background: #eae8e5; border: 0; border-top: 1px solid #d6d1cb; border-radius: 0;
		box-shadow: 0 30px 60px -30px rgba(3, 20, 53, .4), 0 2px 6px rgba(3, 20, 53, .06);
	}
	/* Elementor's "dropdown distance" (margin-top with !important) would leave a gap under the bar. */
	body .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main > .elementor-nav-menu > li.kmp-mega > .sub-menu.elementor-nav-menu--dropdown { margin-top: 0 !important; }

	/* Elementor shifts the submenus of all but the first item by the item spacing (inset-inline-start, !important). */
	body .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li.kmp-mega:nth-child(n) > .sub-menu { inset-inline: 0 !important; }

	/* Open on hover and keyboard focus, and when SmartMenus opens it (touch, arrow keys); as a grid it lays out the cards. */
	body .elementor-location-header .kmp-mega:hover > .sub-menu,
	body .elementor-location-header .kmp-mega:focus-within > .sub-menu,
	body .elementor-location-header .kmp-mega > .sub-menu[aria-hidden="false"] { display: grid !important; animation: kmp-mega-in .18s ease-out; }
	/* A bridge over the bar between the menu item and the panel, so the panel stays open on the way down. */
	body .elementor-location-header .kmp-mega > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 34px; }
	@keyframes kmp-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
	/* The page under an open panel: darker and blurred, so the menu stands out. It lets the mouse through, so the menu closes as before. */
	body .elementor-location-header .kmp-mega > .sub-menu::after {
		content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; pointer-events: none;
		background: rgba(3, 20, 53, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
		animation: kmp-mega-fade .2s ease-out;
	}
	@keyframes kmp-mega-fade { from { opacity: 0; } to { opacity: 1; } }

	body .elementor-location-header .kmp-mega > .sub-menu > li { border: 0 !important; min-width: 0; }

	/* Tiles: the same photo (and count) as on the overview pages, then icon, title and description. */
	body .elementor-location-header .kmp-mega > .sub-menu > li > a {
		position: relative; display: flex; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; height: 100%; padding: 0 !important; overflow: hidden;
		background: #fff !important; color: #031435 !important; border: 0 !important; border-radius: 0;
		white-space: normal !important; text-transform: none; letter-spacing: 0; line-height: 1.4;
		transition: box-shadow .2s, transform .2s;
	}
	body .elementor-location-header .kmp-mega > .sub-menu > li:not(.kmp-mega__feature) > a:hover,
	body .elementor-location-header .kmp-mega > .sub-menu > li:not(.kmp-mega__feature) > a:focus-visible { transform: translateY(-3px); box-shadow: 0 20px 36px -24px rgba(3, 20, 53, .5); }
	body .elementor-location-header .kmp-mega > .sub-menu > li.current-menu-item > a { box-shadow: inset 0 -3px 0 #ebc273; }

	.kmp-mega__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #d6d1cb; border-bottom: 4px solid #ebc273; }
	/* !important: Elementor's own ".elementor img { height: auto }" would leave 3:2 photos short of the 4:3 tile. */
	.kmp-mega__photo img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .5s; }
	.kmp-mega > .sub-menu > li > a:hover .kmp-mega__photo img { transform: scale(1.04); }
	.kmp-mega__count { display: inline-block; position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; background: #ebc273; color: #031435; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
	.kmp-mega__icon {
		display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 12px; bottom: 12px;
		width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px -8px rgba(3, 20, 53, .45); transition: background-color .15s;
	}
	.kmp-mega__icon svg { width: 20px; height: 20px; fill: none; stroke: #031435; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
	.kmp-mega > .sub-menu > li > a:hover .kmp-mega__icon, .kmp-mega > .sub-menu > li > a:focus-visible .kmp-mega__icon { background: #ebc273; }
	.kmp-mega__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; width: 100%; padding: 18px 20px 20px; text-align: left; }
	.kmp-mega__title { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
	.kmp-mega__desc { display: block; color: #454240; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; }

	/* The highlighted page: a call to action across the panel, under the tiles. */
	body .elementor-location-header .kmp-mega > .sub-menu > li.kmp-mega__feature { grid-column: 1 / -1; }
	body .elementor-location-header .kmp-mega > .sub-menu > li.kmp-mega__feature > a {
		flex-direction: row; align-items: center !important; justify-content: space-between !important; gap: 24px; padding: 20px 24px !important; background: #ebc273 !important;
	}
	body .elementor-location-header .kmp-mega > .sub-menu > li.kmp-mega__feature > a:hover,
	body .elementor-location-header .kmp-mega > .sub-menu > li.kmp-mega__feature > a:focus-visible { background: #e4b65e !important; }
	.kmp-mega__feature .kmp-mega__text { width: auto; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; padding: 0; }
	.kmp-mega__feature .kmp-mega__title { font-size: 18px; }
	.kmp-mega__feature .kmp-mega__desc { color: #031435; font-size: 15px; }
	.kmp-mega__feature .kmp-mega__call {
		display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 12px 20px; background: #031435; color: #fff;
		font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: background-color .15s;
	}
	.kmp-mega__feature .kmp-mega__call::after { content: "→"; transition: transform .15s; }
	.kmp-mega__feature > a:hover .kmp-mega__call::after { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	body .elementor-location-header .kmp-mega > .sub-menu, body .elementor-location-header .kmp-mega > .sub-menu::after { animation: none !important; }
	.kmp-mega__feature .kmp-mega__call::after, .kmp-mega__photo img { transition: none; }
	body .elementor-location-header .kmp-mega > .sub-menu > li > a:hover { transform: none !important; }
}