/* =========================================================================
   00-reset.css — neutralizza cio' che il tema impone dentro il wrapper.
   03/09/2026.

   QUESTO STRATO ESISTE PER UNA RAGIONE SOLA: Enfold e il child theme
   applicano regole a tutto il sito, e dentro le pagine LiveCanvas quelle
   regole vanno spente una volta sola, qui, invece che combattute a
   ripetizione in ogni foglio di pagina.

   REGOLA DELLO STRATO: qui si TOGLIE, non si aggiunge. Se una regola
   introduce un aspetto nuovo invece di annullarne uno del tema, non
   appartiene a questo file.

   Nessun !important in questo file: dove serve battere una regola con id
   si alza la specificita' con #top, come prescrive CLAUDE.md §4.4.
   L'unica eccezione e' segnalata nel punto in cui sta.
   ========================================================================= */


/* --- Il colore e il font di base -----------------------------------------
   ⚠️ VENIVANO DAL REBOOT DI BOOTSTRAP, insieme al colore del testo.
   Il vecchio longevity.css apriva con:
       #lc-longevity { font-family: inherit; color: #42525e; text-wrap: pretty }
   Senza questa regola tutto il testo che non ha una classe propria prende il
   #444444 di Enfold: una differenza di tinta piccola ma visibile su interi
   paragrafi, ed e' uno dei difetti segnalati il 03/09/2026 dopo la prima
   migrazione ("testi di colore diverso").

   text-wrap: pretty non e' un vezzo: evita le righe orfane in fondo ai
   paragrafi, e toglierlo cambierebbe gli a capo di tutte le pagine.        */
.lc-page {
	color: #42525e;
	font-family: inherit;
	text-wrap: pretty;
}


/* --- .row di Enfold: i 20px NON si tolgono -------------------------------
   Enfold da' a .row "position:relative; margin-bottom:20px; clear:both", e
   Bootstrap non dichiara margin-bottom: quei 20px sopravvivono sotto ogni
   riga. CLAUDE.md §2.3 li segnalava come collisione e §4.3 ne prescriveva la
   neutralizzazione — ma quella neutralizzazione NON E' MAI FINITA nel CSS
   compilato, e le pagine sono state disegnate, riviste e approvate CON quei
   20px dentro.

   ⚠️ QUI ERA STATA MESSA "margin-bottom: 0", ED ERA UN ERRORE. Sembrava di
   saldare un debito vecchio; in realta' toglieva 20px a OGNI sezione di
   entrambe le pagine online. Misurato il 03/09/2026 confrontando con la
   produzione: sezione hero 888px contro 868, e lo scarto si accumulava fino
   a 179px sulla CTA finale.

   La regola giusta e' non avere nessuna regola: si lascia fare a Enfold,
   come in produzione. Se un giorno quei 20px vanno tolti davvero, e' una
   modifica di aspetto da far approvare, non una pulizia da fare di nascosto.

   Le pagine nuove non usano .row (usano .lc-container e le griglie CSS),
   quindi la questione non le riguarda.                                    */


/* --- Titoli -------------------------------------------------------------
   ⚠️ IL MARGINE E' 0 0 .5rem, E VA LASCIATO ESATTAMENTE COSI'.
   Non e' un valore scelto: e' quello che il Reboot di Bootstrap dava agli
   heading, ed e' quello con cui le pagine sono state composte e approvate.
   Misurato sulla produzione: 8px. Azzerarlo toglie lo spazio sotto ogni
   titolo; lasciarlo decidere a Enfold lo porta a 14px. Nessuna delle due
   e' quella giusta — entrambe sono state provate il 03/09/2026 e sbagliate.

   font-family: ereditata, perche' Enfold stila gli heading con
   "#top #wrap_all .all_colors h2" (due id piu' due classi) e si porterebbe
   via il font. Il resto della scala tipografica lo fa 02-tipografia, che e'
   prefissato con #top per lo stesso motivo.                               */
