/* ==========================================================
   THYMOS — HEADER
   Tema: Twenty Twenty-One
   ========================================================== */

:root {
	--thymos-header-max: 1480px;

	--thymos-red: #8a141f;
	--thymos-red-dark: #670627;

	--thymos-blue: #a6b5c2;
	--thymos-blue-light: #d4e4f3;
	--thymos-blue-soft: #e3edf8;

	--thymos-cream: #faf9f6;
	--thymos-header-text: #322d29;

	--thymos-header-radius: 24px;
	--thymos-header-transition: 380ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================
   WRAPPER HEADER
   ========================================================== */

.site-header.thymos-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 9999;

	display: block;

	width: 100%;
	max-width: none;
	margin: 0;
	padding: 18px 24px 0;

	background: transparent;

	pointer-events: none;

	transition:
		padding var(--thymos-header-transition),
		transform var(--thymos-header-transition);
}


/* Barra admin WordPress */

body.admin-bar .site-header.thymos-header {
	top: 32px;
}


/* ==========================================================
   CONTENITORE INTERNO
   ========================================================== */

.thymos-header__inner {
	   position: relative;
   
	   display: flex;
	   align-items: center;
	   justify-content: space-between;
   
	   width: 100%;
	   max-width: 1480px;
	   min-height: 80px;
   
	   margin: 0 auto;
	   padding: 0 38px;
   
	   background: linear-gradient(
		   105deg,
		   rgba(212, 228, 243, 0.98) 0%,
		   rgba(227, 237, 248, 0.98) 100%
	   );
   
	   border: 1px solid rgba(250, 249, 246, 0.4);
	   border-radius: 24px;
   
	   box-shadow:
		   0 12px 45px rgba(17, 16, 15, 0.06),
		   0 2px 8px rgba(17, 16, 15, 0.025);
   
	   pointer-events: auto;
   
	   transform: translateY(0);
   
	   transition:
		   width 650ms cubic-bezier(0.16, 1, 0.3, 1),
		   max-width 650ms cubic-bezier(0.16, 1, 0.3, 1),
		   min-height 650ms cubic-bezier(0.16, 1, 0.3, 1),
		   padding 650ms cubic-bezier(0.16, 1, 0.3, 1),
		   transform 650ms cubic-bezier(0.16, 1, 0.3, 1),
		   border-radius 650ms cubic-bezier(0.16, 1, 0.3, 1),
		   background 650ms ease,
		   border-color 650ms ease,
		   box-shadow 650ms ease;
   }


/* ==========================================================
   LOGO
   ========================================================== */

.thymos-header__brand {
	position: relative;
	z-index: 4;

	display: flex;
	align-items: center;

	flex: 0 0 auto;
}

.thymos-header__brand .custom-logo-link {
	display: block;
	line-height: 0;
}

