/**
 * Layout: contenitore, header, hero, sezioni.
 */

.ee-container {
	width: 100%;
	max-width: var(--ee-container);
	margin-inline: auto;
	padding-inline: var(--ee-gutter);
}

.ee-main {
	display: block;
}

/* Spazio per l'header fisso quando la pagina non inizia con un hero */
.ee-main > :first-child:not(.ee-hero) {
	padding-top: calc(var(--ee-header-h) + var(--ee-space-7));
}

/* ---------- Header ---------- */

.ee-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--ee-z-header);
	background: transparent;
	color: var(--ee-ink);
	transition: background var(--ee-dur) var(--ee-ease), color var(--ee-dur) var(--ee-ease),
		transform 150ms var(--ee-ease), opacity 150ms var(--ee-ease);
}

/* l'header del riferimento è trasparente a inizio pagina e diventa scuro
   (#1C2026, il 66,5% dei pixel a t=128,4 s) appena si scorre */
.ee-header[data-theme="dark"] {
	color: var(--ee-white);
}

.ee-header[data-theme="dark"] .ee-header__logo-img {
	filter: brightness(0) invert(1);
}

/* il riferimento (t=8.83 → 9.53, 13.80 e 47.03 s) nasconde l'header mentre si
   scorre verso il basso e lo riporta appena lo scroll si ferma o torna su */
.ee-header.is-hidden {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

/* durante lo scrub dei capitoli l'header non compare mai (t=16-45 s) */
html.ee-chapters-pinned .ee-header {
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

.ee-header__inner {
	display: flex;
	align-items: center;
	gap: var(--ee-space-6);
	height: var(--ee-header-h);
	max-width: var(--ee-container);
	margin-inline: auto;
	padding-inline: var(--ee-gutter);
}

.ee-header__logo {
	display: flex;
	align-items: center;
	flex: none;
}

.ee-header__logo-img {
	width: 170px;
	height: auto;
	transition: filter var(--ee-dur) var(--ee-ease);
}

.ee-nav {
	margin-inline: auto;
}

.ee-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.4vw, 26px);
}

.ee-nav__list a {
	display: inline-block;
	padding-block: 6px;
	font-size: 0.75rem;
	line-height: 1.2;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: border-color var(--ee-dur-fast) var(--ee-ease), color var(--ee-dur-fast) var(--ee-ease);
}

.ee-nav__list a:hover,
.ee-nav__list .current-menu-item > a,
.ee-nav__list .current_page_item > a {
	border-bottom-color: currentColor;
}

.ee-header__actions {
	display: flex;
	align-items: center;
	gap: var(--ee-space-3);
	flex: none;
}

.ee-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid currentColor;
	border-radius: var(--ee-radius-sm);
	color: inherit;
}

.ee-burger__lines {
	display: grid;
	gap: 5px;
	width: 18px;
}

.ee-burger__lines span {
	display: block;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--ee-dur) var(--ee-ease), opacity var(--ee-dur) var(--ee-ease);
}

/* Stato sopra l'hero: header trasparente.
   La classe ee-header-scrolled vive su <html>, ee-over-header su <body>. */
html:not(.ee-header-scrolled) body.ee-over-header .ee-header {
	background: transparent;
	color: var(--ee-white);
	box-shadow: none;
}

html:not(.ee-header-scrolled) body.ee-over-header .ee-header__logo-img,
.ee-header__logo-img {
	filter: brightness(0) invert(1);
}

html.ee-header-scrolled .ee-header {
	background: var(--ee-ink-deep);
	color: var(--ee-white);
	box-shadow: none;
}

html.ee-header-scrolled .ee-header__logo-img {
	filter: brightness(0) invert(1);
}

/* Barra di amministrazione di WordPress: l'header fisso va spostato sotto la
   barra, altrimenti la copre (la barra ha z-index 99999). */
body.admin-bar .ee-header {
	top: 32px;
}

body.admin-bar .ee-menu {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .ee-header {
		top: 46px;
	}

	body.admin-bar .ee-menu {
		top: 46px;
	}
}

/* ---------- Menu overlay ---------- */

