/**
 * mobile-menu.css
 * Header interattivo: menu mobile fullscreen (dall'alto) + ricerca
 * (icona su desktop, pannello full-width dal basso; barra integrata nel
 * pannello mobile) + switch lingua. Un solo markup (header.php), CSS
 * responsive a fare il resto: nessun contenuto duplicato tra breakpoint.
 */

:root {
	--menu-duration: 1000ms;
	--menu-parallax: calc(var(--unit-size) * 12);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Scroll-lock + parallasse: condivisi da menu mobile (is-menu-open) e
   pannello di ricerca desktop (is-search-open), qualunque sia il breakpoint.
   ========================================================================== */

html.is-menu-open,
html.is-menu-open body,
html.is-search-open,
html.is-search-open body {
	overflow: hidden;
}

#swup,
.site-footer {
	transition:
		transform var(--menu-duration) var(--ease-in-out),
		opacity var(--menu-duration) var(--ease-in-out),
		filter var(--menu-duration) var(--ease-in-out);
}

html.is-menu-open #swup,
html.is-menu-open .site-footer,
html.is-search-open #swup,
html.is-search-open .site-footer {
	transform: translateY(calc(1 * var(--menu-parallax)));
	opacity: 0.2;
}

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

.site-header {
	--site-header-logo-height: clamp(53px, 5.104vw, 98px);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(var(--site-header-logo-height) + (var(--unit-size) * 2));
	box-sizing: border-box;
	padding: var(--unit-size) var(--external-padding);
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--unit-size);
	align-items: center;
	z-index: 2;
	visibility: visible;
	opacity: 1;
	transition: opacity 400ms var(--ease-out), background 600ms var(--ease-out);
}

.site-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background: hsl(from var(--surface-primary) h s l / 0.9);
	backdrop-filter: blur(var(--unit-size));
	mask: linear-gradient(
		180deg,
		black 0%,
		transparent 100%
	);
	opacity: 0;
	transition: opacity 600ms var(--ease-out);
	z-index: -1;
}

/* L'header e' sempre fisso. Dopo la sua altezza assume la variante compatta;
   il JavaScript regola solo la sua opacita' in base alla direzione dello scroll. */
.site-header.is-header-condensed::after {
	opacity: 1;
	transition: opacity 0s var(--ease-out) 600ms;
}

.site-header.is-header-hidden {
	opacity: 0;
	pointer-events: none;
}

.site-header.is-header-condensed .site-header-brand img {
	height: clamp(27px, 2.552vw, 49px);
	transition: height 0s var(--ease-out) 600ms;
}

.site-header-brand img {
	width: auto;
	height: var(--site-header-logo-height);
	transition: height 600ms var(--ease-out);
}

.site-header-brand {
	grid-column: span 1;
	display: flex;
	align-items: center;
	width: 100%;
	height: auto;
	line-height: 0;
	background: none;

	&::before,
	&::after {
		display: none;
	}

	img {
		width: auto;
		height: var(--site-header-logo-height);
	}
}

.site-header-nav {
	grid-column: 4 / span 9;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: var(--unit-size);
	align-self: center;
	font-size: 1rem;
}

.site-header-nav-list {
	grid-column: span 6;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: inherit;
}

.site-header-nav .menu-item {
	position: relative;

	a {
		font-size: inherit;
		font-weight: var(--font-regular);
		color: var(--text-primary);
		transition: 600ms var(--ease-out);
		text-decoration: none;

		&:hover {
			color: var(--text-secondary);
		}

		.menu-item.current-menu-item & {
			color: var(--text-secondary);
		}
	}
}

/* ==========================================================================
   Burger (solo mobile)
   ========================================================================== */

.site-header-burger {
	display: none;
}

/* ==========================================================================
   Utility (lente + lingua): cluster fisso in alto a destra, sempre visibile.
   Su mobile la lente sparisce e il cluster (solo lingua) si sposta dentro
   il pannello del menu (vedi media query).
   ========================================================================== */

