/*
Theme Name:   Barcellona Futsal
Theme URI:    https://www.barcellonafutsal.it
Author:       FCD Atletico Barcellona Futsal
Description:  Tema a blocchi del sito vetrina della FCD Atletico Barcellona Futsal. Identità giallorossa su fondo nero, tipografia Big Shoulders e Barlow servite dal dominio. Colori e spaziature si governano da theme.json; le sezioni si compongono con i pattern inclusi.
Version:      2.3.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  bfutsal
Tags:         block-theme, sports, dark, custom-colors, full-site-editing
*/

/* =========================================================================
   Le variabili di colore e i caratteri arrivano da theme.json.
   Qui stanno le forme che i blocchi non sanno esprimere da soli:
   griglie a filo, striscia scorrevole, schede, tabelle, tipografia di scarto.

   Le misure del testo sono in rem e non in px: chi ha impostato un carattere
   più grande nel browser — succede spesso ai genitori più avanti con l'età —
   vede il sito ingrandirsi invece che restare com'è. 1rem = 16px, quindi a
   impostazioni standard non cambia nulla rispetto alla bozza.
   ========================================================================= */

:root {
	--nero: var(--wp--preset--color--nero);
	--nero-2: var(--wp--preset--color--nero-2);
	--nero-3: var(--wp--preset--color--nero-3);
	--rosso: var(--wp--preset--color--rosso);
	--rosso-vivo: var(--wp--preset--color--rosso-vivo);
	--oro: var(--wp--preset--color--oro);
	--oro-chiaro: var(--wp--preset--color--oro-chiaro);
	--bianco: var(--wp--preset--color--bianco);
	--grigio: var(--wp--preset--color--grigio);
	--linea: rgba(248, 245, 239, .13);
	--display: var(--wp--preset--font-family--display);
	--cond: var(--wp--preset--font-family--condensato);

	/* Il sito è solo scuro: dichiararlo fa disegnare al browser barre di
	   scorrimento, menu a tendina e campi di modulo in tinta invece che bianchi. */
	color-scheme: dark;
}

html {
	/* La testata resta appiccicata in alto: senza questo, saltando a un'ancora
	   il titolo di destinazione finisce nascosto sotto di essa. */
	scroll-padding-top: 8rem;
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	text-wrap: pretty;
}

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

/* I titoli non devono lasciare una parola sola sull'ultima riga. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* Niente attesa di 300 ms al tocco, e riflesso del tocco in tinta con il sito. */
a, button, input, select, textarea, summary, label {
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(254, 201, 0, .2);
}

/* ---------- salta al contenuto ----------
   Il collegamento lo mette WordPress da sé nei temi a blocchi, ma con i colori
   del pannello: qui prende quelli della società e diventa leggibile. */
body .skip-link.screen-reader-text:focus {
	background: var(--oro);
	color: var(--nero);
	font-family: var(--cond);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 16px 24px;
	border-radius: 0;
	box-shadow: 0 0 0 3px var(--nero);
	z-index: 100000;
}

/* ---------- occhiello: etichetta con trattino rosso ---------- */
.bf-eyebrow {
	font-family: var(--cond);
	font-weight: 700;
	font-size: .875rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--oro);
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.bf-eyebrow::before {
	content: "";
	width: 26px;
	height: 3px;
	background: var(--rosso-vivo);
	flex: none;
}

.bf-eyebrow.has-text-align-center { justify-content: center; }