.ee-menu {
	position: fixed;
	inset: 0;
	z-index: var(--ee-z-menu);
	background: var(--ee-ink);
	color: var(--ee-white);
	overflow-y: auto;
	opacity: 0;
	transition: opacity var(--ee-dur) var(--ee-ease);
}

.ee-menu.is-open {
	opacity: 1;
}

.ee-menu__inner {
	max-width: var(--ee-container);
	margin-inline: auto;
	padding: var(--ee-space-5) var(--ee-gutter) var(--ee-space-9);
	min-height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--ee-space-8);
}

.ee-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ee-menu__logo {
	filter: brightness(0) invert(1);
	width: 150px;
}

.ee-menu__close {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ee-line-invert);
	border-radius: var(--ee-radius-sm);
	color: var(--ee-white);
}

.ee-menu__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
	gap: var(--ee-space-8);
	align-items: start;
}

.ee-menu__list {
	display: grid;
	gap: 2px;
}

.ee-menu__list a {
	display: block;
	padding-block: 10px;
	font-family: var(--ee-font-display);
	font-size: clamp(1.75rem, 3.6vw, 3rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	transition: color var(--ee-dur-fast) var(--ee-ease), transform var(--ee-dur-fast) var(--ee-ease);
}

.ee-menu__list a:hover {
	color: var(--ee-magenta);
}

.ee-menu__aside {
	display: grid;
	gap: var(--ee-space-2);
	padding-top: var(--ee-space-5);
	border-top: 1px solid var(--ee-line-invert);
}

.ee-menu__phone {
	font-family: var(--ee-font-display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: -0.02em;
}

.ee-menu__mail,
.ee-menu__addr {
	font-size: var(--ee-fs-small);
	color: var(--ee-muted-invert);
}

/* ---------- Hero ---------- */

.ee-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100svh;
	background: var(--ee-ink);
	color: var(--ee-white);
	overflow: hidden;
	isolation: isolate;
}

.ee-hero--compact {
	min-height: 68svh;
}

.ee-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ee-hero__video,
.ee-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Due varianti della stessa clip: verticale sotto 768 px, 16:9 sopra */
.ee-hero__video--mob {
	display: none;
}

@media (max-width: 767px) {
	.ee-hero__video--desk {
		display: none;
	}

	.ee-hero__video--mob {
		display: block;
	}
}

.ee-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(19, 21, 27, 0.55) 0%,
		rgba(19, 21, 27, 0.4) 40%,
		rgba(19, 21, 27, 0.86) 100%
	);
}

.ee-hero__inner {
	position: relative;
	width: 100%;
	padding-top: calc(var(--ee-header-h) + var(--ee-space-7));
	padding-bottom: clamp(48px, 8vh, 96px);
}

.ee-hero__content {
	max-width: min(62ch, 780px);
	display: grid;
	gap: var(--ee-space-3);
	justify-items: start;
}

.ee-hero__eyebrow {
	font-size: var(--ee-fs-label);
	letter-spacing: var(--ee-track-label);
	text-transform: uppercase;
	color: var(--ee-white);
	opacity: 0.85;
}

.ee-hero__title {
	max-width: 780px;
	font-size: clamp(2rem, 3vw, 2.75rem);
	line-height: 1.06;
}

.ee-hero__subtitle {
	max-width: 46ch;
	font-size: var(--ee-fs-body);
	color: rgba(255, 255, 255, 0.86);
}

.ee-hero__cta {
	margin-top: var(--ee-space-2);
}

/* ---------- Hero a scene, Ken Burns e strip con barra (mobile first) ---------- */

.ee-hero__scene {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 700ms var(--ee-ease, ease);
}

.ee-hero__scene.is-active {
	opacity: 1;
}

.ee-hero__scene picture,
.ee-hero__scene img,
.ee-hero__scene video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Il primo fotogramma della scena, sotto il video: sfuma quando la clip parte.
   Stesso rettangolo del video, quindi non sposta nulla. */
.ee-hero__scene-poster {
	position: absolute;
	inset: 0;
	z-index: -1;
	transition: opacity 420ms var(--ee-ease, ease);
}

