/* ==========================================================
   Header: barra, menu, selettore lingue, menu del telefono.
   Markup in inc/header.php; comportamento in assets/js/site.js.
   ========================================================== */

/* La vecchia barra lingue sopra l'header non c'è più */
:root { --gs-langbar-h: 0px; }
.gs-langbar { display: none !important; }

/* ---------- Barra ---------- */
.site-header .main-header-bar,
.site-header .ast-primary-header-bar,
.ast-theme-transparent-header .main-header-bar {
	border-bottom: 1px solid color-mix(in srgb, var(--gs-ink) 18%, transparent) !important;
}

/* ---------- Menu degli schermi grandi ----------
   Testo in minuscolo a 16px (il maiuscolo allunga il tedesco e non esiste in cinese).
   La pagina attiva ha un segno rame sotto; al passaggio cambia solo il colore. */
.main-header-menu .menu-item > .menu-link {
	position: relative;
	font-family: var(--gs-display) !important;
	font-size: 16px !important;
	font-weight: 500;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--gs-ink) !important;
	transition: color var(--gs-fast) var(--gs-ease) !important;
}
.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu .menu-item > .menu-link:focus-visible { color: var(--gs-acid) !important; }
.main-header-menu .current-menu-item > .menu-link { color: var(--gs-ink) !important; font-weight: 700; }
#ast-desktop-header .main-header-menu .current-menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 14px;
	width: 18px;
	height: 3px;
	margin-left: -9px;
	border-radius: 3px;
	background: var(--gs-acid);
}

/* Social fuori dall'header degli schermi grandi: restano nel footer e nel menu del telefono */
.gs-head-extras .gs-menu-social { display: none !important; }

/* Accedi e Registrati: due pulsanti piccoli, le sole azioni dell'header.
   Accedi è il contorno, Registrati è pieno. */
.gs-head-extras .gs-menu-register { margin-left: 8px !important; }
.gs-head-extras .gs-menu-login > .menu-link {
	min-height: var(--gs-control-sm);
	padding: 0 16px !important;
	gap: 8px;
	border: 2px solid var(--gs-ink) !important;
	border-radius: var(--gs-radius-pill) !important;
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: 0 !important;
	text-transform: none !important;
	transition: background-color var(--gs-fast) var(--gs-ease), color var(--gs-fast) var(--gs-ease) !important;
}
.gs-head-extras .gs-menu-login > .menu-link:hover,
.gs-head-extras .gs-menu-login > .menu-link:focus-visible {
	background: var(--gs-ink) !important;
	color: var(--gs-paper) !important;
}
.gs-head-extras .gs-menu-register > .menu-link {
	background: var(--gs-ink) !important;
	color: var(--gs-paper) !important;
}
.gs-head-extras .gs-menu-register > .menu-link:hover,
.gs-head-extras .gs-menu-register > .menu-link:focus-visible {
	border-color: var(--gs-acid) !important;
	background: var(--gs-acid) !important;
	color: #fff !important;
}
.gs-head-extras .gs-menu-icononly > .menu-link {
	min-width: var(--gs-control-sm);
	min-height: var(--gs-control-sm);
	justify-content: center;
	border-radius: var(--gs-radius);
}

/* ---------- Selettore lingue (schermi grandi) ---------- */
.gs-lang {
	position: relative;
	margin-right: 8px;
}
.gs-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: var(--gs-control-sm);
	padding: 0 12px;
	border-radius: var(--gs-radius-pill);
	font-family: var(--gs-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--gs-ink);
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--gs-fast) var(--gs-ease), color var(--gs-fast) var(--gs-ease);
}
.gs-lang__toggle::-webkit-details-marker { display: none; }
.gs-lang__toggle:hover,
.gs-lang[open] .gs-lang__toggle { background: var(--gs-pink); }
.gs-lang__chevron { transition: transform var(--gs-fast) var(--gs-ease); }
.gs-lang[open] .gs-lang__chevron { transform: rotate(180deg); }

.gs-lang__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1001;
	min-width: 220px;
	padding: 8px;
	border: 2px solid var(--gs-ink);
	border-radius: var(--gs-radius-lg);
	background: var(--gs-paper);
	box-shadow: 0 16px 40px color-mix(in srgb, var(--gs-ink) 18%, transparent);
}

/* ---------- Elenco lingue (menu a tendina e telefono) ---------- */
.gs-langlist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gs-langlist li { margin: 0; }
.gs-langlist__link {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: var(--gs-control-sm);
	padding: 0 14px;
	border-radius: var(--gs-radius);
	color: var(--s-fg) !important;
	text-decoration: none !important;
	transition: background-color var(--gs-fast) var(--gs-ease), color var(--gs-fast) var(--gs-ease);
}
.gs-langlist__code {
	flex: none;
	width: 2.2em;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--s-muted);
}
.gs-langlist__name { font-size: 17px; font-weight: 500; }
.gs-langlist__link:hover { background: color-mix(in srgb, var(--s-fg) 8%, transparent); }