/* ⚠️ IL MARGINE VA SENZA #top, E IL FONT CON #top. Non e' un capriccio.
   Con "#top .lc-page :is(h1..h6)" la regola vale (1,1,1) e batte le regole
   dei fogli di pagina, che valgono (1,1,0): sulla Longevity il titolo delle
   card benefici perdeva il suo margin-bottom di 12px e prendeva questi 8.
   Separandole, il margine sta a (0,1,1) e cede il passo alle regole di
   pagina, mentre il font-family resta abbastanza specifico da battere
   Enfold, che e' l'unica cosa per cui #top serviva. */
.lc-page :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 .5rem;
	font-weight: 600;
	line-height: 1.2;
}

#top .lc-page :is(h1, h2, h3, h4, h5, h6) {
	font-family: inherit;
}


/* --- Paragrafi ed elenchi ----------------------------------------------
   ⚠️ QUESTI VALORI VENGONO DAL REBOOT DI BOOTSTRAP e vanno lasciati come
   sono. Prima della migrazione le pagine caricavano Bootstrap COMPLETO
   compilato, Reboot incluso, che dava ai <p> e agli elenchi un margine
   inferiore di 1rem e agli elenchi un rientro di 1.5rem. Ora si carica
   bootstrap-grid, che il Reboot non ce l'ha: senza queste tre regole tutti
   i paragrafi e gli elenchi si attaccano l'uno all'altro.

   E' successo davvero: dopo la prima migrazione della Longevity la pagina
   era "senza spazi" rispetto alla produzione. Le regole qui sotto sono
   copiate dal Reboot che c'era prima, non reinventate.                    */
.lc-page p {
	margin: 0 0 1rem;
}

.lc-page :is(ul, ol) {
	margin: 0 0 1rem;
	padding-left: 1.5rem;
}


/* --- Link ---------------------------------------------------------------
   Stesso motivo: il colore dei link stava nel Reboot. Senza, i link nel
   corpo del testo prendono il colore di Enfold e si vedono di una tinta
   diversa da quella approvata.                                            */
.lc-page a {
	color: #3661ab;
	text-decoration: none;
}

.lc-page a:hover {
	color: #44ade3;
}


/* --- Immagini -----------------------------------------------------------
   Un'<img> e' inline: sotto la linea di base resta lo spazio dei
   discendenti, qualche pixel, e un badge o un bordo ancorato al fondo del
   contenitore ci galleggia dentro invece di appoggiarsi alla foto.        */
.lc-page img {
	max-width: 100%;
	height: auto;
}

.lc-page figure {
	margin: 0;
}


/* --- <details> e <summary> ---------------------------------------------
   Il triangolino nativo non e' stilabile in modo uniforme fra i browser:
   si toglie e il segno di apertura lo disegna il componente.              */
.lc-page summary {
	list-style: none;
	cursor: pointer;
}

.lc-page summary::-webkit-details-marker {
	display: none;
}


/* --- Bottoni ------------------------------------------------------------
   Il <button> nativo porta font, sfondo e bordo del sistema operativo, che
   non ereditano dalla pagina. Azzerarli qui evita di rifarlo in ogni
   componente che usa un <button> — accordion, lightbox, caroselli.        */
.lc-page button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	text-align: inherit;
}


/* --- Focus --------------------------------------------------------------
   Enfold mette outline:none sui link .btn, anche con :focus-visible vero:
   chi naviga da tastiera non vede dove si trova. E' un punto aperto di
   CLAUDE.md §11 sulle pagine vecchie; qui e' risolto in partenza.

   :focus-visible e non :focus, cosi' col mouse non compare nulla. Il colore
   lo puo' cambiare un fondo scuro, vedi 03-layout.                        */
.lc-page :is(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--lc-focus);
	outline-offset: 2px;
}


/* --- L'alone al tocco ---------------------------------------------------
   Android e iOS disegnano un rettangolo colorato su ogni elemento
   interattivo toccato. Si toglie SOLO per il puntatore, con
   :focus:not(:focus-visible), che per definizione non tocca il caso
   tastiera — il contorno di focus qui sopra resta intatto.                */
.lc-page :is(a, button, summary) {
	-webkit-tap-highlight-color: transparent;
}

.lc-page :is(a, button, summary):focus:not(:focus-visible) {
	outline: none;
}