/* ===========================================================================
   sv-responsive.css — layer responsive autoritativo. Caricato per ULTIMO.
   Breakpoint stile UIkit: 1200 (l) · 960 (m) · 640 (s).

   Perché serve: la consegna era un'app React desktop-first. Non aveva né un
   menu mobile né il collasso delle griglie, e i CSS di pagina ridefiniscono
   spesso .nav-links e le griglie SENZA media query — caricando dopo sv-base
   vincerebbero. Da qui si forza con !important dove necessario.

   Trucco di targeting: grid-template-columns è INERTE sugli elementi non-grid,
   quindi targettare per suffisso di classe è sicuro e copre anche le griglie
   dichiarate inline nei template.
   =========================================================================== */

/* ============ ≤ 1200px ============ */
@media (max-width: 1200px) {
	:root { --gutter: 20px; }
	.mega { width: min(90vw, 640px); }
}

/* ============ ≤ 960px (tablet) ============ */
@media (max-width: 960px) {
	/* Griglie di card → 2 colonne */
	[class*="-grid"], [class*="-cards"], [class*="-cols"], [class*="-strip"],
	[class*="-steps"], [class*="-inner"], [class*="-table"], .grid-3, .grid-4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	/* Layout a due colonne asimmetriche → una colonna già da tablet */
	.hero-split-grid, .cta-form-wrap, .foot-grid, [class*="-split"], [class*="-aside"] {
		grid-template-columns: 1fr !important;
	}

	/* ── Testata fissa (19/10) ─────────────────────────────────────────────
	   Da telefono e tablet la testata è fixed, non sticky: sticky si muoveva con
	   la pagina quando l'iPhone la fa rimbalzare in cima e in fondo, e con la
	   barra degli indirizzi che compare e sparisce. Il body le lascia il suo
	   spazio: --nav-h (sv-base.css, ridefinita dalle pagine) più il bordo da 1px.
	   Controllo: .pw/test-testata-fissa.js. */
	#main-nav.site-header { position: fixed; top: 0; left: 0; right: 0; }
	body { padding-top: calc(var(--nav-h, 72px) + 1px); }
	/* Chi è collegato ha la barra di WordPress in alto: fissa da 601px in su. */
	.admin-bar #main-nav.site-header { top: 32px; }

	/* ── Nav mobile ────────────────────────────────────────────────────────
	   Forzata con !important: i CSS di pagina ridefiniscono .nav-links senza
	   media query e caricano prima di questo file. */
	#main-nav .nav-links {
		display: none !important;
		position: fixed; inset: calc(var(--nav-h, 72px) + 1px) 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--surface);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-lg);
		padding: 8px 0;
		max-height: calc(100vh - var(--nav-h, 72px) - 1px);
		overflow-y: auto;
	}
	#main-nav.nav-open .nav-links { display: flex !important; }
	#main-nav .nav-links > a,
	#main-nav .nav-links .has-mega {
		padding: 14px 20px !important;
		font-size: 16px !important;
		border-bottom: 1px solid var(--border-soft);
	}
	#main-nav .nav-burger { display: flex !important; }
	#main-nav .nav-cta { display: none !important; }

	/* Mega menu: in linea nel drawer, aperto al tap (classe da sv-app.js) */
	#main-nav .mega-wrap { position: static; }
	#main-nav .mega {
		position: static; transform: none !important;
		width: auto; opacity: 1; pointer-events: auto;
		display: none; grid-template-columns: 1fr !important;
		border: 0; border-radius: 0; box-shadow: none;
		background: var(--bg-alt); padding: 4px 8px;
	}
	#main-nav .mega-wrap.mega-open .mega { display: grid; }
	#main-nav .mega-wrap:hover .mega:not(.mega-open) { opacity: 1; }
	.mega-foot { flex-direction: column; gap: 4px; }
}

/* ============ ≤ 640px (mobile): tutto a 1 colonna ============ */
@media (max-width: 640px) {
	[class*="-grid"], [class*="-cards"], [class*="-cols"], [class*="-strip"],
	[class*="-steps"], [class*="-inner"], [class*="-table"], [class*="-section"],
	[class*="-content"], [class*="-row"], [class*="-split"], [class*="-aside"],
	.grid-2, .grid-3, .grid-4, .form-grid, .foot-grid, .cta-form-wrap {
		grid-template-columns: 1fr !important;
	}

	/* Padding orizzontale uniforme: 16px ovunque */
	:root { --gutter: 16px; }
	section, .site-footer, .container { padding-left: 16px !important; padding-right: 16px !important; }
	/* Un margine solo: la sezione che ha dentro il .container non aggiunge il suo,
	   altrimenti i due 16px si sommano e il contenuto parte a 32px dal bordo. */
	section:has(> .container), .site-footer:has(> .container) { padding-left: 0 !important; padding-right: 0 !important; }
	#main-nav .container { padding-left: 16px !important; padding-right: 16px !important; }
	.cta-form-aside, .cta-form-body { padding: 32px 20px !important; }
	.card { padding: 22px !important; }

	/* Righe flex: vanno a capo o si impilano */
	[class*="-actions"], [class*="-pills"], [class*="-meta"], [class*="-badges"],
	.foot-bottom, .nav-cta { flex-wrap: wrap; }
	.foot-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }

	/* Titoli: contenuti su schermo stretto */
	h1 { font-size: clamp(30px, 8.5vw, 40px) !important; }
	.section-head h2 { font-size: clamp(25px, 7vw, 34px) !important; }

	/* Nessun media sfora la viewport */
	img, video, iframe, svg { max-width: 100%; }

	/* L'eyebrow è nowrap by design: su schermi stretti deve poter andare a capo,
	   altrimenti sfora (un sopratitolo lungo sfora). */
	.eyebrow { white-space: normal !important; }
	/* Anche i testi che la consegna forzava su una riga sola. */
	.section-head p { white-space: normal !important; }

	/* Tabelle: scrollabili invece che rotte */
	table { display: block; overflow-x: auto; white-space: nowrap; }

	/* Spazio in fondo per non finire sotto la CTA telefono fissa */
	.site-footer { padding-bottom: 96px; }
}

/* Testata fissa e barra di WordPress (solo per chi è collegato): alta 46px fra
   601 e 782px; sotto i 600 scorre via con la pagina, e la testata torna in cima. */
@media (max-width: 782px) { .admin-bar #main-nav.site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar #main-nav.site-header { top: 0; } }