/* ---------- testo di servizio ---------- */
.bf-lead { color: var(--grigio); max-width: 64ch; }
.bf-cond {
	font-family: var(--cond);
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* ---------- barra rossa in cima ---------- */
.bf-topbar {
	background: var(--rosso);
	font-family: var(--cond);
	font-weight: 600;
	font-size: .875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

.bf-topbar a { color: #fff; }
.bf-topbar a:hover { color: var(--oro-chiaro); }
.bf-topbar p { margin: 0; }

/* Telefono ed email sono il modo più diretto di raggiungere la società.
   Dove si tocca con il dito diventano un bersaglio pieno; col mouse la barra
   resta sottile come nella bozza, perché lì la precisione non manca. */
.bf-topbar a {
	display: inline-flex;
	align-items: center;
	padding: 0 2px;
}

@media (pointer: coarse) {
	.bf-topbar a { min-height: 44px; }
}

/* ---------- testata appiccicata in alto ---------- */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(20, 17, 16, .92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--linea);
}

.bf-crest img,
.wp-block-site-logo img { object-fit: contain; }

/* Stesso carattere del menu (Barlow Condensed 600): la testata parla con una
   voce sola. Il display resta ai titoli. */
.bf-logo-txt {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.05;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0;
}

/* Menu di navigazione: sottolineatura oro che cresce.
   L'altezza minima di 44px non si vede — il menu resta alto uguale grazie
   all'allineamento verticale — ma dà al dito la superficie che gli serve. */
.wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--cond);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 0;
	position: relative;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 9px;
	width: 0;
	height: 2px;
	background: var(--oro);
	transition: width .2s;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after {
	width: 100%;
}

/* Il menu a tendina compare sotto i 960px invece che sotto i 600px.
   Fra le due misure le sei voci in maiuscolo più il pulsante «Accedi» non
   stanno in riga e vanno a capo, lasciando una testata alta due piani su
   quasi tutti i tablet. Le regole qui sotto ricalcano quelle di WordPress
   spostandone soltanto la soglia. */
@media (min-width: 600px) and (max-width: 959.98px) {
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		inset: 0;
		width: auto;
		z-index: 100000;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* Menu aperto: sovrapposto a tutta la pagina, come sotto i 600px. */
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 100000;
	}
}

/* Il pulsante che apre il menu e quello che lo chiude: bersaglio pieno. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* Dentro il menu a tendina le voci diventano righe larghe e spaziate. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.375rem;
	padding: 10px 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 4px;
}

/* ---------- striscia scorrevole ---------- */
.bf-ticker {
	background: var(--oro);
	color: var(--nero);
	overflow: hidden;
	border-block: 3px solid var(--rosso);
	padding: 0;
	position: relative;
}

.bf-ticker p {
	display: flex;
	gap: 0;
	padding: 11px 0;
	margin: 0;
	white-space: nowrap;
	width: max-content;
	font-family: var(--cond);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Il movimento parte solo quando il duplicato per il ciclo è stato aggiunto:
   senza JavaScript la striscia resta ferma e leggibile invece di scorrere
   via lasciando il vuoto. */
.bf-ticker.is-anim p { animation: bf-slide 36s linear infinite; }
.bf-ticker.is-paused p { animation-play-state: paused; }

/* Le due copie hanno lo stesso ingombro, distacco compreso: solo così lo
   scorrimento di metà larghezza torna al punto di partenza senza scatti.
   La seconda serve al ciclo, non alla lettura: gli screen reader la saltano. */
.bf-ticker__seq {
	padding-right: 44px;
	flex: none;
}

@keyframes bf-slide {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Comando di pausa: obbligatorio quando qualcosa si muove da solo senza fine
   (WCAG 2.2.2). Lo aggiunge lo script, così non resta un pulsante morto. */
.bf-ticker__pausa {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-left: 1px solid rgba(20, 17, 16, .25);
	background: var(--oro);
	color: var(--nero);
	cursor: pointer;
	font-size: .75rem;
	line-height: 1;
}

.bf-ticker__pausa:hover { background: var(--oro-chiaro); }
.bf-ticker__pausa svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- apertura home ---------- */

/* La fascia esce dalla colonna di testo e prende tutta la larghezza dello
   schermo. Fatto qui e non con l'allineamento «in pieno» del blocco: dentro
   il layout vincolato del modello quello restava largo quanto il testo, e il
   campo si vedeva solo per la striscia centrale. Il selettore doppio serve a
   battere la regola di larghezza che WordPress genera per i figli. */
.wp-block-group.bf-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--linea);
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Fondo dell'apertura: il campo da futsal disegnato della bozza statica.
   Nessuna fotografia, nessun file da scaricare — sono venti righe di SVG.
   I colori non sono scritti nell'SVG ma presi dalla palette, così cambiando
   theme.json cambia anche il campo. */
.bf-hero-campo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .5;
}

.bf-hero-campo .bf-campo-fondo { fill: var(--nero-2); }

.bf-hero-campo .bf-campo-linee {
	fill: none;
	stroke: var(--oro);
	stroke-width: 1.4;
	opacity: .5;
}

.bf-hero-campo .bf-campo-porte {
	fill: none;
	stroke: var(--rosso);
	stroke-width: 2.4;
	opacity: .95;
}

