/*
Theme Name: NetSpeak
Theme URI: https://netspeak.it/
Description: Tema child di Astra con il design system del sito NetSpeak (comunicazione IoT a lungo raggio). Palette ripresa dal logo ufficiale, header scuro con logo, footer articolato con il cambio di lingua.
Author: NetSpeak
Template: astra
Version: 3.5.16
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: netspeak
*/

/* =========================================================================
   1. Design tokens
   ====================================================================== */

:root {
	/* Base scura blu, nella stessa famiglia del blu del logo. I valori sono
	   scelti perché il blu resti leggibile come blu anche sui monitor con
	   gamma bassa: un blu troppo carico di nero viene percepito come nero. */
	--ns-ink: #0b2544;
	--ns-ink-2: #10325a;
	--ns-ink-3: #17436f;
	--ns-ink-4: #1f5687;

	/* Tinta della barra dei cookie (l'intestazione non la usa più: porta la
	   stessa veste della fascia hero, vedi il capitolo 5) e del footer. */
	--ns-header-bg: #10365f;
	--ns-footer-bg: #0a2340;

	/* Blu del logo ufficiale */
	--ns-accent: #0060e0;
	--ns-accent-dark: #0049a8;
	/* Tinta chiara del blu del logo: è usata solo su fondo scuro (voci attive
	   dell'intestazione, titoli del footer), dove serve un contrasto di almeno
	   4,5:1 sul blu scuro. */
	--ns-accent-light: #6ba4ff;
	--ns-accent-soft: rgba(0, 96, 224, 0.12);

	/* Superfici chiare */
	--ns-bg: #ffffff;
	--ns-bg-soft: #f4f6f9;
	--ns-border: #e3e8ef;
	--ns-text: #14191f;
	--ns-muted: #5a6675;

	--ns-radius: 16px;
	--ns-radius-sm: 10px;
	--ns-shadow: 0 18px 44px rgba(12, 15, 19, 0.10);
	--ns-shadow-sm: 0 4px 16px rgba(12, 15, 19, 0.06);

	/* Larghezza standard del contenuto su desktop */
	--ns-wrap: 1240px;

	--ns-header-h: 72px;

	/* Spazio ai lati dell'intestazione: l'intestazione è a tutta larghezza, con
	   un margine che cresce con la finestra fra 1.25rem e 3.25rem, così su un
	   monitor grande il logo non resta attaccato al bordo. */
	--ns-header-laterale: clamp(1.25rem, 3vw, 3.25rem);

	--ns-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Sfondo del sito netspeak.it, impostato da functions.php */
	--ns-sfondo: none;
}

/* Alias retrocompatibili con le classi dei contenuti già pubblicati */
:root {
	--ns-navy: var(--ns-ink);
	--ns-navy-dark: #08192e;
	--ns-navy-soft: var(--ns-ink-3);
}

/* =========================================================================
   2. Base e tipografia
   ====================================================================== */

body,
button,
input,
select,
textarea,
.ast-separate-container .ast-article-post {
	font-family: var(--ns-font);
	color: var(--ns-text);
}

body {
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.wp-block-heading {
	font-family: var(--ns-font);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--ns-text);
}

h2.wp-block-heading {
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

h2 {
	margin-bottom: 0.6em;
}

h3.wp-block-heading {
	font-size: 1.18rem;
}

.ns-lead {
	max-width: 62ch;
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--ns-muted);
}

.ns-eyebrow {
	display: inline-block;
	margin-bottom: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ns-accent);
}

