/**
 * Eurasian Transit 0.1.22 release corrections.
 *
 * This late layer is intentionally scoped to the header catalogue, the two
 * content pages named in the release brief, and the managed home patterns.
 */

:root {
	--et-nav-gap: clamp(0.55rem, 0.72vw, 0.9rem);
}

/* The detailed homepage artwork comes from the approved site-materials
 * archive. The square source canvas is retained so none of the drawings is
 * cropped; object-position keeps the visible artwork optically left-aligned. */
.home .et-directions-section .et-home-service-art {
	display: block;
	height: 7rem;
	margin-block: -0.25rem 0.15rem !important;
	max-width: 9rem;
	object-fit: contain;
	object-position: left center;
	width: 100%;
}

/* On the two editorial pages, every internal junction is exactly 20 + 20 px.
 * The content shell owns the first and last gap, matching the Contacts page. */
body:is(.et-page--about, .et-page--process) .et-page-content {
	padding-block: var(--et-section-space-compact) !important;
}

body:is(.et-page--about, .et-page--process)
	.wp-block-post-content
	> :is(.et-section, .et-service-section):has(+ :is(.et-section, .et-service-section)) {
	padding-block-end: 20px !important;
}

body:is(.et-page--about, .et-page--process)
	.wp-block-post-content
	> :is(.et-section, .et-service-section)
	+ :is(.et-section, .et-service-section) {
	margin-block-start: 0 !important;
	padding-block-start: 20px !important;
}

/* New catalogue symbols keep one 32px drawing grid and never depend on a
 * hover background to remain legible. */
.et-menu-icon,
.et-home-line-icon,
.et-home-metric-icon,
.et-home-process-icon {
	--et-icon-primary: var(--et-release-navy);
	--et-icon-secondary: var(--et-release-teal);
	--et-icon-accent: var(--et-release-amber);
}

.et-menu-icon-wrap--flag {
	height: 1.35rem;
	width: 1.75rem;
}

.et-menu-icon--flag {
	height: 1.35rem;
	overflow: visible;
	width: 1.75rem;
}

.et-menu-icon-wrap--cargo {
	height: 2rem;
	width: 2rem;
}

.et-menu-icon--cargo {
	height: 1.9rem;
	width: 1.9rem;
}

