/**
 * Mega menu / header submenu restyle
 * ----------------------------------------------------------------------------
 * Restyles the Avada Fusion Menu element in the Header Builder: the two mega
 * menus (Products, Resources) and the plain dropdown (Solutions).
 *
 * DESKTOP ONLY. The Fusion menu element carries data-breakpoint="1024" and
 * swaps to the collapsed mobile button below that, so every rule in this file
 * lives inside @media (min-width:1025px). Nothing here touches the mobile menu.
 *
 * Why so many !important flags: Avada compiles a per-menu stylesheet into an
 * inline <style> tag in the document, using 5-7 class deep selectors such as
 *   .fusion-menu-element-wrapper .fusion-megamenu-wrapper .fusion-megamenu-holder
 *   .fusion-megamenu .fusion-megamenu-submenu .fusion-megamenu-title
 * Those tags are injected AFTER enqueued stylesheets, so they win specificity
 * ties. !important plus the .fusion-tb-header prefix is what reliably beats
 * them. (Same cascade problem documented in SKYCIV-SITE-NOTES.md.)
 */

@media only screen and (min-width: 1025px) {

	/* ---------------------------------------------------------------
	 * 1. The floating panel
	 *
	 * Avada ships the panel flush against the header with square corners
	 * and no shadow, and sets overflow:auto on the wrapper -- which clips
	 * any box-shadow put on the holder. It also hard-sets box-shadow:none
	 * on the wrapper itself, so the shadow has to live on the holder.
	 *
	 * The gap under the header comes from padding-top on the WRAPPER, not
	 * a margin on the holder: the wrapper is the hover target, so padding
	 * keeps the mouse path from the menu item into the panel unbroken.
	 * --------------------------------------------------------------- */
	.fusion-tb-header .fusion-menu-element-wrapper .fusion-megamenu-wrapper {
		overflow: visible !important;
		padding-top: 12px !important;
	}

	.fusion-tb-header .fusion-menu-element-wrapper .fusion-megamenu-wrapper .fusion-megamenu-holder {
		padding: 28px 22px 30px !important;
		border: 1px solid rgba(16, 35, 80, .08) !important;
		border-radius: 16px !important;
		box-shadow:
			0 30px 70px -24px rgba(9, 20, 52, .38),
			0 6px 18px rgba(9, 20, 52, .06) !important;
		animation: skycivMegaIn .22s cubic-bezier(.32, .72, .35, 1) both;
	}

	/* display:none -> block restarts the animation, so the panel eases in
	   on every open without needing any JS hook. */
	@keyframes skycivMegaIn {
		from { opacity: 0; transform: translateY(-10px); }
		to   { opacity: 1; transform: none; }
	}

	/* ---------------------------------------------------------------
	 * 2. Columns
	 * Avada uses --megamenu_item_vertical_padding (7px) top/bottom and no
	 * horizontal padding; the reference insets each group instead.
	 * --------------------------------------------------------------- */
	.fusion-tb-header .fusion-megamenu-wrapper .fusion-megamenu > li.fusion-megamenu-submenu {
		padding: 4px 18px !important;
		border-right: 0 !important;
	}

	/* ---------------------------------------------------------------
	 * 3. Group headings
	 * Reference: left-aligned, slightly heavier than the links, with a
	 * hairline rule spanning the group. Avada centres them
	 * (justify-content:center on .awb-justify-title) and gives them no
	 * separation from the list at all.
	 * --------------------------------------------------------------- */
	.fusion-tb-header .fusion-megamenu-wrapper .fusion-megamenu-submenu .fusion-megamenu-title {
		padding: 0 0 13px !important;
		margin: 0 0 10px !important;
		border-bottom: 1px solid #e4e8f2 !important;
	}

	.fusion-tb-header .fusion-megamenu-wrapper .fusion-megamenu-submenu .fusion-megamenu-title .awb-justify-title {
		justify-content: flex-start !important;
		font-size: 15px !important;
		line-height: 1.3 !important;
		font-weight: 600 !important;
		letter-spacing: -.1px !important;
		color: #141617 !important;
	}

	/* ---------------------------------------------------------------
	 * 4. Links
	 * The big one: Avada's `ul:not(.fusion-megamenu) > li` rule puts a
	 * 1px #e2e2e2 border-bottom under EVERY item, which made the panel
	 * read like a spreadsheet. The reference has no row rules at all.
	 *
	 * The negative horizontal margin pulls the hover pill out into the
	 * column padding while leaving the link TEXT aligned with the heading
	 * and its rule above.
	 * --------------------------------------------------------------- */
	.fusion-tb-header .fusion-megamenu-wrapper .fusion-megamenu-submenu .sub-menu > li {
		border-bottom: 0 !important;
		background: transparent !important;
	}

	.fusion-tb-header .fusion-megamenu-wrapper .fusion-megamenu-submenu .sub-menu > li > a {
		width: auto !important;
		margin: 0 -12px !important;
		padding: 9px 12px !important;
		font-size: 15px !important;
		line-height: 1.3 !important;
		font-weight: 500 !important;
		color: #212934 !important;
		background: transparent !important;
		border-radius: 10px !important;
		transition:
			color .18s ease,
			background-color .18s ease,
			transform .18s ease !important;
	}

	.fusion-tb-header .fusion-megamenu-wrapper .fusion-megamenu-submenu .sub-menu > li > a:hover,
	.fusion-tb-header .fusion-megamenu-wrapper .fusion-megamenu-submenu .sub-menu > li > a:focus-visible {
		color: #002fff !important;
		background: #eef2ff !important;
		transform: translateX(2px);
	}

	/* Empty spans Avada emits for optional list bullets. */
	.fusion-tb-header .fusion-megamenu-wrapper .fusion-megamenu-bullet {
		display: none !important;
	}

	/* ---------------------------------------------------------------
	 * 5. Plain dropdown (Solutions)
	 * Not a mega menu, but it sits in the same menu bar -- left alone it
	 * stayed a flat square box next to two rounded floating panels.
	 *
	 * It has no wrapper element to pad, and Avada sets margin:0!important
	 * on it, so the float gap uses transform:translateY instead, with a
	 * ::before filling the gap so the menu stays hoverable across it.
	 * --------------------------------------------------------------- */
	.fusion-tb-header .fusion-menu-element-wrapper li.fusion-dropdown-menu ul.sub-menu {
		padding: 8px !important;
		background: #fff !important;
		border: 1px solid rgba(16, 35, 80, .08) !important;
		border-radius: 14px !important;
		box-shadow:
			0 24px 56px -22px rgba(9, 20, 52, .38),
			0 4px 14px rgba(9, 20, 52, .06) !important;
	}

	.fusion-tb-header .fusion-menu-element-wrapper > ul.fusion-menu > li.fusion-dropdown-menu > ul.sub-menu {
		transform: translateY(12px);
	}

	.fusion-tb-header .fusion-menu-element-wrapper > ul.fusion-menu > li.fusion-dropdown-menu > ul.sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -13px;
		height: 13px;
	}

	.fusion-tb-header .fusion-menu-element-wrapper li.fusion-dropdown-menu ul.sub-menu > li {
		border-bottom: 0 !important;
		background: transparent !important;
	}

	.fusion-tb-header .fusion-menu-element-wrapper li.fusion-dropdown-menu ul.sub-menu > li > a {
		padding: 9px 12px !important;
		font-size: 15px !important;
		line-height: 1.3 !important;
		font-weight: 500 !important;
		color: #212934 !important;
		background: transparent !important;
		border-radius: 10px !important;
		transition:
			color .18s ease,
			background-color .18s ease !important;
	}

	.fusion-tb-header .fusion-menu-element-wrapper li.fusion-dropdown-menu ul.sub-menu > li > a:hover,
	.fusion-tb-header .fusion-menu-element-wrapper li.fusion-dropdown-menu ul.sub-menu > li > a:focus-visible {
		color: #002fff !important;
		background: #eef2ff !important;
	}

}