.entry-content a {
	color: var(--ns-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.entry-content a:hover {
	color: var(--ns-accent-dark);
}

/* Larghezza standard: 1240px su desktop, fluida sotto. */
.ast-container {
	max-width: var(--ns-wrap);
}

/* =========================================================================
   3. Pulsanti
   ====================================================================== */

.wp-block-button__link,
.wpcf7-submit,
.wpcf7-form input[type="submit"] {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.wp-block-button__link {
	padding: 0.85rem 1.9rem;
	background-color: var(--ns-accent);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--ns-accent-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 96, 224, 0.28);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	padding: 0.7rem 1.75rem;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: transparent;
	box-shadow: none;
	opacity: 0.85;
}

/* =========================================================================
   4. Sezioni e spaziature
   ====================================================================== */

/* Le fasce occupano tutta la larghezza della finestra (alignfull) ma il loro
   contenuto resta allineato alla griglia da 1240px del resto del sito.

   La fascia esce dal contenitore con "margin: 0 calc(50% - 50vw)", quindi la
   stessa base (metà della finestra) è quella giusta anche per la spaziatura
   interna: così il contenuto delle fasce cade esattamente sulla colonna dei
   paragrafi e del logo, a qualsiasi larghezza.

   Astra impone la spaziatura dei blocchi di primo livello con
   ".entry-content > .wp-block-group": per avere la meglio i selettori delle
   fasce devono avere la stessa forza. */
.ns-hero,
.ns-section,
.entry-content > .wp-block-group.ns-hero,
.entry-content > .wp-block-group.ns-section {
	/* Sotto la larghezza della griglia il riferimento minimo tiene conto anche
	   dello scostamento delle fasce a tutta larghezza, così il contenuto non
	   finisce a filo bordo sul telefono. */
	padding-inline: max(1.75rem, calc(50vw - var(--ns-wrap) / 2 + 1.25rem));
}

.ns-section,
.entry-content > .wp-block-group.ns-section {
	padding-block: 4rem;
}	/* La fascia hero: il titolo di pagina respira, con più spazio in alto
	   (sotto l'intestazione fissa) che in basso. */
	.ns-hero,
	.entry-content > .wp-block-group.ns-hero {
		padding-block: 5.25rem 4.75rem;
	}

.ns-section--tight,
.entry-content > .wp-block-group.ns-section--tight {
	padding-block: 2.75rem;
}

.ns-section--soft {
	background: var(--ns-bg-soft);
}

.ns-section .wp-block-heading {
	margin-top: 0;
}

.ns-section-head {
	max-width: 70ch;
	margin-bottom: 2.5rem;
}

/* Intestazione della pagina già contenuta nel blocco hero. */
.ns-hero-page #primary {
	margin-top: 0 !important;
}

.ns-hero-page .site-main,
.ns-hero-page .entry-content,
.ns-hero-page .ns-hero {
	margin-top: 0;
	padding-top: 0;
}

/* =========================================================================
   5. Intestazione del sito (scura, a tutta larghezza, sticky)
   ====================================================================== */

/* La barra porta la stessa veste della fascia hero — colore di base, velo
   scuro inclinato e sfondo del sito — così l'intestazione e il titolo di
   pagina formano un'unica superficie, senza stacco di colore fra le due.
   Trasparenza e sfocatura sono sparite insieme al colore piatto: lo sfondo è
   ora quello del sito, e il velo lo rende comunque leggibile. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: var(--ns-ink);
	background-image: linear-gradient(120deg, rgba(9, 32, 59, 0.94) 0%, rgba(9, 32, 59, 0.80) 55%, rgba(0, 56, 128, 0.78) 100%), var(--ns-sfondo);
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.3s ease, background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Sulla pagina che si apre con la fascia hero il filo di separazione sparisce:
   barra e titolo di pagina sono la stessa superficie. */
.ns-hero-page .site-header {
	border-bottom-color: rgba(255, 255, 255, 0);
}

/* Con la barra di amministrazione visibile l'intestazione le resta sotto. */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header.ns-header--nascosta {
	transform: translateY(-100%);
}

/* Scorrendo, la fascia hero esce dallo schermo: la barra si stacca dal
   contenuto con un velo più coperto, riprende il filo di separazione e
   proietta un'ombra. */
.site-header.ns-header--scorsa {
	background-color: color-mix(in srgb, var(--ns-ink) 88%, #000);
	background-image: linear-gradient(120deg, rgba(6, 20, 38, 0.97) 0%, rgba(6, 20, 38, 0.93) 55%, rgba(0, 40, 92, 0.93) 100%), var(--ns-sfondo);
	border-bottom-color: rgba(255, 255, 255, 0.10);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Barra a tutta larghezza: lo sfondo arriva ai bordi e il contenuto lo segue
   (vedi la regola sul contenitore della griglia più sotto). */
.site-header .ast-primary-header-bar,
.site-header .main-header-bar,
.site-header .ast-main-header-wrap {
	background: transparent;
	border: 0;
}

.site-header .ast-builder-grid-row {
	min-height: var(--ns-header-h);
	align-items: center;
}

/* Due misure di Astra tengono la barra più alta del token del tema: lo spazio
   che il logo si prende sopra e sotto (16px per lato) e l'altezza minima del
   contenitore dell'intestazione, fissata a 80px. Con queste due correzioni la
   barra segue l'altezza dichiarata in :root. */
.site-header .ast-site-identity {
	padding: 12px 0;
}

/* Intestazione a tutta larghezza: Astra terrebbe il contenuto dentro la griglia
   da 1240px, lasciando circa 110px di vuoto per lato su un monitor da 1440.
   Togliendo il limite il logo va a sinistra e il menu a destra, con lo spazio
   laterale del token perché non tocchino i bordi. */
.site-header .ast-builder-grid-row-container {
	min-height: var(--ns-header-h);
	max-width: none;
	padding-inline: var(--ns-header-laterale);
}

/* Nella barra del telefono e del tablet Astra non usa il contenitore della
   barra da tavolo: fissa da sé 20px ai lati, con una regola che contiene un id
   (#masthead). Per avere la meglio questa regola ripete la stessa forma e vince
   perché il foglio del tema è caricato dopo quello di Astra. Lo spazio laterale
   è così lo stesso della barra da tavolo, e l'intestazione resta coerente. */
#masthead .ast-mobile-header-wrap .ast-primary-header-bar.ast-primary-header {
	padding-inline: var(--ns-header-laterale);
}

.site-header .site-logo-img img,
.site-header .custom-logo,
.site-header .ast-site-identity img {
	max-height: 48px;
	width: auto;
}

/* Menu mobile: pannello e collegamenti sulla tinta scura dell'intestazione. */
.site-header .ast-mobile-header-content {
	background: var(--ns-ink-2);
}

.site-header .ast-mobile-header-content .main-header-menu > .menu-item > .menu-link,
.site-header .ast-mobile-header-content .sub-menu .menu-link {
	color: #e9edf2;
}

.site-header .ast-mobile-header-content .menu-toggle,
.site-header .ast-mobile-header-content .ast-menu-toggle {
	color: #ffffff;
}

.site-header .site-title,
.site-header .ast-site-title-wrap .site-title a {
	color: #ffffff;
}

/* La voce della pagina iniziale è un'icona: la parola «Home» resta nel documento
   — serve ai lettori di schermo e alla mappa del sito — ma non si vede. Il
   disegno è una maschera, quindi prende il colore della voce, compresi il
   passaggio del puntatore e lo stato attivo. La misura è in rem perché il
   collegamento ha corpo zero: con le unità relative l'icona sparirebbe. */
.main-header-menu > .menu-item.ns-menu-home > .menu-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	min-width: 2.6rem;
	/* Il riquadro è più alto dell'icona di quanto lo sia una voce di testo:
	   così l'area cliccabile e l'altezza della voce restano identiche a quelle
	   delle altre voci del menu (69px). */
	padding: 1.6rem 0.8rem;
}

.main-header-menu > .menu-item.ns-menu-home > .menu-link::before {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11.5V21h7v-6h6v6h7V11.5Z'/%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='M12 3 2 11.5V21h7v-6h6v6h7V11.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Nel pannello del menu mobile la voce è una riga come le altre: l'icona sta a
   sinistra invece che al centro, così resta allineata al resto dell'elenco. Il
   selettore è lungo come quelli del menu mobile di Astra, che altrimenti
   impone alla voce altezza e spaziatura proprie. */
.site-header .ast-mobile-header-content .main-navigation .main-header-menu .menu-item.ns-menu-home > .menu-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	/* Stesse misure delle altre voci del pannello: spaziatura orizzontale di
	   Astra e altezza pari alla loro interlinea, perché senza testo la voce non
	   ha una riga che le dia altezza e resterebbe alta quanto la sola icona. */
	padding: 0 20px;
	min-height: 20px;
}

.site-header .ast-mobile-header-content .main-navigation .main-header-menu .menu-item.ns-menu-home > .menu-link::before {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
}

/* Menu principale.
   Astra allinea le voci con un'interlinea pari all'altezza della barra (80px) e
   un'altezza fissa: sono quelle, non il token del tema, a fissare
   l'intestazione a 96px. Riportandole a misura naturale la barra scende a 72px
   e il pulsante di invito resta proporzionato. */
.main-header-menu > .menu-item > .menu-link {
	color: #e9edf2;
	font-weight: 500;
	font-size: 0.97rem;
	height: auto;
	min-height: 0;
	line-height: 1.45;
	padding: 1.45rem 0.9em;
}

.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current_page_item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
	color: var(--ns-accent-light);
}

