/* QI Mega Menu for Divi
   Scoped to the Divi desktop nav (#top-menu) and mobile nav (#mobile_menu).
   Divi's own menu CSS is very specific, so a number of !important rules are
   unavoidable here. */

:root {
	--qimm-panel-bg: #fff;
	--qimm-panel-radius: 16px;
	--qimm-item-radius: 10px;
	--qimm-top-link: rgba(0, 0, 0, .6);
	--qimm-title: #16181d;
	--qimm-desc: #6b7280;
	--qimm-icon: #16181d;
	--qimm-hover: #f4f4f5;
	--qimm-border: rgba(16, 18, 22, .07);
	--qimm-shadow: 0 12px 40px rgba(16, 18, 22, .10), 0 2px 8px rgba(16, 18, 22, .05);
}

.qimm-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------- top level ---------- */

#top-menu.qimm-menu {
	display: flex !important;
	align-items: center;
	gap: 6px;
	float: none !important;
}

#top-menu.qimm-menu > li {
	float: none !important;
	padding-right: 0 !important;
	position: relative;
}

#top-menu.qimm-menu > li > a,
#top-menu.qimm-menu > li > .qimm-toggle {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	padding: 8px 12px !important;
	border-radius: var(--qimm-item-radius);
	line-height: 1.3;
}

#top-menu.qimm-menu > li > a:hover,
#top-menu.qimm-menu > li > .qimm-toggle:hover {
	opacity: 1 !important;
	background: var(--qimm-hover);
}

/* Divi colours the current page's ancestor in the accent colour, so one
   top-level entry looked permanently selected. Keep them all the same. */
#top-menu.qimm-menu > li.current-menu-item > a,
#top-menu.qimm-menu > li.current-menu-ancestor > a,
#top-menu.qimm-menu > li.current-menu-parent > a,
#top-menu.qimm-menu > li.current_page_item > a,
#top-menu.qimm-menu > li.current_page_ancestor > a,
#top-menu.qimm-menu > li.current_page_parent > a {
	color: var(--qimm-top-link) !important;
}

/* Divi renders its own caret with an icon font. Ours replaces it. */
#top-menu.qimm-menu > li.menu-item-has-children > a:first-child:after,
#top-menu.qimm-menu > li.menu-item-has-children > .qimm-toggle:first-child:after,
#mobile_menu.qimm-menu li.menu-item-has-children > a:first-child:after {
	display: none !important;
	content: none !important;
}

.qimm-chev {
	display: inline-flex;
	transition: transform .18s ease;
}

#top-menu.qimm-menu > li:hover > a .qimm-chev,
#top-menu.qimm-menu > li:hover > .qimm-toggle .qimm-chev,
#top-menu.qimm-menu > li.qimm-open > a .qimm-chev,
#top-menu.qimm-menu > li.qimm-open > .qimm-toggle .qimm-chev {
	transform: rotate(180deg);
}

/* Overflow item: rendered as three dots. It is pinned to the right by the
   centring block further down; on narrow screens it just sits inline. */

/* A parent that is only a label still needs to look and behave like one. */
.qimm-toggle {
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
}

#mobile_menu.qimm-menu .qimm-toggle {
	display: block;
	cursor: default;
}

.qimm-dots {
	display: inline-flex;
	align-items: center;
}

.qimm-dots svg {
	display: block;
}

/* A parent that is only a label still needs to look like one. */
.qimm-toggle {
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
}

/* -------------------------------------------------- the panel ---------- */

#top-menu.qimm-menu > li.qimm-mega > ul.qimm-panel {
	display: grid;
	width: auto !important;
	min-width: 300px;
	max-width: min(680px, calc(100vw - 32px));
	gap: 2px;
	left: 50% !important;
	transform: translateX(-50%);
	top: calc(100% + 10px) !important;
	padding: 12px !important;
	background: var(--qimm-panel-bg) !important;
	border: 1px solid var(--qimm-border) !important;
	border-top: 1px solid var(--qimm-border) !important;
	border-radius: var(--qimm-panel-radius) !important;
	box-shadow: var(--qimm-shadow) !important;
	transition: opacity .18s ease, visibility .18s ease;
}

#top-menu.qimm-menu > li.qimm-cols-2 > ul.qimm-panel {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 8px;
	min-width: 460px;
}

/* Panel of the overflow item hangs from the right edge. */
#top-menu.qimm-menu > li.qimm-more > ul.qimm-panel {
	left: auto !important;
	right: 0 !important;
	transform: none;
}

/* Keep the hover bridge so the panel does not close in the 10px gap. */
#top-menu.qimm-menu > li.qimm-mega > ul.qimm-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
}

#top-menu.qimm-menu > li.qimm-mega:hover > ul.qimm-panel,
#top-menu.qimm-menu > li.qimm-mega.qimm-open > ul.qimm-panel {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Keyboard focus only: :focus-within also matched after a mouse click and
   kept the panel open. Own rule, so a browser without :has() drops just this. */
#top-menu.qimm-menu > li.qimm-mega:has(:focus-visible) > ul.qimm-panel {
	opacity: 1 !important;
	visibility: visible !important;
}

/* -------------------------------------------------- panel items -------- */

#top-menu.qimm-menu .qimm-panel > li {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	line-height: 1.3;
}