.site-header-utility {
	grid-column: 9 / span 1;
	top: var(--unit-size);
	right: var(--external-padding);
	z-index: 4;
	display: flex;
	justify-content: start;
	align-items: center;
	gap: calc(var(--unit-size) * 1.5);
}

.site-header-search-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--unit-size) * 2);
	height: calc(var(--unit-size) * 2);
	padding: 0;
	margin-left: auto;
	background: none;
	border: none;
	color: var(--text-primary);
	cursor: pointer;
}

.site-header-search-toggle svg {
	position: absolute;
	inset: 0;
	margin: auto;
	transition: opacity 300ms var(--ease-in-out), transform 300ms var(--ease-in-out);
}

.site-header-search-toggle .icon-close {
	opacity: 0;
	transform: rotate(-45deg);
}

.site-header-search-toggle[aria-expanded="true"] .icon-search {
	opacity: 0;
	transform: rotate(45deg);
}

.site-header-search-toggle[aria-expanded="true"] .icon-close {
	opacity: 1;
	transform: rotate(0deg);
}

.site-header-lang-list {
	display: flex;
	gap: calc(var(--unit-size) * 1.5);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: inherit;
	transition: 400ms var(--ease-out);
}

html.is-search-open .site-header-lang-list {
	opacity: 0;
	visibility: hidden;
}

.site-header-lang-link {
	display: inline-flex;
	align-items: center;
	color: hsl(from var(--text-primary) h s l / 0.5);
	text-decoration: none;
}

.site-header-lang-link.is-active,
.site-header-lang-link:hover {
	color: var(--text-primary);
}

/* ==========================================================================
   Pannello di ricerca (desktop): full-width, entra dal basso.
   ========================================================================== */

.site-header-search {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	min-height: 100dvh;
	box-sizing: border-box;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: var(--unit-size);
	padding: calc(var(--unit-size) * 4) var(--external-padding) 0 var(--external-padding);
	background: var(--surface-tertiary);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-100%);
	transition:
		transform var(--menu-duration) var(--ease-in-out),
		opacity 0s var(--ease-in-out) var(--menu-duration),
		visibility 0s linear var(--menu-duration);
}

html.is-search-open .site-header-search {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition:
		transform var(--menu-duration) var(--ease-in-out),
		visibility 0s linear 0s;
}

.site-header-search-field {
	position: relative;
	width: 100%;
	font-size: clamp(2.000rem, 3.125vw, 2.500rem);
	line-height: clamp(2.000rem, 3.125vw, 2.500rem);
}

.site-header-search-input {
	width: 100%;
	background: none;
	border: none;
	border-bottom: 1px solid hsl(from var(--border-primary) h s l / 0.5);
	color: var(--text-primary);
	text-align: left;
	padding-bottom: calc(var(--unit-size) / 2);

	&:focus,
	&:focus-visible {
		outline: 0;
		border-bottom: 1px solid var(--border-primary);
	}

	&::placeholder {
		color: hsl(from var(--border-primary) h s l / 0.5);
	}

	&::-webkit-search-decoration,
	&::-webkit-search-cancel-button,
	&::-webkit-search-results-button,
	&::-webkit-search-results-decoration {
		display: none;
	}
}

.site-header-search-clear {
	display: none;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	align-items: center;
	justify-content: center;
	width: calc(var(--unit-size) * 2);
	height: calc(var(--unit-size) * 2);
	padding: 0;
	background: none;
	border: none;
	color: var(--text-primary);
	cursor: pointer;
}

.site-header-search-results {
	width: 100%;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: var(--50);
	scrollbar-width: none;
}

/* ======================================================================
   Risultati ricerca: le liste restano semantiche, ma i contenuti sono
   presentati come card e i termini tassonomici come chip cliccabili.
   ====================================================================== */