.main-header-menu > .menu-item > .menu-link::after {
	background-color: var(--ns-accent-light);
}

.main-header-menu .sub-menu {
	background: var(--ns-ink-2);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
	padding: 0.5rem;
}

.main-header-menu .sub-menu .menu-link {
	color: #cfd6de;
	padding: 0.55em 0.9em;
	border-radius: 8px;
}

.main-header-menu .sub-menu .menu-link:hover {
	background: rgba(0, 96, 224, 0.18);
	color: #ffffff;
}

/* Pulsante di invito dentro il menu. Astra allinea le voci del menu con una
   interlinea pari all'altezza della barra (80px): senza riportarla a un valore
   normale il pulsante eredita quell'altezza e diventa una fascia alta quanto
   l'intestazione. Qui si fissa interlinea, altezza e spaziatura. */
.ns-header-cta {
	margin-left: 0.9rem;
}

.ns-header-cta > a {
	display: inline-flex;
	align-items: center;
	padding: 0.42rem 1.1rem;
	border-radius: 999px;
	background: var(--ns-accent);
	color: #ffffff !important;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.2;
}

.ns-header-cta > a:hover {
	background: var(--ns-accent-dark);
}

/* Icona del menu su mobile: Astra la colora con il colore principale del
   tema, che su fondo scuro non si legge. L'icona è un SVG riempito con
   currentColor, quindi va forzato anche il riempimento. */
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-minimal .ast-menu-toggle,
.ast-mobile-header-content .ast-menu-toggle {
	color: #ffffff;
}

.site-header .ast-mobile-menu-trigger-minimal.menu-toggle .ast-mobile-svg,
.site-header .ast-mobile-menu-trigger-minimal.menu-toggle .ast-mobile-svg path,
.site-header .ast-mobile-header-content .ast-menu-toggle svg {
	fill: #ffffff;
}

/* =========================================================================
   6. Hero con lo sfondo di netspeak.it
   ====================================================================== */

.ns-hero {
	position: relative;
	background-color: var(--ns-ink);
	background-image: linear-gradient(120deg, rgba(9, 32, 59, 0.94) 0%, rgba(9, 32, 59, 0.80) 55%, rgba(0, 56, 128, 0.78) 100%), var(--ns-sfondo);
	background-size: cover;
	background-position: center;
	color: #ffffff;
	overflow: hidden;
}

.ns-hero .wp-block-heading,
.ns-hero h1 {
	color: #ffffff;
}

.ns-hero__title {
	margin: 0 0 1.1rem;
	font-size: clamp(2.05rem, 4.2vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.ns-hero__lead {
	max-width: 62ch;
	margin: 0 0 1.9rem;
	font-size: 1.14rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.84);
}

.ns-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: #ffffff;
}

.ns-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
	padding-top: 2.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Il distacco dei blocchi in griglia è dato dal gap: quello che WordPress
   aggiunge fra un figlio e il successivo sposterebbe le celle una rispetto
   all'altra. */
.ns-kpis > *,
.ns-grid > * {
	align-self: start;
}

.ns-kpis > * + *,
.ns-grid > * + * {
	margin-block-start: 0;
}

