/**
 * ASTU - stili del sito pubblico.
 *
 * Ripresi dal sito statico originale (pagine Home, Legno, Ferro, Alluminio,
 * Edilizia, Preventivo) e riorganizzati per WordPress. Gli stili dei blocchi
 * Gutenberg sono in blocks.css.
 */

/* ==========================================================================
   Variabili e base
   ========================================================================== */

:root {
	--verde: #26f400;
	--arancione: #ff6e00;
	--nero: #333;
	--bianco: #fff;
	--grigio-chiaro: #f5f5f5;
	--astu-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	--astu-header-h: 120px; /* aggiornata da main.js con l'altezza reale dell'header */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--astu-header-h) + 10px);
}

body {
	margin: 0;
	color: var(--nero);
	background-color: var(--bianco);
	font-family: var(--astu-font);
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

/* Il reset del sito originale (* { margin:0; padding:0 }) è applicato solo agli
   elementi del tema, per non alterare i blocchi Gutenberg e la barra di amministrazione. */
.site-header *,
.site-footer *,
#splash-screen *,
#cookie-banner *,
.page-hero *,
.astu-form *,
.contact-info * {
	margin: 0;
	padding: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	left: 10px;
	top: 10px;
	z-index: 100000;
	padding: 10px 20px;
	background: var(--bianco);
	color: var(--nero);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Animazioni (classe "animate-on-scroll" aggiungibile a qualsiasi blocco
   da Avanzate → Classi CSS aggiuntive)
   ========================================================================== */

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.js .animate-on-scroll {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .animate-on-scroll.visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .animate-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Splash screen (solo homepage, solo alla prima visita)
   ========================================================================== */

#splash-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bianco);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 100001; /* sopra anche alla barra di amministrazione */
}

.astu-splash #splash-screen {
	display: flex;
	animation: fadeOut 2s ease 2s forwards;
}

@keyframes fadeOut {
	from { opacity: 1; }
	to { opacity: 0; visibility: hidden; }
}

#splash-screen img {
	width: 300px;
	height: auto;
	animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
	from { transform: scale(0.95); }
	to { transform: scale(1.05); }
}

/* ==========================================================================
   Header e navigazione
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: var(--bianco);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	font-size: 1rem;
	line-height: normal;
}

.admin-bar .site-header {
	top: 32px;
}

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

@media (max-width: 600px) {
	/* sotto i 600px la barra di amministrazione non è fissa */
	.admin-bar .site-header {
		top: 0;
	}
}

.header-top {
	display: flex;
	align-items: center;
	padding: 10px 5%;
}

.logo-placeholder {
	flex-shrink: 0; /* il menu non deve mai schiacciare il logo */
}

.logo-placeholder a {
	display: block;
}

.logo-placeholder img {
	width: 150px;
	height: auto;
	display: block;
}

.color-stripes {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	height: 80px;
}

.stripe {
	flex: 1;
}

.stripe.verde {
	background-color: var(--verde);
}

.stripe.bianca {
	background-color: var(--bianco);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
}

.stripe.arancione {
	background-color: var(--arancione);
}

.menu-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 0 20px;
	position: relative;
	width: 100%;
}

/* Sugli schermi larghi il menu è centrato come nell'originale. */
.main-nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.main-nav ul {
	display: flex;
	list-style: none;
}

.main-nav ul li {
	margin: 0 15px;
	position: relative;
}

.main-nav ul li a {
	text-decoration: none;
	color: var(--nero);
	font-weight: 500;
	transition: color 0.3s;
	position: relative;
	white-space: nowrap;
}

.main-nav ul li a:hover,
.main-nav ul li a:focus-visible {
	color: var(--verde);
}

.main-nav ul li a::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--verde);
	transition: width 0.3s;
}

.main-nav ul li a:hover::after,
.main-nav ul li a:focus-visible::after,
.main-nav ul li.current-menu-item > a::after,
.main-nav ul li.current_page_item > a::after {
	width: 100%;
}