.thymos-header__brand .custom-logo {
	display: block;

	width: auto;
	max-width: 210px;
	max-height: 58px;

	object-fit: contain;
	object-position: left center;

	transform: translateZ(0) scale(1);
	transform-origin: left center;

	transition:
		max-width 650ms cubic-bezier(0.16, 1, 0.3, 1),
		max-height 650ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

/*
.thymos-header.is-scrolled
.thymos-header__brand .custom-logo {
	max-width: 205px;
	max-height: 45px;

	transform: translateZ(0) scale(0.98);
}
*/

.thymos-header__site-name {
	color: var(--thymos-red-dark);
	font-family: var(--th-font-heading, "the-seasons", serif);
	font-size: 30px;
	line-height: 1;
	text-decoration: none;
}


/* ==========================================================
   NAVIGAZIONE DESKTOP
   ========================================================== */

.thymos-navigation {
	position: relative;

	display: flex;
	align-items: center;

	margin-left: auto;
}

.thymos-menu {
	display: flex;
	align-items: center;

	gap: clamp(28px, 3vw, 56px);

	margin: 0;
	padding: 0;

	list-style: none;
}

.thymos-menu > li {
	position: relative;

	display: flex;
	align-items: center;

	margin: 0;
	padding: 0;
}

.thymos-menu > li > a {
	position: relative;

	display: inline-flex;
	align-items: center;

	min-height: 44px;
	padding: 4px 0;

	color: var(--thymos-header-text);

	font-family:
		var(
			--th-font-body,
			"area-normal",
			system-ui,
			sans-serif
		);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;

	transition:
		color 220ms ease,
		opacity 220ms ease;
}

.thymos-menu > li > a::after {
	content: "";

	position: absolute;
	right: 0;
	bottom: 5px;
	left: 0;

	height: 1px;

	background: var(--thymos-red);

	transform: scaleX(0);
	transform-origin: right center;

	transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.thymos-menu > li > a:hover,
.thymos-menu > li > a:focus-visible,
.thymos-menu > .current-menu-item > a,
.thymos-menu > .current-menu-ancestor > a {
	color: var(--thymos-red-dark);
}

.thymos-menu > li > a:hover::after,
.thymos-menu > li > a:focus-visible::after,
.thymos-menu > .current-menu-item > a::after,
.thymos-menu > .current-menu-ancestor > a::after {
	transform: scaleX(1);
	transform-origin: left center;
}


/* ==========================================================
   SOTTOMENU DESKTOP
   ========================================================== */

.thymos-menu .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 20;

	display: block;

	min-width: 220px;
	margin: 0;
	padding: 10px;

	background: var(--thymos-blue-soft);

	border: 1px solid rgba(103, 6, 39, 0.08);
	border-radius: 16px;

	box-shadow: 0 18px 45px rgba(17, 16, 15, 0.12);

	list-style: none;

	opacity: 0;
	visibility: hidden;

	transform: translateY(8px);

	transition:
		opacity 220ms ease,
		visibility 220ms ease,
		transform 220ms ease;
}

.thymos-menu li:hover > .sub-menu,
.thymos-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.thymos-menu .sub-menu li {
	margin: 0;
	padding: 0;
}

.thymos-menu .sub-menu a {
	display: block;

	padding: 10px 12px;

	color: var(--thymos-header-text);

	border-radius: 10px;

	font-family:
		var(
			--th-font-body,
			"area-normal",
			system-ui,
			sans-serif
		);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;

	transition:
		color 180ms ease,
		background-color 180ms ease;
}

.thymos-menu .sub-menu a:hover,
.thymos-menu .sub-menu a:focus-visible {
	color: var(--thymos-red-dark);
	background: rgba(250, 249, 246, 0.65);
}


/* ==========================================================
   ELEMENTI VISIBILI SOLO SU MOBILE
   ========================================================== */

.thymos-navigation__mobile-intro,
.thymos-navigation__mobile-footer {
	display: none;
}


/* ==========================================================
   BOTTONE MOBILE
   ========================================================== */

.thymos-menu-toggle,
.thymos-menu-toggle:hover,
.thymos-menu-toggle:focus {
	position: relative;
	z-index: 5;

	display: none;
	align-items: center;
	justify-content: center;

	width: 46px;
	min-width: 46px;
	height: 46px;
	min-height: 46px;

	margin: 0;
	padding: 0!important;

	color:#fff!important;
	background: #8A141F!important;

	border: 0;
	border-radius: 100%!important;

	box-shadow: none;

	cursor: pointer;
}

.thymos-menu-toggle__line {
	position: absolute;
	left: 50%;

	display: block;

	width: 22px;
	height: 1.5px;

	background: currentColor;
	border-radius: 999px;

	transform-origin: center;

	transition:
		transform var(--thymos-header-transition),
		opacity var(--thymos-header-transition);
}

.thymos-menu-toggle__line:first-child {
	transform: translate(-50%, -4px);
}

.thymos-menu-toggle__line:last-child {
	transform: translate(-50%, 4px);
}


/* ==========================================================
   HEADER RIDOTTO DURANTE LO SCROLL
   ========================================================== */


/*.thymos-header.is-scrolled {
   padding-top: 9px;
}

.thymos-header.is-scrolled .thymos-header__inner {
   width: calc(100% - 40px);
   max-width: 1420px;
   min-height: 72px;

   padding-right: 29px;
   padding-left: 29px;

   border-color: rgba(250, 249, 246, 0.58);
   border-radius: 18px;

   background: linear-gradient(
	   105deg,
	   rgba(212, 228, 243, 0.94) 0%,
	   rgba(227, 237, 248, 0.94) 100%
   );

   box-shadow:
	   0 18px 50px rgba(17, 16, 15, 0.12),
	   0 4px 14px rgba(17, 16, 15, 0.04);

   transform: translateY(-2px);
}*/


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1180px) {

	.thymos-header__inner {
		padding-right: 28px;
		padding-left: 28px;
	}

	.thymos-header__brand .custom-logo {
		max-width: 215px;
	}

	.thymos-menu {
		gap: 26px;
	}

}


