/* --------------------------------------------------------------
   HEADER
-------------------------------------------------------------- */

.aq-header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;

	display: grid;
	grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
	align-items: center;

	width: 100%;

	gap: 32px;

	padding:
		clamp(20px, 3vw, 42px)
		clamp(20px, 4.8vw, 72px);

	color: var(--aq-white);
}

.aq-menu > li.lang-item > a:hover::after {
	display: none!important;
}

/* --------------------------------------------------------------
   HEADER - INTERNAL PAGES
-------------------------------------------------------------- */

body:not(.home) .aq-header {
	position: relative;
	top: auto;
	left: auto;

	background:
		radial-gradient(
			circle at 18% 20%,
			rgba(5, 60, 255, .42),
			transparent 34rem
		),
		radial-gradient(
			circle at 86% 18%,
			rgba(5, 60, 255, .28),
			transparent 32rem
		),
		linear-gradient(
			180deg,
			#05070d 0%,
			#02040a 100%
		);
}

body.admin-bar:not(.home) .aq-header {
	top: auto;
}


/* WordPress Admin Bar */

.admin-bar .aq-header {
	top: 32px;
}


/* --------------------------------------------------------------
   BRAND
-------------------------------------------------------------- */

.aq-header__brand {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
}

.aq-brand {
	display: inline-flex;
	align-items: center;

	width: fit-content;
}

.aq-brand__logo {
	display: block;

	width: 52px;
	height: 56px;

	max-width: 52px;
	max-height: 56px;

	object-fit: contain;

	flex: 0 0 auto;
}

.aq-header .aq-brand__logo {
	width: 52px !important;
	height: 56px !important;

	max-width: 52px !important;
	max-height: 56px !important;

	object-fit: contain;
}

.aq-brand__text {
	color: var(--aq-white);

	font-family: var(--aq-font-display);
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
}


/* --------------------------------------------------------------
   PRIMARY NAVIGATION
-------------------------------------------------------------- */

.aq-nav {
	display: flex;
	align-items: center;
	justify-content: center;
}


/* Main menu */

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

	gap: clamp(18px, 2.2vw, 34px);

	margin: 0;
	padding: 0;

	list-style: none;
}

.aq-menu li {
	margin: 0;
	padding: 0;

	list-style: none;
}

.aq-menu > li {
	position: relative;
}

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

	display: block;

	padding: 10px 0;

	color: var(--aq-white);

	font-family: var(--aq-font-body);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;

	text-transform: uppercase;

	opacity: .82;

	transition:
		opacity .25s ease,
		color .25s ease;
}

.aq-menu > li > a:hover,
.aq-menu > li.current-menu-item > a,
.aq-menu > li.current-menu-parent > a,
.aq-menu > li.current-menu-ancestor > a {
	color: #cbd7ff;
	opacity: 1;
}


/* Small underline */

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

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

	height: 1px;

	background: currentColor;

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

	transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.aq-menu > li > a:hover::after,
.aq-menu > li.current-menu-item > a::after,
.aq-menu > li.current-menu-parent > a::after,
.aq-menu > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}


/* --------------------------------------------------------------
   SUB MENU
-------------------------------------------------------------- */

.aq-menu .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: -18px;

	min-width: 220px;

	margin: 0;
	padding: 10px;

	border: 1px solid rgba(255, 255, 255, .12);

	background: rgba(4, 7, 15, .94);

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);

	opacity: 0;
	visibility: hidden;

	transform: translateY(8px);

	transition:
		opacity .25s ease,
		visibility .25s ease,
		transform .25s ease;
}

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

	padding: 11px 12px;

	color: rgba(255, 255, 255, .78);

	font-family: var(--aq-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;

	text-transform: uppercase;

	transition:
		color .25s ease,
		background .25s ease;
}

.aq-menu .sub-menu a:hover {
	color: var(--aq-white);
	background: rgba(255, 255, 255, .06);
}

.aq-menu > li:hover > .sub-menu,
.aq-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;

	transform: translateY(0);
}


/* --------------------------------------------------------------
   HEADER ACTIONS
-------------------------------------------------------------- */

.aq-header__actions {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	gap: 12px;
}


/* Prenota */

