/* Shared mobile-drawer skin for the theme's mega-menu roots.
 *
 * Only the rules that are genuinely independent of a variant's depth live
 * here. Anything that depends on a variant's own structure — Services'
 * three-level category rows, the compact variant's flat leaf rows — stays in
 * that variant's stylesheet, because the two hierarchies do not share
 * selectors: Services children are .menu-item-has-children, compact children
 * are leaves.
 *
 * Loaded whenever either marker is present in the assigned menus. */

@media (max-width: 999.98px) {
	/* The drawer panel is dark (#111518 via --theme-palette-color-4), so a
	 * marked row stays flush with it: expanding must not paint a panel.
	 * Only the toggle chevron changes between collapsed and expanded. */
	.mobile-menu .nw-services-mega.dropdown-active,
	.mobile-menu .nw-compact-mega.dropdown-active {
		border-radius: 0;
		background: transparent;
	}

	/* White labels on the dark drawer. Blocksy sets these from
	 * --theme-link-initial-color at (0,2,1)-(0,4,1) with no !important, and its
	 * non-critical-styles bundle is not a declared dependency of this sheet, so
	 * load order is not guaranteed — hence !important throughout.
	 *
	 * The toggle is deliberately NOT gated on .dropdown-active: it is a <button>,
	 * so `color` does not inherit, and the Blocksy rule that would colour it
	 * lives in the same unloaded bundle — leaving the collapsed chevron pure
	 * black on the near-black drawer. */
	.mobile-menu .nw-services-mega.dropdown-active > .ct-sub-menu-parent > .ct-menu-link,
	.mobile-menu .nw-compact-mega.dropdown-active > .ct-sub-menu-parent > .ct-menu-link,
	.mobile-menu .nw-services-mega .ct-toggle-dropdown-mobile,
	.mobile-menu .nw-compact-mega .ct-toggle-dropdown-mobile {
		color: #ffffff !important;
	}

	/* Icons and the toggle chevron follow the link colour. The chevron is never
	 * hidden; Blocksy would rotate it via --toggle-icon-transform, supplied
	 * below because that bundle never loads here. */
	.mobile-menu .nw-services-mega .ct-menu-link svg,
	.mobile-menu .nw-compact-mega .ct-menu-link svg,
	.mobile-menu .nw-services-mega .ct-toggle-dropdown-mobile svg,
	.mobile-menu .nw-compact-mega .ct-toggle-dropdown-mobile svg {
		fill: currentColor !important;
		opacity: 1 !important;
	}

	/* Blocksy's non-critical-styles bundle carries both --toggle-icon-transform
	 * and the `svg { transform: var(--toggle-icon-transform) }` that consumes it,
	 * and that bundle is never requested on this site — so the chevron never
	 * rotated. Supply the rotation here, scoped to the markers, so expanding is
	 * signalled by the chevron alone now that the box is gone. */
	.mobile-menu .nw-services-mega .ct-toggle-dropdown-mobile svg,
	.mobile-menu .nw-compact-mega .ct-toggle-dropdown-mobile svg {
		transition: transform 150ms ease-out;
	}

	.mobile-menu .nw-services-mega.dropdown-active > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile svg,
	.mobile-menu .nw-compact-mega.dropdown-active > .ct-sub-menu-parent > .ct-toggle-dropdown-mobile svg {
		transform: rotate(-180deg);
	}

	@media (prefers-reduced-motion: reduce) {
		.mobile-menu .nw-services-mega .ct-toggle-dropdown-mobile svg,
		.mobile-menu .nw-compact-mega .ct-toggle-dropdown-mobile svg {
			transition: none;
		}
	}

	/* Drop Blocksy's leading submenu dot (a 3px currentColor box on
	 * a:not(:empty):before, gated on data-submenu-dots="yes"). Chevrons stay. */
	.mobile-menu[data-submenu-dots="yes"] .nw-services-mega .ct-menu-link::before,
	.mobile-menu[data-submenu-dots="yes"] .nw-compact-mega .ct-menu-link::before {
		content: none !important;
		display: none !important;
	}

	/* One line per label. Blocksy clips submenu ULs with overflow: hidden and no
	 * text-overflow, so the type is scaled down per variant to make labels fit
	 * rather than truncate silently at narrow widths. */
	.mobile-menu .nw-services-mega a.ct-menu-link,
	.mobile-menu .nw-compact-mega a.ct-menu-link {
		white-space: nowrap !important;
	}

	.mobile-menu .nw-services-mega > .sub-menu,
	.mobile-menu .nw-compact-mega > .sub-menu {
		padding-inline: 8px;
	}
}