.bf-hero-campo .bf-campo-punti {
	fill: var(--oro);
	opacity: .65;
}

/* La spaziatura sta qui e non fra gli attributi del blocco: solo così può
   ridursi sugli schermi stretti, come nella bozza (uno stile in linea
   vincerebbe su qualunque media query). */
.bf-hero-contenuto {
	position: relative;
	z-index: 2;
	max-width: 1240px;
	margin: 0 auto;
	padding: 96px 24px 104px;
}

/* La dimensione è quella della bozza statica; il peso no. La bozza usava il
   900 e a 150px risultava un muro: su richiesta della società i titoli sono
   scesi al 500, il più sottile che il file variabile contenga. */
.bf-hero h1 {
	font-size: clamp(3.375rem, 12vw, 9.375rem);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: .9;
}

/* Righe due e tre del titolo: solo contorno oro, come nella bozza.
   Il contorno è una proprietà con prefisso: dove manca, il testo resterebbe
   trasparente e quindi invisibile. Perciò il colore pieno è la regola base e
   il contorno arriva solo se il browser sa disegnarlo. */
.bf-hero .bf-out {
	color: var(--oro);
	display: block;
}

@supports (-webkit-text-stroke: 2px currentColor) {
	.bf-hero .bf-out {
		-webkit-text-stroke: 2px var(--oro);
		color: transparent;
	}
}

.bf-claim {
	font-family: var(--cond);
	font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--grigio);
	max-width: 50ch;
}

/* ---------- intestazione pagine interne ---------- */
.bf-page-head {
	position: relative;
	border-bottom: 1px solid var(--linea);
	background: var(--nero-2);
	overflow: hidden;
}

.bf-page-head::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(115deg, rgba(254, 201, 0, .06) 0 22px, transparent 22px 44px);
	pointer-events: none;
}

.bf-page-head > * { position: relative; z-index: 2; }

/* ---------- segnaposto foto ----------
   Finché non arrivano le fotografie vere, il riquadro a strisce dichiara
   che lì andrà un'immagine: è più onesto di una foto di repertorio. */
.bf-ph {
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(135deg, rgba(254, 201, 0, .1) 0 14px, rgba(168, 20, 25, .14) 14px 28px),
		var(--nero-3);
	display: grid;
	place-items: center;
	text-align: center;
	padding: 0 12px;
}

.bf-ph p {
	font-family: var(--cond);
	letter-spacing: .2em;
	text-transform: uppercase;
	font-size: .8125rem;
	color: var(--grigio);
	margin: 0;
}

.bf-ph-larga { aspect-ratio: 16 / 9; }
.bf-ph-alta { aspect-ratio: 3 / 4; }

/* ---------- schede di accesso rapido ---------- */
.bf-card-q {
	background: var(--nero-2);
	position: relative;
	transition: background .2s ease;
	height: 100%;
}

.bf-card-q::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: var(--rosso-vivo);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}

.bf-card-q:hover { background: var(--nero-3); }
.bf-card-q:hover::before { transform: scaleX(1); }

/* Tutta la scheda è cliccabile, non solo la riga finale: il collegamento
   del titolo si allarga fino ai bordi. Resta un solo collegamento per
   scheda, quindi chi naviga con la tastiera fa un tab invece di tre. */
.bf-card-q:has(a) { cursor: pointer; }

.bf-card-q .bf-vai a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Senza `position` propria: l'area cliccabile qui sopra deve misurarsi sulla
   scheda, non sulla riga che la contiene. */
.bf-vai {
	font-family: var(--cond);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .875rem;
	color: var(--oro);
}

/* ---------- scheda generica (notizie, squadre) ---------- */
.bf-card {
	border: 1px solid var(--linea);
	background: var(--nero-2);
	overflow: hidden;
	height: 100%;
	position: relative;
	transition: border-color .2s;
}

.bf-card:hover { border-color: rgba(254, 201, 0, .4); }

.bf-card figure.wp-block-post-featured-image { margin: 0; }

.bf-card figure.wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

/* Stesso principio delle schede di accesso rapido: il titolo copre la
   scheda intera, immagine compresa. */
.bf-card .wp-block-post-title a::after,
.bf-persona .wp-block-post-title a::after,
.bf-news-elenco .wp-block-post .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bf-card .wp-block-post-title a:hover,
.bf-persona .wp-block-post-title a:hover,
.bf-news-elenco .wp-block-post-title a:hover { color: var(--oro); }

