/* ==========================================================================
   HEADER
   Fonte di verità: docs/querior-homepage-mockup.html
   ========================================================================== */

/* Wrapper header: replica .wrap{max-width:1120px;margin:0 auto;padding:0 32px}
   + nav{display:flex;justify-content:space-between;align-items:center;padding:26px 0}
   del mockup, fusi in un solo elemento (qui .wrap e nav coincidono).
   display/justify/align forzati esplicitamente: non ci si affida alla
   classe "layout":"flex" del blocco Group, che WordPress può risolvere
   in modo incoerente (es. "is-layout-flow" invece di "is-layout-flex")
   se gli attributi del blocco vengono alterati in editing. */
.site-header,
.wp-block-group.is-content-justification-space-between.is-nowrap {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	max-width: 1120px !important;
	margin: 0 auto !important;
	padding: 26px 32px !important;
	box-sizing: border-box;
}

/* Logo: nav img{height:34px;width:auto}
   !important necessario: il core WP applica ".wp-block-site-logo img"
   (classe+elemento, più specifico del solo ".custom-logo"). */
.custom-logo {
	height: 34px !important;
	width: auto !important;
}

/* ============================================
   Vista desktop (default, sopra gli 860px)
   ============================================ */

/* .navlinks{display:flex;gap:36px;align-items:center} */
.wp-block-navigation__container {
	gap: 36px;
}

.wp-block-navigation-item {
	margin: 0;
}

/* .navlinks a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500} */
.wp-block-navigation-item__content {
	color: #12181F;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

/* .btn{background:var(--blue);color:#fff;font-weight:600;font-size:14px;
   padding:12px 22px;border-radius:8px;border:1px solid var(--blue)}
   color:#fff forzato con !important: il core WP applica
   ".wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}"
   (specificità 3 classi), più specifico del semplice selettore con attributo. */
.wp-block-navigation-item__content[href$="#contattaci"] {
	background: #034289;
	color: #fff !important;
	font-weight: 500;
	padding: 12px 22px;
	border-radius: 8px;
	border: 1px solid #034289;
	display: inline-block;
}

/* ============================================
   Breakpoint a 767px (deviazione esplicita dal mockup, richiesta da Pat:
   hamburger solo su smartphone, menu orizzontale su tablet e desktop).
   WordPress core mostra la nav inline e nasconde l'hamburger già da
   min-width:600px: nella fascia 601-767px va ripristinato lo stato
   "mobile" per avere l'hamburger solo sotto i 768px.
   ============================================ */
@media (min-width: 600px) and (max-width: 767px) {
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
		position: fixed !important;
	}
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
}

/* ============================================
   Overlay mobile nativo di WP, stilizzato come .mobile-menu del mockup
   (<=767px, solo smartphone)
   ============================================ */