.ee-hero__scene.is-playing .ee-hero__scene-poster {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ee-hero__scene-poster {
		transition: none;
	}
}

.ee-hero--kenburns .ee-hero__image {
	animation: ee-kb 26s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes ee-kb {
	from {
		transform: scale(1.01);
	}
	to {
		transform: scale(1.09);
	}
}

.ee-hero__strip {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-top: 1px solid var(--ee-line-invert);
}

.ee-hero__strip::-webkit-scrollbar {
	display: none;
}

.ee-hero__strip-item {
	position: relative;
	flex: 0 0 auto;
	min-width: 42%;
	scroll-snap-align: start;
	border-right: 1px solid var(--ee-line-invert);
}

.ee-hero__strip-track {
	display: block;
	height: 2px;
	background: rgba(255, 255, 255, 0.16);
}

.ee-hero__strip-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ee-magenta);
}

.ee-hero__strip-item.is-active .ee-hero__strip-bar {
	animation: ee-strip-fill var(--ee-scene-ms, 5200ms) linear forwards;
}

@keyframes ee-strip-fill {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}

.ee-hero__strip-btn,
.ee-hero__strip-static {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	padding: 12px var(--ee-space-3) 14px;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: left;
}

.ee-hero__strip-btn {
	cursor: pointer;
}

.ee-hero__strip-num {
	font-size: var(--ee-fs-label);
	letter-spacing: 0.1em;
	color: var(--ee-magenta);
}

.ee-hero__strip-label {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.66);
	transition: color 180ms var(--ee-ease);
}

.ee-hero__strip-item.is-active .ee-hero__strip-label {
	color: var(--ee-white);
}

.ee-hero__strip-btn:focus-visible {
	outline: 2px solid var(--ee-white);
	outline-offset: -2px;
}

@media (min-width: 768px) {
	.ee-hero__strip {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow: visible;
	}

	.ee-hero__strip-item {
		min-width: 0;
	}

	.ee-hero__strip-btn,
	.ee-hero__strip-static {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: var(--ee-space-4) var(--ee-space-4) var(--ee-space-5);
	}
}

@media (min-width: 1024px) {
	.ee-hero__strip {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ee-hero__strip-item.is-active .ee-hero__strip-bar {
		animation: none;
		width: 100%;
	}

	.ee-hero--kenburns .ee-hero__image {
		animation: none;
	}

	.ee-hero__scene {
		transition: none;
	}
}

.ee-hero__scroll {
	position: absolute;
	right: var(--ee-gutter);
	bottom: calc(var(--ee-space-10) + var(--ee-space-6));
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--ee-fs-label);
	letter-spacing: var(--ee-track-label);
	text-transform: uppercase;
	color: var(--ee-white);
}

.ee-hero__scroll svg {
	animation: ee-bounce 1.8s var(--ee-ease) infinite;
}

@keyframes ee-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

/* ---------- Pulsante "torna in cima" ---------- */

/* Quello di Astra è un quadratino da 32 px, fuori dal linguaggio del tema
   (viene nascosto in astra-overrides.css). Questo è il nostro: tondo da 48 px,
   tap target comodo sul telefono, dentro le safe area dell'iPhone.
   La specificità è alzata con `body.ee` perché astra-overrides.css applica
   `border-radius` e `box-shadow: none` a tutti i `button`. */
body.ee .ee-to-top {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
	z-index: var(--ee-z-header);
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: var(--ee-ink);
	color: var(--ee-white);
	box-shadow: 0 10px 24px rgba(15, 18, 24, 0.32);
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 180ms var(--ee-ease), transform 180ms var(--ee-ease), background-color 180ms var(--ee-ease);
}

body.ee .ee-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

body.ee .ee-to-top:hover {
	background: var(--ee-magenta);
	border-color: var(--ee-magenta);
	color: var(--ee-white);
}

body.ee .ee-to-top:focus-visible {
	outline: 2px solid var(--ee-white);
	outline-offset: 2px;
}

body.ee .ee-to-top svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
	body.ee .ee-to-top {
		transition: none;
	}

	body.ee .ee-to-top.is-visible {
		transform: none;
	}
}