/* Sottomenu (non presenti nell'originale, disponibili se si aggiungono voci figlie) */
.main-nav ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: -15px;
	flex-direction: column;
	background: var(--bianco);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	padding: 10px 0;
	min-width: 200px;
	z-index: 10;
}

.main-nav ul li:hover > ul,
.main-nav ul li:focus-within > ul {
	display: flex;
}

.main-nav ul ul li {
	margin: 0;
	padding: 8px 15px;
}

/* Pulsanti dell'header: "Progettazione e Preventivo" e "Contatti" (menu "Pulsante header") */
.menu-pulsante {
	list-style: none;
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.btn-preventivo,
.menu-pulsante a {
	display: inline-block;
	background-color: var(--verde);
	color: var(--bianco);
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s;
	text-decoration: none;
	white-space: nowrap;
	font-size: 0.85rem;
}

/* I colori dei pulsanti restano fissi (anche sulla pagina corrente): si invertono
   solo mentre si preme (:active), con la tastiera (:focus-visible) e al passaggio
   del mouse. Il passaggio vale solo per i dispositivi con mouse: sui touch
   il colore "hover" resterebbe bloccato dopo il tocco. */
.btn-preventivo:active,
.menu-pulsante a:active,
.menu-pulsante a:focus-visible,
.menu-pulsante a.premuto {
	background-color: var(--arancione);
	color: var(--bianco);
}

/* Sulla pagina appena aperta da un pulsante il colore invertito compare subito, senza sfumatura */
.menu-pulsante a.premuto-arrivo {
	transition: none;
}

@media (hover: hover) {
	.btn-preventivo:hover,
	.menu-pulsante a:hover {
		background-color: var(--arancione);
		color: var(--bianco);
	}
}

/* Pulsante arancione: voci del menu "Pulsante header" che portano a una sezione
   (es. «Contatti» → /#contatti) oppure con la classe CSS "pulsante-arancione"
   (Aspetto → Menu → Opzioni schermata → Classi CSS). Al passaggio diventa verde. */
.menu-pulsante a[href*="#"],
.menu-pulsante .pulsante-arancione > a {
	background-color: var(--arancione);
}

.menu-pulsante a[href*="#"]:active,
.menu-pulsante a[href*="#"]:focus-visible,
.menu-pulsante a[href*="#"].premuto,
.menu-pulsante .pulsante-arancione > a:active,
.menu-pulsante .pulsante-arancione > a:focus-visible,
.menu-pulsante .pulsante-arancione > a.premuto {
	background-color: var(--verde);
}

@media (hover: hover) {
	.menu-pulsante a[href*="#"]:hover,
	.menu-pulsante .pulsante-arancione > a:hover {
		background-color: var(--verde);
	}
}

/* Sotto i 1600px il menu centrato in assoluto si sovrapporrebbe ai pulsanti
   (Progettazione e Preventivo + Contatti): lo affianchiamo ai pulsanti. */
@media (max-width: 1599px) {
	.main-nav {
		position: static;
		transform: none;
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.main-nav ul li {
		margin: 0 10px;
	}
}

/* Tablet in verticale e schermi medi: menu e pulsante più compatti, così
   logo, menu e pulsante stanno su una riga senza uscire dallo schermo. */
@media (min-width: 769px) and (max-width: 1100px) {
	.logo-placeholder img {
		width: 120px;
	}

	.stripe.bianca,
	.menu-container {
		padding-left: 10px;
		padding-right: 10px;
	}

	.main-nav ul li {
		margin: 0 7px;
	}

	.main-nav ul li a {
		font-size: 0.9rem;
	}

	.menu-pulsante a {
		padding: 8px 12px;
		font-size: 0.75rem;
	}
}

/* ==========================================================================
   Contenuto principale
   ========================================================================== */

.site-main {
	padding-top: var(--astu-header-h);
}

/* In homepage il carosello parte sotto l'header, come nell'originale. */
.site-main--home:has(> article > .entry-content > .wp-block-gallery.is-style-carosello:first-child) {
	padding-top: 0;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Il contenuto Gutenberg non lascia spazio dopo l'ultimo blocco: le sezioni
   a tutta larghezza toccano il footer come nel sito originale. */
.entry-content > .alignfull:last-child {
	margin-bottom: 0;
}

.entry-content > :last-child:not(.alignfull) {
	margin-bottom: 80px;
}

.entry-content > :first-child:not(.alignfull) {
	margin-top: 60px;
}

.entry-content > .alignfull,
.entry-content > .alignfull + * {
	margin-block-start: 0;
}

/* ==========================================================================
   Intestazione delle pagine (hero delle pagine Legno, Ferro, … e Preventivo)
   ========================================================================== */

.page-hero {
	color: var(--bianco);
	text-align: center;
	position: relative;
	background-size: cover;
	background-position: center;
}

.page-hero--immagine {
	padding: 100px 5%;
}

.page-hero--immagine::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
}

/* Senza immagine in evidenza: sfumatura della pagina Preventivo */
.page-hero--sfumatura {
	background: linear-gradient(135deg, var(--verde) 0%, #e55702 100%);
	padding: 120px 5% 80px;
}

.page-hero__contenuto {
	position: relative;
	z-index: 2;
}

.page-hero__titolo {
	font-size: 3rem;
	margin-bottom: 20px;
	color: var(--bianco);
	line-height: 1.2;
}

.page-hero--immagine .page-hero__titolo {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.page-hero__testo p {
	font-size: 1.2rem;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.6;
}

.page-hero--immagine .page-hero__testo p {
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.page-hero--sfumatura .page-hero__testo p {
	max-width: 600px;
	opacity: 0.9;
}

.page-hero__testo p + p {
	margin-top: 1em;
}

.page-hero__testo a {
	color: var(--bianco);
}

/* ==========================================================================
   Carosello homepage (galleria con stile "Carosello a tutto schermo")
   ========================================================================== */

.wp-block-gallery.is-style-carosello.is-style-carosello {
	position: relative;
	height: 100vh;
	height: 100svh;
	/* altezza reale dello schermo visibile, misurata da main.js (vedi --astu-vh) */
	height: var(--astu-vh, 100svh);
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	align-items: stretch;
	max-width: none;
}

.wp-block-gallery.is-style-carosello.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	transition: transform 0.5s ease;
}

.wp-block-gallery.is-style-carosello.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	max-width: none !important;
	object-fit: cover;
	border-radius: 0;
}

/* Solo sul telefono (in verticale fino a 768px di larghezza, oppure girato in orizzontale):
   resta visibile la parte della foto scelta nella Libreria media («Punto della foto da tenere
   visibile sul telefono»); senza valore resta il centro. Su computer e tablet le foto restano centrate. */
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
	.wp-block-gallery.is-style-carosello.has-nested-images figure.wp-block-image img {
		object-position: var(--astu-fuoco, 50% 50%);
	}
}

/* Su computer e tablet in orizzontale le foto si vedono intere sotto l'header: dove la foto
   e lo schermo hanno forme diverse restano due fasce ai lati (o sopra e sotto) invece di
   tagliare la foto. Sul telefono e sul tablet in verticale restano a tutto schermo. */
@media (min-width: 769px) and (orientation: landscape) and (min-height: 501px) {
	.wp-block-gallery.is-style-carosello.has-nested-images figure.wp-block-image:not(#individual-image) {
		background-color: var(--astu-fasce, var(--bianco));
	}

	/* Le frecce possono cadere sulle fasce bianche: fondo più scuro per restare visibili. */
	.wp-block-gallery.is-style-carosello .carosello-freccia:not(:hover):not(:focus-visible) {
		background: rgba(0, 0, 0, 0.45);
	}

	/* :not(#individual-image) per vincere sulla regola di WordPress delle gallerie ritagliate */
	.wp-block-gallery.is-style-carosello.has-nested-images figure.wp-block-image:not(#individual-image) img {
		height: calc(100% - var(--astu-header-h));
		margin-top: var(--astu-header-h);
		object-fit: contain;
	}
}

.wp-block-gallery.is-style-carosello.has-nested-images figure.wp-block-image figcaption,
.wp-block-gallery.is-style-carosello.has-nested-images figure.wp-block-image::before {
	display: none;
}

/* La didascalia della galleria diventa il titolo sopra le foto */
.wp-block-gallery.is-style-carosello > .blocks-gallery-caption {
	/* Centrata con flexbox e non con transform: l'animazione fadeIn usa transform
	   e, se servisse anche al centraggio, la scritta partirebbe spostata a destra. */
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	max-width: none;
	/* almeno 80px ai lati: lo spazio delle frecce */
	padding: 0 max(80px, calc((100% - 800px) / 2));
	margin: 0;
	z-index: 1;
	pointer-events: none;
	color: var(--bianco);
	text-align: center;
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
	animation: fadeIn 1.5s ease;
}

/* Frecce del carosello (create da main.js) */
.carosello-freccia {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	color: var(--bianco);
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s;
}

/* Allineate ai bordi dell'header (logo a sinistra, strisce a destra) */
.carosello-freccia--prec {
	left: 5%;
}

.carosello-freccia--succ {
	right: 5%;
}

.carosello-freccia:hover,
.carosello-freccia:focus-visible {
	background: var(--arancione);
	border-color: var(--arancione);
	outline: none;
}

.carosello-freccia:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
	/* Sul telefono la scritta occupa quasi tutta la larghezza: le frecce scendono
	   verso il fondo della foto per non coprirla. */
	.carosello-freccia {
		top: auto;
		bottom: 25%;
		width: 36px;
		height: 36px;
		margin-top: 0;
		font-size: 0.85rem;
	}

	.carosello-freccia--prec {
		left: 10px;
	}

	.carosello-freccia--succ {
		right: 10px;
	}
}

/* ==========================================================================
   Sezione contatti (homepage)
   ========================================================================== */

.astu-form,
.contact-info {
	line-height: normal;
}

.contact-form h3,
.contact-info h3 {
	margin-bottom: 20px;
	color: var(--verde);
	font-size: 1.17em;
}

.astu-form .form-group {
	margin-bottom: 20px;
}

.astu-form .form-group label,
.astu-form .etichetta {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

.astu-form input[type="text"],
.astu-form input[type="email"],
.astu-form input[type="tel"],
.astu-form select,
.astu-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--nero);
	background: var(--bianco);
}