.aq-book {
	height: 41px;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 128px;

	padding: 13px 22px;

	border: 1px solid rgba(255, 255, 255, .78);

	color: var(--aq-white);

	font-family: var(--aq-font-body);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;

	text-align: center;
	text-transform: uppercase;

	transition:
		background .3s ease,
		color .3s ease,
		transform .3s ease;
}

.aq-book:hover {
	background: var(--aq-white);
	color: var(--aq-blue);

	transform: translateY(-3px);
}


/* --------------------------------------------------------------
   MOBILE TOGGLE
-------------------------------------------------------------- */

.aq-menu-toggle {
	display: none;

	position: relative;

	width: 46px;
	height: 43px;

	padding: 0;

	border: 1px solid rgba(255, 255, 255, 1);

	background: transparent;
	color: var(--aq-white);

	cursor: pointer;
}

.aq-menu-toggle span {
	position: absolute;
	left: 50%;

	display: block;

	width: 20px;
	height: 2px;

	background: currentColor;

	transform-origin: center;

	transition:
		transform .35s cubic-bezier(.16, 1, .3, 1),
		top .35s cubic-bezier(.16, 1, .3, 1);
}

.aq-menu-toggle span:first-child {
	top: 15px;
	transform: translateX(-50%);
}

.aq-menu-toggle span:last-child {
	top: 26px;
	transform: translateX(-50%);
}


/* Open state */

body.aq-menu-open .aq-menu-toggle span:first-child {
	top: 19px;

	transform:
		translateX(-50%)
		rotate(45deg);
}

body.aq-menu-open .aq-menu-toggle span:last-child {
	top: 19px;

	transform:
		translateX(-50%)
		rotate(-45deg);
}


/* --------------------------------------------------------------
   HEADER CART
-------------------------------------------------------------- */

.aq-header-cart {
	position: relative;

	display: flex;

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

	flex: 0 0 auto;

	width: 58px;
	height: 41px;

	margin-left: 10px;

	border:
		1px solid
		rgba(255, 255, 255, .85);

	color: #fff;

	background: transparent;

	transition:
		color .3s ease,
		background .3s ease,
		border-color .3s ease,
		transform .3s cubic-bezier(.16, 1, .3, 1);
}


.aq-header-cart:hover,
.aq-header-cart:focus-visible {
	color:
		var(--aq-blue, #053cff);

	background: #fff;

	border-color: #fff;

	transform:
		translateY(-2px);
}


/* ICON */

.aq-header-cart__icon {
	display: block;

	width: 23px;
	height: 23px;
}


/* COUNT */

.aq-header-cart__count {
	position: absolute;

	right: -8px;
	top: -8px;

	display: flex;

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

	min-width: 22px;
	height: 22px;

	padding:
		0
		6px;

	border:
		2px solid
		#07113a;

	border-radius: 999px;

	color: #fff;

	background:
		var(--aq-blue, #053cff);

	font-family:
		var(--aq-font-body);

	font-size: .65rem;
	font-weight: 800;
	line-height: 1;
}


/*
 * Se il carrello è vuoto possiamo comunque
 * mostrare 0. Se preferisci nasconderlo,
 * più avanti lo facciamo.
 */


/* MOBILE */

@media (max-width: 767px) {

	.aq-header-cart {
		width: 46px;
		height: 42px;

		margin-left: 7px;
	}


	.aq-header-cart__icon {
		width: 20px;
		height: 20px;
	}


	.aq-header-cart__count {
		right: -6px;
		top: -7px;

		min-width: 19px;
		height: 19px;

		padding:
			0
			5px;

		font-size: .58rem;
	}

}


/* --------------------------------------------------------------
   TABLET / MOBILE MENU
-------------------------------------------------------------- */

@media (max-width: 1080px) {

	body.aq-menu-open {
		overflow: hidden;
	}


	.aq-header {
		position: fixed;

		grid-template-columns: 1fr auto;

		gap: 20px;

		padding: 16px clamp(18px, 4vw, 32px);

		background: rgba(3, 5, 11, .76);

		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
	}


	.aq-header__brand,
	.aq-header__actions {
		z-index: 3;
	}


	.aq-menu-toggle {
		display: block;
	}


	/* Full screen navigation */

	.aq-nav {
		position: fixed;
		inset: 0;

		z-index: 1;

		display: flex;
		align-items: flex-end;
		justify-content: flex-start;

		padding:
			130px
			clamp(24px, 7vw, 70px)
			clamp(40px, 8vh, 80px);

		overflow-y: auto;

		background:
			radial-gradient(
				circle at 80% 20%,
				rgba(5, 60, 255, .32),
				transparent 34rem
			),
			#03050b;

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

		transform: translateY(-14px);

		transition:
			opacity .4s cubic-bezier(.16, 1, .3, 1),
			visibility .4s ease,
			transform .4s cubic-bezier(.16, 1, .3, 1);
	}


	.aq-nav.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translateY(0);
	}


	.aq-menu {
		width: 100%;

		flex-direction: column;
		align-items: flex-start;

		gap: 0;
	}


	.aq-menu > li {
		width: 100%;

		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}


	.aq-menu > li:first-child {
		border-top: 1px solid rgba(255, 255, 255, .12);
	}


	.aq-menu > li > a {
		display: flex;
		align-items: center;

		width: 100%;

		padding: 16px 0 14px;

		font-family: var(--aq-font-display);
		font-size: clamp(42px, 8vw, 74px);
		font-weight: 400;
		line-height: .95;

		letter-spacing: -.02em;
	}


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


	/* Mobile submenu */

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

		min-width: 0;

		padding: 0 0 18px 18px;

		border: 0;

		background: transparent;

		opacity: 1;
		visibility: visible;

		transform: none;
	}


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

		font-size: 12px;

		background: transparent;
	}

}


