/* ==========================================================================
   Services mega menu (3 columns) - v2 "floating card" design
   Place in: child-theme/css/mega-menu.css
   Applies to the top-level menu item that has the CSS class "mega-menu".

   Menu structure (Appearance > Menus):
   Services                      (CSS class: mega-menu)
     Data Engineering            (column header -> umbrella page)
       Data Engineering / Data Integration / Data Warehousing /
       Snowflake Consulting / Talend Consulting
     Analytics & BI              (column header -> umbrella page)
       Data Analytics / Power BI Consulting / Tableau Consulting /
       Looker Consulting / Marketing Analytics
     AI                          (column header -> umbrella page)
       AI Consulting / Chatbot Consulting
   ========================================================================== */

:root {
	--mega-accent: #e9503f;     /* brand red (Contact Us button) */
	--mega-navy: #0b1f5c;       /* column titles */
	--mega-text: #2b2f3a;       /* item text */
	--mega-hover-bg: #f3f5fb;   /* item hover pill */
	--mega-divider: #e8ebf2;
	--mega-width: 860px;
}

@media (min-width: 981px) {

	/* Position the panel against the header container, not the "Services" li */
	#main-header .et_menu_container,
	#main-header #et-top-navigation,
	#main-header #top-menu-nav {
		position: relative;
	}
	#main-header #top-menu li.mega-menu {
		position: static;
	}

	/* ---------------------------------------------------------------
	   Panel: floating rounded card, right-aligned under the nav
	   --------------------------------------------------------------- */
	#main-header #top-menu li.mega-menu > ul.sub-menu {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 44px;
		align-items: start;

		position: absolute;
		top: calc(100% + 10px) !important;
		left: auto !important;
		right: 0 !important;
		width: var(--mega-width) !important;
		max-width: calc(100vw - 40px);
		box-sizing: border-box;

		padding: 34px 40px 30px !important;
		margin: 0;
		background: #fff !important;
		border: 1px solid rgba(11, 31, 92, 0.06) !important;
		border-radius: 18px;
		box-shadow: 0 28px 70px rgba(0, 16, 60, 0.28),
		            0 4px 14px rgba(0, 16, 60, 0.08) !important;
		z-index: 9999;

		/* soft slide/fade in (Divi toggles visibility + opacity) */
		transform: translateY(8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
	}

	/* invisible bridge so the hover isn't lost crossing the 10px gap */
	#main-header #top-menu li.mega-menu > ul.sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -14px;
		height: 14px;
	}

	#main-header #top-menu li.mega-menu:hover > ul.sub-menu,
	#main-header #top-menu li.mega-menu.et-hover > ul.sub-menu,
	#main-header #top-menu li.mega-menu:focus-within > ul.sub-menu {
		visibility: visible !important;
		opacity: 1 !important;
		transform: translateY(0);
	}

	/* ---------------------------------------------------------------
	   Columns
	   --------------------------------------------------------------- */
	#main-header #top-menu li.mega-menu > ul.sub-menu > li {
		float: none !important;
		width: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	/* Column title */
	#main-header #top-menu li.mega-menu > ul.sub-menu > li > a {
		position: relative;
		display: block;
		width: auto !important;
		padding: 0 0 16px !important;
		margin: 0 0 12px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.3;
		letter-spacing: 0;
		text-transform: none;
		color: var(--mega-navy) !important;
		background: transparent !important;
		border-bottom: 1px solid var(--mega-divider);
		opacity: 1 !important;
		transition: color 0.15s ease;
	}
	/* short red accent bar under the title (replaces Divi's arrow icon) */
	#main-header #top-menu li.mega-menu > ul.sub-menu > li > a::after {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		left: 0 !important;
		right: auto !important;
		top: auto !important;
		bottom: -1px !important;
		width: 32px;
		height: 3px;
		border-radius: 3px;
		background: var(--mega-accent);
		font-size: 0 !important;
		line-height: 0 !important;
		transition: width 0.2s ease;
	}
	#main-header #top-menu li.mega-menu > ul.sub-menu > li > a:hover {
		color: var(--mega-accent) !important;
	}
	#main-header #top-menu li.mega-menu > ul.sub-menu > li > a:hover::after {
		width: 56px;
	}

	/* ---------------------------------------------------------------
	   Items: plain list, always visible, no fly-outs
	   --------------------------------------------------------------- */
	#main-header #top-menu li.mega-menu > ul.sub-menu > li > ul.sub-menu {
		position: static !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	#main-header #top-menu li.mega-menu > ul.sub-menu > li > ul.sub-menu > li {
		float: none !important;
		width: auto !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	#main-header #top-menu li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > a {
		display: block;
		width: auto !important;
		margin: 0 -12px;               /* lets the hover pill bleed past the text */
		padding: 9px 12px !important;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.4;
		color: var(--mega-text) !important;
		background: transparent !important;
		border-radius: 8px;
		white-space: normal;
		opacity: 1 !important;
		transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
	}
	#main-header #top-menu li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > a:hover,
	#main-header #top-menu li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > a:focus {
		color: var(--mega-accent) !important;
		background: var(--mega-hover-bg) !important;
		padding-left: 16px !important;
	}

	/* keyboard focus */
	#main-header #top-menu li.mega-menu a:focus-visible {
		outline: 2px solid var(--mega-accent);
		outline-offset: 2px;
	}
}

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