/* Lingua attiva: fondo pieno e spunta, non solo il colore */
.gs-langlist__link[aria-current="true"] {
	background: var(--s-btn-bg);
	color: var(--s-btn-fg) !important;
}
.gs-langlist__link[aria-current="true"] .gs-langlist__code { color: inherit; opacity: 0.75; }
.gs-langlist__link[aria-current="true"]::after {
	content: "";
	width: 18px;
	height: 18px;
	margin-left: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Menu del telefono ----------
   Il pulsante di Astra e la sua tendina lasciano il posto al nostro pannello. */
#ast-mobile-header .ast-button-wrap,
#ast-mobile-header .ast-mobile-header-content { display: none !important; }

.gs-mnav__toggle {
	position: relative;
	z-index: 1002;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 14px 0 12px;
	border: 2px solid var(--gs-ink);
	border-radius: var(--gs-radius-pill);
	background: var(--gs-paper);
	color: var(--gs-ink);
	font-family: var(--gs-display);
	font-size: 16px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--gs-fast) var(--gs-ease), color var(--gs-fast) var(--gs-ease), border-color var(--gs-fast) var(--gs-ease);
}
.gs-mnav__toggle::-webkit-details-marker { display: none; }

/* Due tratti arrotondati come il filo: diventano una croce */
.gs-mnav__icon {
	position: relative;
	width: 20px;
	height: 12px;
}
.gs-mnav__icon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--gs-slow) var(--gs-ease), top var(--gs-slow) var(--gs-ease);
}
.gs-mnav__icon span:first-child { top: 0; }
.gs-mnav__icon span:last-child { top: calc(100% - 2.5px); width: 70%; }
.gs-mnav[open] .gs-mnav__icon span { top: calc(50% - 1.25px); width: 100%; }
.gs-mnav[open] .gs-mnav__icon span:first-child { transform: rotate(45deg); }
.gs-mnav[open] .gs-mnav__icon span:last-child { transform: rotate(-45deg); }

.gs-mnav__label--close,
.gs-mnav[open] .gs-mnav__label--open { display: none; }
.gs-mnav[open] .gs-mnav__label--close { display: inline; }

.gs-mnav[open] .gs-mnav__toggle {
	background: var(--gs-ink);
	border-color: var(--gs-paper);
	color: var(--gs-paper);
}

/* Pannello: espresso a tutto schermo, voci grandi, tutto raggiungibile col pollice */
.gs-mnav__panel {
	--s-bg: var(--gs-ink);
	--s-fg: var(--gs-paper);
	--s-muted: var(--gs-pink);
	--s-link: var(--gs-paper);
	--s-link-hover: var(--gs-acid-light);
	--s-focus: var(--gs-paper);
	--s-focus-halo: var(--gs-ink);
	--s-btn-bg: var(--gs-paper);
	--s-btn-fg: var(--gs-ink);
	--s-btn-bg-hover: var(--gs-acid-light);
	--s-btn-fg-hover: var(--gs-ink);
	--s-btn-line: var(--gs-paper);
	position: fixed;
	inset: 0;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	gap: 36px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 24px max(var(--gs-gutter), env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(var(--gs-gutter), env(safe-area-inset-left));
	background: var(--s-bg);
	color: var(--s-fg);
	text-align: left;
}
.gs-mnav[open] .gs-mnav__panel { animation: gs-mnav-in var(--gs-slow) var(--gs-ease); }
@keyframes gs-mnav-in {
	from { opacity: 0; transform: translateY(-12px); }
	to { opacity: 1; transform: none; }
}

.gs-mnav__home {
	display: inline-flex;
	align-self: flex-start;
	min-height: 48px;
	align-items: center;
	color: var(--gs-acid-light);
	line-height: 0;
}
.gs-mnav__home .gs-filo { width: 44px; height: 44px; }

/* Pagine: grandi, una per riga, la pagina attiva segnata col rame chiaro e un trattino */
.gs-mnav__pages {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gs-mnav__pages li { margin: 0; }
.gs-mnav__pages a {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	color: var(--s-link) !important;
	font-family: var(--gs-display);
	font-size: clamp(28px, 8vw, 40px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-decoration: none !important;
	transition: color var(--gs-fast) var(--gs-ease);
}
.gs-mnav__pages a:hover,
.gs-mnav__pages a:focus-visible { color: var(--s-link-hover) !important; }
.gs-mnav__pages a[aria-current="page"] { color: var(--gs-acid-light) !important; }
.gs-mnav__pages a[aria-current="page"]::before {
	content: "";
	flex: none;
	width: 18px;
	height: 4px;
	border-radius: 4px;
	background: currentColor;
}
.gs-mnav__pages .ast-icon,
.gs-mnav__pages .dropdown-menu-toggle,
.gs-mnav__pages .ast-menu-toggle { display: none !important; }

.gs-mnav__section { display: grid; gap: 14px; }
.gs-mnav__heading {
	margin: 0;
	font-family: var(--gs-display);
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--s-muted) !important;
}

/* Lingue in due colonne: righe da 48px, sigla + nome nella lingua stessa */
.gs-langlist--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.gs-langlist--grid .gs-langlist__link {
	min-height: 48px;
	border: 1.5px solid color-mix(in srgb, var(--s-fg) 30%, transparent);
}
.gs-langlist--grid .gs-langlist__link[aria-current="true"] { border-color: var(--s-btn-bg); }
@media (max-width: 340px) {
	.gs-langlist--grid { grid-template-columns: minmax(0, 1fr); }
}

/* Area utente nel menu del telefono: i due pulsanti affiancati, a tutta larghezza */
.gs-mnav__account {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
	align-items: center;
}
.gs-mnav__account .gs-button { justify-content: center; text-align: center; }
.gs-mnav__account .gs-link { justify-self: center; }

.gs-mnav__social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gs-mnav__social a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--s-link) !important;
	font-weight: 600;
	text-decoration: none !important;
}
.gs-mnav__social a:hover { color: var(--s-link-hover) !important; }