@media (max-width: 767px) {
	/* Il core WP applica ".../.wp-block-navigation__responsive-container-content
	   .wp-block-navigation__container{gap:inherit}" con specificità di 4 classi,
	   più alta della nostra: qui sotto serve !important su tutte le proprietà
	   che devono vincere sul core, verificato via ispezione reale (non a tentativi). */

	/* Il container (ul) non si allarga di default a piena larghezza perché il
	   genitore ".wp-block-navigation__responsive-container-content" ha
	   align-items:flex-start, non stretch: forziamo width:100% perché CTA e
	   separatori (border-top) coprano l'intera larghezza del pannello, come nel mockup. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		gap: 4px !important;
		width: 100% !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		margin: 0 !important;
		width: 100%;
		border-top: 1px solid #E6E8EC !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
		border-top: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		color: #12181F !important;
		text-decoration: none;
		font-size: 15px !important;
		font-weight: 500 !important;
		padding: 12px 0 !important;
		display: block !important;
		width: 100%;
		box-sizing: border-box;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href$="#contattaci"] {
		background: #034289 !important;
		color: #fff !important;
		font-weight: 500 !important;
		padding: 12px 22px !important;
		border-radius: 8px !important;
		text-align: center;
		margin-top: 8px !important;
		width: 100%;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   HERO
   Fonte di verità: docs/querior-homepage-mockup.html (righe 33-38, 56-63, 137-138, 169-173)
   ========================================================================== */

/* .hero{padding:110px 40px;text-align:center;border-radius:16px;margin-top:10px;
   background-image:linear-gradient(...)+url(...);background-size:cover;background-position:center}
   Nel mockup .hero vive dentro l'unico .wrap{max-width:1120px;padding:0 32px} di tutta la
   pagina: qui max-width è 1056px (1120 - 32*2) per replicare la stessa larghezza di contenuto
   che il wrap avrebbe lasciato, fondendo i due livelli in un solo elemento (stesso pattern
   già usato per .site-header). */
.hero {
	display: block !important;
	max-width: 1056px !important;
	margin: 10px auto 0 !important;
	padding: 110px 40px !important;
	text-align: center;
	border-radius: 16px;
	background-image: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url('/wp-content/uploads/2026/08/heroes.webp');
	background-size: cover;
	background-position: center;
	box-sizing: border-box;
}

/* .hero h1{font-size:clamp(13px, 3.6vw, 34px);font-weight:600;line-height:1.28;
   max-width:700px;margin:0 auto 22px;color:#12181F} */
.hero h1 {
	font-size: clamp(13px, 3.6vw, 34px);
	font-weight: 600;
	line-height: 1.28;
	max-width: 700px;
	margin: 0 auto 22px;
	color: #12181F;
}

/* .hero h1 .line{white-space:nowrap;display:inline-block} */
.hero .hero-line {
	white-space: nowrap;
	display: inline-block;
}

/* .hero p{font-size:clamp(13px, 2.6vw, 16px);color:#1E2620;font-weight:500;
   max-width:560px;margin:0 auto 34px} */
.hero p {
	font-size: clamp(13px, 2.6vw, 16px);
	color: #1E2620;
	font-weight: 500;
	max-width: 560px;
	margin: 0 auto 34px;
}

/* .btn{background:var(--blue);color:#fff;font-weight:600;font-size:14px;
   padding:12px 22px;border-radius:8px;border:1px solid var(--blue)} */
.hero .wp-element-button {
	background: #034289;
	color: #fff;
	font-weight: 500;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 8px;
	border: 1px solid #034289;
}

@media (max-width: 767px) {
	.hero {
		padding: 80px 16px !important;
	}
}

/* Il blocco wp:buttons usa flexbox (justify-content:flex-start di default),
   che ignora il text-align:center di .hero: va centrato esplicitamente. */
.hero .wp-block-buttons {
	justify-content: center;
}

/* ==========================================================================
   3 PUNTI SEMPLICI
   Fonte di verità: docs/querior-homepage-mockup.html (righe 65-75, 175-192)
   ========================================================================== */

/* .points{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
   padding:50px 0;border-top:1px solid var(--line)}
   display/gap forzati esplicitamente sul Group (layout Flex, Row), stesso
   pattern del .site-header: non ci si affida al layout "grid" nativo del
   blocco, che qui non serve (3 colonne fisse anche in questo caso). */
.points {
	display: flex !important;
	gap: 40px !important;
	max-width: 1056px !important;
	margin: 0 auto !important;
	padding: 50px 32px;
	border-top: 1px solid #E6E8EC;
	box-sizing: border-box;
}

.points > .point {
	flex: 1;
}

/* .point{text-align:center}
   align-items:stretch forzato: il blocco "Impila" (Stack) di WordPress genera
   una classe per-istanza (.wp-container-core-group-is-layout-*) con
   align-items:flex-start di default, che tiene numero/titolo/testo incollati
   a sinistra invece di occupare tutta la larghezza della colonna — senza
   questa riga il text-align:center non ha alcun effetto visibile. */
.point {
	text-align: center;
	align-items: stretch !important;
}

/* .point .n{width:36px;height:36px;border-radius:50%;background:var(--blue-soft);
   color:var(--blue);font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;
   display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
   Rinominata da ".n" (troppo generica) a ".point-number", stesso pattern di
   ".hero-line" per ".line" nell'Hero.
   margin !important necessario: il core WP applica
   ".is-layout-flex > :is(*, div){margin:0}" (specificità classe+:is(div),
   più alta del solo ".point-number"), che altrimenti azzera il margin:auto
   e tiene il cerchietto incollato a sinistra invece di centrarlo. */
.point-number {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #EAF0F8;
	color: #034289;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px !important;
}

/* .point h3{font-size:18px;font-weight:600;margin-bottom:10px} */
.point h3 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
}