.astu-form textarea {
	height: 120px;
	resize: vertical;
}

.astu-form .form-privacy .form-checkbox {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	font-size: 0.9rem;
	line-height: 1.5;
	cursor: pointer;
}

.astu-form .form-checkbox input {
	margin-top: 4px;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	accent-color: var(--arancione);
}

.astu-form .form-checkbox a {
	color: inherit;
	text-decoration: underline;
}

/* Nota "campi obbligatori" sotto i moduli */
.astu-form .nota-obbligatori {
	font-size: 0.85rem;
	color: #666;
	margin: -5px 0 20px;
}

/* Campo anti-spam, invisibile alle persone */
.astu-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.btn-invia {
	display: inline-block;
	background-color: var(--arancione);
	color: var(--bianco);
	border: none;
	padding: 12px 30px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.3s;
	text-decoration: none;
}

.btn-invia:hover,
.btn-invia:focus-visible {
	background-color: var(--verde);
	color: var(--bianco);
}

.btn-invia:disabled {
	background: #ccc;
	cursor: not-allowed;
}

.contact-info .info-item {
	margin-bottom: 15px;
	display: flex;
	align-items: flex-start;
	line-height: 1.4;
}

/* L'icona è alta quanto una riga di testo e centrata in essa: resta allineata
   alle voci su una riga e alla prima riga di quelle su più righe. */
