/* Pagine di contenuto semplice (Chi Sono, Contatti, Faq, Privacy Policy, ecc.):
   il post-content block usa lo stile di base del tema senza alcuna larghezza
   massima ne' spaziatura dedicata, risultando denso e senza gerarchia visiva.
   Qui solo leggibilita' di base: colonna stretta, respiro tra i blocchi,
   immagine ridimensionata. Nessun elemento decorativo aggiunto (stile
   volutamente semplice, non quello delle pagine prodotto/homepage).

   CONVENZIONE LARGHEZZE (audit 2026-08-12, "tre larghezze di contenuto,
   tre convenzioni diverse senza che sia scritto da nessuna parte quale
   pagina segue quale"): il sito ne usa davvero tre, di proposito, ognuna
   per un tipo di pagina diverso. Scritte qui una volta sola perche' prima
   non lo erano da nessuna parte:
   1. LETTURA (760px, questo file, .entry-content): Chi Sono, Contatti, Faq.
      Testo in prosa, va tenuto stretto per essere leggibile.
   2. VETRINA (piena larghezza, .nsn-legal-page qui sotto): le 5 pagine
      legali + Faq stile "barra nera". Contenuto tabellare/enumerato, non
      prosa continua, non serve la stessa larghezza ridotta.
   3. PRODOTTO/CATEGORIA (theme.json contentSize 800px / wideSize 1280px,
      piu' category-page.css per la sua griglia): sistema a parte, gestito
      dai blocchi nativi WooCommerce, non da questo file.
   Non unificarle: sono tre contesti reali (prosa / elenco legale / griglia
   prodotti), non un'inconsistenza da correggere. */