/* --------------------------------------------------------------
   MOBILE
-------------------------------------------------------------- */

/* ==============================================================
   MOBILE MENU
   ============================================================== */

@media (max-width: 767px) {

	/* ----------------------------------------------------------
	   HEADER
	---------------------------------------------------------- */

	.aq-header {
		position: relative;

		z-index: 1000;

		width: 100%;

		overflow: visible;
	}


	/*
	 * Quando il menu è aperto NON dobbiamo
	 * tagliare nulla all'interno dell'header.
	 */
	.aq-header.is-menu-open {
		overflow: visible;
	}


	/* ----------------------------------------------------------
	   NAV PANEL
	---------------------------------------------------------- */

	.aq-nav {
		position: fixed;

		z-index: 998;

		left: 0;
		right: 0;
		top: 0;

		width: 100%;
		height: 100dvh;

		margin: 0;

		padding:
			145px
			28px
			50px;

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

		overscroll-behavior: contain;

		background:
			linear-gradient(
				110deg,
				#07184f 0%,
				#020713 58%,
				#01040b 100%
			);

		opacity: 0;

		visibility: hidden;

		pointer-events: none;

		transform:
			translateY(-18px);

		transition:
			opacity .35s ease,
			visibility .35s ease,
			transform .45s cubic-bezier(.16, 1, .3, 1);
	}


	/* Menu aperto */

	.aq-header.is-menu-open
	.aq-nav {

		opacity: 1;

		visibility: visible;

		pointer-events: auto;
		overflow: hidden;
		transform:
			translateY(0);
	}


	/* ----------------------------------------------------------
	   MENU
	---------------------------------------------------------- */

	.aq-menu {
		display: flex;

		flex-direction: column;

		align-items: stretch;

		width: 100%;
		max-width: none;

		margin: 0;
		padding: 0;

		list-style: none;
	}

	.aq-menu > li.lang-item > a::after {display: none!important;}


	.aq-menu > li {
		position: relative;

		width: 100%;

		margin: 0;
		padding: 0;

		border-bottom:
			1px solid
			rgba(255, 255, 255, .16);
	}

	.lang-item {width: auto!important; width: auto !important;
    float: left !important;
    display: block;
    border: none !important;
    margin-top: 10px !important;}


	/* Numero editoriale */

	.aq-menu > li::before {
		position: absolute;

		z-index: 2;

		left: 0;
		top: 22px;

		color:
			#5078ff;

		font-family:
			var(--aq-font-body);

		font-size: .62rem;
		font-weight: 800;
		line-height: 1;
		letter-spacing: .06em;
	}


	.aq-menu > li:nth-child(1)::before {
		content: '01';
	}

	.aq-menu > li:nth-child(2)::before {
		content: '02';
	}

	.aq-menu > li:nth-child(3)::before {
		content: '03';
	}

	.aq-menu > li:nth-child(4)::before {
		content: '04';
	}


	.aq-book {
		height: 43px;
		padding: 5px;
		min-width: auto;
		font-size: 9px;
		max-width: 90px;
	}


	/* ----------------------------------------------------------
	   LINKS
	---------------------------------------------------------- */

	.aq-menu > li > a {
		display: block;

		width: 100%;

		padding:
			24px
			0
			22px
			42px;

		color: #fff;

		font-family:
			var(--aq-font-display);

		font-size:
			clamp(3.2rem, 14vw, 5.8rem);

		font-weight: 400;
		line-height: .82;
		letter-spacing: -.035em;

		text-decoration: none;
		text-transform: uppercase;

		opacity: 1;

		transition:
			color .25s ease,
			padding-left .35s cubic-bezier(.16, 1, .3, 1);
	}


	.aq-menu > li > a:hover,
	.aq-menu > li > a:focus-visible {

		color:
			#5078ff;

		padding-left:
			50px;
	}


	/* ----------------------------------------------------------
	   ACTIONS ABOVE MENU
	---------------------------------------------------------- */

	.aq-header__brand,
	.aq-header__actions {

		position: relative;

		z-index: 1001;
	}


	/* ----------------------------------------------------------
	   TOGGLE
	---------------------------------------------------------- */

	.aq-menu-toggle {

		position: relative;

		z-index: 1002;
	}


	/* ----------------------------------------------------------
	   BACKGROUND DECORATION
	---------------------------------------------------------- */

	.aq-nav::before {
		content: 'MENU';

		position: absolute;

		z-index: -1;

		right: -5vw;
		bottom: -3vw;

		color:
			rgba(255, 255, 255, .035);

		font-family:
			var(--aq-font-display);

		font-size:
			clamp(12rem, 50vw, 24rem);

		font-weight: 400;
		line-height: .7;

		pointer-events: none;
	}

}