.contact-info .info-item i {
	margin-right: 10px;
	color: var(--arancione);
	width: 20px;
	height: 1.4em;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.contact-info .info-item a {
	color: inherit;
	text-decoration: none;
}

.contact-info .info-item a:hover {
	color: var(--arancione);
}

.contact-info .orari-lavoro {
	margin-top: 30px;
}

.contact-info .orari-lavoro h4 {
	margin-bottom: 15px;
	color: var(--verde);
	font-size: 1em;
}

.contact-info .giorni-orari {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.contact-info .giorno {
	font-weight: 500;
}

.contact-info .nota-orari {
	margin-top: 10px;
	font-style: italic;
}

/* Nota sotto un giorno (es. «Esclusi festivi» sotto Lunedì - Venerdì): occupa tutta la riga */
.contact-info .giorni-orari .nota-orari {
	grid-column: 1 / -1;
	margin: -4px 0 6px;
}

/* Messaggi di esito dei moduli */
.success-message,
.error-message {
	padding: 15px;
	border-radius: 5px;
	margin: 0 0 20px;
	text-align: center;
}

.success-message {
	background: #d4edda;
	color: #155724;
}

.error-message {
	background: #f8d7da;
	color: #721c24;
}

/* ==========================================================================
   Modulo preventivo
   ========================================================================== */

.preventivo-section {
	padding: 80px 5%;
	background-color: var(--grigio-chiaro);
}

.entry-content > .preventivo-section {
	margin-top: 0;
}

.preventivo-container {
	max-width: 1000px;
	margin: 0 auto;
	background: var(--bianco);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.preventivo-header {
	background: var(--verde);
	color: var(--bianco);
	padding: 30px;
	text-align: center;
}

.preventivo-header h2 {
	font-size: 2rem;
	margin-bottom: 10px;
	color: var(--bianco);
}

.preventivo-steps {
	display: flex;
	justify-content: center;
	padding: 30px;
	background: var(--grigio-chiaro);
	border-bottom: 1px solid #ddd;
}

.preventivo-steps .step {
	text-align: center;
	padding: 0 20px;
	position: relative;
}

.preventivo-steps .step-number {
	width: 40px;
	height: 40px;
	background: var(--arancione);
	color: var(--bianco);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
	font-weight: bold;
}

.preventivo-steps .step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 20px;
	right: -10px;
	width: 20px;
	height: 2px;
	background: var(--arancione);
}

.preventivo-form {
	padding: 40px;
}

.preventivo-sottotitolo {
	color: var(--verde);
	margin-bottom: 20px;
	font-size: 1.17em;
}

.preventivo-form .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 30px;
}

.preventivo-form .form-group.full-width {
	grid-column: 1 / -1;
}

.preventivo-form .form-group label,
.preventivo-form .etichetta,
.preventivo-form .materiali-section legend {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--nero);
}