/* Il rosso acceso decorativo non regge il contrasto a 13px su fondo scuro:
   per il testo si usa la variante schiarita (5.2:1 invece di 3.8:1). */
.bf-cat {
	font-family: var(--cond);
	font-size: .8125rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rosso-testo);
	font-weight: 700;
}

.bf-data {
	font-family: var(--cond);
	font-size: .8125rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--oro);
}

/* ---------- numeri / timeline / categorie: griglie a filo ---------- */
.bf-griglia-filo {
	gap: 1px !important;
	background: var(--linea);
	border: 1px solid var(--linea);
}

.bf-griglia-filo > * {
	background: var(--nero-2);
	margin: 0;
}

.bf-numero {
	display: block;
	font-family: var(--display);
	font-weight: 900;
	font-size: 2rem;
	color: var(--oro);
	line-height: 1;
}

.bf-numero-etichetta {
	font-family: var(--cond);
	letter-spacing: .16em;
	text-transform: uppercase;
	font-size: .75rem;
	color: var(--grigio);
}

.bf-anni {
	font-family: var(--display);
	font-weight: 900;
	font-size: 1.625rem;
	color: var(--oro);
	line-height: 1;
}

/* ---------- persone / staff ---------- */
.bf-persona {
	border: 1px solid var(--linea);
	background: var(--nero-2);
	height: 100%;
	position: relative;
}

.bf-persona figure.wp-block-post-featured-image { margin: 0; }

.bf-persona figure.wp-block-post-featured-image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}

.bf-ruolo {
	font-family: var(--cond);
	font-size: .8125rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--oro);
}

/* ---------- elenco notizie a righe ---------- */
.bf-news-elenco .wp-block-post {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 28px;
	align-items: center;
	padding: 24px 0;
	border-bottom: 1px solid var(--linea);
	position: relative;
	transition: background .2s;
}

.bf-news-elenco .wp-block-post:hover { background: var(--nero-2); }

.bf-news-elenco figure.wp-block-post-featured-image { margin: 0; }

.bf-news-elenco figure.wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

/* ---------- fascia sponsor ---------- */
.bf-sponsor .wp-block-post-template {
	gap: 1px !important;
	background: var(--linea);
	border: 1px solid var(--linea);
}

.bf-sponsor .wp-block-post {
	background: var(--nero);
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	padding: 14px;
	margin: 0;
}

.bf-sponsor img {
	max-height: 68px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .65;
	transition: filter .2s ease, opacity .2s ease;
}

.bf-sponsor a:hover img,
.bf-sponsor a:focus-visible img,
.bf-sponsor img:hover { filter: grayscale(0); opacity: 1; }

/* Il logo porta al sito dello sponsor, non alla scheda interna: le schede
   sponsor non hanno una pagina pubblica. Il collegamento lo costruisce il
   plugin, qui c'è solo la forma. */
.bf-sponsor-link {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

/* ---------- pacchetti sponsorizzazione ---------- */
.bf-pacchetto {
	border: 1px solid var(--linea);
	background: var(--nero-2);
	height: 100%;
}

.bf-pacchetto.bf-evidenza { border-color: var(--oro); }
.bf-pacchetto h3 { color: var(--oro); }

/* ---------- elenchi puntati e numerati ---------- */
.bf-lista-check { list-style: none; padding: 0; display: grid; gap: 12px; }

.bf-lista-check li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--grigio);
}

.bf-lista-check li::before {
	content: "";
	width: 9px;
	height: 9px;
	background: var(--rosso-vivo);
	flex: none;
	margin-top: 9px;
}

/* ---------- riquadro informativo ---------- */
.bf-box-info {
	border: 1px solid var(--linea);
	border-left: 4px solid var(--oro);
	background: var(--nero-2);
}

/* ---------- tabella rosa ----------
   Il contenitore scorre da solo sugli schermi stretti: una tabella larga
   non deve trascinare con sé tutta la pagina. */
.bf-tabella {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bf-tabella table { width: 100%; border-collapse: collapse; }

.bf-tabella th {
	font-family: var(--cond);
	font-weight: 700;
	font-size: .8125rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--oro);
	text-align: left;
	padding: 12px 14px;
	border-bottom: 2px solid var(--rosso);
}