.ns-kpi__value {
	display: block;
	font-size: clamp(1.6rem, 2.8vw, 2.3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.ns-kpi__label {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.94rem;
	color: rgba(255, 255, 255, 0.7);
}

/* =========================================================================
   7. Griglie e schede
   ====================================================================== */

.ns-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ns-grid--two {
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.ns-card {
	--ns-card-pad: 2rem;
	position: relative;
	height: 100%;
	padding: var(--ns-card-pad);
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius);
	background: var(--ns-bg);
	box-shadow: var(--ns-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ns-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	border-radius: var(--ns-radius) var(--ns-radius) 0 0;
	background: linear-gradient(90deg, var(--ns-accent) 0%, var(--ns-accent-light) 100%);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ns-card:hover {
	transform: translateY(-4px);
	border-color: rgba(0, 96, 224, 0.35);
	box-shadow: var(--ns-shadow);
}

.ns-card:hover::before {
	opacity: 1;
}

.ns-card .wp-block-heading {
	margin: 0 0 0.75rem;
	font-size: 1.22rem;
}

.ns-card p {
	margin-bottom: 0.6rem;
	color: var(--ns-muted);
}

.ns-card p:last-child {
	margin-bottom: 0;
}

.ns-card a {
	font-weight: 600;
}

.ns-card__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.15rem;
	border-radius: 14px;
	background: var(--ns-accent-soft);
	color: var(--ns-accent);
	font-size: 1.35rem;
	font-weight: 700;
}

.ns-tag {
	display: inline-block;
	margin-bottom: 0.9rem;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: var(--ns-accent-soft);
	color: var(--ns-accent-dark);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* =========================================================================
   8. Schede tecniche, elenchi, pannelli
   ====================================================================== */

.ns-spec {
	list-style: none;
	margin: 1.15rem 0 0;
	padding: 0;
}

.ns-spec li {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.62rem 0;
	border-bottom: 1px dashed var(--ns-border);
	font-size: 0.95rem;
	color: var(--ns-muted);
}

.ns-spec li:last-child {
	border-bottom: 0;
}

.ns-spec li span {
	font-weight: 600;
	color: var(--ns-text);
	text-align: right;
}

.ns-check {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.ns-check li {
	position: relative;
	margin-bottom: 0.7rem;
	padding-left: 2rem;
	color: var(--ns-muted);
}

.ns-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--ns-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230060e0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

.ns-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ns-step;
}

.ns-steps li {
	position: relative;
	counter-increment: ns-step;
	margin-bottom: 1.6rem;
	padding-left: 3.6rem;
	color: var(--ns-muted);
}

.ns-steps li::before {
	content: counter(ns-step);
	position: absolute;
	left: 0;
	top: -0.1rem;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--ns-ink);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95rem;
}

.ns-steps li strong {
	display: block;
	color: var(--ns-text);
}

.ns-panel {
	height: 100%;
	padding: 2.2rem;
	border-radius: var(--ns-radius);
	background: var(--ns-ink);
	box-shadow: var(--ns-shadow);
	color: rgba(255, 255, 255, 0.86);
}

.ns-panel .wp-block-heading {
	color: #ffffff;
}

.ns-panel .ns-spec li {
	border-bottom-color: rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.72);
}

.ns-panel .ns-spec li span {
	color: #ffffff;
}

/* Blocco finale: sfondo del sito con velo scuro. */
.ns-cta {
	position: relative;
	padding: clamp(2.25rem, 4vw, 3.5rem);
	border-radius: var(--ns-radius);
	background-color: var(--ns-ink);
	background-image: linear-gradient(115deg, rgba(6, 20, 36, 0.93) 0%, rgba(0, 40, 96, 0.86) 100%), var(--ns-sfondo);
	background-size: cover;
	background-position: center;
	color: #ffffff;
	overflow: hidden;
}

.ns-cta .wp-block-heading {
	margin-top: 0;
	color: #ffffff;
}

.ns-cta p {
	color: rgba(255, 255, 255, 0.85);
}

/* =========================================================================
   9. Footer professionale
   ====================================================================== */

.ns-footer {
	background: var(--ns-footer-bg);
	color: rgba(255, 255, 255, 0.72);
	padding: 3.5rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ns-footer__inner {
	max-width: var(--ns-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.ns-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: 2.5rem;
}

.ns-footer__logo {
	max-height: 56px;
	width: auto;
	margin-bottom: 1.2rem;
}

.ns-footer__nome {
	display: block;
	margin-bottom: 1.1rem;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffffff;
}

.ns-footer__invito {
	margin: 1.5rem 0 0;
}

.ns-footer__bottone {
	display: inline-block;
	padding: 0.65rem 1.35rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	font-weight: 600;
}

.ns-footer__bottone:hover {
	background: var(--ns-accent);
	border-color: var(--ns-accent);
	color: #ffffff !important;
	text-decoration: none;
}

.ns-footer__copia {
	margin: 0;
}

.ns-footer__claim {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.68);
}

.ns-footer__titolo {
	margin: 0 0 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ns-accent-light);
}

.ns-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ns-footer li {
	margin-bottom: 0.6rem;
	font-size: 0.95rem;
}

.ns-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.ns-footer a:hover {
	color: var(--ns-accent-light);
	text-decoration: underline;
}

.ns-footer__contatti li span {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/* Gli indirizzi di posta diretti stanno sotto i collegamenti della colonna
   Azienda: etichetta sopra e indirizzo sotto, con corpo più piccolo per stare
   su una riga sola. */
.ns-footer__titolo--scrivici {
	margin-top: 1.8rem;
}

.ns-footer__email li {
	margin-bottom: 0.7rem;
	font-size: 0.86rem;
}

.ns-footer__email a {
	overflow-wrap: anywhere;
}

.ns-footer__bottom {
	margin-top: 3rem;
	padding: 1.4rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	font-size: 0.84rem;
	color: rgba(255, 255, 255, 0.55);
}

.ns-footer__legale {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.ns-torna-su {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
}

/* =========================================================================
   10. Modulo di contatto
   ====================================================================== */

.wpcf7-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.95rem;
}

.wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	padding: 0.78rem 1rem;
	border: 1px solid var(--ns-border);
	border-radius: var(--ns-radius-sm);
	background: #ffffff;
	font-family: var(--ns-font);
	font-size: 1rem;
}

.wpcf7-form-control:not(.wpcf7-submit):focus {
	border-color: var(--ns-accent);
	outline: 2px solid var(--ns-accent-soft);
}

/* La sezione che ospita il modulo (classe `ns-modulo`, assegnata nel contenuto)
   si stringe a una misura da lettura e si centra: su desktop il modulo largo
   quanto la pagina faceva sembrare i campi vuoti e allontanava le etichette dai
   campi. Sotto gli 800px la misura non serve e il modulo torna a tutta
   larghezza. */
@media (min-width: 800px) {
	.entry-content .ns-modulo > .ns-section-head,
	.entry-content .ns-modulo .wpcf7 {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}
}

.wpcf7-submit {
	padding: 0.9rem 2.1rem;
	border: 0;
	background: var(--ns-accent);
	color: #ffffff;
	font-family: var(--ns-font);
	font-size: 1rem;
	cursor: pointer;
}

.wpcf7-submit:hover {
	background: var(--ns-accent-dark);
}

.wpcf7-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.wpcf7-response-output {
	border-radius: var(--ns-radius-sm);
	border-color: var(--ns-accent) !important;
}

.wpcf7-not-valid-tip {
	color: #c0392b;
	font-size: 0.88rem;
}

/* =========================================================================
   11. Adattamenti responsive
   ====================================================================== */

@media (max-width: 1024px) {
	.ns-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}

@media (max-width: 780px) {
	.site-header .ast-builder-grid-row {
		min-height: 62px;
	}

	.site-header .main-header-menu > .menu-item > .menu-link {
		padding-block: 1rem;
	}

	.site-header .site-logo-img img,
	.site-header .custom-logo {
		max-height: 38px;
	}

	.ns-section,
	.entry-content > .wp-block-group.ns-section {
		padding-block: 2.85rem;
	}

	.ns-hero,
	.entry-content > .wp-block-group.ns-hero {
		padding-block: 3.5rem 3rem;
	}

	.ns-hero__title {
		font-size: 2rem;
	}

	.ns-card {
		--ns-card-pad: 1.6rem;
	}

	.ns-panel {
		padding: 1.6rem;
	}

	.ns-footer__grid {
		grid-template-columns: 1fr;
	}

	.ns-footer__bottom {
		justify-content: flex-start;
	}
}

/* =========================================================================
   12. Prevalenza sulle regole di Astra
   ----------------------------------------------------------------------
   Astra interviene su paragrafi, titoli, elenchi e pulsanti del contenuto con
   selettori come ".entry-content p" (una classe più un tipo) o con selettori
   a più classi: le regole del design system, che spesso hanno la sola classe,
   perdono la cascata. Qui sono raccolti gli aggiustamenti necessari, con la
   specificità alzata apposta. Tenerli in un blocco solo evita di appesantire
   tutti i selettori del foglio.
   ====================================================================== */

/* Paragrafi del contenuto. */
.entry-content .ns-eyebrow {
	margin-bottom: 0.8rem;
}

.entry-content .ns-hero__lead {
	margin-bottom: 1.9rem;
}

.entry-content .ns-kpi__value {
	margin-bottom: 0;
}

.entry-content .ns-kpi__label {
	margin: 0.4rem 0 0;
}

.entry-content .ns-tag {
	margin-bottom: 0.9rem;
}

.entry-content .ns-card p {
	margin-bottom: 0.6rem;
}

.entry-content .ns-card p:last-child {
	margin-bottom: 0;
}

/* Titoli: Astra azzera la spaziatura sotto i titoli del contenuto e nelle
   colonne l'avvicinamento al testo diventa fastidioso. */
.entry-content h1.wp-block-heading,
.entry-content h2.wp-block-heading,
.entry-content h3.wp-block-heading,
.entry-content h4.wp-block-heading {
	margin-bottom: 0.6em;
}

.entry-content .ns-card > .wp-block-heading {
	margin-bottom: 0.75rem;
}

.entry-content .ns-hero .ns-hero__title {
	margin: 0 0 1.1rem;
}

.entry-content .ns-card > .ns-tag {
	margin-bottom: 0.9rem;
}

/* Elenchi del design system: niente rientro né margini di WordPress, che
   sposterebbero i simboli creati con il CSS. */
.entry-content ul.ns-spec,
.entry-content ul.ns-check,
.entry-content ul.ns-steps {
	margin: 1.15rem 0 0;
	padding-left: 0;
	list-style: none;
}

.entry-content ul.ns-check {
	margin-top: 1.25rem;
}

.entry-content ul.ns-spec li {
	margin-bottom: 0;
	padding: 0.62rem 0;
}

.entry-content ul.ns-check li {
	margin-bottom: 0.7rem;
	padding-left: 2rem;
}

.entry-content ul.ns-steps li {
	margin-bottom: 1.6rem;
	padding-left: 3.6rem;
}

/* Pulsanti. */
.entry-content .wp-block-buttons .wp-block-button .wp-block-button__link {
	padding: 0.85rem 1.9rem;
}

.entry-content .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.7rem 1.75rem;
}

/* Il pulsante con contorno sulle fasce scure deve restare leggibile. */
.entry-content .ns-hero .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link,
.entry-content .ns-cta .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.55);
}