.preventivo-form input[type="text"],
.preventivo-form input[type="email"],
.preventivo-form input[type="tel"],
.preventivo-form select,
.preventivo-form textarea {
	padding: 12px 15px;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	transition: border-color 0.3s;
}

.preventivo-form input:focus,
.preventivo-form select:focus,
.preventivo-form textarea:focus {
	outline: none;
	border-color: var(--verde);
}

.astu-form .campo-errore {
	border-color: #e74c3c !important;
}

/* Materiali (caselle di spunta con l'aspetto delle schede originali) */
.preventivo-form .materiali-section {
	margin-bottom: 30px;
	border: 0;
	min-width: 0;
}

.preventivo-form .materiali-section legend {
	margin-bottom: 15px;
}

.materiali-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	margin-top: 15px;
}

.preventivo-form .material-option {
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	padding: 15px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
	display: block;
	margin: 0;
	font-weight: 400;
	position: relative;
}

.preventivo-form .material-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.preventivo-form .material-option:hover,
.preventivo-form .material-option:focus-within {
	border-color: var(--verde);
}

.preventivo-form .material-option:has(input:checked) {
	border-color: var(--verde);
	background-color: rgba(0, 142, 84, 0.1);
}

.material-icon {
	display: block;
	font-size: 2rem;
	color: var(--verde);
	margin-bottom: 10px;
}

/* Caricamento file */
.preventivo-form .form-group label.file-upload,
.preventivo-form .file-upload {
	display: block;
	border: 2px dashed #e0e0e0;
	border-radius: 8px;
	padding: 30px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.3s;
	position: relative;
	font-weight: 400;
	margin: 0;
}