/* --------------------------------------------------------------
   SMALL MOBILE
-------------------------------------------------------------- */

@media (max-width: 390px) {

	.aq-header {
		gap: 8px;

		padding-left: 14px;
		padding-right: 14px;
	}


	.aq-brand__logo {
		height: 35px;
		max-width: 120px;
	}


	.aq-book {
		min-width: 82px;

		padding-left: 10px;
		padding-right: 10px;
	}

}


/* --------------------------------------------------------------
   ADMIN BAR MOBILE
-------------------------------------------------------------- */

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

	.admin-bar .aq-header {
		top: 46px;
	}

}


/* --------------------------------------------------------------
   HEADER ACCOUNT
-------------------------------------------------------------- */

.aq-header-account {
	position: relative;

	display: flex;

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

	flex: 0 0 auto;

	width: 58px;
	height: 42px;

	margin-left: 10px;

	border:
		1px solid
		rgba(255, 255, 255, .85);

	color: #fff;

	background: transparent;

	transition:
		color .3s ease,
		background .3s ease,
		border-color .3s ease,
		transform .3s cubic-bezier(.16, 1, .3, 1);
}


.aq-header-account:hover,
.aq-header-account:focus-visible {

	color:
		var(--aq-blue, #053cff);

	background: #fff;

	border-color: #fff;

	transform:
		translateY(-2px);
}


/* Icon */

.aq-header-account__icon {
	display: block;

	width: 23px;
	height: 23px;
}


/* --------------------------------------------------------------
   MOBILE
-------------------------------------------------------------- */

@media (max-height:780px) {  
	
	.aq-hero-router__display {
		font-size: clamp(3rem, 7.6vw, 4.6rem);
	}
	
	.aq-hero-router__copy {
		width: min(450px, 48vw);
	}
	
	.aq-hero-router__panel-content {
		bottom: clamp(74px, 8vw, 95px);
	}
	
	.aq-hero-router__panel h2 {
		font-size: clamp(3.2rem, 6vw, 3.4rem);
	}
	
	.aq-hero-router__panel-num {
		bottom: calc(100% + 38px);
	}
	
}

@media (max-width: 1150px) { 
	
	.aq-book {
		min-width: 90px;
		  padding: 5px 10px;
		  font-size: 10px;
	}
	
}

@media (max-width: 767px) {

	.aq-header-account {
		width: 46px;
		height: 42px;

		margin-left: 7px;
	}


	.aq-header-account__icon {
		width: 20px;
		height: 20px;
	}

}

@media (max-width: 660px) { 
	
	.lang-item:last-child {
		position: absolute;
		  bottom: 50px;
		  left: 70px;
	}
	
}