/**
 * Beccofino Industrial — stili del tema.
 *
 * Qui c'è solo ciò che theme.json non sa esprimere: gli stili di blocco
 * registrati in inc/block-styles.php, gli stati di interazione e qualche
 * dettaglio di impaginazione. I colori arrivano sempre dalle variabili di
 * theme.json, così cambiare palette dall'Editor cambia anche questi.
 */

/* ------------------------------------------------------------------ *
 * Fondamenta
 * ------------------------------------------------------------------ */

:root {
	--bi-transizione: 220ms cubic-bezier(.2, .7, .3, 1);
	--bi-raggio: 4px;
	--bi-raggio-lg: 8px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* Un anello di focus visibile su fondo scuro: requisito di accessibilità. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link:focus {
	background: var(--wp--preset--color--primary);
	color: #fff;
	left: var(--wp--preset--spacing--30);
	padding: .75rem 1.25rem;
	top: var(--wp--preset--spacing--30);
	z-index: 100000;
}

/* ------------------------------------------------------------------ *
 * Testata
 * ------------------------------------------------------------------ */

.bi-barra-tecnica {
	font-variant-numeric: tabular-nums;
}

/* Pallino che pulsa accanto allo stato del servizio. */
.bi-spia::before {
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: .5rem;
	margin-right: .5rem;
	vertical-align: middle;
	width: .5rem;
	animation: bi-pulsa 2.4s ease-in-out infinite;
}

@keyframes bi-pulsa {

	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .45; transform: scale(.8); }
}

/* La testata resta in cima senza coprire gli ancoraggi interni. */
.bi-testata {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

:target {
	scroll-margin-top: 7rem;
}

/* Sottolineatura che cresce sotto la voce di menu. */
.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: .35rem;
	position: relative;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--primary);
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transition: width var(--bi-transizione);
	width: 0;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	width: 100%;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Stili di blocco — contenitori
 * ------------------------------------------------------------------ */

.wp-block-group.is-style-scheda,
.wp-block-group.is-style-scheda-staffe {
	background: var(--wp--preset--color--scheda);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--bi-raggio-lg);
	box-shadow: var(--wp--preset--shadow--scheda);
	padding: var(--wp--preset--spacing--50);
	position: relative;
	transition: border-color var(--bi-transizione), box-shadow var(--bi-transizione), transform var(--bi-transizione);
}

.wp-block-group.is-style-scheda:hover,
.wp-block-group.is-style-scheda-staffe:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--rilievo);
}

/* Le quattro staffe metalliche agli angoli. */
.wp-block-group.is-style-scheda-staffe::before,
.wp-block-group.is-style-scheda-staffe::after,
.wp-block-image.is-style-staffe::before,
.wp-block-image.is-style-staffe::after,
.bi-staffe::before,
.bi-staffe::after {
	content: "";
	height: 14px;
	pointer-events: none;
	position: absolute;
	width: 14px;
	z-index: 2;
}

.wp-block-group.is-style-scheda-staffe::before,
.wp-block-image.is-style-staffe::before,
.bi-staffe::before {
	border-left: 2px solid var(--wp--preset--color--primary);
	border-top: 2px solid var(--wp--preset--color--primary);
	left: 10px;
	top: 10px;
}

.wp-block-group.is-style-scheda-staffe::after,
.wp-block-image.is-style-staffe::after,
.bi-staffe::after {
	border-bottom: 2px solid var(--wp--preset--color--primary);
	border-right: 2px solid var(--wp--preset--color--primary);
	bottom: 10px;
	right: 10px;
}

.wp-block-image.is-style-staffe,
.bi-staffe {
	position: relative;
}

.wp-block-image.is-style-staffe img {
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--bi-raggio-lg);
	display: block;
	filter: brightness(.97) contrast(1.04);
}

.wp-block-group.is-style-incasso {
	background: var(--wp--preset--color--incasso);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--bi-raggio);
	box-shadow: var(--wp--preset--shadow--incasso);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-nastro {
	background: var(--wp--preset--color--base-profondo);
	border-block: 1px solid var(--wp--preset--color--bordo-tenue);
}