.preventivo-form .file-upload:hover,
.preventivo-form .file-upload:focus-within {
	border-color: var(--verde);
}

.file-upload__stato {
	display: block;
}

.file-upload i {
	display: block;
	font-size: 3rem;
	color: var(--verde);
	margin-bottom: 15px;
}

.file-upload__testo {
	display: block;
}

.file-upload__nota {
	display: block;
	font-size: 0.9rem;
	color: #666;
}

.file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.btn-invia-preventivo {
	background: var(--arancione);
	color: var(--bianco);
	border: none;
	padding: 15px 40px;
	border-radius: 8px;
	font-size: 1.1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.3s;
	display: block;
	margin: 30px auto 0 !important;
	min-width: 200px;
}

.btn-invia-preventivo:hover {
	background: #e55702;
}

.btn-invia-preventivo:disabled {
	background: #ccc;
	cursor: not-allowed;
}

/* ==========================================================================
   Elenco articoli, articolo singolo, commenti
   ========================================================================== */

.elenco-articoli {
	padding: 80px 5%;
}

.elenco-articoli .card-prodotto .img-placeholder {
	display: block;
	height: 250px;
	background: var(--grigio-chiaro);
	overflow: hidden;
}

.elenco-articoli .card-prodotto .img-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.elenco-articoli .card-prodotto .img-placeholder img.segnaposto-logo {
	object-fit: contain;
	padding: 30px;
}

.elenco-articoli .card-prodotto:hover .img-placeholder img {
	transform: scale(1.1);
}

.card-titolo {
	font-size: 1.3rem;
	margin: 0 0 10px;
}

.card-titolo a {
	color: var(--arancione);
	text-decoration: none;
}

.card-meta {
	font-size: 0.85rem;
	color: #666;
	margin: 0 0 10px;
}

.card-content p {
	margin: 0;
}

.nessun-risultato {
	text-align: center;
}

.nessun-risultato .search-form {
	margin-top: 30px;
}

.search-form {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.search-form .search-field {
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
	min-width: 250px;
}

.search-form .search-submit {
	background-color: var(--arancione);
	color: var(--bianco);
	border: none;
	padding: 12px 30px;
	border-radius: 4px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.pagination,
.post-navigation,
.entry-footer,
.page-links {
	max-width: 1000px;
	margin: 0 auto 60px;
	padding: 0 5%;
}

.pagination .nav-links {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 50px;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	padding: 8px 14px;
	border-radius: 4px;
	background: var(--grigio-chiaro);
	color: var(--nero);
	text-decoration: none;
}

.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
	background: var(--arancione);
	color: var(--bianco);
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid #eee;
	padding-top: 30px;
}

.post-navigation a {
	text-decoration: none;
	color: var(--nero);
}

.post-navigation .nav-etichetta {
	display: block;
	font-size: 0.85rem;
	color: var(--arancione);
	font-weight: 600;
}

.post-navigation .nav-next {
	text-align: right;
	margin-left: auto;
}

.entry-footer {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	color: #666;
	font-size: 0.9rem;
}

.entry-footer i {
	color: var(--arancione);
}

.meta-articolo i {
	margin-right: 5px;
}

.commenti {
	max-width: 1000px;
	margin: 0 auto 80px;
	padding: 0 5%;
}

.commenti-titolo {
	color: var(--verde);
	margin-bottom: 30px;
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list .comment-body {
	padding: 20px;
	background: var(--grigio-chiaro);
	border-radius: 8px;
	margin-bottom: 20px;
}

.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
}

.comment-form label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background-color: var(--bianco);
	line-height: normal;
}

.footer-stripes {
	display: flex;
	flex-direction: column;
	height: 200px;
}

.footer-stripes .stripe {
	flex: 1;
}

.footer-stripes .stripe.bianca {
	padding: 20px 0;
}

.footer-content {
	text-align: center;
}

.footer-section h3 {
	color: var(--verde);
	margin-bottom: 10px;
	font-size: 1.4rem;
}

