/**
 * Header UI consolidation for the 0.1.25 work branch.
 *
 * This final cascade keeps the native Navigation block markup and behaviour.
 * It aligns every mobile submenu control to one fixed chevron column and gives
 * Services, Cargo and Documents one shared card/state language.
 */

.et-primary-nav {
	--et-header-card-background: linear-gradient(90deg, rgba(0, 156, 166, 0.08), rgba(255, 255, 255, 0.94));
	--et-header-card-border: rgba(10, 35, 66, 0.11);
	--et-header-card-border-active: rgba(0, 156, 166, 0.48);
	--et-header-card-shadow-active: 0 0.4rem 1rem rgba(10, 35, 66, 0.08);
}

@media (min-width: 80rem) {
	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		.et-service-group--containers,
	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		.et-menu-group--cargo {
		--et-header-icon-strip: 2.75rem;
	}

	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		.et-menu-group--cargo {
		--et-menu-accent: 0, 156, 166;
	}

	/* One card surface and one interaction state for service and cargo links. */
	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		:is(.et-service-group, .et-menu-group--cargo)
		a.has-et-menu-icon,
	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		:is(.et-service-group, .et-menu-group--cargo)
		a.has-et-menu-icon:is(:hover, :focus-visible) {
		background: linear-gradient(
			90deg,
			rgba(var(--et-menu-accent, 0, 156, 166), 0.1) 0 var(--et-header-icon-strip, 2.25rem),
			rgba(255, 255, 255, 0.9) var(--et-header-icon-strip, 2.25rem) 100%
		) !important;
		border: 1px solid var(--et-header-card-border) !important;
		border-radius: 0.52rem !important;
		box-shadow: none;
		color: var(--wp--preset--color--transit-navy) !important;
		font-size: 0.86rem !important;
		font-weight: 650 !important;
		line-height: 1.15 !important;
		min-height: 2.75rem !important;
		transform: none;
		transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
		width: 100%;
	}

	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		:is(.et-service-group, .et-menu-group--cargo)
		a.has-et-menu-icon:is(:hover, :focus-visible) {
		border-color: var(--et-header-card-border-active) !important;
		box-shadow: var(--et-header-card-shadow-active) !important;
	}

	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		.et-menu-group--cargo
		a.has-et-menu-icon--cargo {
		display: grid !important;
		gap: 0.55rem !important;
		grid-template-columns: 2.125rem minmax(0, 1fr) !important;
		justify-content: normal !important;
		padding: 0.32rem 0.42rem 0.32rem 0.28rem !important;
	}

	/* Cargo used a decorative right-arrow badge; service cards do not. Service
	 * underlines are removed as well so every card animates identically. */
	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		:is(.et-service-group, .et-menu-group--cargo)
		a.has-et-menu-icon::after {
		content: none !important;
		display: none !important;
	}

	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		:is(.et-service-group, .et-menu-group--cargo)
		a.has-et-menu-icon:is(:hover, :focus-visible)
		.et-menu-icon-wrap {
		color: var(--wp--preset--color--transit-navy) !important;
	}

	/* Documents uses the same service-card geometry and state, intentionally
	 * without an icon column. */
	.et-primary-nav li.et-documents-menu
		> ul.wp-block-navigation__submenu-container
		> li
		> a,
	.et-primary-nav li.et-documents-menu
		> ul.wp-block-navigation__submenu-container
		> li
		> a:is(:hover, :focus-visible) {
		background: linear-gradient(
			90deg,
			rgba(0, 156, 166, 0.1) 0 2.25rem,
			rgba(255, 255, 255, 0.9) 2.25rem 100%
		) !important;
		border: 1px solid var(--et-header-card-border) !important;
		border-radius: 0.52rem !important;
		box-shadow: none;
		color: var(--wp--preset--color--transit-navy) !important;
		display: flex !important;
		font-size: 0.86rem !important;
		font-weight: 650 !important;
		line-height: 1.15 !important;
		margin: 0 !important;
		min-height: 2.75rem !important;
		padding: 0.5rem 0.65rem 0.5rem 2.7rem !important;
		text-transform: none !important;
		transform: none;
		transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
		width: 100%;
	}

	.et-primary-nav li.et-documents-menu
		> ul.wp-block-navigation__submenu-container
		> li
		> a:is(:hover, :focus-visible) {
		border-color: var(--et-header-card-border-active) !important;
		box-shadow: var(--et-header-card-shadow-active) !important;
	}
}