#top-menu.qimm-menu .qimm-panel > li > a {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	width: auto !important;
	padding: 9px 12px !important;
	border-radius: var(--qimm-item-radius);
	text-transform: none;
	transition: background-color .12s ease;
}

#top-menu.qimm-menu .qimm-panel > li > a:hover,
#top-menu.qimm-menu .qimm-panel > li > a:focus-visible {
	background: var(--qimm-hover);
	opacity: 1 !important;
}

.qimm-ico {
	flex: 0 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	color: var(--qimm-icon);
}

/* Keep titles on one edge when only some entries in a panel have an icon. */
#top-menu.qimm-menu > li.qimm-mega:has(.qimm-has-icon) .qimm-panel > li:not(.qimm-has-icon) > a::before {
	content: "";
	flex: 0 0 22px;
}

.qimm-txt {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

#top-menu.qimm-menu .qimm-panel .qimm-title {
	font-size: 15px;
	font-weight: 500;
	color: var(--qimm-title);
	overflow-wrap: anywhere;
}

#top-menu.qimm-menu .qimm-panel .qimm-desc {
	font-size: 13px;
	font-weight: 400;
	color: var(--qimm-desc);
	overflow-wrap: anywhere;
}

/* Third level: Divi flies it out sideways. Fold it into the panel instead. */
#top-menu.qimm-menu .qimm-panel ul.sub-menu {
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: auto !important;
	padding: 0 0 0 34px !important;
	border: 0 !important;
	box-shadow: none !important;
	background: none !important;
}

/* -------------------------------------------------- alignment ---------- */

/* Horizontal position is left as Divi has it: the nav stays right-aligned.
   Only the vertical axis is touched, so the menu lines up with the logo
   instead of relying on Divi's computed padding-top. */

#main-header #et-top-navigation {
	display: flex !important;
	float: right !important;
	align-items: center !important;
	padding-top: 0 !important;
}

#main-header #top-menu-nav {
	float: none !important;
	flex: 0 0 auto;
}

#top-menu.qimm-menu {
	justify-content: flex-start;
}

#top-menu.qimm-menu > li.qimm-more {
	margin-left: 10px;
}

/* -------------------------------------------------- mobile ------------- */

/* Everything below applies only at Divi's mobile breakpoint (<= 980px), so the
   desktop menu is untouched.

   Divi builds #mobile_menu by cloning the desktop <li>s with JavaScript. The
   clone keeps the plugin's item markup and classes, but the <ul> itself gets
   Divi's class "et_mobile_menu", not "qimm-menu" -- so these rules key off
   #mobile_menu alone. */

@media (max-width: 980px) {

	/* The desktop rule forces #top-menu to display:flex !important, which would
	   otherwise stop Divi from hiding the desktop menu here. */
	#top-menu.qimm-menu {
		display: none !important;
	}

	/* Divi's hamburger box is a 32px icon plus 24px of padding-bottom, which
	   Divi uses to hang the dropdown below the header. Centring the box
	   vertically therefore leaves the icon 12px (half the padding) too high.
	   Shift only the icon, so the dropdown position is unchanged. */
	#et_mobile_nav_menu .mobile_menu_bar::before {
		top: 12px;
	}

	/* Top-level rows: label on the left, chevron on the right. Parents without a
	   page are <span>s, so they get Divi's parent-row look explicitly. */
	#mobile_menu > li.qimm-mega > a,
	#mobile_menu > li.qimm-mega > .qimm-toggle {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		cursor: pointer;
	}

	#mobile_menu > li.qimm-mega > .qimm-toggle {
		padding: 10px 5%;
		font-weight: 700;
		background-color: rgba(0, 0, 0, .03);
		border-bottom: 1px solid rgba(0, 0, 0, .03);
	}

	#mobile_menu .qimm-chev {
		display: inline-flex;
		flex: 0 0 auto;
		transition: transform .18s ease;
	}

	#mobile_menu > li.qimm-open > a .qimm-chev,
	#mobile_menu > li.qimm-open > .qimm-toggle .qimm-chev {
		transform: rotate(180deg);
	}

	/* Accordion: sections stay closed until tapped. */
	#mobile_menu > li.qimm-mega > ul.sub-menu {
		display: none !important;
	}

	#mobile_menu > li.qimm-mega.qimm-open > ul.sub-menu {
		display: block !important;
	}

	/* Entries: icon on the left, title and subtitle beside it. */
	#mobile_menu .qimm-panel > li > a {
		display: flex !important;
		align-items: flex-start;
		gap: 12px;
	}

	#mobile_menu .qimm-ico {
		margin-top: 1px;
	}

	#mobile_menu .qimm-txt {
		display: flex;
		flex-direction: column;
		gap: 1px;
		min-width: 0;
	}

	#mobile_menu .qimm-desc {
		font-size: 13px;
		font-weight: 400;
		color: var(--qimm-desc);
	}

	/* Keep titles aligned when only some entries in a section have an icon. */
	#mobile_menu li.qimm-mega:has(.qimm-has-icon) .qimm-panel > li:not(.qimm-has-icon) > a::before {
		content: "";
		flex: 0 0 22px;
	}
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
	#mobile_menu .qimm-chev {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qimm-chev,
	#top-menu.qimm-menu > li.qimm-mega > ul.qimm-panel,
	#top-menu.qimm-menu .qimm-panel > li > a {
		transition: none !important;
	}
}