.n-search-group + .n-search-group {
	margin-top: var(--50);
}

.n-search-group-title {
	margin: 0 0 var(--30);
	font-size: calc(1rem * 0.75);
	font-weight: var(--font-medium);
	line-height: 1.2;
}

.n-search-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.n-search-list-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--unit-size);
}

@media (min-width: 1200px) {
	.n-search-list-cards {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.n-search-item-card .stretched-link:focus-visible,
.n-search-chip:focus-visible {
	outline: 2px solid var(--text-primary);
	outline-offset: 2px;
}

.n-search-list-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--unit-size);
}

.n-search-chip {
	display: inline-flex;
	align-items: center;
	min-height: calc(var(--unit-size) * 3);
	padding: calc(var(--unit-size) * 0.45) var(--unit-size);
	border: 1px solid hsl(from var(--border-primary) h s l / 0.6);
	border-radius: 999px;
	color: var(--text-primary);
	font-size: calc(1rem * 0.75);
	line-height: 1.1;
	text-decoration: none;
	transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}

.n-search-chip:hover {
	border-color: var(--text-primary);
	background: var(--text-primary);
	color: var(--surface-tertiary);
}

.n-search-empty {
	margin: var(--20) 0 0;
}

.n-search-item-card,
.n-search-item-chip {
	animation: n-search-fade-slide-in-top 500ms var(--ease-out) calc(var(--n-search-index) * 60ms) both;
}