@media (max-width: 79.99rem) {
	/* Every submenu owns the same two-column row. Labels wrap only in column one;
	 * the 44px control is fixed to column two at the right edge. */
	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		li.wp-block-navigation-submenu {
		align-items: center !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 2.75rem !important;
		grid-template-rows: auto auto;
		width: 100%;
	}

	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		li.wp-block-navigation-submenu
		> .wp-block-navigation-item__content {
		grid-column: 1;
		grid-row: 1;
		max-width: none !important;
		min-width: 0;
		padding-inline-end: 0.5rem !important;
		width: 100% !important;
	}

	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		li.wp-block-navigation-submenu
		> button.wp-block-navigation__submenu-icon {
		align-self: stretch;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		grid-column: 2;
		grid-row: 1;
		inset: auto !important;
		justify-self: stretch;
		margin: 0 !important;
		min-height: 2.75rem;
		min-width: 2.75rem;
		position: relative !important;
		width: 2.75rem;
	}

	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		li.wp-block-navigation-submenu
		> ul.wp-block-navigation__submenu-container {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	/* The three service categories and Documents are plain navigation rows, not
	 * pill controls. The chevron column above still supplies a 44px target. */
	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		:is(.et-menu-tab, .et-documents-menu)
		> .wp-block-navigation-item__content {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		margin: 0 !important;
		min-height: 2.75rem !important;
		padding-block: 0.5rem !important;
	}

	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		.et-menu-tab
		> .wp-block-navigation-item__content {
		font-weight: 700 !important;
	}

	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		.et-documents-menu
		> .wp-block-navigation-item__content {
		font-weight: 700 !important;
	}

	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		:is(.et-menu-tab, .et-documents-menu)
		> button.wp-block-navigation__submenu-icon {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* Card parity in the scrolling overlay. */
	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		:is(.et-service-group, .et-menu-group--cargo)
		a.has-et-menu-icon,
	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		li.et-documents-menu
		> ul.wp-block-navigation__submenu-container
		> li
		> a {
		background: var(--et-header-card-background) !important;
		border: 1px solid var(--et-header-card-border) !important;
		border-radius: 0.65rem !important;
		box-shadow: none;
		color: var(--wp--preset--color--transit-navy) !important;
		line-height: 1.28 !important;
		margin: 0 !important;
		min-height: 2.75rem !important;
		text-transform: none !important;
		transform: none;
		transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
		width: 100%;
	}

	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		:is(.et-service-group, .et-menu-group--cargo)
		a.has-et-menu-icon {
		display: grid !important;
		font-weight: 650 !important;
		gap: 0.55rem !important;
		grid-template-columns: 2.125rem minmax(0, 1fr) !important;
		padding: 0.45rem 0.6rem !important;
	}

	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		li.et-documents-menu
		> ul.wp-block-navigation__submenu-container
		> li
		> a {
		display: flex !important;
		font-weight: 650 !important;
		padding: 0.45rem 0.6rem !important;
		width: 100%;
	}

	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		:is(.et-service-group, .et-menu-group--cargo)
		a.has-et-menu-icon::after {
		content: none !important;
		display: none !important;
	}
}

@media (hover: hover) and (pointer: fine) {
	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		:is(.et-service-group, .et-menu-group--cargo)
		a.has-et-menu-icon:is(:hover, :focus-visible),
	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		li.et-documents-menu
		> ul.wp-block-navigation__submenu-container
		> li
		> a:is(:hover, :focus-visible) {
		background: var(--et-header-card-background) !important;
		border-color: var(--et-header-card-border-active) !important;
		box-shadow: var(--et-header-card-shadow-active) !important;
		color: var(--wp--preset--color--transit-navy) !important;
	}

	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		:is(.et-service-group, .et-menu-group--cargo)
		a.has-et-menu-icon:is(:hover, :focus-visible)
		.et-menu-icon-wrap {
		color: var(--wp--preset--color--transit-navy) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.et-primary-nav :is(
		.et-service-group,
		.et-menu-group--cargo,
		.et-documents-menu
	) a {
		transition: none !important;
	}
}