/**
 * QS Mega Menu — Divi 4 overrides (full-width panel + reset nested menu styles)
 */

/* -------------------------------------------------------------------------
   Break out of Divi’s narrow .sub-menu / floated <li> dropdown
   ------------------------------------------------------------------------- */

.qs-mega-menu-enabled #et-top-navigation,
.qs-mega-menu-enabled #et-top-navigation nav,
.qs-mega-menu-enabled #et-top-navigation .nav,
.qs-mega-menu-enabled #top-menu-nav,
.qs-mega-menu-enabled #top-menu,
.qs-mega-menu-enabled #main-header,
.qs-mega-menu-enabled #main-header .container,
.qs-mega-menu-enabled #main-header .nav,
.qs-mega-menu-enabled .et_pb_menu,
.qs-mega-menu-enabled .et_pb_menu .et_pb_menu__menu,
.qs-mega-menu-enabled .et_pb_menu .et-menu-nav,
.qs-mega-menu-enabled .et_pb_menu ul,
.qs-mega-menu-enabled .et_pb_fullwidth_menu,
.qs-mega-menu-enabled .et_pb_fullwidth_menu .et-menu-nav,
.qs-mega-menu-enabled .et-l--header,
.qs-mega-menu-enabled .et-l--header .et_pb_row,
.qs-mega-menu-enabled .et-l--header .et_pb_column {
	overflow: visible !important;
}

/* Remove Divi / core dropdown caret on mega parent (hamburger is the affordance) */
.qs-mega-menu-parent.menu-item-has-children > a::after,
.qs-mega-menu-parent.menu-item-has-children > a::before,
.qs-mega-menu-enabled #top-menu .qs-mega-menu-parent.menu-item-has-children > a::after,
.qs-mega-menu-enabled #et-top-navigation .qs-mega-menu-parent.menu-item-has-children > a::after,
.qs-mega-menu-enabled #main-header .qs-mega-menu-parent.menu-item-has-children > a::after,
.qs-mega-menu-enabled .et_pb_menu .nav li.qs-mega-menu-parent.menu-item-has-children > a:first-child::after,
.qs-mega-menu-enabled .et_pb_menu .nav li.qs-mega-menu-parent.menu-item-has-children > a::after,
.qs-mega-menu-enabled .et_pb_menu .et-menu-nav li.qs-mega-menu-parent.menu-item-has-children > a::after,
.qs-mega-menu-enabled .et_pb_fullwidth_menu .nav li.qs-mega-menu-parent.menu-item-has-children > a:first-child::after,
.qs-mega-menu-enabled .et_pb_fullwidth_menu .nav li.qs-mega-menu-parent.menu-item-has-children > a::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	pointer-events: none !important;
}

/* Some Divi menu module versions add a dropdown icon wrapper */
body.qs-mega-menu-enabled .et_pb_menu li.qs-mega-menu-parent > a .et_pb_menu__icon-wrap,
body.qs-mega-menu-enabled .et_pb_menu li.qs-mega-menu-parent > a .et_pb_menu__dropdown-icon,
body.qs-mega-menu-enabled .et_pb_fullwidth_menu li.qs-mega-menu-parent > a .et_pb_menu__icon-wrap {
	display: none !important;
}

/* Divi often pads the anchor for the caret — tighten after caret removal */
.qs-mega-menu-enabled .et_pb_menu .qs-mega-menu-parent > a,
.qs-mega-menu-enabled .et_pb_fullwidth_menu .qs-mega-menu-parent > a,
.qs-mega-menu-enabled #top-menu .qs-mega-menu-parent > a {
	padding-right: 0 !important;
}

.qs-mega-menu-parent {
	position: static !important;
}

/* Trigger: label + hamburger (uses currentColor from header) */
.qs-mega-menu-parent > a {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4em;
	flex-wrap: nowrap;
	white-space: nowrap;
}

.qs-mega-menu-burger {
	position: relative;
	display: inline-block;
	width: 1.125em;
	height: 0.8125em;
	flex-shrink: 0;
	vertical-align: middle;
}

.qs-mega-menu-burger__bar {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.22s ease, opacity 0.22s ease, top 0.22s ease, bottom 0.22s ease;
}

.qs-mega-menu-burger__bar:nth-child(1) {
	top: 0;
}

.qs-mega-menu-burger__bar:nth-child(2) {
	top: 50%;
	margin-top: -1px;
}

.qs-mega-menu-burger__bar:nth-child(3) {
	bottom: 0;
}

.qs-mega-menu-parent.qs-mega-menu-open .qs-mega-menu-burger__bar:nth-child(1) {
	top: 50%;
	margin-top: -1px;
	transform: rotate(45deg);
}

.qs-mega-menu-parent.qs-mega-menu-open .qs-mega-menu-burger__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.qs-mega-menu-parent.qs-mega-menu-open .qs-mega-menu-burger__bar:nth-child(3) {
	bottom: 50%;
	margin-bottom: -1px;
	transform: rotate(-45deg);
}

.qs-mega-menu-parent:not(.qs-mega-menu-open) .qs-mega-menu-burger__bar:nth-child(1),
.qs-mega-menu-parent:not(.qs-mega-menu-open) .qs-mega-menu-burger__bar:nth-child(3) {
	transform: none;
}