/* ==========================================================================
   Mobile menu fix + styling  (<= 980px only, desktop is untouched)
   Place in: child-theme/css/mobile-menu.css
   ========================================================================== */

@media (max-width: 980px) {

	/* 0. Cancel the flex rule from the Divi custom CSS on phones/tablets.
	      (#main-header .container.clearfix { display:flex !important; ... })
	      Desktop keeps it. Extra class = higher specificity, so this wins. */
	#main-header .container.clearfix.et_menu_container {
		display: block !important;
	}

	/* 1. Hide the desktop menu so it can't overflow the screen */
	#main-header #top-menu-nav,
	#main-header #top-menu {
		display: none !important;
	}

	/* parents whose "#/" href gets removed by mobile-menu.js */
	#main-header #mobile_menu li.menu-item-has-children > a {
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	/* Divi sets this inline for the logo; not needed on mobile */
	#main-header #et-top-navigation {
		padding-left: 0 !important;
	}

	/* 2. Make sure the hamburger is the only nav */
	#main-header #et_mobile_nav_menu {
		display: block !important;
		float: right;
	}

	/* ---------------------------------------------------------------
	   Dropdown panel
	   --------------------------------------------------------------- */
	#main-header #mobile_menu.et_mobile_menu {
		box-sizing: border-box;
		padding: 8px 20px 20px !important;
		background: #fff;
		border-top: 3px solid #e9503f;
		box-shadow: 0 18px 40px rgba(0, 16, 60, 0.18);
		max-height: calc(100vh - 90px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	#main-header #mobile_menu li {
		position: relative;
		padding-left: 0 !important;
		margin: 0;
		list-style: none;
	}

	/* ---------------------------------------------------------------
	   Level 1 links (About Us, Services, Industries ...)
	   --------------------------------------------------------------- */
	#main-header #mobile_menu > li > a {
		display: block;
		position: relative;
		padding: 15px 44px 15px 4px !important;
		font-size: 16px;
		font-weight: 600;
		color: #0b1f5c;
		background: transparent !important;
		border-bottom: 1px solid #eef0f5;
	}

	/* ---------------------------------------------------------------
	   Sub menus: collapsed by default, opened by mobile-menu.js
	   (overrides Divi's "always show" rule)
	   --------------------------------------------------------------- */
	#main-header #mobile_menu li ul.sub-menu {
		display: none !important;
		visibility: visible !important;
		margin: 0 !important;
		padding: 0 0 6px 12px !important;
		border-left: 2px solid #f0f2f8;
	}
	#main-header #mobile_menu li.mm-open > ul.sub-menu {
		display: block !important;
	}

	/* Level 2 (column titles: Data Engineering / Analytics & BI / AI) */
	#main-header #mobile_menu li li > a {
		display: block;
		position: relative;
		padding: 12px 44px 12px 8px !important;
		font-size: 15px;
		font-weight: 600;
		color: #1f2a44;
		background: transparent !important;
		border-bottom: 1px solid #f3f4f9;
	}

	/* Level 3 (actual service links) */
	#main-header #mobile_menu li li li > a {
		padding: 10px 8px !important;
		font-size: 14.5px;
		font-weight: 400;
		color: #4a5163;
		border-bottom: 0;
	}
	#main-header #mobile_menu li li li > a:active,
	#main-header #mobile_menu li li li > a:hover {
		color: #e9503f;
		background: #f3f5fb !important;
		border-radius: 6px;
	}

	/* ---------------------------------------------------------------
	   Chevron on every item that has children
	   --------------------------------------------------------------- */
	#main-header #mobile_menu li.menu-item-has-children > a::after {
		content: "";
		position: absolute;
		right: 16px;
		top: 50%;
		width: 7px;
		height: 7px;
		margin-top: -6px;
		border-right: 2px solid #e9503f;
		border-bottom: 2px solid #e9503f;
		transform: rotate(45deg);
		transition: transform 0.2s ease, margin-top 0.2s ease;
	}
	#main-header #mobile_menu li.menu-item-has-children.mm-open > a::after {
		transform: rotate(-135deg);
		margin-top: -2px;
	}
	/* highlight an opened parent */
	#main-header #mobile_menu li.mm-open > a {
		color: #e9503f;
	}

	/* ---------------------------------------------------------------
	   Contact Us as a full-width button
	   --------------------------------------------------------------- */
	#main-header #mobile_menu li.menu-item-8192 {
		margin-top: 16px;
	}
	#main-header #mobile_menu li.menu-item-8192 > a {
		padding: 13px 16px !important;
		text-align: center;
		font-size: 16px;
		font-weight: 600;
		color: #fff !important;
		background: #e9503f !important;
		border: 0;
		border-radius: 8px;
	}
}