/* Modulo di accesso all'area riservata. Astra impone ai figli del contenuto una
   larghezza massima e i margini automatici;
   ".entry-content > div.ns-riservata" (due classi più un tipo) ha la meglio
   senza ricorrere a "!important". La fascia esce così dal contenitore e
   prende tutta la finestra, come le fasce del contenuto. */
.entry-content > div.ns-riservata {
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

/* Pulsante di invito dentro il menu principale. */
.main-header-menu .menu-item.ns-header-cta > .menu-link {
	padding: 0.42rem 1.1rem;
	line-height: 1.2;
}

/* =========================================================================
   13. Immagini
   ----------------------------------------------------------------------
   Le foto arrivano dai segnaposto dei file di contenuto: qui si stabilisce
   come si comportano \u2014 banda a tutta larghezza oppure immagine in testa a
   una scheda. I selettori hanno la classe del contenuto in più per avere la
   meglio sulle regole di Astra. */

.entry-content .wp-block-image {
	margin: 0;
}

.entry-content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ns-radius);
}

/* Banda fotografica: occupa tutta la larghezza e ritaglia la foto. */
.entry-content .wp-block-image.ns-banda img {
	height: clamp(220px, 32vw, 440px);
	object-fit: cover;
	border-radius: 0;
}

/* Foto in testa alla scheda: arriva ai bordi della scheda. */
.entry-content .wp-block-image.ns-card__media {
	margin: calc(var(--ns-card-pad, 2rem) * -1) calc(var(--ns-card-pad, 2rem) * -1) 1.4rem;
}

.entry-content .wp-block-image.ns-card__media img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--ns-radius) var(--ns-radius) 0 0;
}

/* Due foto affiancate (per esempio nella pagina Chi siamo). */
.entry-content .wp-block-columns.ns-foto-doppia {
	gap: 1.5rem;
}

/* Menu dell'intestazione: Astra colora con la tavolozza chiara del tema sia le
   tendine sia il pannello mobile, che sul fondo scuro restano illeggibili. */
.site-header .ast-mobile-header-content .main-navigation .main-header-menu,
.site-header .ast-mobile-header-content .main-navigation .main-header-menu .sub-menu,
.site-header .main-navigation .sub-menu {
	background-color: transparent;
}

.site-header .main-header-menu .sub-menu {
	background-color: var(--ns-ink-2);
}

/* Pulsante di invito: nel menu mobile Astra lo rende bianco su bianco. Le voci
   del menu ricevono da Astra un'altezza pari a quella della barra: il pulsante
   la eredita e diventa una fascia alta quanto l'intestazione. Va quindi
   riportato alla sua misura naturale e centrato rispetto alle altre voci. */
.main-header-menu > .menu-item.ns-header-cta > .menu-link,
.ast-mobile-header-content .main-navigation ul .menu-item.ns-header-cta > .menu-link {
	display: inline-flex;
	align-items: center;
	align-self: center;
	height: auto;
	min-height: 0;
	flex: 0 0 auto;
	padding: 0.42rem 1.1rem;
	border-radius: 999px;
	background-color: var(--ns-accent);
	color: #ffffff;
	font-size: 0.88rem;
	line-height: 1.2;
}

.main-header-menu > .menu-item.ns-header-cta > .menu-link:hover,
.main-header-menu > .menu-item.ns-header-cta > .menu-link:focus,
.ast-mobile-header-content .main-navigation ul .menu-item.ns-header-cta > .menu-link:hover {
	background-color: var(--ns-accent-dark);
	color: #ffffff;
}

