/*--------------------------------------------------------------
# Mega Menu
--------------------------------------------------------------*/

/*
 * MOBILE: hide mega-only visual elements so the standard
 * .sub-menu / .is-active mobile flow works unchanged.
 */
.lp-mega-section__desktop-head {
	display: none;
}

.lp-mega-panel {
	display: contents;  /* on mobile the wrapper is invisible, children (the .sub-menu) flow normally */
}

/*
 * MOBILE COMPAT: The .sub-menu inside .lp-mega-panel is no longer a
 * direct child of .menu-item-has-children, so the existing style.css
 * rules using `>` (e.g. `.is-active > .sub-menu`) won't match.
 * We replicate the needed rules here, scoped to max-width: 1140px.
 */
@media (max-width: 1140px) {
	/* Icon sizing for mega section headers (mobile) */
	.lp-mega-panel {
		--lp-mega-icon-size: 30px;
	}

	/* Wrapper is layout-only on desktop; on mobile let list + footer flow as section children */
	.lp-mega-section__links-wrap {
		display: contents;
	}

	/* Mobile hierarchy tokens */
	.main-navigation.is-open .lp-mega-panel {
		--lp-mega-mobile-indent: 18px; /* indent for level-3 links */
		--lp-mega-mobile-level2-size: 16px;
		--lp-mega-mobile-level3-size: 14.5px;
	}

	.main-navigation.is-open .lp-mega-section__links {
		max-height: none !important;
		overflow-y: visible !important;
	}

	.main-navigation.is-open .lp-mega-section__footer {
		padding-inline: var(--space-4);
	}

	.main-navigation.is-open .lp-mega-section__explore {
		min-height: 44px;
		font-size: var(--text-sm) !important;
		font-weight: var(--font-semibold) !important;
		padding: var(--space-3) var(--space-4) !important;
		text-align: center;
	}

	/* Hide the mega panel sub-menu by default (mirrors .sub-menu hidden) */
	.main-navigation.is-open .lp-mega-panel > .sub-menu {
		position: static !important;
		display: none !important;
		padding: 0;
		background: transparent;
		border: none;
		box-shadow: none;
		backdrop-filter: none;
		transform: none;
		pointer-events: auto;
		width: 100%;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.main-navigation.is-open .lp-mega-panel > .sub-menu::before {
		display: none !important;
	}

	/* Show on .is-active (mirrors .menu-item-has-children.is-active > .sub-menu) */
	.main-navigation.is-open .menu-item-has-children.is-active .lp-mega-panel > .sub-menu {
		display: block !important;
		padding: var(--space-1) 0 var(--space-3);
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* Nested sub-menus inside mega sections (level 3) —
	   collapsed by default; expanded by tapping the level-2 section row. */
	.main-navigation.is-open .lp-mega-panel .lp-mega-section__links {
		display: none !important;
	}

	.main-navigation.is-open .lp-mega-panel .lp-mega-section.is-active .lp-mega-section__links {
		display: block !important;
	}

	.main-navigation.is-open .lp-mega-panel .sub-menu .sub-menu {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.main-navigation.is-open .lp-mega-panel .sub-menu .sub-menu::before,
	.main-navigation.is-open .lp-mega-panel .sub-menu .sub-menu::after {
		display: none !important;
	}

	/* Section header row: optional icon + mobile title link */
	.lp-mega-section__row {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--space-3);
		padding-inline: var(--space-4);
	}

	.lp-mega-section__title-icon .lp-mega-section__icon {
		display: block;
		width: var(--lp-mega-icon-size, 28px);
		height: var(--lp-mega-icon-size, 28px);
		object-fit: contain;
	}

	.lp-mega-section__title-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-right: var(--space-2);
		vertical-align: middle;
	}

	/* Mobile: hide service icons for cleaner hierarchy */
	.main-navigation.is-open .lp-mega-panel .lp-mega-section__title-icon {
		display: none !important;
	}

	/* Hide desktop title block; show mobile link */
	.lp-mega-section__mobile-link {
		display: block !important;
	}

	/* Sub-menu links inside mega panel — base compartida */
	.main-navigation.is-open .lp-mega-panel .sub-menu a {
		font-size: var(--text-lg, 18px);
		font-weight: 400;
		color: var(--color-text);
		padding: var(--space-2) var(--space-4);
		display: block;
		text-decoration: none;
		transition: color 0.15s ease;
		text-align: left;
		min-height: 44px;
		outline: none !important;
		-webkit-tap-highlight-color: transparent !important;
	}

	.main-navigation.is-open .lp-mega-panel .sub-menu a:hover {
		color: var(--color-brand);
		background: transparent;
	}

	.main-navigation.is-open .lp-mega-panel .sub-menu a::after {
		display: none !important;
	}

	/* Level 2: título de sección — semibold, tamaño completo.
	   display:block !important neutraliza el flex+chevron de
	   .sub-menu .menu-item-has-children>a (style.css). */
	.main-navigation.is-open .lp-mega-panel .lp-mega-section__mobile-link {
		display: flex !important;
		align-items: center;
		gap: var(--space-2);
		font-weight: var(--font-semibold);
		font-size: var(--lp-mega-mobile-level2-size, 16px);
		padding-top: var(--space-3);
		padding-bottom: var(--space-3);
		margin-top: var(--space-2);
		border-radius: 12px;
		background: color-mix(in srgb, var(--color-brand) 5%, transparent);
		letter-spacing: 0.01em;
		padding-inline: var(--space-4);
		position: relative;
	}

	/* Ocultar el chevron de colapso: los sub-items siempre son visibles en mobile */
	.main-navigation.is-open .lp-mega-panel .lp-mega-section__mobile-link::before {
		display: none !important;
	}

	/* Mobile: show a clear indicator when level-2 can expand (has level-3 links) */
	.main-navigation.is-open .lp-mega-panel .lp-mega-section__mobile-link[aria-controls]::after {
		content: '';
		position: absolute;
		right: var(--space-4);
		top: 50%;
		width: 18px;
		height: 18px;
		transform: translateY(-50%) rotate(0deg);
		transform-origin: center;
		background-color: currentColor;
		opacity: 0.65;
		transition: transform 0.18s ease, opacity 0.18s ease;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 18px 18px;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 18px 18px;
	}

	.main-navigation.is-open .lp-mega-panel .lp-mega-section.is-active .lp-mega-section__mobile-link[aria-controls]::after {
		transform: translateY(-50%) rotate(180deg);
		opacity: 0.92;
	}

	/* Make room for the chevron */
	.main-navigation.is-open .lp-mega-panel .lp-mega-section__mobile-link[aria-controls] {
		padding-right: calc(var(--space-4) + 22px);
	}

	/* Level 3: subsección — más pequeño y muted */
	.main-navigation.is-open .lp-mega-panel .lp-mega-section__links a {
		font-size: var(--lp-mega-mobile-level3-size, 14.5px);
		color: var(--color-text-muted);
		padding-left: calc(var(--space-4) + var(--lp-mega-mobile-indent, 18px));
		border-left: none;
		display: flex;
		align-items: baseline;
		gap: var(--space-2);
	}

	.main-navigation.is-open .lp-mega-panel .lp-mega-section__links a::before {
		content: "›";
		position: static;
		transform: none;
		color: color-mix(in srgb, var(--color-brand) 40%, transparent);
		font-weight: var(--font-bold);
		flex-shrink: 0;
		line-height: 1;
		position: relative;
		top: -1px;
	}

	/* Level-2 row interaction */
	.main-navigation.is-open .lp-mega-panel .lp-mega-section__mobile-link:hover,
	.main-navigation.is-open .lp-mega-panel .lp-mega-section__mobile-link:focus-visible {
		background: color-mix(in srgb, var(--color-brand) 9%, transparent);
	}

	.main-navigation.is-open .lp-mega-panel .lp-mega-section__links a:hover {
		color: var(--color-brand);
	}

	/* Dark mode mobile */
	[data-theme="dark"] .main-navigation.is-open .lp-mega-panel .sub-menu a {
		color: var(--color-text-light, #e2e8f0);
	}

	[data-theme="dark"] .main-navigation.is-open .lp-mega-panel .sub-menu a:hover {
		color: var(--color-brand);
	}

	[data-theme="dark"] .main-navigation.is-open .lp-mega-panel .lp-mega-section__links a {
		color: var(--color-text-muted);
	}

	/* Hide mega-specific desktop elements on mobile */
	.lp-mega-section__desktop-head {
		display: none !important;
	}
}

/*--------------------------------------------------------------
# Mega Menu – Desktop only
 * Navigation density: same border/radius tokens as Services cards, but tighter
 * spacing and type scale than marketing cards — optimized for scanning.
--------------------------------------------------------------*/
@media (min-width: 1141px) {

	/* ---- Panel container ---- */
	.menu-item-has-mega {
		position: relative;
	}

	.lp-mega-panel {
		/* Local tokens — mega = UI surface, not a hero section */
		--lp-mega-pad-outer: var(--space-4);
		--lp-mega-pad-inner: var(--space-5);
		--lp-mega-grid-gap: var(--space-6);
		--lp-mega-icon-size: 20px;

		display: none !important;
		position: fixed;
		/* Floats below header with a small gap (8px). Pure CSS — tracks header glass shift. */
		top: calc(112px + var(--header-glass-alpha, 0) * 10px + 8px);
		left: 50%;
		transform: translateX(-50%);
		width: min(1120px, calc(100vw - 48px));
		max-height: min(78vh, 640px);
		z-index: 320;
		padding: var(--lp-mega-pad-outer);
		border-radius: var(--radius-xl);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--glass-submenu-bg, rgba(255, 255, 255, 0.96));
		backdrop-filter: blur(24px);
		-webkit-backdrop-filter: blur(24px);
		border: var(--border-width-default) solid var(--color-border-surface);
		box-shadow: var(--shadow-md);
		pointer-events: auto !important;
	}

	/* Restore interactivity for ALL elements inside mega panel */
	.lp-mega-panel *,
	.lp-mega-panel a,
	.lp-mega-panel ul,
	.lp-mega-panel li {
		pointer-events: auto !important;
	}

	.menu-item-has-mega.is-open > .lp-mega-panel {
		display: block !important;
		animation: megaPanelReveal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	}

	@keyframes megaPanelReveal {
		from {
			opacity: 0;
			transform: translateX(-50%) translateY(-10px) scale(0.98);
		}
		to {
			opacity: 1;
			transform: translateX(-50%) translateY(0) scale(1);
		}
	}

	/* ---- Grid: max 3 columns; rows share height — cards stretch, link area scrolls if needed ---- */
	.lp-mega-panel__sections {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-rows: minmax(min-content, 1fr);
		align-items: stretch;
		gap: var(--lp-mega-grid-gap, var(--space-6));
		list-style: none;
		margin: 0;
		padding: 0;
		/* Override .sub-menu base styles */
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		max-height: none !important;
		height: auto !important;
		transition: none !important;
	}

	.lp-mega-panel__sections::before,
	.lp-mega-panel__sections::after {
		display: none !important;
	}

	/* Panel shrinks to fit content: 1 card → narrow panel, 2 cards → medium, 3+ → full (default). */
	.lp-mega-panel:has(.lp-mega-panel__sections > .lp-mega-section:only-child) {
		width: min(460px, calc(100vw - 48px));
	}

	.lp-mega-panel:has(.lp-mega-panel__sections > .lp-mega-section:nth-child(2):last-child) {
		width: min(820px, calc(100vw - 48px));
	}

	/* Sections grid adapts column count to match panel width */
	.lp-mega-panel__sections:has(> .lp-mega-section:only-child) {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.lp-mega-panel__sections:has(> .lp-mega-section:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* ---- Section cards — same elevation-0 pattern as Services cards ---- */
	.lp-mega-section {
		position: relative; /* anchor for the title stretched-link pseudo */
		display: flex !important;
		flex-direction: column;
		padding: 0;
		min-height: 0;
		height: 100%;
		background: var(--color-surface);
		border: var(--border-width-default) solid var(--color-border-surface);
		border-radius: var(--radius-card);
		box-shadow: var(--shadow-none);
		overflow: hidden;
		transition:
			border-color var(--motion-duration-interactive) var(--motion-ease-standard),
			transform var(--motion-duration-interactive) var(--motion-ease-standard);
	}

	@media (hover: hover) and (pointer: fine) {
		.lp-mega-section:hover {
			transform: translateY(-2px);
			border-color: var(--color-border-surface-hover);
		}
	}

	/* Hide mobile-only link (desktop uses .lp-mega-section__desktop-head) */
	.lp-mega-section__mobile-link {
		display: none !important;
	}

	.lp-mega-section__desktop-head {
		display: block;
	}

	/* ---- Section header row (icon + title block) ---- */
	.lp-mega-section__row {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0;
		padding-top: var(--lp-mega-pad-inner, var(--space-5));
		padding-inline: var(--lp-mega-pad-inner, var(--space-5));
		padding-bottom: var(--space-2);
		border-bottom: var(--border-width-default) solid var(--color-border-surface);
	}

	.lp-mega-section__title-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-right: var(--space-2);
		vertical-align: middle;
	}

	.lp-mega-section__title-icon .lp-mega-section__icon {
		display: block;
		width: var(--lp-mega-icon-size, 32px);
		height: var(--lp-mega-icon-size, 32px);
		object-fit: contain;
	}

	/* ---- Section title ---- */
	.lp-mega-section__title {
		display: block;
		margin: 0;
		padding-top: 0;
		padding-bottom: 0;
		font: inherit;
		border-bottom: none;
	}

	/* Level 2 — group label: smaller than Services marketing titles (nav scan) */
	.lp-mega-section__title-link,
	.lp-mega-section__title-text {
		display: inline-flex;
		align-items: center;
		font-family: var(--font-body);
		font-size: var(--text-base);
		font-weight: var(--font-semibold);
		line-height: var(--leading-snug);
		letter-spacing: -0.01em;
		color: var(--color-dark);
		text-decoration: none;
	}

	.lp-mega-section__title-link:hover {
		color: var(--color-brand);
		text-decoration: none;
	}

	/* Neutralize legacy `.sub-menu .menu-item a` (0,2,1) from style.css that would
	   otherwise impose smaller font, lighter weight, block display, padding and
	   underline animation on the section title link (page-link items render as
	   `<a>`; custom-link items render as `<span>` and escape the legacy rule). */
	.sub-menu .menu-item a.lp-mega-section__title-link {
		position: static; /* let the stretched ::before anchor to .lp-mega-section */
		display: inline-flex;
		align-items: center;
		padding: 0;
		font-size: var(--text-base);
		font-weight: var(--font-semibold);
		line-height: var(--leading-snug);
		letter-spacing: -0.01em;
		white-space: normal;
	}

	.sub-menu .menu-item a.lp-mega-section__title-link::after {
		content: none !important;
		display: none !important;
	}

	/* Stretched-link pattern: when the section title is a real link (page-link),
	   the entire card becomes clickable. Custom-link sections with `#` render the
	   title as `<span>`, so they keep the current non-clickable card behavior. */
	.lp-mega-section__title-link::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	/* ---- Section description ---- */
	.lp-mega-section__desc {
		display: block;
		margin: 0;
		padding-top: var(--space-2);
		padding-bottom: var(--space-2);
		font-family: var(--font-body);
		font-size: var(--text-xs);
		line-height: var(--leading-normal);
		font-weight: var(--font-normal);
		color: var(--color-text-muted);
	}

	/* ---- Subsection links list (scrolls inside column when long) ---- */
	.lp-mega-section__links {
		list-style: none !important;
		margin: 0 !important;
		padding-inline: calc(var(--lp-mega-pad-inner, var(--space-5)) - var(--space-2)) !important;
		display: flex !important;
		flex-direction: column;
		gap: 1px;
		flex: 1 1 auto;
		min-height: 0;
		min-width: 0 !important;
		max-height: min(260px, 32vh);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
		/* Override .sub-menu and .sub-menu .sub-menu base styles */
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		transition: none !important;
	}

	/* Neutralize .menu-item-has-children:hover>.sub-menu { transform: translateX(-50%) }
	   from style.css (0,2,0) — must match specificity and load after to win. */
	.lp-mega-section:hover .lp-mega-section__links,
	.lp-mega-section:focus-within .lp-mega-section__links {
		transform: none !important;
	}

	/* Flex column: title + optional desc + scrollable links + optional explore CTA */
	.lp-mega-section__links-wrap {
		position: relative; /* lift depth-3 links + footer above title stretched-link */
		z-index: 1;
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		margin-top: var(--space-1);
	}

	.lp-mega-section__footer {
		flex-shrink: 0;
		margin-top: auto;
		padding: var(--space-3) var(--lp-mega-pad-inner, var(--space-5)) var(--space-4);
		border-top: var(--border-width-default) solid var(--color-border-surface);
	}

	.lp-mega-section__explore {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		min-height: 2.5rem;
		padding: var(--space-2) var(--space-4);
		font-family: var(--font-body);
		font-size: var(--text-sm);
		font-weight: var(--font-semibold);
		line-height: var(--leading-snug);
		color: var(--color-brand);
		text-decoration: none;
		text-align: center;
		border-radius: var(--radius-sm);
		border: var(--border-width-default) solid var(--color-border-surface);
		background: var(--color-surface);
		transition:
			border-color var(--motion-duration-interactive) var(--motion-ease-standard),
			background-color var(--motion-duration-interactive) var(--motion-ease-standard),
			color var(--motion-duration-interactive) var(--motion-ease-standard);
	}

	@media (hover: hover) and (pointer: fine) {
		.lp-mega-section__explore:hover {
			border-color: var(--color-border-surface-hover);
			background: var(--color-brand-light);
			color: var(--color-brand-hover);
		}
	}

	.lp-mega-section__explore:focus-visible {
		outline: var(--focus-ring-width) solid var(--focus-ring-color);
		outline-offset: var(--focus-ring-offset);
	}

	.lp-mega-section__links::before,
	.lp-mega-section__links::after {
		display: none !important;
	}

	/* Fix: .sub-menu .sub-menu (0,2,0) overrides padding (0,1,0).
	   Match specificity so all sides are preserved. */
	.lp-mega-section .lp-mega-section__links {
		padding-top: var(--space-1) !important;
		padding-bottom: var(--space-2) !important;
		padding-inline: calc(var(--lp-mega-pad-inner, var(--space-5)) - var(--space-2)) !important;
	}

	.lp-mega-section__item {
		margin: 0;
		padding: 0;
	}

	/* Level 3 — dense link rows (desktop pointer; still comfortable hit area) */
	.lp-mega-section__link {
		display: flex !important;
		align-items: center;
		width: 100% !important;
		box-sizing: border-box !important;
		min-height: 2.25rem;
		padding: var(--space-1) var(--space-2) !important;
		margin: 0 !important;
		font-family: var(--font-body) !important;
		font-size: var(--text-sm) !important;
		font-weight: var(--font-medium) !important;
		color: var(--color-text-muted) !important;
		text-decoration: none !important;
		border-radius: var(--radius-sm);
		background: transparent !important;
		transition:
			color var(--motion-duration-interactive) var(--motion-ease-standard),
			background-color var(--motion-duration-interactive) var(--motion-ease-standard) !important;
		white-space: normal !important;
		line-height: var(--leading-snug);
		transform: none !important;
		left: auto !important;
		right: auto !important;
		border: none !important;
	}

	.lp-mega-section__link::before {
		content: "›";
		margin-right: var(--space-1);
		font-weight: var(--font-bold);
		font-size: var(--text-xs);
		color: color-mix(in srgb, var(--color-brand) 35%, transparent);
		flex-shrink: 0;
		transition: color var(--motion-duration-interactive) var(--motion-ease-standard);
	}

	.lp-mega-section__link:hover::before {
		color: var(--color-brand);
	}

	/* Override .sub-menu .menu-item a pseudo-elements */
	.lp-mega-section__link::after {
		display: none !important;
		content: none !important;
	}

	.lp-mega-section__link:hover {
		color: var(--color-brand) !important;
		background: var(--color-brand-light) !important;
	}

	.lp-mega-section__link:focus-visible {
		outline: var(--focus-ring-width) solid var(--focus-ring-color);
		outline-offset: var(--focus-ring-offset);
		background: var(--color-brand-light) !important;
	}

	/*
	 * Nested lists (level 4+) — always expanded inside the column (no flyout).
	 * Overrides global .sub-menu .sub-menu { display: none } for this context.
	 */
	.lp-mega-panel .lp-mega-section__links > .menu-item-has-children {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.lp-mega-panel .lp-mega-section__links ul.sub-menu {
		position: static !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 1px;
		margin: var(--space-1) 0 var(--space-2) 0 !important;
		padding: 0 0 var(--space-2) var(--space-4) !important;
		min-width: 0 !important;
		list-style: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		background: transparent !important;
		border: none !important;
		border-left: var(--border-width-default) solid var(--color-border-surface) !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
		max-height: none !important;
	}

	.lp-mega-panel .lp-mega-section__links ul.sub-menu::before,
	.lp-mega-panel .lp-mega-section__links ul.sub-menu::after {
		display: none !important;
	}

	.lp-mega-section__sublink {
		display: block !important;
		width: 100%;
		box-sizing: border-box;
		padding: var(--space-1) var(--space-2) !important;
		margin: 0 !important;
		font-family: var(--font-body) !important;
		font-size: var(--text-xs) !important;
		font-weight: var(--font-normal) !important;
		line-height: var(--leading-normal) !important;
		color: var(--color-text-muted) !important;
		text-decoration: none !important;
		border-radius: var(--radius-sm);
		transition:
			color var(--motion-duration-interactive) var(--motion-ease-standard),
			background-color var(--motion-duration-interactive) var(--motion-ease-standard);
	}

	.lp-mega-section__sublink:hover {
		color: var(--color-brand) !important;
		background: var(--color-brand-light) !important;
	}

	.lp-mega-section__sublink:focus-visible {
		outline: var(--focus-ring-width) solid var(--focus-ring-color);
		outline-offset: var(--focus-ring-offset);
		background: var(--color-brand-light) !important;
	}

	.lp-mega-section__sublink::after {
		display: none !important;
		content: none !important;
	}

	/* Parent row (level 3 with children): keep chevron from global rule minimal */
	.lp-mega-section__links > .menu-item-has-children > .lp-mega-section__link {
		padding-bottom: var(--space-1) !important;
	}

	/* ---- Arrow on parent navigation item ---- */
	#primary-menu > .menu-item-has-mega > a::before {
		transition: transform 0.22s ease, opacity 0.22s ease;
		transform-origin: center;
		opacity: 0.78;
		margin-left: 10px;
		position: relative;
		top: 1px;
	}

	#primary-menu > .menu-item-has-mega.is-open > a::before {
		transform: rotate(180deg);
		opacity: 1;
	}

	/* =============================================
	   Dark mode
	   ============================================= */
	[data-theme="dark"] .lp-mega-panel {
		background: rgba(13, 27, 46, 0.98);
		border-color: var(--color-border-surface);
		box-shadow: var(--shadow-lg);
	}

	/* When mega is open, header background matches panel for color cohesion */
	html:has(.menu-item-has-mega.is-open) .header-inner {
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(24px);
		-webkit-backdrop-filter: blur(24px);
	}

	html[data-theme="dark"]:has(.menu-item-has-mega.is-open) .header-inner {
		background: rgba(13, 27, 46, 0.98);
	}

	[data-theme="dark"] .lp-mega-section {
		background: var(--color-surface-alt);
		border-color: var(--color-border-surface);
	}

	@media (hover: hover) and (pointer: fine) {
		[data-theme="dark"] .lp-mega-section:hover {
			border-color: var(--color-border-surface-hover);
		}
	}

	[data-theme="dark"] .lp-mega-section__title {
		border-bottom-color: var(--color-border-surface);
	}

	[data-theme="dark"] .lp-mega-section__title-link,
	[data-theme="dark"] .lp-mega-section__title-text {
		color: #f3f7fb;
	}

	[data-theme="dark"] .lp-mega-section__title-link:hover {
		color: var(--color-brand);
	}

	[data-theme="dark"] .lp-mega-section__desc {
		color: var(--color-text-muted);
	}

	[data-theme="dark"] .lp-mega-section__link {
		color: #e3ebf4;
	}

	[data-theme="dark"] .lp-mega-section__link::before {
		color: rgba(61, 164, 224, 0.35);
	}

	[data-theme="dark"] .lp-mega-section__link:hover::before {
		color: var(--color-brand);
	}

	[data-theme="dark"] .lp-mega-section__link:hover {
		background: rgba(61, 164, 224, 0.12) !important;
		color: var(--color-brand) !important;
	}

	[data-theme="dark"] .lp-mega-panel .lp-mega-section__links ul.sub-menu {
		border-left-color: var(--color-border-surface) !important;
	}

	[data-theme="dark"] .lp-mega-section__sublink {
		color: var(--color-text-muted) !important;
	}

	[data-theme="dark"] .lp-mega-section__sublink:hover {
		background: rgba(61, 164, 224, 0.12) !important;
		color: var(--color-brand) !important;
	}

	[data-theme="dark"] .lp-mega-section__footer {
		border-top-color: var(--color-border-surface);
	}

	[data-theme="dark"] .lp-mega-section__explore {
		background: var(--color-surface-alt);
		border-color: var(--color-border-surface);
		color: var(--color-brand);
	}

	@media (hover: hover) and (pointer: fine) {
		[data-theme="dark"] .lp-mega-section__explore:hover {
			border-color: var(--color-border-surface-hover);
			background: rgba(61, 164, 224, 0.12);
			color: var(--color-brand-hover);
		}
	}
}