/* Desktop: fixed full-width panel below header (top set via JS) */
@media (min-width: 981px) {
	.qs-mega-menu-parent > ul.sub-menu.qs-mega-menu-panel {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
		background-color: var(--qs-mega-bg-color, #f4f4f4) !important;
		background-size: cover;
		background-position: center;
		z-index: 100000;
		list-style: none !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: none !important;
		transition: opacity 0.2s ease, visibility 0.2s ease;
		float: none !important;
	}

	.qs-mega-menu-parent.qs-mega-menu-open > ul.sub-menu.qs-mega-menu-panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

/* Fixed panel height + scroll (all breakpoints when open) */
.qs-mega-menu-parent.qs-mega-menu-open > ul.sub-menu.qs-mega-menu-panel {
	max-height: 700px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* -------------------------------------------------------------------------
   Kill Divi submenu rules inside our panel
   ------------------------------------------------------------------------- */

.qs-mega-menu-panel ul,
.qs-mega-menu-panel li {
	float: none !important;
	position: static !important;
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	text-align: center !important;
	clear: both !important;
}

.qs-mega-menu-panel > .qs-mega-menu-panel-item {
	width: 100% !important;
}

.qs-mega-menu-panel a {
	float: none !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	white-space: normal !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.35 !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* Panel link colors (vars + fallbacks; wp_head block adds literal hex over Divi gold) */
body.qs-mega-menu-enabled #et-top-navigation #qs-mega-menu-panel a.qs-mega-menu__link,
body.qs-mega-menu-enabled #top-menu #qs-mega-menu-panel a.qs-mega-menu__link,
body.qs-mega-menu-enabled #main-header #qs-mega-menu-panel a.qs-mega-menu__link,
body.qs-mega-menu-enabled .et_pb_menu #qs-mega-menu-panel a.qs-mega-menu__link,
body.qs-mega-menu-enabled .et_pb_fullwidth_menu #qs-mega-menu-panel a.qs-mega-menu__link,
body.qs-mega-menu-enabled .et-menu #qs-mega-menu-panel a.qs-mega-menu__link {
	color: var(--qs-mega-link-color, #c048ad) !important;
}

body.qs-mega-menu-enabled #et-top-navigation #qs-mega-menu-panel a.qs-mega-menu__link:hover,
body.qs-mega-menu-enabled #top-menu #qs-mega-menu-panel a.qs-mega-menu__link:hover,
body.qs-mega-menu-enabled #main-header #qs-mega-menu-panel a.qs-mega-menu__link:hover,
body.qs-mega-menu-enabled .et_pb_menu #qs-mega-menu-panel a.qs-mega-menu__link:hover,
body.qs-mega-menu-enabled .et_pb_fullwidth_menu #qs-mega-menu-panel a.qs-mega-menu__link:hover {
	color: var(--qs-mega-link-color, #c048ad) !important;
	opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   Panel layout
   ------------------------------------------------------------------------- */

.qs-mega-menu {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 48px);
}

.qs-mega-menu__grid {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: clamp(16px, 2.5vw, 32px);
	width: 100% !important;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}

.qs-mega-menu__col {
	display: block !important;
	text-align: center;
	box-sizing: border-box;
	min-width: 0;
}

.qs-mega-menu__image {
	display: block !important;
	line-height: 0;
	overflow: hidden;
	width: 100% !important;
}

.qs-mega-menu__img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	object-fit: cover;
}

.qs-mega-menu__heading {
	display: block !important;
	margin: 0;
	padding: 16px 12px 10px;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--qs-mega-heading-color, #555) !important;
	text-transform: none !important;
}

.qs-mega-menu__links {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
}

.qs-mega-menu__link {
	display: block !important;
	width: 100% !important;
	padding: 11px 14px !important;
	color: var(--qs-mega-link-color, #c048ad) !important;
	text-decoration: none !important;
	font-size: 0.9rem !important;
	line-height: 1.35 !important;
	transition: background 0.15s ease;
	box-sizing: border-box;
}

.qs-mega-menu__link:hover,
.qs-mega-menu__link:focus {
	background: rgba(0, 0, 0, 0.04) !important;
	color: var(--qs-mega-link-color, #c048ad) !important;
}

/* Prevent Divi from showing a second nested dropdown arrow/list on panel wrapper */
.qs-mega-menu-panel-item.menu-item-has-children > a {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Tablet
   ------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.qs-mega-menu-parent > ul.sub-menu.qs-mega-menu-panel {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
		background-color: var(--qs-mega-bg-color, #f4f4f4) !important;
		background-size: cover;
		background-position: center;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		z-index: 100000;
	}

	.qs-mega-menu-parent.qs-mega-menu-open > ul.sub-menu.qs-mega-menu-panel {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.qs-mega-menu__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

}

/* -------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.qs-mega-menu-parent > ul.sub-menu.qs-mega-menu-panel {
		position: relative !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		box-shadow: none;
		background-color: var(--qs-mega-bg-color, #f4f4f4) !important;
	}

	.qs-mega-menu__grid {
		grid-template-columns: 1fr !important;
	}

	.qs-mega-menu__col {
		padding-bottom: 8px;
	}

	.qs-mega-menu-parent:not(.qs-mega-menu-open) > ul.sub-menu.qs-mega-menu-panel {
		display: none !important;
		opacity: 1;
		visibility: visible;
		pointer-events: none;
	}

	.qs-mega-menu-parent.qs-mega-menu-open > ul.sub-menu.qs-mega-menu-panel {
		display: block !important;
		pointer-events: auto;
	}
}