/* Le voci del menu mobile hanno un fondo chiaro imposto da Astra: sul pannello
   scuro vanno rese trasparenti, altrimenti il testo chiaro non si legge. */
.site-header .ast-mobile-header-content .main-navigation .main-header-menu .menu-item > .menu-link {
	background-color: transparent;
	color: #e9edf2;
}

/* La regola qui sopra è più forte di quella del pulsante di invito e nel menu
   mobile gli toglierebbe il fondo blu, lasciandolo testo bianco su pannello.
   Il pulsante resta quindi un pulsante anche a menu aperto. */
.site-header .ast-mobile-header-content .main-navigation .main-header-menu .menu-item.ns-header-cta > .menu-link {
	background-color: var(--ns-accent);
	color: #ffffff;
}

.site-header .ast-mobile-header-content .main-navigation .main-header-menu .menu-item.ns-header-cta > .menu-link:hover,
.site-header .ast-mobile-header-content .main-navigation .main-header-menu .menu-item.ns-header-cta > .menu-link:focus {
	background-color: var(--ns-accent-dark);
	color: #ffffff;
}

.site-header .ast-mobile-header-content .main-navigation .main-header-menu .menu-item > .menu-link:hover,
.site-header .ast-mobile-header-content .main-navigation .main-header-menu .menu-item > .menu-link:focus {
	background-color: rgba(255, 255, 255, 0.07);
	color: #ffffff;
}

.site-header .ast-mobile-header-content .main-navigation .main-header-menu .menu-item.current-menu-item > .menu-link {
	color: var(--ns-accent-light);
}

/* Fra la larghezza piena e il passaggio al menu mobile la barra deve restare su
   una riga sola: le voci e il pulsante si stringono un poco. Senza questo
   adattamento il pulsante di invito va a capo e l'intestazione raddoppia in
   altezza. */
@media (max-width: 1100px) {
	.main-header-menu {
		flex-wrap: nowrap;
	}

	.main-header-menu > .menu-item {
		/* Le voci non si comprimono: se manca spazio va a capo il pulsante del
		   menu, non il testo delle voci. */
		flex-shrink: 0;
	}

	.main-header-menu > .menu-item > .menu-link {
		padding: 0.5em 0.62em;
		font-size: 0.95rem;
	}

	.main-header-menu > .menu-item.ns-header-cta > .menu-link {
		padding: 0.38rem 0.85rem;
		font-size: 0.86rem;
	}
}

/* =========================================================================
   14. Mappa del sito
   ----------------------------------------------------------------------
   L'elenco è generato dallo shortcode [netspeak_mappa]: segue il menu
   principale, con le sottopagine rientrate, e chiude con le informative
   legali. Due colonne su desktop, una su telefono. */

.ns-mappa {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 2.5rem;
}

.ns-mappa > li {
	break-inside: avoid;
	margin-bottom: 1.1rem;
}

.ns-mappa > li > a {
	font-weight: 600;
}

.ns-mappa ul {
	margin: 0.55rem 0 0;
	padding: 0 0 0 1rem;
	list-style: none;
	border-left: 2px solid var(--ns-border);
}

.ns-mappa ul li {
	margin-bottom: 0.45rem;
	font-size: 0.95rem;
}

.ns-mappa a {
	color: var(--ns-accent-dark);
	text-decoration: none;
}

.ns-mappa a:hover,
.ns-mappa a:focus {
	text-decoration: underline;
}

.ns-mappa__titolo {
	margin: 2rem 0 1rem;
	font-size: 1.05rem;
}

.ns-mappa--informative {
	columns: 1;
}

@media (max-width: 780px) {
	.ns-mappa {
		columns: 1;
	}
}

/* =========================================================================
   15. Rifiniture grafiche
   ---------------------------------------------------------------------- */

/* Le fasce a tutta larghezza si calcolano su "50vw", che comprende lo spazio
   della barra di scorrimento: sporgono così di una decina di pixel e la pagina
   si può spostare di lato. Il taglio va sul contenitore della pagina, non su
   <html>: "clip" non crea un contenitore di scorrimento, quindi l'intestazione
   resta agganciata in alto, mentre con "hidden" su <html> si sgancerebbe. */
.hfeed.site {
	overflow-x: clip;
}

@supports not (overflow-x: clip) {
	.hfeed.site {
		overflow-x: hidden;
	}
}
   ----------------------------------------------------------------------
   Abbellimenti che non spostano nulla: aloni di luce, trame, piccoli
   dettagli di profondità e la comparsa graduale delle sezioni. Stanno in un
   blocco separato, in fondo, per non confonderli con le regole che
   definiscono il design system.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Hero: alone di luce e trama di punti
   ---------------------------------------------------------------------- */

.ns-hero::before,
.ns-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

/* Due aloni che danno profondità al blu: uno in alto a sinistra, dove sta il
   titolo, e uno in basso a destra, in diagonale. */
.ns-hero::before {
	inset: 0;
	background:
		radial-gradient(115% 85% at 8% 0%, rgba(107, 164, 255, 0.26) 0%, rgba(107, 164, 255, 0) 58%),
		radial-gradient(78% 72% at 100% 106%, rgba(0, 96, 224, 0.36) 0%, rgba(0, 96, 224, 0) 62%);
}

/* Trama di punti, molto tenue, sfumata ai bordi: un accenno tecnico che non
   disturba la lettura. */
.ns-hero::after {
	right: -4rem;
	bottom: -6rem;
	width: min(46vw, 34rem);
	height: min(46vw, 34rem);
	background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.2px, transparent 1.2px);
	background-size: 20px 20px;
	opacity: 0.42;
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
	mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
}

/* Il contenuto resta sopra i due aloni. */
.ns-hero > * {
	position: relative;
	z-index: 1;
}

.ns-hero__title {
	text-shadow: 0 2px 26px rgba(4, 14, 26, 0.35);
}

/* -------------------------------------------------------------------------
   Occhiello: barretta di colore prima del testo
   ---------------------------------------------------------------------- */

.ns-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.ns-eyebrow::before {
	content: "";
	width: 1.6rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.7;
}

/* Sul fondo scuro l'occhiello usa la tinta chiara: il blu del logo sul blu
   scuro dell'hero non arriverebbe a 4,5:1. */