/* Reticolo tecnico di fondo, come la carta millimetrata dell'officina. */
.wp-block-group.is-style-griglia-tecnica {
	position: relative;
	isolation: isolate;
}

.wp-block-group.is-style-griglia-tecnica::before {
	background-image:
		linear-gradient(var(--wp--custom--griglia--colore) 1px, transparent 1px),
		linear-gradient(to right, var(--wp--custom--griglia--colore) 1px, transparent 1px);
	background-size: var(--wp--custom--griglia--passo) var(--wp--custom--griglia--passo);
	content: "";
	inset: 0;
	opacity: .22;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.wp-block-columns.is-style-schede > .wp-block-column {
	background: var(--wp--preset--color--scheda);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--bi-raggio-lg);
	padding: var(--wp--preset--spacing--50);
	transition: border-color var(--bi-transizione);
}

.wp-block-columns.is-style-schede > .wp-block-column:hover {
	border-color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------ *
 * Stili di blocco — testo
 * ------------------------------------------------------------------ */

.wp-block-paragraph.is-style-etichetta {
	background: var(--wp--preset--color--incasso);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--bi-raggio);
	color: var(--wp--preset--color--accent);
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: .12em;
	padding: .35rem .7rem;
	text-transform: uppercase;
}

.wp-block-paragraph.is-style-occhiello {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: .2em;
	margin-bottom: .5rem;
	text-transform: uppercase;
}