/* .point p{font-size:14px;color:var(--ink-soft)} */
.point p {
	font-size: 14px;
	color: #5B6470;
}

/* Deviazione dal breakpoint 860px del mockup: qui si usa 767px per restare
   coerente con il breakpoint già in uso per .hero e per la nav (vedi sopra),
   così le sezioni cambiano layout tutte allo stesso punto invece di avere
   soglie sfalsate. */
@media (max-width: 767px) {
	.points {
		flex-direction: column;
	}
}

/* Separatore tra sezioni (blocco nativo "Separatore" di WP).
   Nel mockup non è un elemento a parte: ogni sezione (.points, .section)
   ha il proprio border-top:1px solid var(--line). Qui si ottiene lo stesso
   risultato visivo con l'<hr> nativo, contenendolo alla stessa larghezza
   di Hero e "3 punti" (altrimenti prende tutta la larghezza della pagina,
   perché qui .hero/.points hanno il proprio max-width impostato singolarmente,
   non un wrapper comune che lo conterrebbe automaticamente). */
.section-divider {
	max-width: 1056px;
	margin: 0 auto !important;
	border: none !important;
	border-top: 1px solid #E6E8EC !important;
	height: 0;
}

/* ==========================================================================
   SERVIZI (e TECNOLOGIA, che nel mockup riusa le stesse classi .section/
   .section-head/.eyebrow/.services/.service — vedi righe 218-249)
   Fonte di verità: docs/querior-homepage-mockup.html (righe 79-92, 193-249)
   ========================================================================== */

/* .section{padding:80px 0;border-top:1px solid var(--line)}
   Stesso pattern di .hero/.points: qui vive dentro l'unico .wrap del mockup
   (max-width:1120px;padding:0 32px), quindi max-width 1056px + padding
   orizzontale 32px per ottenere la stessa larghezza di contenuto. */
.section {
	max-width: 1056px !important;
	margin: 0 auto !important;
	padding: 80px 32px;
	border-top: 1px solid #E6E8EC;
	box-sizing: border-box;
}

/* .section-head{text-align:center;max-width:560px;margin:0 auto 50px} */
.section-head {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 50px;
}

/* .eyebrow{font-size:13px;font-weight:600;color:var(--blue);text-transform:uppercase;
   letter-spacing:0.06em;margin-bottom:10px} */