.bf-tabella td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--linea);
	color: var(--grigio);
	font-variant-numeric: tabular-nums;
}

.bf-tabella tr:hover td { background: var(--nero-2); }

/* ---------- fascia di richiamo finale ---------- */
.bf-cta-finale { background: var(--rosso); text-align: center; }
.bf-cta-finale h2, .bf-cta-finale p { color: #fff; }

/* ---------- piè di pagina ---------- */
.wp-site-blocks > footer { background: #0B0908; }

.wp-site-blocks > footer h2.bf-foot-titolo,
.wp-site-blocks > footer h4,
.bf-foot-titolo {
	font-family: var(--cond);
	font-size: .875rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--oro);
	font-weight: 700;
	margin-bottom: 16px;
}

.wp-site-blocks > footer p { color: var(--grigio); }

/* Elenchi di collegamento del piè di pagina: righe alte abbastanza da
   colpirle col pollice senza sbagliare quella accanto. */
.bf-foot-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bf-foot-menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: .9375rem;
	color: var(--bianco);
}

.bf-foot-menu a:hover { color: var(--oro); }

/* Il grigio scurissimo di prima si fermava a 2,8:1 sul fondo del piè di
   pagina: sotto la soglia di leggibilità. Il grigio della palette arriva
   a 6,4:1 con lo stesso effetto di secondo piano. */
.bf-foot-bottom {
	border-top: 1px solid var(--linea);
	font-family: var(--cond);
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--grigio);
}

.bf-foot-bottom p { color: var(--grigio); margin: 0; }

/* ---------- social ---------- */
.bf-social { display: inline-flex; gap: 2px; align-items: center; }

.bf-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--grigio);
	text-decoration: none;
	transition: color .15s ease, transform .15s ease;
}

.bf-social-link:hover { color: var(--oro); transform: translateY(-2px); }

/* ---------- pulsante fantasma ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid var(--linea);
	color: var(--bianco);
	background: transparent;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--oro);
	color: var(--oro);
	background: transparent;
}

/* ---------- moduli ---------- */
.wp-block-search__input,
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
	background: var(--nero-2);
	border: 1px solid var(--linea);
	color: var(--bianco);
	padding: 13px 15px;
	border-radius: 0;
	font-size: 1rem;
}

.wp-block-search__button {
	background: var(--oro);
	color: var(--nero);
	border: 0;
	font-family: var(--cond);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 13px 22px;
	min-height: 44px;
}

.wp-block-search__button:hover { background: var(--oro-chiaro); }

/* ---------- il campo orari conserva le andate a capo ---------- */
.bf-prewrap { white-space: pre-wrap; }

/* ---------- paginazione ---------- */
.wp-block-query-pagination {
	font-family: var(--cond);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 8px;
}

/* ---------- accessibilità ----------
   Anello di messa a fuoco a due colori: il nero si vede sui pulsanti oro,
   l'oro si vede sul fondo nero della pagina. Uno dei due funziona sempre,
   qualunque sia lo sfondo sotto l'elemento.

   Senza :where(), che azzera il peso della regola e la lasciava scavalcare
   da qualunque stile dei blocchi di WordPress. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-element-button:focus-visible,
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--nero);
	outline-offset: 0;
	box-shadow: 0 0 0 6px var(--oro);
	position: relative;
	z-index: 2;
}

/* ---------- adattamento a schermi stretti ---------- */
@media (max-width: 1000px) {
	.bf-news-elenco .wp-block-post { grid-template-columns: 160px 1fr; }
}

@media (max-width: 760px) {
	.bf-news-elenco .wp-block-post { grid-template-columns: 1fr; gap: 14px; }
	.bf-numero { font-size: 2.375rem; }
	.bf-hero-contenuto { padding: 56px 24px 66px; }
	html { scroll-padding-top: 7rem; }

	/* Sul telefono la barra rossa tiene solo i recapiti: l'indirizzo degli
	   impianti resta nel piè di pagina e nella pagina Contatti, e qui rubava
	   due righe sopra il contenuto. */
	.bf-topbar .wp-block-group > p:first-child { display: none; }
	.bf-topbar .wp-block-group { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.bf-ticker.is-anim p { animation: none; }
	*, *::before, *::after { transition: none !important; }
	html { scroll-behavior: auto; }
}