.entry-content .ns-hero .ns-eyebrow,
.entry-content .ns-cta .ns-eyebrow {
	color: var(--ns-accent-light);
}

/* -------------------------------------------------------------------------
   Indicatori dell'hero
   ---------------------------------------------------------------------- */

.ns-kpi__value::before {
	content: "";
	display: block;
	width: 1.75rem;
	height: 3px;
	margin-bottom: 0.9rem;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--ns-accent-light) 0%, rgba(107, 164, 255, 0) 100%);
}

/* -------------------------------------------------------------------------
   Schede: velo di luce in alto a destra all'accostamento del puntatore
   ---------------------------------------------------------------------- */

.ns-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(120% 80% at 100% 0%, rgba(0, 96, 224, 0.08) 0%, rgba(0, 96, 224, 0) 62%);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ns-card:hover::after {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   Sezioni su fondo chiaro: sfumatura invece del grigio piatto
   ---------------------------------------------------------------------- */

.ns-section--soft {
	background-image: linear-gradient(180deg, #f8fafd 0%, var(--ns-bg-soft) 100%);
}

/* -------------------------------------------------------------------------
   Pannello e blocco finale: più profondità
   ---------------------------------------------------------------------- */

.ns-panel {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.10);
	background-image:
		radial-gradient(120% 120% at 100% 0%, rgba(107, 164, 255, 0.20) 0%, rgba(107, 164, 255, 0) 55%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%);
}

.ns-cta {
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 30px 70px rgba(6, 20, 36, 0.32);
}

.ns-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(90% 140% at 12% 112%, rgba(0, 96, 224, 0.45) 0%, rgba(0, 96, 224, 0) 58%),
		radial-gradient(58% 90% at 92% -10%, rgba(107, 164, 255, 0.32) 0%, rgba(107, 164, 255, 0) 62%);
}

.ns-cta > * {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------
   Pulsanti e collegamenti: riflesso, ombra e contorno di messa a fuoco
   ---------------------------------------------------------------------- */

.entry-content .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 58%);
	box-shadow: 0 8px 20px rgba(0, 96, 224, 0.22);
}

.entry-content .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 12px 28px rgba(0, 96, 224, 0.32);
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wpcf7-submit:focus-visible,
.ns-torna-su:focus-visible {
	outline: 3px solid var(--ns-accent-light);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Intestazione e footer: filo di luce sui bordi
   ---------------------------------------------------------------------- */

.site-header::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(107, 164, 255, 0.40) 0%, rgba(107, 164, 255, 0.06) 45%, rgba(107, 164, 255, 0) 100%);
}

.ns-footer {
	position: relative;
	background-image: radial-gradient(90% 130% at 10% 0%, rgba(0, 96, 224, 0.16) 0%, rgba(0, 96, 224, 0) 58%);
	background-repeat: no-repeat;
}

.ns-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ns-accent) 0%, var(--ns-accent-light) 42%, rgba(107, 164, 255, 0) 100%);
}

/* -------------------------------------------------------------------------
   Comparsa graduale delle sezioni allo scorrimento
   ----------------------------------------------------------------------
   La regola che nasconde gli elementi vale solo sotto "ns-js", classe messa
   su <html> all'inizio della pagina e tolta se lo script della comparsa non
   parte entro tre secondi. Senza JavaScript non si nasconde niente. */

html.ns-js .entry-content > .wp-block-group.ns-section:not(.ns-hero),
html.ns-js .entry-content .ns-card {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease var(--ns-ritardo, 0ms), transform 0.55s ease var(--ns-ritardo, 0ms);
}

html.ns-js .entry-content > .wp-block-group.ns-section.ns-rivela--visibile,
html.ns-js .entry-content .ns-card.ns-rivela--visibile {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.ns-js .entry-content > .wp-block-group.ns-section:not(.ns-hero),
	html.ns-js .entry-content .ns-card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================================
   16. Banner informativo sui cookie
   ----------------------------------------------------------------------
   Il modulo è sempre presente nella pagina ma nascosto: lo mostra cookie.js
   a chi non ha ancora letto l'avviso. Il sito usa solo cookie tecnici, quindi
   il banner informa e non blocca nulla.
   ====================================================================== */

.ns-cookie {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	padding: 0 1rem 1rem;
	/* La comparsa è solo uno scorrimento: se la classe non arrivasse mai, il
	   banner resterebbe comunque leggibile più in basso di 14px. */
	transform: translateY(14px);
	transition: transform 0.3s ease;
}

.ns-cookie[hidden],
.ns-cookie--uscito {
	display: none;
}

.ns-cookie--visibile {
	transform: none;
}

.ns-cookie:focus {
	outline: none;
}

.ns-cookie__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.75rem;
	max-width: var(--ns-wrap);
	margin: 0 auto;
	padding: 1.15rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--ns-radius);
	background: var(--ns-header-bg);
	background: color-mix(in srgb, var(--ns-header-bg) 97%, #000);
	box-shadow: 0 18px 48px rgba(6, 20, 36, 0.42);
	color: rgba(255, 255, 255, 0.82);
}

.ns-cookie__testo {
	flex: 1 1 22rem;
}

.ns-cookie__testo p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
}

.ns-cookie__testo .ns-cookie__titolo {
	margin: 0 0 0.3rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: #ffffff;
}

.ns-cookie__azioni {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 1.15rem;
}

.ns-cookie__ok {
	padding: 0.6rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--ns-accent);
	color: #ffffff;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.ns-cookie__ok:hover,
.ns-cookie__ok:focus {
	background: var(--ns-accent-dark);
}

.ns-cookie__link {
	color: #ffffff;
	font-size: 0.92rem;
	font-weight: 600;
	text-underline-offset: 2px;
}

.ns-cookie__link:hover {
	color: var(--ns-accent-light);
}

/* Il pulsante "Gestisci i cookie" nel footer si presenta come un collegamento. */
.ns-footer__cookie {
	padding: 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.82);
	font: inherit;
	font-size: 0.84rem;
	cursor: pointer;
}

.ns-footer__cookie:hover,
.ns-footer__cookie:focus {
	color: var(--ns-accent-light);
	text-decoration: underline;
}

