/*
Theme Name: HWG Sababa
Description: Hello Elementor child theme for HWG Sababa. Layout is built in Elementor; the theme adds the Satoshi font, post types and the few components Elementor can't express.
Author: Lyon Müller
Template: hello-elementor
Version: 0.5.31
Requires at least: 6.0
Requires PHP: 8.1
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hwg-sababa
*/

@font-face {
	font-family: "Satoshi";
	src: url("assets/fonts/Satoshi-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Satoshi";
	src: url("assets/fonts/Satoshi-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Elementor prints the font variables as plain "Satoshi"; add a sans-serif fallback so text never
   shows in the browser's serif while the font loads. :root:root wins over the kit's :root. */
:root:root {
	--font-primary: Satoshi, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--e-gv-752d3ba: var(--font-primary);
}

body {
	font-family: var(--font-primary, "Satoshi"), sans-serif;
}

/* WPML language switcher per Figma: flag + chevron, others in a dropdown. The close delay gives the mouse some slack. */
.elementor .elementor-element.elementor-widget-wpml-language-switcher {
	flex: 0 0 auto;
}

/* Language switcher (WPML legacy dropdown).
   Toggle: flag + language code + FA Light chevron. Menu: right-aligned card, flag + language name.
   Names come from hreflang (the plugin only prints flags). */
.wpml-ls-legacy-dropdown {
	--ls-chevron: url("assets/images/icons/chevron-down-light.svg");
	width: auto;
	max-width: none;

	& > ul,
	& .wpml-ls-item {
		position: relative;
	}

	& .wpml-ls-flag {
		width: 1.5rem;
		height: auto;
		margin: 0;
		border-radius: 0.125rem;
		box-shadow: 0 0 0 1px var(--ring-navy);
	}

	& .wpml-ls-item > a {
		&,
		&:hover,
		&:focus {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			width: max-content;
			border: 0;
			border-radius: var(--radius-sm);
			background: none;
			font-family: var(--font-primary);
			font-size: var(--font-size-legal);
			font-weight: var(--font-weight-bold);
			letter-spacing: 0.06em;
			line-height: var(--line-height-ui);
			color: var(--navy);
			text-decoration: none;
			outline-offset: var(--focus-ring-offset);
			transition: background-color var(--duration-fast) var(--ease-out-strong);
		}

		&:focus-visible {
			outline: var(--focus-ring-width) solid var(--blue);
		}
	}

	/* Toggle: "🇬🇧 EN ⌄" pill. */
	& .wpml-ls-item > a.wpml-ls-item-toggle {
		&,
		&:hover,
		&:focus {
			padding: 0.5rem 0.625rem;
		}

		&::before {
			content: attr(hreflang);
			order: 1;
			text-transform: uppercase;
		}

		&::after {
			content: "";
			order: 2;
			position: static;
			inline-size: 0.75rem;
			block-size: 0.75rem;
			border: 0;
			background-color: currentColor;
			mask: var(--ls-chevron) center / contain no-repeat;
			transition: rotate var(--duration-popover) var(--ease-out-strong);
		}
	}

	& .wpml-ls-current-language {
		&:is(:hover, :focus-within) > a.wpml-ls-item-toggle {
			background-color: var(--gray-light);

			&::after {
				rotate: 180deg;
			}
		}
	}

	/* Menu card. */
	& .wpml-ls-item > .wpml-ls-sub-menu {
		top: calc(100% + 0.375rem);
		right: 0;
		left: auto;
		width: max-content;
		min-width: 9rem;
		margin: 0;
		padding: 0.375rem;
		border: 1px solid var(--ring-navy);
		border-radius: var(--radius-sm);
		background: var(--white);
		box-shadow: 0 var(--shadow-offset-y) var(--shadow-blur) var(--shadow-navy);
		visibility: hidden;
		opacity: 0;
		transform: translateY(calc(var(--motion-offset) * -1)) scale(var(--scale-popover-enter));
		transform-origin: top right;
		transition:
			opacity var(--duration-popover) var(--ease-out-strong) var(--delay-popover-close),
			transform var(--duration-popover) var(--ease-out-strong) var(--delay-popover-close),
			visibility 0s linear var(--delay-popover-hide);

		/* Invisible bridge over the gap so :hover isn't lost. */
		&::before {
			content: "";
			position: absolute;
			inset: -0.5rem 0 auto;
			height: 0.5rem;
		}

		& .wpml-ls-item > a {
			&,
			&:hover,
			&:focus {
				width: 100%;
				padding: 0.625rem 0.75rem;
				font-weight: var(--font-weight-regular);
				letter-spacing: 0;
				font-size: var(--font-size-body);
				color: var(--text);
			}

			&:is(:hover, :focus-visible) {
				background-color: var(--gray-light);
				color: var(--blue);
			}

			&[hreflang="it"]::after {
				content: "Italiano";
			}

			&[hreflang="en"]::after {
				content: "English";
			}
		}
	}

	& .wpml-ls-item:is(:hover, :focus-within) > .wpml-ls-sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	@media (prefers-reduced-motion: reduce) {
		& .wpml-ls-item > .wpml-ls-sub-menu {
			transform: none;
			transition: opacity var(--duration-popover) ease-out var(--delay-popover-close), visibility 0s linear var(--delay-popover-hide);
		}
	}
}

/* Adjacent colored bands (s-gray/s-blue): drop l-section's margin so no white gap shows. Covers siblings and bands wrapped in a component div. */
.elementor :is(.s-gray, .s-blue):has(+ :is(.s-gray, .s-blue), + * > :is(.s-gray, .s-blue):first-child),
.elementor :has(> :is(.s-gray, .s-blue):last-child):has(+ :is(.s-gray, .s-blue), + * > :is(.s-gray, .s-blue):first-child),
.elementor :has(> :is(.s-gray, .s-blue):last-child):has(+ :is(.s-gray, .s-blue), + * > :is(.s-gray, .s-blue):first-child) > :is(.s-gray, .s-blue):last-child {
	margin-block-end: 0;
}

/* Industry Cards (Settori, Soluzioni) per Figma: 3 equal cards on row 1, then content-sized pairs hugging the center; an odd last card centers. Tablet/mobile wrap naturally. */
@media (min-width: 1025px) {
	.elementor .l-industry-cards > :nth-child(-n+3) {
		flex: 0 0 calc((100% - 4rem) / 3);
	}

	/* Tighter sides on row 1 so "→ Explore Financial Services" fits one line at 1440px. */
	.elementor .l-industry-cards > :nth-child(-n+3) > .c-industry-card {
		padding-inline: 2rem 1.75rem;
	}

	.elementor .l-industry-cards > :nth-child(n+4) {
		flex: 0 0 calc(50% - 1rem);
		display: flex;
		justify-content: flex-start;
	}

	.elementor .l-industry-cards > :nth-child(n+4) > .c-industry-card {
		width: auto;
	}

	.elementor .l-industry-cards > :nth-child(n+4):nth-child(even) {
		justify-content: flex-end;
	}

	.elementor .l-industry-cards > :nth-child(n+4):nth-child(even):last-child {
		flex-basis: 100%;
		justify-content: center;
	}
}

/* Resources search and filter (inc/resource-filter.php), Figma "6.0 RESOURCES". */
.c-resource-filter {
	box-sizing: border-box;
	max-width: calc(65.25rem + 2rem);
	scroll-margin-top: var(--anchor-offset);
	margin-inline: auto;
	padding-inline: 1rem;
	/* Figma at 1920: 93px after the intro (which already has l-section's margin), 153px before the lists. */
	margin-block: calc(max(2rem, 4.85vw) - clamp(4rem, 8.7vw, 10.5rem)) clamp(4rem, 8vw, 9.5rem);
	color: var(--text);
	font-family: var(--font-primary), sans-serif;
	font-size: 1.125rem;
}
.c-resource-filter__search {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 3.75rem;
	padding-inline: 2.9rem 0.85rem;
	border: 1px solid var(--blue);
	border-radius: 1.875rem;
}
.c-resource-filter__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	font-size: 1.5rem;
	color: inherit;
	outline: 0;
}
.c-resource-filter__search input::placeholder { color: #9d9d9d; }
.c-resource-filter__search button {
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--blue);
	cursor: pointer;
}
.c-resource-filter__search svg { width: 2.3rem; height: 2.3rem; }
.c-resource-filter__search:focus-within { box-shadow: 0 0 0 3px var(--ring-navy); }
.c-resource-filter__title {
	margin: 2.2rem 0 1.5rem 2.9rem;
	font-size: 1.5rem;
	font-weight: 700;
}
.c-resource-filter__group { margin: 0 0 1.5rem 2.9rem; }
.c-resource-filter__label { margin: 0; font-weight: 700; }
.c-resource-filter__group ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.c-resource-filter__group li { white-space: nowrap; }
.c-resource-filter__group li:not(:last-child)::after { content: "·"; margin-inline: 0.4rem; }
.c-resource-filter__group a { color: inherit; text-decoration: none; }
.c-resource-filter__group a:hover,
.c-resource-filter__group a[aria-current] { color: var(--blue); }
.c-resource-filter__group a[aria-current] { font-weight: 700; }
.c-resource-filter__clear { margin: 0 0 0 2.9rem; }
.c-resource-filter__clear a { color: var(--blue); }
.c-resource-filter__empty { display: none; margin: 2rem 0 0 2.9rem; font-weight: 700; }
.is-resources-filtered:not(:has(.c-resource-filter ~ * [data-e-type="e-collection-loop-item"])) .c-resource-filter__empty { display: block; }
/* Filtered: hide empty lists and "Mostra altre…" (lists already show everything). */
.is-resources-filtered .e-flexbox-base:has(> .e-collection-loop-base):not(:has([data-e-type="e-collection-loop-item"])),
.is-resources-filtered .e-flexbox-base:has(> .e-collection-loop-base) > :last-child { display: none; }
@media (max-width: 767px) {
	.c-resource-filter__search { padding-inline-start: 1.25rem; }
	.c-resource-filter__search input { font-size: 1.125rem; }
	.c-resource-filter__title,
	.c-resource-filter__group,
	.c-resource-filter__clear,
	.c-resource-filter__empty { margin-inline-start: 0; }
}

/* Blog (inc/blog-search.php): search in the page hero; topics, "show all" and "no results" above the list. */
.c-blog-hero-search { width: min(28rem, 100%); margin-top: 2rem; }
.c-blog-hero-search .c-resource-filter__search {
	height: 3.25rem;
	padding-inline: 1.5rem 0.4rem;
	border-color: rgb(255 255 255 / 0.7);
	background: rgb(255 255 255 / 0.12);
	backdrop-filter: blur(6px);
	color: #fff;
	font-family: var(--font-primary), sans-serif;
}
.c-blog-hero-search .c-resource-filter__search input { font-size: 1.0625rem; }
.c-blog-hero-search .c-resource-filter__search input::placeholder { color: rgb(255 255 255 / 0.75); }
.c-blog-hero-search .c-resource-filter__search button { color: #fff; }
.c-blog-hero-search .c-resource-filter__search svg { width: 2.2rem; height: 2.2rem; }
.c-blog-hero-search .c-resource-filter__search:focus-within { box-shadow: 0 0 0 3px rgb(255 255 255 / 0.45); }
.c-blog-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem 1.5rem;
	text-align: center;
}
.c-blog-search__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	justify-content: center;
	list-style: none;
}
.c-blog-search__topics a {
	display: block;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--blue);
	border-radius: 999px;
	color: var(--blue);
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
}
.c-blog-search__topics a:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.c-blog-search__topics a[aria-current] { background: var(--blue); color: #fff; }
.c-blog-search .c-resource-filter__clear,
.c-blog-search .c-resource-filter__empty { flex-basis: 100%; margin: 0; }
.is-blog-filtered:not(:has(.c-blog-search ~ * [data-e-type="e-collection-loop-item"])) .c-resource-filter__empty { display: block; }

/* l-split inside l-split-center: title centered on the text, button below right (About intro, "What drives us").
   The body becomes a 2-row subgrid (text | button) so the title centers on the text only. */
@media (min-width: 1025px) {
	.elementor .l-split-center .l-split:has(> .l-split-body > p:first-child:not(:empty)) {
		display: grid;
		grid-template-columns: minmax(0, 34.375rem) minmax(0, 42rem);
		justify-content: space-between;
		column-gap: clamp(2rem, 5vw, 6rem);
		row-gap: 3.5rem;
	}
	.elementor .l-split-center .l-split > .l-split-title { grid-row: 1; align-self: center; }
	.elementor .l-split-center .l-split > .l-split-body {
		grid-column: 2;
		grid-row: 1 / span 2;
		display: grid;
		grid-template-rows: subgrid;
		justify-items: end;
	}
	.elementor .l-split-center .l-split-body > p:first-child { justify-self: stretch; }
}

/* Outline card (component 1062): the "→ Visit …" link after the line break gets breathing room from the text. */
.c-outline-card .t-body br + a { display: inline-block; margin-top: 0.75rem; }

/* About timeline (l-timeline): two flush columns zigzagging (even rows right-to-left), an orange arrow on the
   edge linking each card to the next. Mobile: one column, arrows down. Figma "8 ABOUT US" (1920). */
.elementor .l-timeline > .c-outline-card {
	min-height: 0;
	padding: 2.5rem 1.75rem;
	border-radius: 2rem;
	position: relative;
}
.elementor .l-timeline > :nth-child(n + 2) { margin-block-start: -1px; }
.elementor .l-timeline .t-item-title { font-size: var(--font-size-subtitle); line-height: normal; }
.elementor .l-timeline .t-item-title span { font-weight: 400; }
.elementor .l-timeline .t-body { font-size: var(--font-size-body-lg); line-height: normal; }
.elementor .l-timeline > :not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 3.2rem;
	height: 3.2rem;
	bottom: 0;
	left: 50%;
	translate: -50% 50%;
	rotate: 90deg;
	background: url("assets/images/timeline-arrow.svg") center / contain no-repeat;
}
@media (min-width: 768px) {
	.elementor .l-timeline.l-timeline { grid-template-columns: 1fr 1fr; }
	.elementor .l-timeline > .c-outline-card {
		min-height: 24.8125rem;
		padding-block: 3rem;
		padding-inline: 5.75rem 4rem;
		border-radius: 3.5rem;
	}
	.elementor .l-timeline > :nth-child(2) { margin-block-start: 0; }
	.elementor .l-timeline > :nth-child(4n + 2),
	.elementor .l-timeline > :nth-child(4n + 3) { grid-column: 2; margin-inline-start: -1px; }
	.elementor .l-timeline > :nth-child(4n + 4) { grid-column: 1; }
	/* 1→2, 5→6: right. 3→4, 7→8: left. Pairs go down through the bottom edge. */
	.elementor .l-timeline > :nth-child(4n + 1):not(:last-child)::after { bottom: auto; left: auto; inset-inline-end: 0; top: 50%; translate: 50% -50%; rotate: 0deg; }
	.elementor .l-timeline > :nth-child(4n + 3):not(:last-child)::after { bottom: auto; left: 0; top: 50%; translate: -50% -50%; rotate: 180deg; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor .l-timeline > .c-outline-card { padding-inline: 2.5rem; }
}

/* News & Press filter: category pills, years, "Load more". Markup in inc/news-filter.php. */
.c-news-filter {
	width: 100%;
	max-width: 90.125rem;
	margin: 2.25rem auto 0;
	scroll-margin-top: var(--anchor-offset);
}
.c-news-filter__label {
	margin: 0 0 1.75rem 0.8125rem;
	font-size: var(--font-size-body-lg);
	color: var(--blue);
}
.c-news-filter ul {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.c-news-filter a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.75rem;
	padding-inline: 1rem;
	border: 1px solid var(--blue);
	border-radius: 1.875rem;
	font-size: var(--font-size-body-lg);
	color: #9d9d9d;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.25s, color 0.25s;
}
.c-news-filter a:hover,
.c-news-filter a:focus-visible {
	color: var(--blue);
}
.c-news-filter a[aria-current] {
	background-color: var(--blue);
	color: var(--white);
}
.c-news-anchor {
	display: block;
	scroll-margin-top: var(--anchor-offset);
}
.c-news-more {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
	width: 100%;
	max-width: 90.3125rem;
	margin: 3.125rem auto 0;
}
.c-news-more__empty {
	flex-basis: 100%;
	margin: 0 0 1rem;
	font-size: var(--font-size-body-lg);
	color: var(--text);
	text-align: center;
}
.c-news-more a {
	display: inline-flex;
	align-items: center;
	min-height: 3.75rem;
	border: 1px solid var(--navy);
	border-radius: 1.875rem;
	background-color: var(--navy);
	font-size: var(--font-size-body-lg);
	color: var(--white);
	text-decoration: none;
	transition: background-color 0.25s, color 0.25s;
}
.c-news-more__year {
	justify-content: center;
	width: 7.875rem;
}
.c-news-more__year[aria-current],
.c-news-more__year:hover,
.c-news-more__year:focus-visible {
	background-color: var(--white);
	color: var(--navy);
}
.c-news-more__load {
	gap: 1.25rem;
	padding: 0.25rem 0.25rem 0.25rem 2.5rem;
	font-size: 1.875rem;
}
.c-news-more__load svg {
	width: 3.25rem;
	height: 3.25rem;
	transition: translate 0.25s;
}
.c-news-more__load:hover svg,
.c-news-more__load:focus-visible svg {
	translate: 0 0.25rem;
}
@media (max-width: 1024px) {
	.c-news-filter ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.c-news-filter ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
	.c-news-filter a { min-height: 2.75rem; font-size: var(--font-size-body); }
	.c-news-more { justify-content: center; }
	.c-news-more__load { font-size: var(--font-size-body-lg); }
}

/* Sticky header: JS measures its full height and pads the body before fixing it (no jump).
   Transparent at the top of the page; on scroll (is-scrolled) it turns white and compacts:
   the button row hides, padding and logo shrink. */
.header-fixed body {
	padding-top: var(--header-h);
}

/* Anchor jumps land below the compact header (80px desktop, 72px mobile) plus the admin bar. */
:root {
	--anchor-offset: calc(6rem + var(--wp-admin--admin-bar--height, 0px));
}

/* Any in-page anchor (e.g. the use case links in the menu) lands below the header. */
[id] {
	scroll-margin-top: var(--anchor-offset);
}

/* Not yet revealed: compensate the 1.5rem reveal offset so it settles at the same spot. */
.js-reveal .reveal[id] {
	scroll-margin-top: calc(var(--anchor-offset) + 1.5rem);
}

.elementor-location-header {
	.header-fixed & {
		position: fixed;
		inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
		z-index: 100;
		background-color: transparent;
		transition:
			background-color var(--duration-base) var(--ease-out-strong),
			box-shadow var(--duration-base) var(--ease-out-strong);
	}

	> .e-con {
		transition: padding var(--duration-base) var(--ease-out-strong);
	}

	img.e-image-base {
		transition: width var(--duration-base) var(--ease-out-strong);
	}

	/* White as soon as the page scrolls or the mobile menu is open. */
	:is(html.is-scrolled, html:has(.elementor-menu-toggle.elementor-active)) & {
		background-color: var(--white);
	}

	html.is-scrolled & {
		box-shadow: 0 var(--shadow-offset-y) var(--shadow-blur) var(--shadow-navy);

		> .e-con {
			padding-block: 0.75rem;
		}

		> .e-con > .e-con:first-child {
			display: none;
		}

		img.e-image-base {
			width: 12.5rem;
		}

		@media (max-width: 1024px) {
			img.e-image-base {
				width: 9rem;
			}
		}
	}
}

/* Same breathing room between the header and the first block (rounded hero) on every page. */
.elementor-location-header + .elementor > .e-con:first-child {
	padding-top: 0.5rem;
}

/* Chevron (Font Awesome Light) for items with a submenu, desktop and mobile. Turns when open. */
.elementor-location-header .sub-arrow {
	display: inline-block;
	inline-size: 0.75em;
	block-size: 0.75em;
	margin-inline-start: 0.375em;
	padding: 0;
	background-color: currentColor;
	mask: url("assets/images/icons/chevron-down-light.svg") center / contain no-repeat;
	transition: rotate var(--duration-base) var(--ease-out-strong);

	& svg {
		display: none;
	}

	.highlighted > & {
		rotate: 180deg;
	}
}

/* Mega menu (desktop, ≥1201px, where the nav menu is horizontal).
   WP submenus of Industries, Solutions and Insights open as a full-width panel under the header:
   intro column (menu-intro item: description + CTA) and the links. Visibility comes from
   :hover/:focus-within with a short close delay (hover intent); SmartMenus inline styles are overridden. */
@media (min-width: 1201px) {
	.elementor-location-header .elementor-nav-menu--main {
		--mm-close-delay: var(--delay-popover-hide, 240ms);
		--mm-duration: var(--duration-base, 200ms);
		--mm-arrow: url("assets/images/icons/arrow-right-light.svg");

		/* Panel is positioned against the fixed header, so it spans the full width. */
		&,
		& > .elementor-nav-menu {
			position: static;
		}

		& > .elementor-nav-menu > li {
			&.menu-item-has-children {
				position: static;
				/* Hover bridge from the item down to the panel, with no layout shift. */
				padding-bottom: 3rem;
				margin-bottom: -3rem;
			}

			/* Open: underline the item, turn the chevron, show the panel (no delay). */
			&:has(> .sub-menu):is(:hover, :focus-within) {
				& > .elementor-item {
					color: var(--blue);

					&::after {
						opacity: 1;
					}
				}

				& .sub-arrow {
					rotate: 180deg;
				}

				& > .sub-menu {
					visibility: visible;
					opacity: 1;
					translate: 0 0;
					pointer-events: auto;
					transition-delay: 0s;
				}
			}

			& > .sub-menu {
				display: grid !important;
				position: absolute;
				inset: 100% 0 auto !important;
				z-index: -1;
				width: auto !important;
				min-width: 0 !important;
				max-width: none !important;
				margin: 0 !important;
				padding: 2.5rem var(--space-gutter) 3rem;
				grid-template-rows: repeat(4, auto);
				grid-auto-flow: column;
				justify-content: center;
				align-content: start;
				gap: 0.875rem clamp(2rem, 3.5vw, 4rem);
				background-color: var(--white);
				border-top: 1px solid var(--ring-navy);
				box-shadow: 0 var(--shadow-offset-y) var(--shadow-blur) var(--shadow-navy);
				/* Closed: fades out after the close delay, then becomes hidden. */
				visibility: hidden;
				opacity: 0;
				translate: 0 -0.5rem;
				pointer-events: none;
				transition:
					opacity var(--mm-duration) var(--ease-out-strong) var(--mm-close-delay),
					translate var(--mm-duration) var(--ease-out-strong) var(--mm-close-delay),
					visibility 0s linear calc(var(--mm-close-delay) + var(--mm-duration));

				/* Short lists (Insights): intro + one column. */
				&:not(:has(> li:nth-child(6))) {
					grid-template-rows: repeat(2, auto);
				}

				/* Solutions: intro, "Use cases" and "All solutions" side by side. */
				&:has(> .menu-heading) {
					grid-template-rows: none;
					grid-auto-flow: row;
					grid-template-columns: auto auto auto;
				}
			}
		}

		/* Moving to another top item closes the previous panel at once (no overlap). */
		& > .elementor-nav-menu:has(> li:hover) > li:not(:hover) > .sub-menu {
			transition-delay: 0s;
		}

		/* .elementor-nav-menu raises specificity over the widget's own dropdown CSS. */
		& .elementor-nav-menu .sub-menu {
			/* Intro column: statement + CTA, with a divider. */
			& > .menu-intro {
				grid-row: 1 / -1;
				min-width: 13rem;
				max-width: 20rem;
				padding-inline-end: clamp(2rem, 3.5vw, 4rem);
				margin-inline-end: 0;
				border-inline-end: 1px solid var(--ring-navy);

				& > a.elementor-sub-item {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: 1.25rem;
					white-space: normal;

					&::after {
						display: none;
					}
				}

				& .menu-desc {
					font-size: var(--font-size-body-lg);
					font-weight: var(--font-weight-bold);
					line-height: var(--line-height-body-lg);
					color: var(--navy);
				}

				& .menu-cta {
					display: inline-flex;
					white-space: nowrap;
					align-items: center;
					gap: 0.5rem;
					font-weight: var(--font-weight-bold);
					color: var(--blue);

					&::after {
						content: "";
						inline-size: 1em;
						block-size: 1em;
						background-color: currentColor;
						mask: var(--mm-arrow) center / contain no-repeat;
						transition: translate var(--duration-base) var(--ease-out-strong);
					}
				}

				& a:is(:hover, :focus-visible) .menu-cta::after {
					translate: 0.25rem 0;
				}
			}

			/* Headings inside the panel are always open: no chevron. */
			& .sub-arrow {
				display: none;
			}

			/* Nested lists (Use cases / All solutions) are always open inside the panel. */
			& .sub-menu {
				display: grid !important;
				position: static !important;
				width: auto !important;
				min-width: 0 !important;
				margin: 1rem 0 0 !important;
				padding: 0;
				gap: 0.875rem clamp(2rem, 3.5vw, 4rem);
				background: none;
				box-shadow: none;
			}

			& > .menu-heading:last-child > .sub-menu {
				grid-template-rows: repeat(7, auto);
				grid-auto-flow: column;
			}

			& a.elementor-sub-item {
				display: inline-flex;
				align-items: center;
				gap: 0.5rem;
				padding: 0;
				border: 0;
				background: none;
				font-family: var(--font-primary);
				font-size: var(--font-size-body);
				font-weight: var(--font-weight-regular);
				line-height: var(--line-height-ui);
				text-transform: none;
				white-space: nowrap;
				color: var(--text);
				transition: color var(--duration-base) var(--ease-out-strong);

				&:is(:hover, :focus-visible) {
					color: var(--blue);

					&::after {
						opacity: 1;
						translate: 0 0;
					}
				}
			}

			/* Arrow appears and slides in on hover (links only, not headings or use cases). */
			& li:not(.menu-heading, .no-arrow, .menu-intro) > a.elementor-sub-item::after {
				content: "";
				inline-size: 0.875em;
				block-size: 0.875em;
				background-color: currentColor;
				mask: var(--mm-arrow) center / contain no-repeat;
				opacity: 0;
				translate: -0.375rem 0;
				transition:
					opacity var(--duration-base) var(--ease-out-strong),
					translate var(--duration-base) var(--ease-out-strong);
			}

			/* Column headings: small uppercase labels. */
			& .menu-heading > a.elementor-sub-item {
				font-size: var(--font-size-legal);
				font-weight: var(--font-weight-bold);
				letter-spacing: 0.08em;
				text-transform: uppercase;
				color: var(--navy);
			}
		}
	}
}

/* Mobile menu (≤1200px): submenus open inline (accordion); the panel scrolls if taller than the screen.
   Use cases / All solutions lists stay open under their heading (one tap less). */
@media (max-width: 1200px) {
	.elementor-location-header {
		& .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown {
			max-height: calc(100dvh - var(--header-h, 6rem));
			overflow-y: auto;
			overscroll-behavior: contain;
		}

		& nav.elementor-nav-menu--dropdown {
			& .elementor-nav-menu a:is(.highlighted, :hover, :focus, .elementor-item-active) {
				background-color: transparent;
				color: var(--blue);
			}

			& .elementor-nav-menu .sub-menu {
				position: static !important;
				box-shadow: none;
				background-color: var(--gray-light);

				& .sub-menu {
					display: block !important;
					background: none;
				}

				& a.elementor-sub-item {
					padding-block: 0.625rem;
					padding-inline-start: calc(var(--space-gutter) + 1rem);
					border: 0;
					text-transform: none;
				}

				& .sub-menu a.elementor-sub-item {
					padding-inline-start: calc(var(--space-gutter) + 2rem);
				}
			}

			& .menu-heading {
				& .sub-arrow {
					display: none;
				}

				& > a.elementor-sub-item {
					padding-top: 1rem;
					font-size: var(--font-size-legal);
					font-weight: var(--font-weight-bold);
					letter-spacing: 0.08em;
					text-transform: uppercase;
					color: var(--navy);
				}
			}

			/* Intro item: only the CTA ("All industries"), in blue. */
			& .menu-intro {
				& .menu-desc {
					display: none;
				}

				& > a.elementor-sub-item {
					font-weight: var(--font-weight-bold);
					color: var(--blue);
				}
			}
		}
	}
}

/* Reveal: only under js-reveal (set by JS, reduced motion excluded). */
.js-reveal .reveal {
	opacity: 0;
	transform: translateY(1.5rem);
}

.js-reveal .reveal.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.7s var(--ease-out-strong) var(--reveal-delay, 0ms),
		transform 0.7s var(--ease-out-strong) var(--reveal-delay, 0ms);
}

/* Resource without PDF: the dynamic "Download PDF" button renders with no href. */
a.c-btn-pill:not([href]) {
	display: none;
}

/* Single Resource: sem PDF, esconde a faixa "Scarica il documento completo." inteira. */
.elementor-element-18c46a27:not(:has(a.c-btn-pill[href])) { display: none; }

/* Persone: iframes do InRecruiting (vagas e candidatura) na largura toda da seção. */
.elementor-widget-html:has(#inrecruiting_announces, #inrecruiting_form) { align-self: stretch; width: 100%; }
#inrecruiting_announces iframe, #inrecruiting_form iframe { display: block; width: 100%; border: 0; }