.footer-section p {
	margin-bottom: 15px;
	font-size: 1rem;
	color: var(--nero);
}

.social-icons {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.social-icons a {
	font-size: 2rem;
	transition: transform 0.3s ease;
}

.social-icons a:hover {
	transform: translateY(-5px) scale(1.1);
}

.facebook-icon {
	color: #1877f2 !important;
}

.instagram-icon {
	color: #e1306c !important;
}

.footer-bottom {
	text-align: center;
	padding: 20px 5%;
	background-color: var(--bianco);
	color: #666;
	border-top: 1px solid #eee;
}

.menu-footer {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 10px !important;
	font-size: 0.9rem;
}

.menu-footer a {
	color: #666;
}

.menu-footer a:hover {
	color: var(--arancione);
}

/* ==========================================================================
   Banner cookie
   ========================================================================== */

#cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #000;
	color: white;
	padding: 20px;
	box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.7);
	z-index: 1000;
	display: none;
	border-top: 3px solid #008e54;
	font-family: var(--astu-font);
}

#cookie-banner.visibile {
	display: block;
}

.cookie-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.cookie-text {
	flex: 1;
}

.cookie-text h3 {
	margin-bottom: 10px;
	color: #ff6103;
	font-size: 1.3rem;
}

.cookie-text p {
	margin-bottom: 0;
	color: white;
	font-size: 14px;
	line-height: 1.5;
}

.cookie-text a {
	color: #008e54;
	text-decoration: none;
	font-weight: 600;
}

.cookie-text a:hover {
	color: #ff6103;
	text-decoration: underline;
}

