/* =============================================================================
   Divi Mega Menu Pro — Frontend Styles

   ALL mega menu styling is desktop-only (min-width: 981px — Divi's standard
   breakpoint). On mobile the plugin fully steps aside: icons and descriptions
   are hidden and items render as plain Divi mobile menu links. Divi builds
   its mobile menu by cloning the desktop markup, so the injected spans exist
   there too — the mobile reset at the bottom of this file neutralizes them.

   Per-mega-menu overrides (gaps, padding, colors, sizes, weights) come from
   inline <style> generated from menu meta, which is itself wrapped in the
   same desktop media query by the PHP generator.
   ========================================================================== */

@media (min-width: 981px) {

/* ----------------------------------------------------------------------------
   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 */
	grid-auto-flow: row dense;         /* lets column-pinned items pack tight */
	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: var(--dmm-min-width, 560px) !important;
}

/* Column count via class. Min widths are set through the --dmm-min-width
   custom property so the admin's per-menu Min Width field (emitted with an
   ID-scoped selector) can override without a specificity war. */
.dmm-mega.dmm-cols-1 > ul.sub-menu { grid-template-columns: 1fr; --dmm-min-width: 320px; }
.dmm-mega.dmm-cols-2 > ul.sub-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); --dmm-min-width: 600px; }
.dmm-mega.dmm-cols-3 > ul.sub-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); --dmm-min-width: 820px; }
.dmm-mega.dmm-cols-4 > ul.sub-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); --dmm-min-width: 1000px; }
.dmm-mega.dmm-cols-5 > ul.sub-menu { grid-template-columns: repeat(5, minmax(0, 1fr)); --dmm-min-width: 1180px; }

/* ----------------------------------------------------------------------------
   1b. Viewport-safe sizing + dropdown anchor side.
---------------------------------------------------------------------------- */
.dmm-mega > ul.sub-menu {
	max-width: calc(100vw - 32px) !important;
	box-sizing: border-box;
}

/* When an explicit anchor is chosen, the parent <li> must become the
   positioning context. Divi leaves li.mega-menu static and positions the
   dropdown against the whole nav container (native Divi mega menus span the
   full header). */
.mega-menu.dmm-mega.dmm-align-left,
.mega-menu.dmm-mega.dmm-align-center,
.mega-menu.dmm-mega.dmm-align-right {
	position: relative !important;
}

.mega-menu.dmm-mega.dmm-align-left > ul.sub-menu,
.mega-menu.dmm-mega.dmm-align-center > ul.sub-menu,
.mega-menu.dmm-mega.dmm-align-right > ul.sub-menu {
	top: 100% !important;
}

.mega-menu.dmm-mega.dmm-align-left > ul.sub-menu {
	left: 0 !important;
	right: auto !important;
}

.mega-menu.dmm-mega.dmm-align-right > ul.sub-menu {
	left: auto !important;
	right: 0 !important;
}

/* Center under the parent <li>. The base translateX(-50%) is composed with
   the viewport-guard nudge in dmm-frontend.js when needed. */
.mega-menu.dmm-mega.dmm-align-center > ul.sub-menu {
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
}

/* ----------------------------------------------------------------------------
   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: inherit;                    /* inherit; low-specificity defaults below set the actual color */
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 15px;                   /* default — overridable */
	line-height: 1.4 !important;
	transition: background-color 0.18s ease, transform 0.18s ease;
	background: transparent !important;
	white-space: normal !important;
}

/* Low-specificity color defaults — a single custom class or the plugin's
   per-item rules override these without needing !important. */
.dmm-mega > ul.sub-menu > li > a { color: #1f2937; }

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

/* ----------------------------------------------------------------------------
   4. Item content layout (icon + text)
---------------------------------------------------------------------------- */
.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, white icon on teal at hover.
   SVG/WebP image icons are re-tinted via CSS filter (black/white only).
---------------------------------------------------------------------------- */
.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;
}

