/* Compact mega-menu — desktop shell.
 *
 * Everything here is gated on the desktop breakpoint (Blocksy's own tablet
 * cutover, 1000px / 999.98px). Below it the shell is never rendered at all —
 * inc/compact-mega-menu.php bails without $args->blocksy_mega_menu — so
 * Blocksy's native accordion is the only markup present and the shared
 * mega-menu-drawer.css skins it. */

@media (min-width: 1000px) {
	/* Anchor for the pointer bridge below. */
	.header-menu-1 .nw-compact-mega-ready > .ct-menu-link {
		position: relative;
	}

	.header-menu-1 .nw-compact-mega-ready.ct-active > .ct-menu-link {
		z-index: 11;
	}

	/* CSS-only hover bridge. Blocksy opens the panel from mouseenter on the
	 * <li>, so the visual gap between the trigger and the panel would fire
	 * mouseleave and flicker. This spans the gap, and only becomes hit-testable
	 * once the panel is actually open so it never swallows clicks on the page
	 * behind a closed menu. The Services variant sizes its equivalent from JS;
	 * this one is a fixed height because the compact panel has no tab rail to
	 * reflow. */
	.header-menu-1 .nw-compact-mega-ready > .ct-menu-link::after {
		content: '';
		position: absolute;
		top: 100%;
		inset-inline: 0;
		z-index: 1;
		height: 34px;
		background: transparent;
		pointer-events: none;
	}

	.header-menu-1 .nw-compact-mega-ready.ct-active > .ct-menu-link::after {
		pointer-events: auto;
	}

	/* The panel box. Width comes from the item's Blocksy "Custom" dropdown
	 * width so an administrator can retune it without a code change — hence
	 * --mega-menu-max-width is read here rather than overridden. The min() is
	 * only a viewport guard: whatever the admin picks, the panel can never
	 * overflow a narrow window. The 680px fallback applies only if the item is
	 * left on "Content Width". */
	.header-menu-1 .nw-compact-mega-ready > .sub-menu {
		display: block;
		max-width: min(var(--mega-menu-max-width, 680px), calc(100vw - 40px));
		padding: 0;
		overflow: hidden;
		border: 1px solid color-mix(in srgb, var(--nw-border) 72%, transparent);
		border-radius: var(--nw-radius-lg);
		background: var(--nw-card);
		box-shadow: 0 18px 44px rgba(17, 21, 24, 0.14);
	}

	/* The raw hierarchy is the data source, not the presentation: hide every
	 * native row and let the generated shell inside the promo item render it.
	 * display:none also keeps the duplicated links out of the tab order. */
	.header-menu-1 .nw-compact-mega-ready > .sub-menu > li:not(.nw-compact-promo) {
		display: none !important;
	}

	.header-menu-1 .nw-compact-mega-ready > .sub-menu > .nw-compact-promo {
		display: block;
		width: 100%;
		min-width: 0;
		padding: 0;
		overflow: visible;
		border-radius: inherit;
	}

	.nw-compact-mega-ready .nw-compact-mega__shell {
		display: grid;
		box-sizing: border-box;
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
		align-items: stretch;
		width: 100%;
		padding: 18px;
		color: var(--nw-ink);
	}

	.nw-compact-mega-ready .nw-compact-mega__shell.has-promo {
		grid-template-columns: minmax(210px, 1fr) minmax(230px, 275px);
	}

	.nw-compact-mega-ready .nw-compact-mega__links {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Blocksy sets display:flex on submenu <li>s; these are plain rows. */
	.nw-compact-mega-ready .nw-compact-mega__links > .nw-compact-mega__item {
		display: block;
		margin: 0;
		padding: 0;
	}

	/* Compact rows, deliberately not cards: no border, no shadow, no fixed
	 * height — long or translated labels wrap instead of clipping. */
	.nw-compact-mega-ready .nw-compact-mega__link {
		display: flex;
		gap: 12px;
		align-items: center;
		min-height: 44px;
		padding: 8px 12px;
		border-radius: 12px;
		color: var(--nw-ink) !important;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.35;
		text-decoration: none;
		transition: background-color 150ms ease-out, color 150ms ease-out;

		/* About Us is the only row Blocksy treats as a menu link (it alone gets
		 * .ct-menu-link), and Blocksy fills menu-link icons with
		 * `var(--theme-icon-hover-color, var(--theme-link-hover-color))` set
		 * directly on the <svg> — which beats our `fill: currentColor`. With the
		 * hover variable undefined it fell through to --theme-link-hover-color,
		 * i.e. #d9f45f (the lime), so About Us alone hovered lime instead of ink.
		 * Same fix the Services variant uses (services-mega-menu.css:219). */
		--theme-icon-hover-color: var(--nw-ink);
	}

	/* Row highlight. Deliberately NOT scoped to `a` — the four placeholder rows
	 * render as <span> (they have no destination yet), so an `a.…` selector
	 * matched About Us only. Every row must highlight identically. */
	.nw-compact-mega-ready .nw-compact-mega__link:hover,
	.nw-compact-mega-ready .nw-compact-mega__link:focus-visible,
	.nw-compact-mega-ready a.nw-compact-mega__link[aria-current='page'] {
		background: var(--nw-bg-soft);
	}

	/* On hover the label and the icon swap emphasis: label goes pink, icon goes
	 * dark ink. Both need !important because the row itself sets an !important
	 * colour above and Blocksy colours menu links from --theme-link-hover-color
	 * at a higher specificity. */
	.nw-compact-mega-ready .nw-compact-mega__link:hover .nw-compact-mega__label,
	.nw-compact-mega-ready .nw-compact-mega__link:focus-visible .nw-compact-mega__label,
	.nw-compact-mega-ready a.nw-compact-mega__link[aria-current='page'] .nw-compact-mega__label {
		color: var(--nw-pink) !important;
	}

	.nw-compact-mega-ready .nw-compact-mega__link:hover .nw-compact-mega__icon,
	.nw-compact-mega-ready .nw-compact-mega__link:focus-visible .nw-compact-mega__icon,
	.nw-compact-mega-ready a.nw-compact-mega__link[aria-current='page'] .nw-compact-mega__icon {
		color: var(--nw-ink) !important;
		--theme-icon-color: var(--nw-ink);
	}

	.nw-compact-mega-ready .nw-compact-mega__link:focus-visible {
		outline: 2px solid var(--nw-pink);
		outline-offset: 2px;
	}

	/* Placeholder rows have no destination yet: they stay readable and
	 * focusable, but must not look clickable. */
	.nw-compact-mega-ready .nw-compact-mega__link.is-placeholder {
		cursor: default;
	}

	.nw-compact-mega-ready .nw-compact-mega__icon {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		color: var(--nw-pink);
		--theme-icon-color: var(--nw-pink);
		transition: color 150ms ease-out;
	}

	.nw-compact-mega-ready .nw-compact-mega__icon svg {
		width: 18px;
		height: 18px;
		fill: currentColor;
	}

	.nw-compact-mega-ready .nw-compact-mega__icon.is-placeholder {
		display: inline-block;
	}

	.nw-compact-mega-ready .nw-compact-mega__label {
		min-width: 0;
		overflow-wrap: anywhere;
		transition: color 150ms ease-out;
	}

	/* Promo column. Elementor containers inside a Content Block carry their own
	 * width/margin, so they are normalised to fill this track exactly the way
	 * the Services promo does. */
	.nw-compact-mega-ready .nw-compact-mega__promo,
	.nw-compact-mega-ready .nw-compact-mega__promo > .entry-content,
	.nw-compact-mega-ready .nw-compact-mega__promo .elementor,
	.nw-compact-mega-ready .nw-compact-mega__promo .elementor > .e-con,
	.nw-compact-mega-ready .nw-compact-mega__promo .e-con-inner {
		width: 100%;
		max-width: none;
		min-width: 0;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.nw-compact-mega-ready .nw-compact-mega__promo .e-con-inner > .e-con {
		--width: 100% !important;
		flex: 1 1 100%;
		width: 100% !important;
		max-width: 100%;
		min-width: 0;
	}

	.nw-compact-mega-ready .nw-compact-mega__promo {
		overflow: hidden;
		border-radius: var(--nw-radius);
	}
}

@media (max-width: 999.98px) {
	/* Compact children are leaves, so none of the Services depth rules apply.
	 * The shared drawer sheet already handles the root row, chevron, icon fill
	 * and submenu dots; these are the leaf rows only. */
	.mobile-menu .nw-compact-mega > .sub-menu > .menu-item > .ct-menu-link {
		min-height: 48px;
		padding-block: 10px;
		color: #ffffff !important;
		font-size: 16px !important;
	}

	.mobile-menu .nw-compact-mega > .sub-menu > .menu-item {
		border-bottom: 1px solid color-mix(in srgb, var(--nw-border) 62%, transparent);
	}

	.mobile-menu .mobile-menu .nw-compact-mega > .sub-menu > .menu-item:last-child,
	.mobile-menu .nw-compact-mega > .sub-menu > .menu-item:last-child {
		border-bottom: 0;
	}

	.mobile-menu .nw-compact-mega .ct-icon-container {
		color: var(--nw-pink);
	}

	/* Matches the desktop treatment: focusable and legible, but not a link. */
	.mobile-menu .nw-compact-mega .nw-compact-placeholder {
		cursor: default;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nw-compact-mega-ready .nw-compact-mega__link {
		transition: none !important;
	}
}