/* Pagina ferma sotto il menu aperto (classe messa da site.js) */
html.gs-noscroll,
html.gs-noscroll body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.gs-mnav[open] .gs-mnav__panel { animation: none; }
}

/* Header degli schermi grandi: menu al centro esatto finché c'è spazio;
   se Accedi, Registrati e lingue non ci stanno, il menu si sposta invece di finirci sotto. */
#ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row-has-sides.ast-grid-center-col-layout {
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	column-gap: 24px;
}

/* Schermi tra 922 e 1279px: con Accedi e Registrati il menu non ci stava su una riga
   in francese, tedesco e russo. Voci e pulsanti si compattano un po'. */
@media (min-width: 922px) and (max-width: 1279px) {
	#ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row-has-sides.ast-grid-center-col-layout { column-gap: 16px; }
	#ast-desktop-header #ast-hf-menu-1 > li > .menu-link {
		padding-left: 7px !important;
		padding-right: 7px !important;
		font-size: 15px !important;
	}
	.gs-head-extras .gs-menu-login > .menu-link { padding: 0 12px !important; }
	.gs-head-extras .gs-menu-login > .menu-link svg { display: none; }
}
@media (min-width: 922px) and (max-width: 1099px) {
	#ast-desktop-header #ast-hf-menu-1 > li > .menu-link {
		padding-left: 5px !important;
		padding-right: 5px !important;
		font-size: 14px !important;
	}
	#ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row-has-sides.ast-grid-center-col-layout { column-gap: 10px; }
	.gs-head-extras .gs-menu-login > .menu-link { padding: 0 10px !important; font-size: 14px !important; }
	.gs-head-extras .gs-menu-register { margin-left: 6px !important; }
}

/* Area Clienti: ultima voce del menu, pulsante pieno (header e menu del telefono) */
.main-header-menu .gs-menu-clienti > .menu-link,
.gs-mnav__pages .gs-menu-clienti > a {
	display: inline-flex !important;
	align-items: center;
	height: var(--gs-control-sm) !important;
	min-height: 0 !important;
	line-height: 1.1 !important;
	padding: 0 18px !important;
	border-radius: var(--gs-radius-pill) !important;
	background: var(--gs-ink) !important;
	color: var(--gs-paper) !important;
	transition: background-color var(--gs-fast) var(--gs-ease) !important;
}
.main-header-menu .gs-menu-clienti > .menu-link:is(:hover, :focus-visible),
.gs-mnav__pages .gs-menu-clienti > a:is(:hover, :focus-visible) {
	background: var(--gs-acid) !important;
	color: var(--gs-on-accent) !important;
}
.main-header-menu .gs-menu-clienti { display: flex; align-items: center; margin-inline-start: 8px; }
.gs-mnav__pages .gs-menu-clienti { margin-top: 12px; }
.gs-foot__list .gs-menu-clienti > a { font-weight: 700; }
/* Nel pannello scuro del telefono il pulsante è rame, più alto e allineato al resto */
.gs-mnav__pages .gs-menu-clienti > a {
	height: auto !important;
	min-height: var(--gs-control) !important;
	padding: 6px 22px !important;
	font-size: 24px !important;
	background: var(--gs-acid) !important;
	color: var(--gs-on-accent) !important;
}
.gs-mnav__pages .gs-menu-clienti > a::before { display: none !important; }
.gs-mnav__pages .gs-menu-clienti > a:is(:hover, :focus-visible) { background: var(--gs-paper) !important; color: var(--gs-ink) !important; }