.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;
}

} /* end @media (min-width: 981px) */

/* =============================================================================
   MOBILE (<= 980px) — the plugin steps aside completely.

   Divi's mobile menu is a JS clone of the desktop markup, so the injected
   icon/description spans and dmm-* classes exist there too. Neutralize them
   so items render as plain Divi mobile links.
   ========================================================================== */
@media (max-width: 980px) {

	/* Hide plugin-added visuals everywhere on mobile. */
	.dmm-icon,
	.dmm-description {
		display: none !important;
	}

	/* Collapse the wrappers so the title reads as plain link text. */
	.dmm-item-content,
	.dmm-text-wrap,
	.dmm-title {
		display: inline !important;
		font-weight: inherit !important;
		font-size: inherit !important;
		color: inherit !important;
		line-height: inherit !important;
	}

	/* Undo any grid/anchoring in case a desktop-width rule leaks through
	   (e.g. tablet landscape edge cases with custom Divi breakpoints). */
	.dmm-mega > ul.sub-menu {
		display: block !important;
		position: static !important;
		transform: none !important;
		min-width: 0 !important;
		max-width: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}

	.dmm-mega {
		position: static !important;
	}

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

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

/* ----------------------------------------------------------------------------
   Search item — magnifier in the menu bar. Clicking expands a grey pill field
   that OVERLAPS the row (absolute-positioned) instead of pushing menu items.
   The container keeps a fixed small footprint so the layout never reflows.
---------------------------------------------------------------------------- */
.dmm-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 40px;          /* fixed slot = just the icon; never changes on expand */
	height: 40px;
}

/* Collapsed magnifier button, centered in the fixed slot. */
.dmm-search-toggle {
	background: transparent;
	border: none;
	padding: 8px;
	margin: 0;
	cursor: pointer;
	color: currentColor;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	border-radius: 50%;
	position: relative;
	z-index: 2;           /* stays above the pill so the icon is clickable */
}

.dmm-search-toggle:hover {
	opacity: 0.7;
}

.dmm-search-toggle .dmm-search-icon {
	display: block;
}

/* The expanding pill. Absolutely positioned, anchored to the right edge of the
   fixed slot, so it grows LEFTWARD over the row without taking layout space. */
.dmm-search-form {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	background: #eceff3;              /* grey pill, matching the target */
	border-radius: 999px;
	height: 40px;
	width: 0;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	transition: max-width 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
	will-change: max-width;
	z-index: 1;
	box-sizing: border-box;
}

.dmm-search.dmm-search-open .dmm-search-form {
	width: 320px;
	max-width: 320px;
	opacity: 1;
	padding: 0 44px 0 16px;          /* right room reserved for the icon overlay */
}

.dmm-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 0;
	font-size: 15px;
	line-height: 1.3;
	color: #1f2937;
	box-sizing: border-box;
	height: 100%;
}

.dmm-search-input::placeholder {
	color: #6b7280;
}

.dmm-search-input:focus {
	outline: none;
	box-shadow: none;
}

/* Close (X) sits at the far left of the pill; only useful once open. */
.dmm-search-close {
	background: transparent;
	border: none;
	padding: 4px;
	margin: 0 4px 0 0;
	cursor: pointer;
	color: #6b7280;
	display: none;                    /* hidden; the magnifier toggles closed */
	align-items: center;
	line-height: 0;
	flex: 0 0 auto;
}

/* ----------------------------------------------------------------------------
   Responsive visibility (Divi breakpoints):
   desktop > 980px, tablet 768–980px, phone < 768px.
   !important so it overrides the theme's own display rules for menu items.
---------------------------------------------------------------------------- */
@media (min-width: 981px) {
	.dmm-hide-desktop { display: none !important; }
}

@media (min-width: 768px) and (max-width: 980px) {
	.dmm-hide-tablet { display: none !important; }
}

@media (max-width: 767px) {
	.dmm-hide-mobile { display: none !important; }
}