/* ==========================================================
   MOBILE NAVIGATION
   ========================================================== */

@media (max-width: 980px) {

	.site-header.thymos-header {
		padding: 10px 12px 0;
	}
	
	/*
	.thymos-header__inner,
	.thymos-header.is-scrolled .thymos-header__inner {
		min-height: 70px;
		padding-right: 14px;
		padding-left: 20px;

		border-radius: 18px;
	}
	*/

	.thymos-header__brand .custom-logo,
	.thymos-header.is-scrolled .thymos-header__brand .custom-logo {
		max-width: 175px;
		max-height: 44px;
	}

	.thymos-menu-toggle,
	.thymos-menu-toggle:hover,
	.thymos-menu-toggle:focus {
		display: inline-flex;
	}

	.thymos-navigation {
		position: fixed;
		inset: 0;
		z-index: 2;
		border-radius: 40px;

		display: flex;
		flex-direction: column;
		align-items: stretch;

		width: 100%;
		height: 97dvh;
		height: 97dvh;
		margin: 0;
		padding:clamp(118px, 8vh, 120px) 24px 32px;

		overflow-x: hidden;
		overflow-y: auto;

		background:
			radial-gradient(
				circle at 95% 85%,
				rgba(138, 20, 31, 0.16) 0,
				rgba(138, 20, 31, 0) 35%
			),
			linear-gradient(
				145deg,
				var(--thymos-blue-light) 0%,
				var(--thymos-blue-soft) 55%,
				var(--thymos-cream) 100%
			);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform: translateY(-14px) scale(0.988);

		transition:
			opacity 340ms ease,
			visibility 340ms ease,
			transform var(--thymos-header-transition);
	}

	.thymos-navigation__mobile-intro {
		display: flex;
		align-items: center;

		gap: 16px;

		margin-bottom: clamp(28px, 6vh, 54px);
	}

	.thymos-navigation__mobile-label {
		color: var(--thymos-red);

		font-family:
			var(
				--th-font-body,
				"area-normal",
				system-ui,
				sans-serif
			);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.thymos-navigation__mobile-rule {
		display: block;
		flex: 1 1 auto;

		height: 1px;

		background: rgba(103, 6, 39, 0.22);
	}

	.thymos-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;

		gap: 0;

		width: 100%;
		margin: 0;
		padding: 0;
	}

	.thymos-menu > li {
		display: block;

		width: 100%;

		
	}

	.thymos-menu > li:first-child {
		
	}

	.thymos-menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;

		width: 100%;
		min-height: 0;
		padding: 14px 0 13px;

		color: var(--thymos-red-dark);

		font-family:
			var(
				--th-font-heading,
				"the-seasons",
				Georgia,
				serif
			);
		font-size: clamp(30px, 8.8vw, 52px);
		font-weight: 400;
		line-height: 1.02;
		letter-spacing: -0.035em;
		text-transform: none;
		white-space: normal;
	}

	.thymos-menu > li > a::after {
		display: none;
	}

	.thymos-menu .sub-menu {
		position: static;

		min-width: 0;
		margin: 0;
		padding: 0 0 14px 18px;

		background: transparent;

		border: 0;
		border-radius: 0;

		box-shadow: none;

		opacity: 1;
		visibility: visible;

		transform: none;
	}

	.thymos-menu .sub-menu a {
		padding: 7px 0;

		color: var(--thymos-header-text);
		background: transparent;

		font-size: 13px;
		line-height: 1.3;
	}

	.thymos-navigation__mobile-footer {
		display: block;

		margin-top: auto;
		padding-top: 40px;
	}

	.thymos-navigation__mobile-footer p {
		margin: 0;

		color: var(--thymos-red);

		font-family:
			var(
				--th-font-heading,
				"the-seasons",
				Georgia,
				serif
			);
		font-size: clamp(23px, 6vw, 34px);
		font-weight: 400;
		line-height: 1.05;
		letter-spacing: -0.025em;
	}

	.thymos-header.is-menu-open .thymos-navigation {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translateY(0) scale(1);
	}

	.thymos-header.is-menu-open
	.thymos-menu-toggle__line:first-child {
		transform: translate(-50%, 0) rotate(45deg);
	}

	.thymos-header.is-menu-open
	.thymos-menu-toggle__line:last-child {
		transform: translate(-50%, 0) rotate(-45deg);
	}

	html.thymos-menu-open,
	body.thymos-menu-open {
		overflow: hidden;
	}
	
	/*
	.thymos-header.is-scrolled {
		padding-top: 7px;
	}
	
	.thymos-header.is-scrolled .thymos-header__inner {
		width: 100%;
		max-width: none;
		min-height: 62px;
	
		padding-right: 12px;
		padding-left: 18px;
	
		border-radius: 15px;
	
		transform: translateY(-1px);
	}
	
	.thymos-header.is-scrolled
	.thymos-header__brand .custom-logo {
		max-width: 150px;
		max-height: 38px;
	
		transform: none;
	}
	*/

}