.eyebrow {
	font-size: 13px;
	font-weight: 600;
	color: #034289;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}

/* .section-head h2{font-size:30px;font-weight:600} */
.section-head h2 {
	font-size: 30px;
	font-weight: 600;
}

/* .services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
   background:var(--line);border:1px solid var(--line);border-radius:12px;
   overflow:hidden}
   display:grid forzato esplicitamente, stesso pattern del resto del file:
   non ci si affida al layout nativo del blocco Gruppo.
   max-width:none !important necessario: il blocco padre ".section" ha
   layout "constrained" nativo di WP, che applica
   ".is-layout-constrained > :where(...){max-width:var(--wp--style--global--content-size);
   margin:auto !important}" a OGNI figlio diretto (qui sia "section-head" che
   "services"), altrimenti "services" resta incollato alla larghezza di
   contenuto di default del tema invece di occupare tutta la sezione. */
.services {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 1px !important;
	max-width: none !important;
	width: 100%;
	background: #E6E8EC;
	border: 1px solid #E6E8EC;
	border-radius: 12px;
	overflow: hidden;
}

/* .service{background:#fff;padding:34px 28px}
   margin:0 !important necessario: senza azzerarlo, un eventuale margine di
   default sul blocco Gruppo (stesso problema già visto su .point-number)
   romperebbe l'effetto "linee sottili" dato dal gap:1px con sfondo colorato
   sotto le card. */
.service {
	background: #fff;
	padding: 34px 28px;
	margin: 0 !important;
}

/* .service h3{font-size:17px;font-weight:600;margin-bottom:12px} */
.service h3 {
	font-size: 17px;
	font-weight: 600;
	margin-bottom: 12px;
}

/* .service p{font-size:14px;color:var(--ink-soft)} */
.service p {
	font-size: 14px;
	color: #5B6470;
}

/* Deviazione dal breakpoint 860px del mockup: 767px per coerenza con il
   resto del sito (vedi nota su .points). */
@media (max-width: 767px) {
	.services {
		grid-template-columns: 1fr !important;
		border-radius: 0;
	}
}

/* ==========================================================================
   CONTATTI
   Fonte di verità: docs/querior-homepage-mockup.html (righe 102-125, 251-311)
   Il form vive dentro un blocco "HTML personalizzato" (nessun blocco nativo
   di Gutenberg produce <input>/<select>/<textarea>): qui il markup usa già
   le stesse classi del mockup, senza bisogno dei soliti "!important" per
   vincere il core WP (l'HTML personalizzato non passa dai blocchi Gruppo).
   ========================================================================== */

/* .contact-box{background:var(--blue);color:#fff;border-radius:16px;padding:60px;
   display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} */
.contact-box {
	background: #034289;
	color: #fff;
	border-radius: 16px;
	padding: 60px;
	display: grid;
	/* grid-template-columns:1fr 1fr nel mockup — deviazione esplicita
	   richiesta da Pat (Fase 4): colonna sinistra ("Get in touch") più
	   stretta, colonna destra (form) più larga, il form coi suoi campi
	   a due colonne aveva poco respiro con lo split 50/50.
	   minmax(0, ...) invece del semplice Nfr: senza, il minimo automatico
	   delle colonne grid segue il contenuto più largo al loro interno (qui
	   la select Nazione, coi nomi lunghi dei paesi), scavalcando il
	   rapporto voluto anche con width:100% impostato sui campi.
	   Rapporto 1/3 "Get in touch" — 2/3 form, richiesto esplicitamente. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 50px;
	align-items: center;
	box-sizing: border-box;
}

/* .contact-box h2{font-size:28px;font-weight:600;margin-bottom:12px}
   font-weight:500 deviazione esplicita dal mockup, richiesta da Pat.
   color:#fff esplicito necessario: gli Stili Globali del tema impostano
   "h1,h2,h3,h4,h5,h6{color:var(--wp--preset--color--custom-ink)}" con
   selettore esplicito (per quanto poco specifico, batte comunque la sola
   ereditarietà del color:#fff impostato su .contact-box). */
.contact-box h2 {
	font-size: 28px;
	font-weight: 500;
	margin-bottom: 12px;
	color: #fff;
}

/* .contact-box p{color:#C9D8EA;font-size:clamp(11px, 1.6vw, 14px);white-space:nowrap} */
.contact-box p {
	color: #C9D8EA;
	font-size: clamp(11px, 1.6vw, 14px);
	/* white-space:nowrap nel mockup (colonna 1fr/1fr, abbastanza larga da
	   contenere la frase su una riga) — tolto perché con la colonna sinistra
	   ristretta a 0.8fr (deviazione Fase 4 sopra) il nowrap forzava una
	   larghezza minima che vanificava il rapporto 0.8/1.2 del grid. */
}

/* .form{display:flex;flex-direction:column;gap:12px} */
.form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Fase 4 — Contact Form 7: .form ha ora un solo figlio diretto (il wrapper
   <div class="wpcf7">), quindi il flex/gap sopra non raggiunge più le righe
   reali del form. Va riapplicato sul <form class="wpcf7-form"> effettivo,
   annidato più in profondità. */
.form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* .form-row{display:flex;gap:12px} .form-row > *{flex:1;min-width:0} */
.form-row {
	display: flex;
	gap: 12px;
}

.form-row > * {
	flex: 1;
	min-width: 0;
}

/* .form input, .form select, .form textarea{background:rgba(255,255,255,0.08);
   border:1px solid rgba(255,255,255,0.25);border-radius:8px;padding:12px 14px;
   color:#fff;font-family:'Inter',sans-serif;font-size:14px;width:100%} */
.form input,
.form select,
.form textarea {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	padding: 12px 14px;
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

/* .form select{appearance:none;...freccia SVG custom...} */
.form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23C9D8EA'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23C9D8EA' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
}

/* Fase 4 — select senza vero placeholder nativo (limite HTML, non di CF7):
   quando mostra ancora l'etichetta del campo (valore vuoto) va colorata come
   il placeholder degli input, stesso colore #C9D8EA. La classe è aggiunta/
   rimossa via JS in base al valore corrente (vedi querior_cf7_disable_select_placeholder). */
.form select.is-placeholder {
	color: #C9D8EA;
}

/* .form select option{color:#12181F} */
.form select option {
	color: #12181F;
}

/* .form input::placeholder, .form textarea::placeholder{color:#C9D8EA} */
.form input::placeholder,
.form textarea::placeholder {
	color: #C9D8EA;
}

/* .form textarea{resize:vertical;min-height:80px} */
.form textarea {
	resize: vertical;
	min-height: 80px;
}

/* Checkbox di consenso privacy (Fase 2, non presente nel mockup), Fase 4:
   generato dal tag CF7 [acceptance consenso class:consent]. Verificato
   sull'HTML realmente renderizzato: la classe "consent" finisce
   sull'<input> stesso (non sullo span wrapper), dentro
   <span data-name="consenso"><span class="wpcf7-list-item"><label>
   <input class="consent">+<span class="wpcf7-list-item-label">testo</span>
   </label></span></span> — il flex va quindi sul <label> generato da CF7,
   individuato via data-name (più robusto di contare sui nomi di classe
   interni di CF7, che possono cambiare tra versioni). */
.form [data-name="consenso"] label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: #C9D8EA;
	cursor: pointer;
}

/* Il CSS proprio di Contact Form 7 (includes/css/styles.css) imposta
   .wpcf7-list-item{display:inline-block;margin:0 0 0 1em}, che comprime il
   blocco checkbox+testo in una larghezza shrink-to-fit e aggiunge un
   rientro a sinistra — causa del troncamento/dimensione anomala del testo.
   Si annulla per lasciare al <label> flex sopra tutta la larghezza di .form. */
.form [data-name="consenso"] .wpcf7-list-item {
	display: block;
	margin: 0;
}

.form input.consent {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: #fff;
}

.form [data-name="consenso"] a {
	color: #fff;
	text-decoration: underline;
}

/* Fase 4 — Contact Form 7: campo honeypot anti-spam "sito_web" (tag
   [text sito_web class:hp-field]), nascosto visivamente ma presente nel DOM
   per i bot che non eseguono CSS. Niente display:none/visibility:hidden:
   alcuni bot li rilevano e saltano il campo, vanificando l'honeypot. */
.form .hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Fase 4 — Contact Form 7: messaggi di validazione ed esito invio, stessa
   palette del resto di .form su sfondo blu. */
.form .wpcf7-not-valid-tip {
	color: #FFD1D1;
	font-size: 12px;
	margin-top: 4px;
}

.form .wpcf7-response-output {
	color: #C9D8EA;
	font-size: 13px;
	border-radius: 8px;
	margin-top: 8px !important;
}

/* .form button{background:#fff;color:var(--blue);font-weight:600;border:none;
   border-radius:8px;padding:12px 18px;font-size:14px;cursor:pointer;margin-top:4px} */
/* Fase 4: Contact Form 7 genera il tag [submit] come <input type="submit">,
   non <button> come il markup statico del mockup — il selettore va esteso. */
.form button,
.form input[type="submit"] {
	background: #fff;
	color: #034289;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	padding: 12px 18px;
	font-size: 14px;
	cursor: pointer;
	margin-top: 4px;
}

/* Deviazione dal breakpoint 860px del mockup: 767px per coerenza col resto
   del sito (vedi nota su .points). */
@media (max-width: 767px) {
	.contact-box {
		grid-template-columns: 1fr;
		padding: 36px;
	}
	.form-row {
		flex-direction: column;
		gap: 12px;
	}
}

/* ==========================================================================
   FOOTER
   Fonte di verità: docs/querior-homepage-mockup.html (righe 128-133, 313-321)
   Costruito con blocchi Gruppo nativi (Riga), non HTML personalizzato: a
   differenza del form di Contatti, qui non servono elementi che Gutenberg
   non sa produrre. ".footer" sostituisce il selettore d'elemento "footer"
   del mockup (i blocchi WP generano <div>, non <footer>).
   display/justify-content forzati esplicitamente, stesso pattern di
   .points/.site-header: non ci si affida al layout di default del blocco
   Gruppo "Riga". */
.footer {
	max-width: 1056px;
	margin: 0 auto;
	padding: 36px 32px 12px;
	display: flex !important;
	justify-content: space-between !important;
	color: #5B6470;
	font-size: 13px;
	border-top: 1px solid #E6E8EC;
	box-sizing: border-box;
}

/* footer .flinks{display:flex;gap:22px} */
.footer .flinks {
	display: flex !important;
	gap: 22px !important;
}

/* footer a{color:var(--ink-soft);text-decoration:none} */
.footer a {
	color: #5B6470;
	text-decoration: none;
}

/* .legal{padding:16px 0 32px;border-top:1px solid var(--line);font-size:12px;
   color:var(--ink-soft);text-align:center} */
.legal {
	max-width: 1056px;
	margin: 0 auto;
	padding: 16px 32px 32px;
	border-top: 1px solid #E6E8EC;
	font-size: 12px;
	color: #5B6470;
	text-align: center;
	box-sizing: border-box;
}

/* ==========================================================================
   PAGINA GENERICA
   Non presente nel mockup: le pagine che usano il template "Pagina" del
   tema (page.html di Twenty Twenty-Five, es. Privacy Policy) non hanno le
   classi .section/.hero della home — qui si stila direttamente il markup
   generico (.wp-block-post-title, .wp-block-post-content) che WordPress
   produce per QUALUNQUE pagina, così la regola vale automaticamente anche
   per ogni pagina futura, senza doverla ridefinire di volta in volta
   (richiesta esplicita di Pat).
   Decisione presa da Pat: stesso stile "a sezione brandizzata" della home
   (wrapper 1056px, titoli centrati), non una colonna stretta da articolo.
   ========================================================================== */

/* Il blocco ha "align":"full" nel template: senza forzare max-width/margin
   resterebbe a piena larghezza pagina invece che nel wrapper di contenuto
   usato ovunque nel resto del sito (stesso pattern di .hero/.section per
   vincere il layout "constrained"/".has-global-padding" del core). */
.wp-block-post-title {
	max-width: 1056px !important;
	margin: 0 auto !important;
	padding: 60px 32px 0 !important;
	border-top: 1px solid #E6E8EC;
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 600;
	color: #12181F;
	box-sizing: border-box;
}

.wp-block-post-content {
	max-width: 1056px !important;
	margin: 0 auto !important;
	padding: 0 32px 80px !important;
	box-sizing: border-box;
}

/* Riga "Ultimo aggiornamento" sopra al titolo, solo pagina Privacy Policy
   (stampata via functions.php, non è un blocco Gutenberg del contenuto).
   Stesso wrapper/padding orizzontale di .wp-block-post-title per restare
   allineata alla stessa colonna, ma a destra e in stile "meta" invece
   che centrata come il titolo. */
.privacy-updated {
	max-width: 1056px;
	margin: 0 auto;
	padding: 32px 32px 0;
	text-align: right;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #5B6470;
	box-sizing: border-box;
}

/* H2/H3 interni al contenuto (generati da "##"/"###" incollato
   nell'editor): stesso trattamento di .section-head h2, centrati. */
.wp-block-post-content h2 {
	font-family: 'Poppins', sans-serif;
	font-size: 24px;
	font-weight: 600;
	color: #12181F;
	text-align: center;
	max-width: 700px;
	margin: 50px auto 16px;
}

.wp-block-post-content h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #12181F;
	text-align: center;
	max-width: 700px;
	margin: 32px auto 12px;
}