@media (min-width: 80rem) {
	/* One explicit gap system. Spare room stays between logo and navigation;
	 * the navigation and CTA no longer form two visually unrelated clusters. */
	.et-header-inner {
		column-gap: 0 !important;
		justify-content: flex-start !important;
	}

	.et-brand-logo {
		margin-inline-end: auto !important;
	}

	.et-primary-nav {
		margin-inline-start: 0 !important;
	}

	.et-header-cta {
		margin-inline-start: var(--et-nav-gap) !important;
	}

	.et-primary-nav
		.wp-block-navigation__responsive-container-content
		> .wp-block-navigation__container,
	.et-primary-nav > .wp-block-navigation__container {
		gap: var(--et-nav-gap) !important;
	}

	.et-primary-nav
		.wp-block-navigation__container
		> li.wp-block-navigation-submenu
		> button.wp-block-navigation__submenu-icon {
		justify-content: center !important;
		margin-inline-start: 0.125rem !important;
		min-width: 1rem !important;
		padding: 0 !important;
		width: 1rem !important;
	}

	.et-primary-nav
		.wp-block-navigation__container
		> li.wp-block-navigation-submenu
		> button.wp-block-navigation__submenu-icon svg {
		height: 0.55rem !important;
		width: 0.55rem !important;
	}

	/* Preserve the icon strip on hover. Only the copy surface, border and
	 * restrained underline change, so no navy/teal/amber stroke disappears. */
	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		.et-service-group a[href],
	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		.et-service-group a[href]:is(:hover, :focus-visible) {
		background: linear-gradient(
			90deg,
			rgba(var(--et-menu-accent), 0.1) 0 2.25rem,
			rgba(255, 255, 255, 0.9) 2.25rem 100%
		) !important;
	}

	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		.et-service-group a[href]:is(:hover, :focus-visible) {
		border-color: rgba(var(--et-menu-accent), 0.48) !important;
		box-shadow: 0 0.4rem 1rem rgba(10, 35, 66, 0.08) !important;
	}

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

	/* Flags make each country identifiable without crowding long names. */
	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		.et-region-group > ul.wp-block-navigation__submenu-container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		.et-region-group a.has-et-menu-icon--flag {
		align-items: center;
		display: grid !important;
		gap: 0.45rem;
		grid-template-columns: 1.75rem minmax(0, 1fr);
		padding: 0.38rem 0.35rem !important;
	}

	/* Cargo cards use their semantic drawing as the leading visual cue. */
	.et-primary-nav li.et-mega-menu.et-mega-v3.is-mega-enhanced
		.et-menu-group--cargo > ul.wp-block-navigation__submenu-container a.has-et-menu-icon--cargo {
		display: grid !important;
		gap: 0.65rem;
		grid-template-columns: 2rem minmax(0, 1fr) auto;
		justify-content: normal;
		min-height: 4rem;
	}

	/* WordPress repeats the custom class on both li and ul. Targeting the
	 * direct panel explicitly restores the missing solid dropdown surface. */
	.et-primary-nav
		li.et-documents-menu
		> ul.wp-block-navigation__submenu-container {
		background: var(--wp--preset--color--document-white) !important;
		border: 1px solid rgba(10, 35, 66, 0.14) !important;
		border-radius: 0.75rem !important;
		box-shadow: 0 1rem 2.5rem rgba(10, 35, 66, 0.16) !important;
		gap: 0.2rem !important;
		left: auto !important;
		min-width: 21rem !important;
		overflow: hidden !important;
		padding: 0.5rem !important;
		right: 0 !important;
		width: 21rem !important;
		z-index: 1004 !important;
	}

	.et-primary-nav
		li.et-documents-menu
		> ul.wp-block-navigation__submenu-container
		> li
		> a {
		background: linear-gradient(90deg, rgba(0, 156, 166, 0.07), rgba(255, 255, 255, 0.96)) !important;
		border: 1px solid rgba(10, 35, 66, 0.11) !important;
		border-radius: 0.52rem !important;
		color: var(--wp--preset--color--transit-navy) !important;
		font-weight: 650;
		margin-block: 0.12rem;
		min-height: 3rem;
		padding: 0.65rem 0.75rem !important;
		text-transform: none !important;
		transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
	}

	.et-primary-nav
		li.et-documents-menu
		> ul.wp-block-navigation__submenu-container
		> li
		> a:is(:hover, :focus-visible) {
		background: var(--wp--preset--color--arctic-mist) !important;
		border-color: rgba(0, 156, 166, 0.45) !important;
		box-shadow: 0 0.35rem 0.9rem rgba(10, 35, 66, 0.08) !important;
	}
}

@media (max-width: 79.99rem) {
	/* The same icon hierarchy remains readable in the scrolling overlay. */
	.et-primary-nav .wp-block-navigation__responsive-container.is-menu-open
		:is(.et-region-group, .et-menu-group--cargo) a.has-et-menu-icon {
		align-items: center;
		background: linear-gradient(90deg, rgba(0, 156, 166, 0.06), rgba(255, 255, 255, 0.96));
		border: 1px solid rgba(10, 35, 66, 0.11);
		border-radius: 0.65rem;
		display: grid !important;
		gap: 0.55rem;
		grid-template-columns: 2rem minmax(0, 1fr);
		min-height: 2.75rem !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 {
		background: var(--wp--preset--color--arctic-mist) !important;
		border: 1px solid rgba(10, 35, 66, 0.12) !important;
		border-radius: 0.7rem !important;
		box-shadow: none !important;
		padding: 0.4rem !important;
	}

	.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(--wp--preset--color--document-white) !important;
		border: 1px solid rgba(10, 35, 66, 0.1) !important;
		border-radius: 0.5rem !important;
		color: var(--wp--preset--color--transit-navy) !important;
		margin-block: 0.12rem;
		text-transform: none !important;
	}
}

@media (max-width: 30rem) {
	.home .et-directions-section .et-home-service-art {
		height: 6.5rem;
		max-width: 8.5rem;
	}
}