/* Barra admin mobile WordPress */

@media screen and (max-width: 782px) {

	body.admin-bar .site-header.thymos-header {
		top: 46px;
	}

}


/* Smartphone piccoli */

@media (max-width: 480px) {
	
	/*
	.thymos-header__brand .custom-logo,
	.thymos-header.is-scrolled .thymos-header__brand .custom-logo {
		max-width: 155px;
	}
	*/

	.thymos-navigation {
		padding-right: 20px;
		padding-left: 20px;
	}

}


/* ==========================================================
   ACCESSIBILITÀ
   ========================================================== */

.thymos-menu-toggle:focus-visible,
.thymos-menu a:focus-visible {
	outline: 2px solid var(--thymos-red);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {

	.site-header.thymos-header,
	.thymos-header__inner,
	.thymos-header__brand .custom-logo,
	.thymos-navigation,
	.thymos-menu-toggle__line,
	.thymos-menu a,
	.thymos-menu a::after {
		transition-duration: 0.01ms !important;
	}

}

.thymos-menu {
	transition:
		gap 650ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

.thymos-menu > li > a {
	transition:
		color 220ms ease,
		opacity 220ms ease,
		min-height 650ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

/*
.thymos-header.is-scrolled .thymos-menu {
	gap: clamp(24px, 2.7vw, 48px);

	transform: translateY(-1px);
}

.thymos-header.is-scrolled .thymos-menu > li > a {
	min-height: 38px;
}

.thymos-header.is-scrolled .thymos-header__inner {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
*/







/* Voce menu "Prenota una demo" */
#thymos-primary-menu > li.button-menu {
  display: flex;
  align-items: center;
}

#thymos-primary-menu > li.button-menu > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 0 24px;

  border: 0;
  border-radius: 12px;

  color: #faf9f6;
 background: #8A141F;
 background: -webkit-linear-gradient(90deg,rgba(138, 20, 31, 1) 0%, rgba(103, 6, 39, 1) 100%);
 background: -moz-linear-gradient(90deg,rgba(138, 20, 31, 1) 0%, rgba(103, 6, 39, 1) 100%);
 background: linear-gradient(90deg,rgba(138, 20, 31, 1) 0%, rgba(103, 6, 39, 1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(
   startColorstr="#8A141F",
   endColorstr="#670627",
   GradientType=1
 );

  font-family: var(--th-font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  transition:
	color 180ms ease,
	background-color 180ms ease,
	transform 180ms ease,
	box-shadow 180ms ease;
}

/* Hover */
#thymos-primary-menu > li.button-menu > a:hover {
  color: #faf9f6;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(103, 6, 39, 0.2);
}

.thymos-menu > li.button-menu > a::after {display: none!important;}

/* Pagina attiva */
#thymos-primary-menu > li.button-menu.current-menu-item > a,
#thymos-primary-menu > li.button-menu.current_page_item > a {
  color: #faf9f6;
  background-color: #8a141f;
}

/* Focus tastiera */
#thymos-primary-menu > li.button-menu > a:focus,
#thymos-primary-menu > li.button-menu > a:focus-visible {
  color: #faf9f6;
  background-color: #670627;
  text-decoration: none;
  outline: 2px solid #faf9f6;
  outline-offset: 3px;
}

/* Menu mobile */
@media (max-width: 767px) {
  #thymos-primary-menu > li.button-menu {
	display: block;
	width: 100%;
	margin: 16px 0 0;
  }

  #thymos-primary-menu > li.button-menu > a {
	width: 100%;
	min-height: 48px;
	padding: 0 22px;
	font-size: 16px;
  }
}