/* Paragrafi: Inter, centrati, larghezza di lettura ridotta rispetto al
   wrapper (700px) per righe non troppo lunghe, come .hero p/.contact-box p. */
.wp-block-post-content p {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #5B6470;
	text-align: justify;
	max-width: 700px;
	margin: 0 auto 16px;
}

/* Elenchi (convertiti da "-" incollato nell'editor): stessa larghezza di
   lettura dei paragrafi, ma testo allineato a sinistra dentro il blocco
   centrato (un elenco centrato riga per riga è illeggibile). */
.wp-block-post-content ul,
.wp-block-post-content ol {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #5B6470;
	max-width: 700px;
	margin: 0 auto 16px;
	padding-left: 22px;
	text-align: left;
}

/* Link nel contenuto (es. PEC, sito del Garante): Blu Querior sottolineato,
   stesso trattamento cromatico del resto del sito. */
.wp-block-post-content a {
	color: #034289;
	text-decoration: underline;
}

/* Deviazione dal breakpoint 860px del mockup: 767px per coerenza col resto
   del sito (vedi nota su .points). */
@media (max-width: 767px) {
	.wp-block-post-title {
		padding: 40px 16px 0 !important;
		font-size: 28px;
	}

	.wp-block-post-content {
		padding: 0 16px 60px !important;
	}
}