@keyframes n-search-fade-slide-in-top {
	from {
		opacity: 0;
		transform: translateY(calc(var(--unit-size) * -1));
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Mobile: menu fullscreen dall'alto + ricerca integrata come primo elemento.
   ========================================================================== */

@media (max-width: 991.98px) {

	.site-header {
		align-items: center;
		/* Il logo SVG 112:100 e' largo 60px su tutti i breakpoint mobile. */
		--mobile-brand-height: 53.5714px;
		--site-header-logo-height: var(--mobile-brand-height);
		--mobile-search-top: calc(var(--unit-size) + ((var(--mobile-brand-height) - (var(--unit-size) * 3)) / 2));
	}

	.site-header-brand {
		position: relative;
		z-index: 3;
		transition: opacity 400ms var(--ease-out), visibility 400ms linear 600ms;
	}

	.site-header-brand img {
		width: auto;
		height: var(--site-header-logo-height);
	}

	.is-menu-open .site-header-brand {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms;
	}

	.site-header-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		grid-column: 12 / span 1;
		justify-self: end;
		position: relative;
		z-index: 3;
		width: calc(var(--unit-size) * 2);
		height: calc(var(--unit-size) * 2);
		padding: 0;
		background: none;
		border: none;
		cursor: pointer;
	}

	.site-header-burger-lines {
		position: relative;
		display: block;
		width: 100%;
		height: 1px;
	}

	.site-header-burger-lines span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background: var(--text-primary);
		transition: transform 400ms var(--ease-in-out), top 400ms var(--ease-in-out);
	}

	.site-header-burger-lines span:first-child {
		top: -5px;
	}

	.site-header-burger-lines span:last-child {
		top: 5px;
	}

	.is-menu-open .site-header-burger-lines span:first-child {
		top: 0;
		transform: rotate(45deg);
	}

	.is-menu-open .site-header-burger-lines span:last-child {
		top: 0;
		transform: rotate(-45deg);
	}

	.site-header-nav {
		position: fixed;
		inset: 0;
		z-index: 2;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-end;
		gap: calc(var(--unit-size) * 3);
		padding: calc(var(--unit-size) * 2) var(--external-padding);
		background: var(--surface-tertiary);
		overflow: hidden;
		visibility: hidden;
		transform: translateY(-100%);
		transition: transform var(--menu-duration) var(--ease-in-out), visibility 0s linear var(--menu-duration);
	}

	.is-menu-open .site-header-nav {
		visibility: visible;
		transform: translateY(0);
		transition: transform var(--menu-duration) var(--ease-in-out), visibility 0s linear 0s;
	}

	/* Reset del menu durante una navigazione Swup: avviene sotto overlay,
	   quindi nessuna animazione di chiusura deve risultare visibile. */
	html.is-menu-resetting .site-header-nav,
	html.is-menu-resetting .site-header-search,
	html.is-menu-resetting .site-header-brand,
	html.is-menu-resetting .site-header-burger-lines span {
		transition: none;
	}

	/* La ricerca e' fissata nella riga superiore; voci e lingua restano in basso. */
	.site-header-search {
		order: -1;
	}

	.site-header-nav-list {
		order: 0;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--unit-size);
	}

	.site-header-utility {
		order: 1;
		position: static;
		width: 100%;
		justify-content: flex-start;
	}

	.site-header-nav .menu-item {
		font-size: calc(1rem * 1.4);

		& a {

			&:hover {
				color: var(--surface-primary);
			}

			.menu-item.current-menu-item & {
				color: var(--surface-primary);
			}
		}
	}

	/* Su mobile la lente non serve: la ricerca e' gia' il primo elemento. */
	.site-header-search-toggle {
		display: none;
	}

	/* La barra resta nella riga dell'hamburger. Quando attiva, il pannello
	   si estende fino al fondo viewport e i soli risultati scorrono. */
	.site-header-search {
		position: fixed;
		top: var(--mobile-search-top);
		left: var(--external-padding);
		right: calc((var(--external-padding) * 2) + (var(--unit-size) * 2));
		z-index: auto;
		width: auto;
		max-width: none;
		height: auto;
		min-height: 0;
		padding: 0;
		background: none;
		display: flex;
		flex-direction: column;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.site-header-search-field {
		height: calc(var(--unit-size) * 3);
		font-size: 1rem;
		line-height: 1.2;
	}

	.site-header-search-input {
		height: 100%;
		padding-bottom: 0;
	}

	.site-header-search-clear,
	html.is-search-active .site-header-search-clear {
		display: none;
	}

	.site-header-search-results {
		max-height: none;
	}

	.n-search-list-cards {
		grid-template-columns: 1fr;
	}

	/* Ricerca attiva: nascondi voci di menu e lingua, fai spazio ai risultati.
	   Su mobile l'input si resetta svuotandolo, senza una seconda X visibile. */
	html.is-search-active .site-header-search-clear {
		display: none;
	}

	html.is-search-active .site-header-search {
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100dvh;
		max-height: none;
		align-items: flex-start;
		padding: var(--mobile-search-top) 0 0;
	}

	html.is-search-active .site-header-search-field {
		width: calc(100% - (var(--external-padding) * 3) - (var(--unit-size) * 2));
		margin-left: var(--external-padding);
	}

	html.is-search-active .site-header-search-results {
		width: calc(100% - (var(--external-padding) * 2));
		margin-left: var(--external-padding);
	}

	html.is-search-active .site-header-nav-list,
	html.is-search-active .site-header-utility {
		display: none;
	}
}

/* ==========================================================================
   Riduzione del movimento: transizioni istantanee, ovunque.
   ========================================================================== */

html.app-reduced-motion .site-header-nav,
html.app-reduced-motion .site-header-search,
html.app-reduced-motion .site-header-burger-lines span,
html.app-reduced-motion .site-header-search-toggle svg,
html.app-reduced-motion #swup,
html.app-reduced-motion .site-footer {
	transition-duration: 0ms;
}

html.app-reduced-motion .site-header,
html.app-reduced-motion .site-header-brand img {
	transition-duration: 0ms;
	animation: none;
}

html.app-reduced-motion .n-search-item-card,
html.app-reduced-motion .n-search-item-chip {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.n-search-chip {
		transition-duration: 0ms;
	}

	.n-search-item-card,
	.n-search-item-chip {
		animation: none;
	}
}