/* =============================================================================
   Divi Mega Menu Pro — Frontend Styles (DEFAULTS)

   Per-mega-menu overrides (gaps, padding, colors, font weights, icon colors)
   come from inline <style> generated from menu meta. They use a more specific
   selector (li#menu-item-{ID}.dmm-mega) and override these defaults.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. Mega menu container — card look + equal-height rows
---------------------------------------------------------------------------- */
#main-header .nav li.dmm-mega > ul.sub-menu,
#et-top-navigation .dmm-mega > ul.sub-menu,
.et_pb_menu .dmm-mega > ul.sub-menu,
.et_pb_fullwidth_menu .dmm-mega > ul.sub-menu {
	display: grid !important;
	column-gap: 6px;                   /* default — admin can override */
	row-gap: 6px;                      /* default — admin can override */
	grid-auto-rows: 1fr;               /* equal-height rows across the grid */
	align-items: stretch;
	padding: 24px !important;          /* default — admin can override */
	background: #ffffff !important;
	border: none !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.10) !important;
	width: auto !important;
	min-width: 560px !important;
}

/* Column count via class */
.dmm-mega.dmm-cols-1 > ul.sub-menu { grid-template-columns: 1fr; }
.dmm-mega.dmm-cols-2 > ul.sub-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 600px !important; }
.dmm-mega.dmm-cols-3 > ul.sub-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 820px !important; }
.dmm-mega.dmm-cols-4 > ul.sub-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 1000px !important; }
.dmm-mega.dmm-cols-5 > ul.sub-menu { grid-template-columns: repeat(5, minmax(0, 1fr)); min-width: 1180px !important; }

/* ----------------------------------------------------------------------------
   1b. Viewport-safe sizing + dropdown anchor side.

   max-width: dropdown will never exceed the viewport. JS in dmm-frontend.js
   handles horizontal nudging if the dropdown's position would still clip an
   edge.

   The .mega-menu chain is needed to outrank Divi's own positioning rules.
---------------------------------------------------------------------------- */
.dmm-mega > ul.sub-menu {
	max-width: calc(100vw - 32px) !important;
	box-sizing: border-box;
}

/* Anchor to LEFT edge of the parent <li> */
.mega-menu.dmm-mega.dmm-align-left > ul.sub-menu {
	left: 0 !important;
	right: auto !important;
}

/* Anchor to RIGHT edge of the parent <li> */
.mega-menu.dmm-mega.dmm-align-right > ul.sub-menu {
	left: auto !important;
	right: 0 !important;
}

/* ----------------------------------------------------------------------------
   2. Each <li> — flex column so its <a> child can stretch to full cell height
---------------------------------------------------------------------------- */
.dmm-mega > ul.sub-menu > li {
	width: auto !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
	align-self: stretch;
	background: transparent !important;
	border: none !important;
}

/* Hide grandchildren (we render flat single-level mega menus) */
.dmm-mega > ul.sub-menu > li > ul.sub-menu {
	display: none !important;
}

/* ----------------------------------------------------------------------------
   3. Each item link — fills its <li>, content anchored at top
   Selector chains .mega-menu + .dmm-mega to outrank Divi's
   ".et-menu-nav li.mega-menu li > a { width: 200px !important; }" rule.
---------------------------------------------------------------------------- */
.mega-menu.dmm-mega > ul.sub-menu > li > a {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 14px 16px !important;     /* default — admin can override */
	border: none !important;
	border-radius: 10px !important;
	color: #1f2937 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	transition: background-color 0.18s ease, transform 0.18s ease;
	background: transparent !important;
	white-space: normal !important;
}

.mega-menu.dmm-mega > ul.sub-menu > li > a:hover {
	background: #f3f4f6 !important;
	color: #0f172a !important;
}

/* ----------------------------------------------------------------------------
   4. Item content layout (icon + text) — content stays at top of cell
---------------------------------------------------------------------------- */
.dmm-item-content {
	display: flex;
	align-items: center;               /* vertically center text against icon */
	gap: 14px;
	flex: 0 0 auto;
}

.dmm-text-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}

.dmm-title {
	font-weight: 700;                  /* default — admin can override */
	font-size: 15px;
	color: #0f172a;                    /* default — admin can override */
	line-height: 1.35;
}

.dmm-description {
	font-size: 13px;
	font-weight: 400;                  /* default — admin can override */
	color: #6b7280;                    /* default — admin can override */
	line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   5. Icon styling — square tile

   Defaults: black icon on light tile (default state), white icon on teal
   (hover). Admin-set Icon Color / Icon Hover Color override these via
   inline CSS. SVG/WebP image icons get re-tinted via a CSS `filter` —
   black and white render reliably; other colors fall through and the
   image keeps its file color.
---------------------------------------------------------------------------- */
.dmm-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: #f1f5f9;               /* default — admin can override */
	color: #000000;                    /* default for font icons */
	font-size: 20px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.dmm-icon-image img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	display: block;
	filter: brightness(0);             /* default — black image icon */
	transition: filter 0.18s ease;
}

/* Hover/active state defaults */
.dmm-mega > ul.sub-menu > li > a:hover .dmm-icon,
.dmm-mega > ul.sub-menu > li.current-menu-item > a .dmm-icon {
	background: #14b8a6;
	color: #ffffff;
}

.dmm-mega > ul.sub-menu > li > a:hover .dmm-icon-image img,
.dmm-mega > ul.sub-menu > li.current-menu-item > a .dmm-icon-image img {
	filter: brightness(0) invert(1);   /* default — white image icon on hover */
}

/* ----------------------------------------------------------------------------
   6. Description-only style — no icon, larger spacing
---------------------------------------------------------------------------- */
.dmm-mega > ul.sub-menu > li.dmm-has-description:not(.dmm-has-icon) > a {
	padding: 16px 20px !important;
}

.dmm-mega > ul.sub-menu > li.dmm-has-description:not(.dmm-has-icon) .dmm-title {
	font-size: 16px;
}

/* ----------------------------------------------------------------------------
   7. Mobile fallback — stack into single column, drop equal-height behavior
---------------------------------------------------------------------------- */
@media (max-width: 980px) {
	.dmm-mega > ul.sub-menu {
		display: block !important;
		grid-auto-rows: auto !important;
		min-width: 0 !important;
		padding: 12px !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}

	.dmm-mega > ul.sub-menu > li {
		display: block !important;
	}

	.dmm-mega > ul.sub-menu > li > a {
		display: block !important;
		padding: 12px !important;
	}

	.dmm-icon {
		width: 36px;
		height: 36px;
	}
}