.entry-content {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.entry-content > * {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.entry-content h2 {
	font-size: 1.5rem;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.entry-content h2:first-child {
	margin-top: 0;
}

.entry-content p {
	line-height: 1.75;
}

.entry-content .wp-block-image {
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.entry-content .wp-block-image img {
	max-width: 320px;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Pagine "stile legale" (Copyright, Cookie Policy, Privacy Policy, Diritto
   di Recesso, Condizioni Generali di Vendita, FAQ): layout unificato full
   width (richiesta esplicita dell'utente 2026-08-10), al posto delle due
   colonne 75/25 con una lista di link che duplicava la stessa navigazione
   gia' presente nel footer (rimossa dal contenuto delle 5 pagine legali,
   vedi DB). Titolo in barra nera a piena larghezza (idea dell'utente),
   testo sotto senza la colonna stretta a 760px delle altre pagine di
   contenuto semplice.

   La classe "nsn-legal-page" e' assegnata via body_class in
   inc/legal-pages.php - refactor del 2026-08-12: prima ogni pagina era
   elencata per ID in dieci gruppi di selettori diversi (63 occorrenze),
   aggiungerne una richiedeva modificare CSS a mano in piu' punti. */

.nsn-legal-page .entry-content {
	max-width: none;
	padding-bottom: 4rem;
}

/* Bleed a piena larghezza tramite le variabili CSS del padding globale del
   tema (stessa tecnica gia' usata per l'hero di Chi Sono/Contatti, non
   "100vw": quella soffre di discrepanze reali con la larghezza visibile
   quando e' presente una scrollbar, bug reale gia' incontrato in questo
   progetto). */
.nsn-legal-page .wp-block-post-title {
	background: var(--wp--preset--color--contrast, #23282d);
	color: var(--nsn-white);
	text-align: center;
	padding: 2.5rem 1.5rem;
	margin-bottom: 3rem;
	/* Il tema di base rende questo titolo grosso e semi-bold (48px/600 -
	   preset "x-large"): sulla barra nera, piena larghezza, risultava
	   troppo pesante (richiesta esplicita utente 2026-08-12, notata su
	   "Condizioni Generali di Vendita" ma condivisa da tutte le pagine
	   con questo stesso trattamento). Font-weight normale, la barra nera
	   di per sé dà già abbastanza risalto senza bisogno del bold. */
	font-weight: 400;
	/* "!important": il titolo e' figlio diretto di un gruppo
	   ".is-layout-constrained", il cui stile globale del tema impone gia'
	   "max-width" e margini "auto" in !important (stesso meccanismo gia'
	   diagnosticato per l'hero di Chi Sono/Contatti). Il blocco ha anche un
	   suo "margin-top:var(--wp--preset--spacing--40)" impostato come stile
	   inline dal template (page.html), che batte un "margin-top:0" esterno
	   senza !important: risultato, uno spazio vuoto sopra la barra nera
	   senza motivo (bug reale segnalato dall'utente 2026-08-10). */
	max-width: none !important;
	margin-top: 0 !important;
	margin-left: calc(var(--wp--style--root--padding-left, 2rem) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right, 2rem) * -1) !important;
	width: auto;
}

/* Le 5 vere pagine legali (non la FAQ) contengono qualche <blockquote>
   grezzo importato dal vecchio sito. Classe "nsn-legal-accordion-page"
   assegnata via body_class in inc/legal-pages.php. */

/* Il browser/tema da' ai <blockquote> un max-width:800px di base che
   spiccava rispetto al resto del testo ormai a piena larghezza (bug reale
   segnalato dall'utente 2026-08-10, verificato misurando: 800px invece di
   riempire la colonna). */
.nsn-legal-accordion-page .entry-content blockquote {
	max-width: none !important;
	width: auto !important;
}

/* Accordion <details>/<summary> nativi (2026-08-12b: prima le 5 pagine
   legali usavano un accordion H2/H3 scritto in casa via
   legal-accordion.js, mentre la FAQ usava i blocchi Gutenberg nativi
   wp:details - due sistemi per lo stesso comportamento, segnalato
   dall'audit 2026-08-12 come "l'accordion esiste in tre versioni
   diverse". Ora entrambe usano solo <details>/<summary>: per le pagine
   legali il contenuto H2/H3 e' stato convertito una volta sola in details
   annidati direttamente nel post_content (migrazione 2026-08-12, testo
   invariato, solo i tag cambiano - stesso approccio della Fase 1), gli H3
   diventano ".nsn-legal-h3" annidati dentro il details del loro H2. Un
   solo sistema di stile,
   condiviso anche con la FAQ: aggiungere una sesta pagina "a fisarmonica"
   in futuro significa solo generare/scrivere <details> nel contenuto,
   nessun nuovo CSS o JS da mantenere. */
.nsn-legal-accordion-page .wp-block-details,
.page-id-2012 .wp-block-details {
	border: none; border-top: 1px solid var(--wp--preset--color--border, #ebebeb); margin: 0; padding: 1rem 0;
}
.nsn-legal-accordion-page .wp-block-details summary,
.page-id-2012 .wp-block-details summary {
	font-weight: 600; font-size: 1.05rem; cursor: pointer; list-style: none;
	position: relative; padding-right: 2rem;
}
.nsn-legal-accordion-page .wp-block-details summary::-webkit-details-marker,
.page-id-2012 .wp-block-details summary::-webkit-details-marker { display: none; }
.nsn-legal-accordion-page .wp-block-details summary::after,
.page-id-2012 .wp-block-details summary::after {
	content: ""; position: absolute; right: 0.25rem; top: 50%;
	width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg); transition: transform 0.15s ease;
}
.nsn-legal-accordion-page .wp-block-details[open] summary::after,
.page-id-2012 .wp-block-details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.nsn-legal-accordion-page .wp-block-details p,
.page-id-2012 .wp-block-details p { margin: 1rem 0 0; }

/* Sotto-sezioni H3, annidate dentro il details del loro H2 (es. "Gestione
   dei tag" dentro la Cookie Policy): stessa interazione del genitore, un
   filo piu' piccole e rientrate per segnalare la gerarchia a colpo d'occhio. */
.nsn-legal-accordion-page .nsn-legal-h3 {
	margin: 0 0 0 1rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--wp--preset--color--border, #ebebeb);
}
.nsn-legal-accordion-page .nsn-legal-h3 summary {
	font-size: 0.95rem;
}

/* Hero a due colonne fullscreen (decisione 2026-08-10), componente
   condiviso: nato per Chi Sono (ID 39, testo bio + foto), riusato tale e
   quale per Contatti (ID 68, tab Whatsapp/mail/ticket + foto) su richiesta
   esplicita dell'utente ("usa lo stesso layout della pagina chi sono").
   Colonna sinistra (".nsn-split-hero-text"): il contenuto della pagina, su
   sfondo grigio con padding vero. Colonna destra (".nsn-split-hero-image"):
   la foto, alta esattamente quanto la colonna di sinistra (niente sticky:
   provato su Chi Sono, l'utente l'ha giudicato senza senso). Selettori per
   ID invece che per slug: page-chi-sono/page-contatti non sono tra le
   classi che WordPress mette sul <body> in questo tema a blocchi (solo
   page-id-39/page-id-68), verificato via devtools. */

.page-id-39 .wp-block-post-title,
.page-id-68 .wp-block-post-title {
	display: none;
}

/* Nessun max-width qui: la pagina usa tutta la larghezza disponibile,
   non una colonna stretta come le altre pagine di contenuto semplice. */
.page-id-39 .entry-content,
.page-id-68 .entry-content {
	max-width: none;
	/* Il tema applica un margin-top globale (block-gap) a ogni blocco di
	   primo livello: qui lascia un vuoto bianco sopra la sezione grigia
	   che deve invece toccare la cima della pagina. */
	margin-top: 0;
}

/* Sottolineatura decorativa sotto ai titoli, come nel riferimento di Chi
   Sono. Contatti non ha titoli dentro l'hero (solo i tab), la regola non
   ha effetto li' ma resta valida se in futuro ne comparisse uno. */
.page-id-39 h1.wp-block-heading::after,
.page-id-39 h2.wp-block-heading::after,
.page-id-68 h1.wp-block-heading::after,
.page-id-68 h2.wp-block-heading::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: currentColor;
	margin-top: 1.2rem;
}

/* Sfonda fino al bordo reale della viewport (come gli hero della homepage)
   tramite la classe "alignfull" nativa del tema (aggiunta lato PHP, vedi
   functions.php e nsn-shop-core.php): ".has-global-padding > .alignfull"
   applica gia' margini negativi calcolati da variabili CSS
   (--wp--style--root--padding-*), e ".is-layout-constrained > :where(...)"
   esclude esplicitamente ".alignfull" dal proprio max-width. Prima si usava
   "width:100vw + left:50% + transform:translateX(-50%)": tecnica fragile,
   soggetta a discrepanze reali tra "100vw" e la larghezza visibile
   (differenze di scrollbar tra browser), causa di un overflow orizzontale
   reale su schermi stretti (bug segnalato dall'utente 2026-08-10,
   riprodotto nel suo Chrome ma non nell'ambiente di test, sintomo classico
   di questo tipo di bug). La tecnica nativa del tema non usa "vw", quindi
   non ne e' soggetta. */
.nsn-split-hero {
	display: flex;
	align-items: stretch;
	background: var(--wp--preset--color--subtle, #ebebeb);
	min-height: 100vh;
}

.nsn-split-hero-text {
	flex: 1 1 50%;
	background: var(--wp--preset--color--subtle, #ebebeb);
	padding: 4rem clamp(2rem, 6vw, 6rem);
	/* Centra verticalmente il contenuto nella colonna, cosi' lo spazio
	   sopra e sotto risulta uguale (richiesta esplicita 2026-08-10): con
	   solo padding simmetrico non basterebbe se il contenuto diventasse
	   piu' corto della colonna (che si stira per pareggiare l'altezza
	   della foto), lasciando tutto lo spazio in eccesso solo in fondo. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nsn-split-hero-text > * {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

/* Senza questo, il margin-bottom dell'ultimo blocco resta come spazio vuoto
   sotto al contenuto centrato verticalmente, sbilanciando il centraggio
   (verificato su Chi Sono: 64px sopra contro 88px sotto prima di questa
   regola). */
.nsn-split-hero-text > *:last-child {
	margin-bottom: 0;
}

.nsn-split-hero-text h1 {
	font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
	margin-bottom: 2rem;
}

.nsn-split-hero-text h2.wp-block-heading {
	margin-top: 3rem;
}

.nsn-split-hero-text p {
	line-height: 1.7;
}

/* La bio di Chi Sono (blocco nativo wp:columns) affiancava due colonne
   pensate per la piena larghezza della pagina: dentro alla colonna testo,
   larga meta' schermo, restavano compresse e senza respiro. Le impiliamo
   qui. Non ha effetto su Contatti (niente wp:columns li' dentro). */
.nsn-split-hero-text .wp-block-columns {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

/* Stessa specificita' della regola sopra: viene dopo nel file quindi
   vincerebbe comunque, ma la teniamo esplicita per chiarezza. Le colonne
   sono l'ultimo blocco della bio: senza azzerare qui il loro margin-bottom
   resta come spazio vuoto sotto, sbilanciando il centraggio verticale. */
.nsn-split-hero-text .wp-block-columns:last-child {
	margin-bottom: 0;
}

.nsn-split-hero-text .wp-block-column {
	width: 100% !important;
}

.nsn-split-hero-image {
	flex: 1 1 50%;
}

/* Il <figure> generato dal blocco immagine sta tra questo div e l'<img>:
   senza altezza esplicita anche su di lui, l'"height:100%" sull'img si
   applica a un genitore diretto (il figure) che resta invece alto quanto
   basta al proprio contenuto, non ai 100% del div esterno che si stira
   davvero con "align-items:stretch" sul genitore .nsn-split-hero.
   Prefisso page-id necessario per specificita': lo stile base dei blocchi
   immagine (".wp-block-image.size-large", due classi) altrimenti vince su
   questo selettore (una classe + un elemento) e lascia i 16px di
   margin-top di default, visibile come spazio sopra la foto (bug reale
   verificato via devtools su Chi Sono, stessa causa su Contatti). */
.page-id-39 .nsn-split-hero-image figure,
.page-id-68 .nsn-split-hero-image figure {
	height: 100%;
	margin: 0;
}

/* Specificita' maggiore di ".entry-content .wp-block-image img" (regola
   generica per le altre pagine semplici, max-width:320px): senza il prefisso
   page-id quella vinceva ugualmente (stesso numero di classi diverso solo
   l'ordine), l'immagine restava piccola nonostante width/height:100% qui
   sotto (bug reale verificato misurando: 320px invece di riempire la
   colonna). */
.page-id-39 .nsn-split-hero-image img,
.page-id-68 .nsn-split-hero-image img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 782px) {
	.nsn-split-hero {
		display: block;
		min-height: 0;
	}
	.nsn-split-hero-text {
		padding: 2.5rem 2rem;
	}
	/* Specificita' maggiore di ".entry-content .wp-block-image img" (regola
   generica per le altre pagine semplici, max-width:320px): senza il prefisso
   page-id quella vinceva ugualmente (stesso numero di classi diverso solo
   l'ordine), l'immagine restava piccola nonostante width/height:100% qui
   sotto (bug reale verificato misurando: 320px invece di riempire la
   colonna). */
.page-id-39 .nsn-split-hero-image img,
.page-id-68 .nsn-split-hero-image img {
		height: auto;
		max-height: 420px;
	}
}