.cookie-buttons {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.cookie-btn {
	padding: 12px 24px !important;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-weight: 600;
	transition: all 0.3s ease;
	font-family: inherit;
	font-size: 14px;
}

.accept-btn {
	background: #008e54;
	color: white;
}

.accept-btn:hover {
	background: #007a48;
	transform: translateY(-2px);
}

.reject-btn {
	background: #ff6103;
	color: white;
}

.reject-btn:hover {
	background: #e55702;
	transform: translateY(-2px);
}

.settings-btn {
	background: transparent;
	color: #008e54;
	border: 2px solid #008e54;
}

.settings-btn:hover {
	background: #008e54;
	color: white;
	transform: translateY(-2px);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.header-top {
		flex-direction: column;
		padding: 10px;
	}

	.logo-placeholder {
		margin-right: 0;
		margin-bottom: 10px;
	}

	.logo-placeholder img {
		width: 120px;
	}

	/* Le strisce si allungano per contenere menu e pulsante su più righe. */
	.color-stripes {
		width: 100%;
		height: auto;
	}

	.color-stripes > .stripe.verde,
	.color-stripes > .stripe.arancione {
		flex: 0 0 12px;
	}

	.stripe.bianca {
		padding: 8px 10px;
	}

	.menu-container {
		flex-direction: column;
		gap: 8px;
		padding: 0;
	}

	.main-nav ul {
		flex-wrap: wrap;
		justify-content: center;
	}

	.main-nav ul li {
		margin: 5px 10px;
	}

	.main-nav ul ul {
		display: none !important;
	}

	.menu-pulsante {
		margin: 0;
	}

	.wp-block-gallery.is-style-carosello > .blocks-gallery-caption {
		font-size: 2.5rem;
		padding-left: 20px;
		padding-right: 20px;
	}

	.page-hero__titolo {
		font-size: 2rem;
	}

	.page-hero__testo p {
		font-size: 1rem;
	}

	.page-hero--sfumatura {
		padding: 80px 5% 60px;
	}

	.page-hero--sfumatura .page-hero__titolo {
		font-size: 2.2rem;
	}

	.preventivo-form {
		padding: 30px 20px;
	}

	.preventivo-form .form-grid {
		grid-template-columns: 1fr;
	}

	.materiali-grid {
		grid-template-columns: 1fr;
	}

	.preventivo-steps {
		flex-direction: column;
		gap: 20px;
	}

	.preventivo-steps .step:not(:last-child)::after {
		display: none;
	}

	.cookie-container {
		flex-direction: column;
		text-align: center;
		gap: 15px;
	}

	.cookie-buttons {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.cookie-btn {
		flex: 1;
		min-width: 120px;
		padding: 10px 15px !important;
	}

	.cookie-text h3 {
		font-size: 1.1rem;
	}

	.cookie-text p {
		font-size: 13px;
	}

	#cookie-banner {
		padding: 15px;
	}

	.post-navigation .nav-links {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.wp-block-gallery.is-style-carosello > .blocks-gallery-caption {
		font-size: 2rem;
	}

	.contact-info .giorni-orari {
		grid-template-columns: 1fr;
	}

	.cookie-buttons {
		flex-direction: column;
	}

	.cookie-btn {
		width: 100%;
	}
}

/* ==========================================================================
   Telefono in orizzontale (schermo largo ma basso)
   Header compatto su una riga e scritta del carosello centrata nella parte
   di foto visibile sotto l'header.
   ========================================================================== */

@media (orientation: landscape) and (max-height: 500px) {
	.header-top {
		flex-direction: row;
		padding: 6px 3%;
	}

	.logo-placeholder {
		margin: 0;
	}

	.logo-placeholder img {
		width: 80px;
	}

	.color-stripes {
		width: auto;
		height: 52px;
	}

	.color-stripes > .stripe.verde,
	.color-stripes > .stripe.arancione {
		flex: 1;
	}

	.stripe.bianca {
		flex: 0 0 auto;
		padding: 2px 10px;
	}

	.menu-container {
		flex-direction: row;
		gap: 10px;
		padding: 0;
	}

	.main-nav {
		position: static;
		transform: none;
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.main-nav ul {
		flex-wrap: nowrap;
	}

	.main-nav ul li {
		margin: 0 7px;
	}

	.main-nav ul li a {
		font-size: 0.8rem;
	}

	.menu-pulsante {
		margin-left: auto;
	}

	.menu-pulsante a {
		padding: 6px 10px;
		font-size: 0.7rem;
	}

	/* Scritta: più piccola e lontana dalle frecce (il carosello parte già sotto l'header) */
	.wp-block-gallery.is-style-carosello > .blocks-gallery-caption {
		font-size: 1.8rem;
		padding: 0 70px;
	}

	/* Frecce: a metà della foto, allineate ai bordi dell'header */
	.carosello-freccia {
		top: 50%;
		bottom: auto;
		margin-top: -18px;
	}

	.carosello-freccia--prec {
		left: 3%;
	}

	.carosello-freccia--succ {
		right: 3%;
	}
}

/* ==========================================================================
   Telefono (in verticale o in orizzontale): il carosello della homepage parte
   sotto l'header invece che dietro, così nessuna parte della foto resta coperta
   e il «Punto della foto da tenere visibile sul telefono» funziona in entrambe
   le direzioni. Il bordo inferiore resta in fondo allo schermo.
   ========================================================================== */

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px) {
	.site-main--home:has(> article > .entry-content > .wp-block-gallery.is-style-carosello:first-child) {
		padding-top: var(--astu-header-h);
	}

	.wp-block-gallery.is-style-carosello.is-style-carosello {
		height: calc(100vh - var(--astu-header-h));
		height: calc(100svh - var(--astu-header-h));
		height: calc(var(--astu-vh, 100svh) - var(--astu-header-h));
	}
}

/* ==========================================================================
   Bordi dello schermo (viewport-fit=cover in header.php)
   I browser che lo supportano (es. Safari su iPhone) lasciano arrivare la pagina
   fino in fondo allo schermo, così il carosello non lascia una fascia bianca sotto.
   Testi e menu restano fuori dalle zone coperte dal sistema: barra in basso e
   tacca dell'iPhone tenuto in orizzontale. Sugli altri schermi i valori sono 0.
   ========================================================================== */

body {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}

.site-header {
	padding-left: env(safe-area-inset-left, 0px);
	padding-right: env(safe-area-inset-right, 0px);
}

.site-footer {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}