/* Mega menu for header items with the "pja-mega-menu" class (Admin → Menus): the dropdown becomes a wide
   panel, each child is a column heading and its children are listed underneath. Mobile keeps the drawer. */
.header-navigation .header-menu-container ul li.pja-mega-menu > ul.sub-menu.pja-mega-panel {
	flex-direction: row;
	flex-wrap: nowrap;
	width: max-content;
	max-width: calc(100vw - 2rem);
	left: 50%;
	margin-left: -265px;
	padding: 1.25rem 0.75rem 1rem;
}
/* only while open (same states the theme uses to show a dropdown), so the theme's hidden state still applies */
.header-navigation .header-menu-container ul li.pja-mega-menu:hover > ul.sub-menu.pja-mega-panel,
.header-navigation .header-menu-container ul li.pja-mega-menu:focus-within > ul.sub-menu.pja-mega-panel,
.header-navigation .header-menu-container ul li.pja-mega-menu.menu-item--toggled-on > ul.sub-menu.pja-mega-panel {
	display: flex;
}
.header-navigation .header-menu-container ul.pja-mega-panel > li.pja-mega-col {
	width: 265px;
	padding: 0 0.75rem;
	border-bottom: 0;
}
.header-navigation .header-menu-container ul.pja-mega-panel > li.pja-mega-col + li.pja-mega-col {
	border-left: 1px solid rgba(255, 255, 255, .12);
}
.header-navigation .header-menu-container ul.pja-mega-panel > li.pja-mega-col > a.pja-mega-heading {
	width: auto;
	padding: 0 0.5em 0.75em;
	margin-bottom: 0.35rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--global-palette1);
	background: transparent;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.header-navigation .header-menu-container ul.pja-mega-panel > li.pja-mega-col > a.pja-mega-heading:hover {
	color: var(--global-palette9);
	background: transparent;
}
/* the villa lists are always visible inside the open panel, in two short columns */
.header-navigation .header-menu-container ul.pja-mega-panel ul.sub-menu.pja-mega-list {
	position: static !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	column-gap: 0.25rem;
	opacity: 1 !important;
	visibility: visible !important;
	clip: auto !important;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
	transform: none !important;
	box-shadow: none !important;
	background: transparent !important;
}
.header-navigation .header-menu-container ul.pja-mega-panel ul.pja-mega-list > li.menu-item {
	border-bottom: 0;
}
.header-navigation .header-menu-container ul.pja-mega-panel ul.pja-mega-list > li.menu-item > a {
	width: auto;
	padding: 0.55em 0.5em;
	white-space: nowrap;
}