/*
 * TL Nav Menu. Menu orizzontale con dropdown/flyout da 1100 px, off-canvas sotto.
 * Colori tramite variabili impostate dai controlli Stile del widget. Il colore dei
 * link è applicato da theme.css (regola ECCEZIONE dei componenti) leggendo --tl-a.
 */

:where(.tl-nav) {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

:where(.tl-nav__menu, .tl-nav__sub) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.tl-nav__row) {
	display: flex;
	align-items: center;
}

:where(.tl-nav__link) {
	display: flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

:where(.tl-nav__toggle, .tl-nav__burger, .tl-nav__close) {
	display: inline-grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

:where(.tl-nav__chevron) {
	transition: rotate var(--tl-dur-base, .4s) var(--tl-ease-std);
}

/* ---------- Desktop ≥ 1100 px ---------- */

@media (min-width: 1100px) {
	:where(.tl-nav__burger, .tl-nav__backdrop, .tl-nav__panel-head, .tl-nav__panel-foot, .tl-nav__plus) {
		display: none;
	}

	:where(.tl-nav__panel) {
		display: contents;
	}

	:where(.tl-nav__nav) {
		display: flex;
		flex: 1;
	}

	:where(.tl-nav--align-right .tl-nav__nav) { justify-content: flex-end; }
	:where(.tl-nav--align-center .tl-nav__nav) { justify-content: center; }
	:where(.tl-nav--align-left .tl-nav__nav) { justify-content: flex-start; }

	:where(.tl-nav__menu) {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--tl-nav-gap, 22px);
	}

	:where(.tl-nav__item) {
		position: relative;
	}

	:where(.tl-nav__item--l1 > .tl-nav__row > .tl-nav__link) {
		position: relative;
		--tl-a: var(--tl-nav-color, var(--e-global-color-secondary, #2B2A28));
		font-family: var(--e-global-typography-tlmenu-font-family, "Work Sans"), "Work Sans Fallback", Arial, sans-serif;
		font-size: var(--e-global-typography-tlmenu-font-size, .75rem);
		font-weight: var(--e-global-typography-tlmenu-font-weight, 500);
		line-height: 1;
		letter-spacing: var(--e-global-typography-tlmenu-letter-spacing, .11em);
		text-transform: uppercase;
		transition: color var(--tl-dur-fast, .2s) var(--tl-ease-std);
	}

	:where(.tl-has-overlay .tl-header:not(.is-solid) .tl-nav__item--l1 > .tl-nav__row > .tl-nav__link) {
		--tl-a: var(--tl-nav-overlay, var(--tl-nav-color, var(--tl-c-white, #fff)));
	}

	:where(.tl-nav__item--l1 > .tl-nav__row > .tl-nav__link:hover, .tl-nav__item--l1.is-current > .tl-nav__row > .tl-nav__link) {
		--tl-a: var(--tl-nav-hover, var(--tl-nav-color, var(--e-global-color-secondary, #2B2A28)));
	}

	:where(.tl-nav__item--l1 > .tl-nav__row > .tl-nav__link)::after {
		content: "";
		position: absolute;
		inset: auto 0 6px;
		height: 1px;
		background: var(--tl-nav-line, var(--e-global-color-accent, #967647));
		scale: 0 1;
		transform-origin: left;
		transition: scale var(--tl-dur-base, .4s) var(--tl-ease-expo);
	}

	:where(.tl-nav__item--l1:hover, .tl-nav__item--l1:focus-within, .tl-nav__item--l1.is-current, .tl-nav__item--l1.is-ancestor, .tl-nav__item--l1.is-open) > .tl-nav__row > .tl-nav__link::after {
		scale: 1 1;
	}

	:where(.tl-nav__item--l1 > .tl-nav__row > .tl-nav__toggle) {
		width: 20px;
		height: 44px;
		color: var(--tl-nav-color, currentColor);
	}

	:where(.tl-nav--no-indicator .tl-nav__item--l1 > .tl-nav__row > .tl-nav__toggle) {
		width: 8px;
	}

	:where(.tl-nav--no-indicator .tl-nav__chevron) {
		display: none;
	}

	:where(.tl-nav__item.is-open > .tl-nav__row .tl-nav__chevron) {
		rotate: 180deg;
	}

	/* Pannelli */
	:where(.tl-nav__sub) {
		position: absolute;
		top: 100%;
		left: -24px;
		z-index: 10;
		width: var(--tl-sub-w, 280px);
		padding: 12px 0;
		border-top: 2px solid var(--tl-sub-border, var(--e-global-color-accent, #967647));
		background: var(--tl-sub-bg, var(--tl-c-white, #fff));
		box-shadow: var(--tl-shadow-dropdown);
		opacity: 0;
		visibility: hidden;
		translate: 0 8px;
		transition: opacity .25s var(--tl-ease-std), translate .25s var(--tl-ease-std), visibility 0s linear .25s;
	}

	:where(.tl-nav__item.is-open > .tl-nav__sub) {
		opacity: 1;
		visibility: visible;
		translate: 0 0;
		transition-delay: 0s;
	}

	:where(.tl-nav__sub--cols) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: max(var(--tl-sub-w, 280px), 520px);
	}

	:where(.tl-nav__sub .tl-nav__sub) {
		top: -14px;
		left: 100%;
		border-top-width: 0;
	}

	:where(.tl-nav__sub.is-flip) {
		left: auto;
		right: 100%;
	}

	:where(.tl-nav__sub .tl-nav__row) {
		transition: background-color var(--tl-dur-fast, .2s) var(--tl-ease-std);
	}

	:where(.tl-nav__sub .tl-nav__link) {
		flex: 1;
		padding: 12px 24px;
		--tl-a: var(--tl-sub-color, var(--tl-c-secondary, #2B2A28));
		font-family: var(--e-global-typography-text-font-family, "Work Sans"), "Work Sans Fallback", Arial, sans-serif;
		font-size: .9375rem;
		font-weight: 400;
		line-height: 1.4;
		transition: color var(--tl-dur-fast, .2s) var(--tl-ease-std);
	}

	:where(.tl-nav__sub .tl-nav__item:hover, .tl-nav__sub .tl-nav__item:focus-within, .tl-nav__sub .tl-nav__item.is-current) > .tl-nav__row {
		background: var(--tl-sub-hover-bg, var(--tl-c-beige, #F4F3F0));
	}

	:where(.tl-nav__sub .tl-nav__item:hover, .tl-nav__sub .tl-nav__item:focus-within, .tl-nav__sub .tl-nav__item.is-current) > .tl-nav__row > .tl-nav__link {
		--tl-a: var(--tl-sub-hover, var(--tl-c-goldink, #84693E));
	}

	:where(.tl-nav__sub .tl-nav__toggle) {
		width: 44px;
		height: 44px;
		color: var(--tl-sub-color, var(--tl-c-secondary, #2B2A28));
	}

	:where(.tl-nav__sub .tl-nav__chevron) {
		rotate: -90deg;
	}

}

@media (min-width: 1366px) {
	:where(.tl-nav__menu) {
		gap: 0 var(--tl-nav-gap, 28px);
	}
}

/* ---------- Off-canvas < 1100 px ---------- */

@media (max-width: 1099.98px) {
	:where(.tl-nav__burger) {
		position: relative;
		width: 48px;
		height: 48px;
		color: var(--tl-burger-color, currentColor);
	}

	:where(.tl-nav__burger-lines)::before,
	:where(.tl-nav__burger-lines)::after {
		content: "";
		position: absolute;
		left: 12px;
		width: 24px;
		height: 1.5px;
		background: currentColor;
		transition: translate .3s var(--tl-ease-std), rotate .3s var(--tl-ease-std);
	}

	:where(.tl-nav__burger-lines)::before { top: 19px; }
	:where(.tl-nav__burger-lines)::after { top: 27px; }

	:where(.tl-nav__burger[aria-expanded="true"] .tl-nav__burger-lines)::before { translate: 0 4px; rotate: 45deg; }
	:where(.tl-nav__burger[aria-expanded="true"] .tl-nav__burger-lines)::after { translate: 0 -4px; rotate: -45deg; }

	:where(.tl-nav__backdrop) {
		position: fixed;
		inset: 0;
		z-index: 105;
		background: var(--e-global-color-tloverlay, rgba(23, 27, 35, .45));
	}

	:where(.tl-nav__panel) {
		--tl-btn-fg: var(--tl-c-white, #fff);
		--tl-btn-fill-text: var(--tl-c-primary, #202631);
		--tl-focus: var(--e-global-color-tlgoldlight, #C2A574);
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 110;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		padding: 16px 24px 32px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--tl-oc-bg, var(--tl-c-primary, #202631));
		color: var(--tl-oc-color, var(--tl-c-white, #fff));
		translate: 100% 0;
		visibility: hidden;
		transition: translate .5s var(--tl-ease-expo), visibility 0s linear .5s;
	}

	:where(.tl-nav.is-open .tl-nav__panel) {
		translate: 0 0;
		visibility: visible;
		transition-delay: 0s;
	}

	:where(.tl-nav__panel-head) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		margin-bottom: 24px;
	}

	:where(.tl-nav__logo) {
		width: auto;
		max-height: 32px;
	}

	:where(.tl-nav__close) {
		position: relative;
		width: 48px;
		height: 48px;
		margin-inline-start: auto;
	}

	:where(.tl-nav__close span[aria-hidden])::before,
	:where(.tl-nav__close span[aria-hidden])::after {
		content: "";
		position: absolute;
		top: 23px;
		left: 12px;
		width: 24px;
		height: 1.5px;
		background: currentColor;
		rotate: 45deg;
	}

	:where(.tl-nav__close span[aria-hidden])::after {
		rotate: -45deg;
	}

	:where(.tl-nav__item--l1) {
		border-bottom: 1px solid var(--tl-oc-sep, rgba(255, 255, 255, .12));
	}

	:where(.tl-nav.is-open .tl-nav__item--l1) {
		animation: tl-nav-item .5s var(--tl-ease-expo) calc(var(--i, 0) * 50ms + 100ms) both;
	}

	:where(.tl-nav__link) {
		flex: 1;
		min-height: 48px;
	}

	:where(.tl-nav__item--l1 > .tl-nav__row > .tl-nav__link) {
		padding-block: 14px;
		font-family: var(--e-global-typography-primary-font-family, "Gotu"), "Gotu Fallback", Georgia, serif;
		font-size: var(--tl-oc-l1-size, 1.5rem);
		line-height: 1.2;
	}

	:where(.tl-nav__toggle) {
		position: relative;
		flex: none;
		width: 48px;
		height: 48px;
	}

	:where(.tl-nav__chevron) {
		display: none;
	}

	:where(.tl-nav__plus)::before,
	:where(.tl-nav__plus)::after {
		content: "";
		position: absolute;
		top: 23px;
		left: 17px;
		width: 14px;
		height: 1.5px;
		background: currentColor;
		transition: rotate .35s var(--tl-ease-std);
	}

	:where(.tl-nav__plus)::after {
		rotate: 90deg;
	}

	:where(.tl-nav__toggle[aria-expanded="true"] .tl-nav__plus)::after {
		rotate: 0deg;
	}

	:where(.tl-nav__sub) {
		display: none;
		padding: 0 0 12px 16px;
		color: var(--tl-oc-sub-color, rgba(255, 255, 255, .85));
	}

	:where(.tl-nav__item.is-open > .tl-nav__sub) {
		display: block;
		animation: tl-nav-sub .35s var(--tl-ease-std);
	}

	:where(.tl-nav__sub .tl-nav__link) {
		font-size: .9375rem;
		line-height: 1.4;
	}

	:where(.tl-nav__sub--l2 > .tl-nav__item > .tl-nav__row > .tl-nav__link) {
		font-size: 1rem;
	}

	:where(.tl-nav__sub--l4 .tl-nav__link) {
		--tl-a: var(--e-global-color-tlstone, #BDB7AE);
	}

	:where(.tl-nav__item.is-current > .tl-nav__row > .tl-nav__link) {
		--tl-a: var(--e-global-color-tlgoldlight, #C2A574);
	}

	:where(.tl-nav__panel-foot) {
		display: grid;
		gap: 24px;
		margin-top: auto;
		padding-top: 32px;
	}

	:where(.tl-nav__cta) {
		width: 100%;
	}

	:where(.tl-nav__info) {
		font-size: .9375rem;
	}

	:where(.tl-nav__info) > * {
		margin: 0;
	}

	:where(.tl-nav__social) {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	:where(.tl-nav__social-link) {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border: 1px solid var(--e-global-color-tlstone, #BDB7AE);
		border-radius: 50%;
		font-size: 16px;
		transition: background-color var(--tl-dur-fast, .2s) var(--tl-ease-std);
	}

	:where(.tl-nav__social-link:hover, .tl-nav__social-link:focus-visible) {
		background: var(--e-global-color-accent, #967647);
	}

	:where(.tl-nav__social-link svg) {
		width: 16px;
		height: 16px;
		fill: currentColor;
	}

	:where(html.tl-nav-open) {
		overflow: hidden;
	}
}

@media (min-width: 768px) and (max-width: 1099.98px) {
	:where(.tl-nav__panel) {
		width: var(--tl-oc-w, 440px);
	}
}

@keyframes tl-nav-item {
	from { opacity: 0; translate: 16px 0; }
}

@keyframes tl-nav-sub {
	from { opacity: 0; translate: 0 -8px; }
}

@media (prefers-reduced-motion: reduce) {
	.tl-nav__panel,
	.tl-nav__sub,
	.tl-nav.is-open .tl-nav__item--l1,
	.tl-nav__item.is-open > .tl-nav__sub {
		animation: none !important;
		transition: none !important;
	}
}