.wp-block-paragraph.is-style-prezzo {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/* Una sola riga del titolo nel gradiente della fiamma: <span class="bi-fiamma">. */
.bi-fiamma {
	background: var(--wp--preset--gradient--fiamma);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

/* Titolo con le prime parole nel gradiente della fiamma. */
.wp-block-heading.is-style-fiamma {
	background: var(--wp--preset--gradient--fiamma);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.wp-block-heading.is-style-filo {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--30);
}

.wp-block-heading.is-style-filo::after {
	background: var(--wp--preset--color--bordo);
	content: "";
	flex: 1;
	height: 1px;
}

/* ------------------------------------------------------------------ *
 * Listini
 * ------------------------------------------------------------------ */

/* Riga di listino: piatto a sinistra, prezzo a destra, filo tratteggiato
   in mezzo. Si scrive come un semplice elenco: "Piatto — €12,00". */
.wp-block-list.is-style-listino {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-list.is-style-listino li {
	align-items: baseline;
	border-bottom: 1px dashed var(--wp--preset--color--bordo);
	display: flex;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	padding-block: .7rem;
}

.wp-block-list.is-style-listino li:last-child {
	border-bottom: 0;
}

.wp-block-list.is-style-listino li strong,
.wp-block-list.is-style-listino li b {
	color: var(--wp--preset--color--accent);
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--display);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.wp-block-list.is-style-specifiche {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label-lg);
	list-style: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.wp-block-list.is-style-specifiche li {
	border-bottom: 1px solid var(--wp--preset--color--bordo);
	display: flex;
	justify-content: space-between;
	letter-spacing: .06em;
	padding-block: .5rem;
}

.wp-block-list.is-style-specifiche li:last-child {
	border-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Separatori, citazioni, pulsanti
 * ------------------------------------------------------------------ */

.wp-block-separator.is-style-tratteggio {
	background: none;
	border: 0;
	border-top: 1px dashed var(--wp--preset--color--bordo);
	height: 0;
	opacity: 1;
}

.wp-block-quote.is-style-targa {
	background: var(--wp--preset--color--incasso);
	border: 1px solid var(--wp--preset--color--bordo);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: var(--bi-raggio);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-button.is-style-acciaio .wp-block-button__link {
	background: var(--wp--preset--color--scheda);
	border-color: var(--wp--preset--color--bordo);
	box-shadow: var(--wp--preset--shadow--scheda);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-acciaio .wp-block-button__link:hover,
.wp-block-button.is-style-acciaio .wp-block-button__link:focus {
	background: var(--wp--preset--color--bordo-tenue);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-contorno-rame .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--primary);
	box-shadow: none;
	color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-contorno-rame .wp-block-button__link:hover,
.wp-block-button.is-style-contorno-rame .wp-block-button__link:focus {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.wp-block-button__link {
	transition: background-color var(--bi-transizione), color var(--bi-transizione), transform 120ms ease;
}

.wp-block-button__link:active {
	transform: scale(.98);
}

/* ------------------------------------------------------------------ *
 * Immagini e vetrine
 * ------------------------------------------------------------------ */

.bi-vetrina {
	overflow: hidden;
	position: relative;
}

.bi-vetrina img {
	transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
	width: 100%;
}

.bi-vetrina:hover img {
	transform: scale(1.04);
}

/* Testo leggibile sopra la foto: velo scuro dal basso. */
.bi-velo {
	background: var(--wp--preset--gradient--velo);
}

.wp-block-cover__background {
	pointer-events: none;
}

/* Schede affiancate: riempiono la colonna, così due schede di lunghezza
   diversa finiscono comunque alla stessa altezza.
   Niente flex qui: il layout "constrained" di WordPress mette margini
   automatici ai figli e in un contenitore flex quei margini centrerebbero
   il testo. */
.wp-block-column > .wp-block-group.is-style-scheda,
.wp-block-column > .wp-block-group.is-style-scheda-staffe {
	height: 100%;
}

/* Fascia di servizio: una banda, non una locandina. */
.bi-fascia {
	min-height: 300px;
}

/* Il marchio in testata. L'altezza è scritta nel blocco (stile in linea),
   quindi qui si usa max-height: limita l'altezza senza dover litigare con
   la regola in linea a colpi di !important. */
.wp-block-image.bi-logo {
	margin: 0;
}

.wp-block-image.bi-logo img {
	display: block;
	max-width: none;
}

@media (max-width: 782px) {

	.wp-block-image.bi-logo img {
		max-height: 52px;
		width: auto;
	}

	.wp-block-image.bi-logo-grande img {
		max-height: 76px;
	}
}

/* Targa chiara: fondo su cui un marchio scuro resta leggibile anche sul
   fondo officina. È lo stesso trattamento delle insegne smaltate. */
.wp-block-site-logo.is-style-targa img,
.wp-block-image.is-style-targa img {
	background: #f2ede3;
	border: 1px solid rgba(217, 101, 59, .5);
	border-radius: 6px;
	box-shadow: var(--wp--preset--shadow--scheda);
	padding: .55rem .8rem;
}

/* Foto dentro le schede: ritaglio costante, niente salti di altezza. */
.bi-scheda-foto img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Contenuto editoriale
 * ------------------------------------------------------------------ */

.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

.wp-block-post-content > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-post-featured-image img {
	border-radius: var(--bi-raggio-lg);
}

/* Griglia dei post: schede coerenti con il resto del tema. */
.bi-scheda-articolo {
	background: var(--wp--preset--color--scheda);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--bi-raggio-lg);
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	transition: border-color var(--bi-transizione), transform var(--bi-transizione);
}

.bi-scheda-articolo:hover {
	border-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------ *
 * Moduli
 * ------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="search"],
select,
textarea {
	background: var(--wp--preset--color--base-tecnico);
	border: 1px solid var(--wp--preset--color--bordo);
	border-radius: var(--bi-raggio);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	padding: .7rem .8rem;
	width: 100%;
}

input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--contrast-3);
	opacity: .8;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
	outline: none;
}

label {
	color: var(--wp--preset--color--contrast);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: .4rem;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * Schermi stretti
 *
 * Le colonne si impilano da sole (è WordPress a farlo) e i corpi del testo
 * sono fluidi via theme.json: qui restano gli aggiustamenti che quei due
 * meccanismi non coprono.
 * ------------------------------------------------------------------ */

/* Tabelle larghe: scorrono da sole invece di sfondare la pagina. */
.wp-block-table {
	overflow-x: auto;
}

@media (max-width: 781px) {

	/* Le schede respirano meno, così il contenuto resta leggibile. */
	.wp-block-group.is-style-scheda,
	.wp-block-group.is-style-scheda-staffe,
	.wp-block-columns.is-style-schede > .wp-block-column {
		padding: var(--wp--preset--spacing--40);
	}

	/* Riga di listino: se il piatto è lungo, il prezzo va a capo allineato a
	   destra invece di schiacciare il nome. */
	.wp-block-list.is-style-listino li,
	.wp-block-list.is-style-specifiche li {
		flex-wrap: wrap;
		gap: 0 var(--wp--preset--spacing--30);
	}

	.wp-block-list.is-style-listino li strong,
	.wp-block-list.is-style-listino li b,
	.wp-block-list.is-style-specifiche li strong {
		margin-left: auto;
	}

	/* La barra tecnica in cima diventa una riga sola, centrata. */
	.bi-barra-tecnica {
		gap: .25rem 1rem;
		justify-content: center;
		text-align: center;
	}

	/* La testata appiccicata è più bassa: l'ancoraggio si adegua. */
	:target {
		scroll-margin-top: 5rem;
	}

	/* Le staffe si avvicinano agli angoli, che ora sono più stretti. */
	.wp-block-group.is-style-scheda-staffe::before,
	.wp-block-image.is-style-staffe::before,
	.bi-staffe::before,
	.wp-block-group.is-style-scheda-staffe::after,
	.wp-block-image.is-style-staffe::after,
	.bi-staffe::after {
		height: 10px;
		width: 10px;
	}

	.wp-block-group.is-style-scheda-staffe::before,
	.wp-block-image.is-style-staffe::before,
	.bi-staffe::before {
		left: 6px;
		top: 6px;
	}

	.wp-block-group.is-style-scheda-staffe::after,
	.wp-block-image.is-style-staffe::after,
	.bi-staffe::after {
		bottom: 6px;
		right: 6px;
	}
}

@media (max-width: 600px) {

	/* Le vetrine fotografiche non devono occupare tutto lo schermo. */
	.bi-vetrina {
		min-height: 340px !important;
	}

	/* Pulsanti comodi da premere col pollice: a tutta larghezza, uno per riga.
	   Si escludono le file impostate su "non andare a capo" (.is-nowrap), dove
	   i pulsanti devono restare affiancati: lì una larghezza del 100% li
	   farebbe schiacciare a vicenda in modo disuguale. */
	.wp-block-button__link {
		display: block;
		text-align: center;
	}

	.wp-block-buttons:not(.is-nowrap) > .wp-block-button {
		width: 100%;
	}

	/* File affiancate: due metà esatte, con meno imbottitura e corpo minore
	   così la scritta più lunga non va a capo. */
	.wp-block-buttons.is-nowrap {
		gap: .5rem;
		width: 100%;
	}

	.wp-block-buttons.is-nowrap > .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
	}

	.wp-block-buttons.is-nowrap .wp-block-button__link {
		font-size: var(--wp--preset--font-size--label);
		letter-spacing: .05em;
		padding-inline: .75rem;
		width: 100%;
	}

	/* Marchio e menu non si accavallano sulle testate a una riga. */
	.bi-testata .wp-block-site-title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* Schermi molto larghi: il contenuto non si sgrana oltre una misura utile. */
@media (min-width: 1600px) {

	.wp-block-group.is-style-griglia-tecnica::before {
		background-size: 40px 40px;
	}
}

/* ------------------------------------------------------------------ *
 * Stampa
 * ------------------------------------------------------------------ */

@media print {

	.bi-testata,
	.bi-barra-tecnica,
	.wp-block-template-part footer,
	.wp-block-navigation,
	.wp-block-buttons {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	.wp-block-group.is-style-scheda,
	.wp-block-group.is-style-scheda-staffe {
		border: 1px solid #999;
		box-shadow: none;
	}
}