@media (max-width: 780px) {
	.ns-cookie {
		padding: 0 0.75rem 0.75rem;
	}

	.ns-cookie__inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 1.1rem 1.15rem;
	}

	/* In colonna la base flessibile va in altezza: senza questa correzione il
	   testo si prende 22rem di spazio verticale. */
	.ns-cookie__testo {
		flex: 0 1 auto;
	}

	.ns-cookie__azioni {
		width: 100%;
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ns-cookie {
		transition: none;
	}
}

/* =========================================================================
   17. Area riservata
   ----------------------------------------------------------------------
   Il modulo di accesso della pagina protetta arriva da un mu-plugin, non dai
   blocchi del contenuto: le sue regole vivono quindi qui, ma sono autonome e
   non dipendono dalle classi dei capitoli precedenti. La fascia riprende la
   veste dell'hero, così la porta chiusa non stona con il resto del sito.
   ====================================================================== */

.ns-riservata {
	position: relative;
	/* La fascia esce dal contenitore e prende tutta la finestra: la regola sta
	   nel capitolo 12, dove stanno le prevalenze su Astra. Il taglio di troppo
	   lo fa già `.hfeed.site` (capitolo 15). */
	padding-block: clamp(3.5rem, 8vw, 5.5rem);
	padding-inline: max(1.75rem, calc(50vw - var(--ns-wrap) / 2 + 1.25rem));
	background-color: var(--ns-ink);
	background-image: linear-gradient(120deg, rgba(9, 32, 59, 0.94) 0%, rgba(9, 32, 59, 0.8) 55%, rgba(0, 56, 128, 0.78) 100%), var(--ns-sfondo);
	background-size: cover;
	background-position: center;
	color: #ffffff;
}

.ns-riservata__box {
	max-width: 520px;
	margin: 0 auto;
	padding: 2.25rem 2rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--ns-radius);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 18px 44px rgba(4, 14, 26, 0.28);
	text-align: center;
}

/* Sul fondo scuro l'occhiello usa la tinta chiara, come nell'hero. */
.entry-content .ns-riservata .ns-eyebrow {
	color: var(--ns-accent-light);
}

.ns-riservata__titolo {
	margin: 0 0 0.9rem;
	font-size: clamp(1.6rem, 3vw, 2.05rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.ns-riservata__testo {
	margin: 0 0 1.6rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
}

.ns-riservata__errore {
	margin: 0 0 1.4rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid rgba(255, 160, 150, 0.45);
	border-radius: var(--ns-radius-sm);
	background: rgba(192, 57, 43, 0.25);
	color: #ffe2de;
	font-size: 0.94rem;
	line-height: 1.6;
}

.ns-riservata__form label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.86);
	text-align: left;
}

.ns-riservata__form input[type="password"] {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--ns-radius-sm);
	background: #ffffff;
	color: var(--ns-text);
	font-family: var(--ns-font);
	font-size: 1rem;
}

.ns-riservata__form input[type="password"]:focus {
	border-color: var(--ns-accent-light);
	outline: 2px solid rgba(107, 164, 255, 0.5);
}

.ns-riservata__form button {
	width: 100%;
	margin-top: 1.15rem;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--ns-accent);
	color: #ffffff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.ns-riservata__form button:hover,
.ns-riservata__form button:focus {
	background: var(--ns-accent-dark);
}

.ns-riservata__nota {
	margin: 1.5rem 0 0;
	font-size: 0.86rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.66);
}

.entry-content .ns-riservata__nota a {
	color: #ffffff;
	font-weight: 600;
}

.entry-content .ns-riservata__nota a:hover,
.entry-content .ns-riservata__nota a:focus {
	color: var(--ns-accent-light);
}

@media (max-width: 780px) {
	.ns-riservata__box {
		padding: 1.75rem 1.25rem;
	}
}

/* =========================================================================
   Selettore di lingua
   ----------------------------------------------------------------------
   Nel menu principale la voce arriva da Polylang e porta la bandierina
   davanti al nome. Sul telefono la voce del menu resterebbe chiusa dentro il
   pannello, quindi la bandierina sta nella barra, affianco al pulsante del
   menu: la aggiunge functions.php.
   ====================================================================== */

/* Voce del selettore nel menu principale: distacca la bandierina dall'ultima
   voce, come fa il pulsante di invito. */
.main-header-menu > .menu-item.lang-item {
	margin-left: 0.9rem;
}

.main-header-menu > .menu-item.lang-item > .menu-link {
	display: inline-flex;
	align-items: center;
}

/* La bandiera arriva da Polylang con la misura scritta nell'immagine stessa
   (16x11): per portarla alla misura dell'intestazione serve !important, che è
   l'unico modo per avere la meglio su uno stile in linea. */
.main-header-menu > .menu-item.lang-item img {
	display: block;
	width: 21px !important;
	height: auto !important;
	border-radius: 2px;
}

/* Bandierina accanto al pulsante del menu mobile. */
.ns-lingue {
	display: inline-flex;
	align-items: center;
	margin-right: 0.8rem;
}

.ns-lingue__scelta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	transition: background-color 0.15s ease;
}

.ns-lingue__scelta:hover,
.ns-lingue__scelta:focus-visible {
	background: rgba(255, 255, 255, 0.24);
}

.ns-lingue__scelta img {
	display: block;
	width: 22px !important;
	height: auto !important;
	border-radius: 2px;
}

/* La stessa bandierina, ma nella barra finale del footer: lì non c'è il resto
   della navigazione a dire di che cosa si tratta, quindi porta il nome della
   lingua accanto e una pillola che la stacca dai collegamenti vicini. Il
   selettore parte da ".ns-footer a", che ha la precedenza sulle classi del
   selettore: da qui la forma scritta per esteso. */
.ns-footer a.ns-lingue__scelta--piede {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: auto;
	height: auto;
	gap: 0.5rem;
	padding: 0.28rem 0.85rem 0.28rem 0.45rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
}

.ns-footer a.ns-lingue__scelta--piede:hover,
.ns-footer a.ns-lingue__scelta--piede:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.45);
	color: #ffffff;
	text-decoration: none;
}

.ns-lingue__bandiera {
	display: inline-flex;
	align-items: center;
}

/* Il selettore dentro il pannello del menu mobile ripeterebbe quello accanto
   al pulsante: se ne tiene uno solo. */
.site-header .ast-mobile-header-content .main-header-menu > .menu-item.lang-item {
	display: none;
}