/* ==========================================================================
   Agenzia Sezioni · base
   Caricato solo sulle pagine a sezioni. I colori si cambiano da
   Blocchi → Impostazioni (sovrascrivono queste variabili).
   Font e dimensione del testo arrivano dal tema.
   ========================================================================== */

:root {
	--bf_primario: #1d5c63;
	--bf_accento: #f2c14e;
	--bf_scuro: #15232d;
	--bf_superficie: #eef1f3;
	--bf_chiaro: #ffffff;
	--bf_testo: #15232d;
	--bf_radius: 0.375rem;
	--bf_width: 1200px;

	--bf_gutter: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
	--bf_space_s: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
	--bf_space_m: clamp(1.25rem, 1rem + 1vw, 2rem);
	--bf_space_l: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
	--bf_space_xl: clamp(3.5rem, 2.5rem + 5vw, 7rem);

	--bf_text_l: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
	--bf_title_section_size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
}

/* Le sezioni escono dal contenitore del tema e occupano tutta la larghezza. */
body.bf_pagina {
	overflow-x: clip;
}

.bf_main {
	display: block;
	width: 100%;
	flex: 1 1 100%;
}

/* ---------- Sfondo immagine della sezione ---------- */

.bf_section .bf_section_sfondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.bf_bg_immagine::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--bf_scuro) 82%, transparent),
		color-mix(in srgb, var(--bf_scuro) 45%, transparent)
	);
}

/* ---------- Elementi comuni ---------- */

.bf_section :where(h1, h2, h3, p, ul, ol, figure) {
	margin: 0;
}

.bf_section :where(h1, h2, h3) {
	color: inherit;
	text-wrap: balance;
}

.bf_section p {
	text-wrap: pretty;
}

.bf_eyebrow {
	color: var(--s-occhiello);
	font-size: 1rem;
	font-weight: 600;
}

.bf_title_section {
	font-size: var(--bf_title_section_size);
	font-weight: var(--bf_title_weight, 700);
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.bf_section a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.bf_section img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Schemi di impaginazione
   Classi da usare nell'HTML dei tipi di sezione. Coprono i casi ricorrenti,
   così il CSS di un tipo contiene solo ciò che lo rende unico.
   ========================================================================== */

/* Pila: elementi uno sotto l'altro con spazio uniforme */
.bf_stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bf_space_m);
}

.bf_stack_stretta {
	gap: 0.5rem;
}

.bf_stack_centro {
	align-items: center;
	max-width: 50rem;
	margin-inline: auto;
	text-align: center;
}

/* Due colonne: testo + immagine. Con un solo elemento diventa una
   colonna di lettura centrata. L'immagine va in un .bf_media. */
.bf_two_cols {
	display: grid;
	gap: var(--bf_space_l);
	align-items: center;
}

.bf_two_cols:not(:has(> :nth-child(2))) > * {
	width: 100%;
	max-width: 44rem;
	margin-inline: auto;
}

.bf_two_cols_mobile_media_sopra > .bf_media {
	order: -1;
}

@container (min-width: 48rem) {
	.bf_two_cols:has(> :nth-child(2)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--bf_space_xl);
	}

	.bf_two_cols > .bf_media {
		order: 1;
	}

	.bf_two_cols_media_sinistra > .bf_media {
		order: -1;
	}
}

/* Immagine con proporzioni e angoli coerenti */
.bf_media {
	margin: 0;
}

.bf_media img {
	width: 100%;
	aspect-ratio: var(--bf_ratio, 4 / 3);
	object-fit: cover;
	border-radius: var(--bf_radius);
}

.bf_media_quadrata { --bf_ratio: 1 / 1; }
.bf_media_3_2 { --bf_ratio: 3 / 2; }
.bf_media_larga { --bf_ratio: 16 / 9; }
.bf_media_verticale { --bf_ratio: 3 / 4; }
.bf_media_libera { --bf_ratio: auto; }

/* Griglia: colonne in base allo spazio disponibile.
   --2, --3, --4 indicano il massimo di colonne su schermi larghi. */
.bf_grid {
	display: grid;
	gap: var(--bf_space_m);
	margin: 0;
	padding: 0;
	list-style: none;
}

@container (min-width: 36rem) {
	.bf_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 56rem) {
	.bf_grid_3,
	.bf_grid_4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (min-width: 72rem) {
	.bf_grid_4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Intestazione di sezione: titolo + introduzione sopra un contenuto */
.bf_heading {
	display: flex;
	flex-direction: column;
	gap: var(--bf_space_s);
	max-width: 44rem;
	margin-bottom: var(--bf_space_l);
}

.bf_heading_centro {
	align-items: center;
	margin-inline: auto;
	text-align: center;
}

/* Gruppo di pulsanti */
.bf_buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bf_space_s);
}

/* Card */
.bf_card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--s-bordo);
	border-radius: var(--bf_radius);
	background: var(--s-card);
}

.bf_card .bf_media img {
	border-radius: 0;
}

.bf_card_corpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--bf_space_m);
}

.bf_card_titolo {
	font-size: 1.2rem;
	font-weight: var(--bf_title_weight, 650);
	line-height: 1.25;
}

.bf_card_testo {
	color: var(--s-tenue);
	line-height: 1.55;
}

.bf_card_azione {
	margin-top: auto;
	padding-top: 0.5rem;
	color: var(--s-occhiello);
	font-weight: 600;
}

/* Link che rende cliccabile tutto il contenitore (.bf_card o simili) */
.bf_link_cover {
	color: inherit;
	text-decoration: none;
}

.bf_link_cover::after {
	content: "";
	position: absolute;
	inset: 0;
}

.bf_card:has(.bf_link_cover:hover) .bf_card_azione {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bf_card:has(.bf_link_cover:focus-visible) {
	outline: 2px solid var(--s-testo);
	outline-offset: 2px;
}

.bf_section .bf_link_cover:focus-visible {
	outline: none;
}

/* Contenitore: larghezza massima e margini laterali, da usare dentro le
   sezioni che non hanno una riga bf_pillars propria. */
.bf_container {
	width: 100%;
	max-width: var(--bf_width);
	margin-inline: auto;
	padding-inline: var(--bf_gutter);
}

/* Contenitore stretto, per testi e fasce che non devono allargarsi troppo. */
.bf_container_s {
	width: 100%;
	max-width: var(--bf_width_s, 1000px);
	margin-inline: auto;
	padding-inline: var(--bf_gutter);
}

.bf_section {
	position: relative;
}

/* Variabili di contesto predefinite: quelle di una sezione chiara, ma
   senza sfondo. Le classi bf_bg_<colore> le sostituiscono; :where() tiene
   la specificità a zero, così vincono sempre. */
:where(.bf_section) {
	--s-testo: var(--bf_testo, currentColor);
	--s-tenue: color-mix(in srgb, var(--s-testo) 75%, transparent);
	--s-occhiello: var(--bf_primario, currentColor);
	--s-btn-sfondo: var(--bf_primario, currentColor);
	--s-btn-testo: var(--bf_chiaro, #fff);
	--s-card: color-mix(in srgb, var(--s-testo) 5%, transparent);
	--s-bordo: color-mix(in srgb, var(--s-testo) 15%, transparent);
}

/* Icone */
.bf_icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -0.125em;
}

/* Testi ricorrenti */
.bf_title_big {
	font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
	font-weight: var(--bf_title_weight, 700);
	line-height: 1.04;
	letter-spacing: -0.025em;
}

.bf_intro {
	color: var(--s-tenue);
	font-size: var(--bf_text_l);
	line-height: 1.5;
}

/* ==========================================================================
   Header e footer
   ========================================================================== */

/* Sezioni annidate (un blocco dentro una colonna): niente larghezza piena */
.bf_section .bf_section {
	width: auto;
	margin-inline: 0;
}

.bf_section .bf_section > .bf_container {
	max-width: none;
	padding-inline: 0;
}

/* Dentro header e footer le sezioni non si allargano */
.bf_header .bf_section,
.bf_footer .bf_section {
	width: auto;
	margin-inline: 0;
}

.bf_header_fisso {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

@media (max-width: 600px) {
	.admin-bar .bf_header_fisso {
		top: 0;
	}
}

.bf_menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bf_space_m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bf_menu a {
	color: inherit;
	text-decoration: none;
}

.bf_menu a:hover,
.bf_menu .current-menu-item > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.bf_logo {
	display: block;
	width: auto;
	max-height: 3rem;
}

.bf_logo_testo {
	font-size: 1.25rem;
	font-weight: 700;
	max-height: none;
}

/* Collegamento "Vai al contenuto", visibile solo con la tastiera */
.bf_skip {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 1000;
	padding: 0.75rem 1rem;
	background: #fff;
	color: #000;
}

.bf_skip:focus {
	top: 1rem;
}

/* Testo formattato (campi con editor visuale) */
.bf_rich_text {
	color: var(--s-tenue);
	font-size: var(--bf_text_l);
	line-height: 1.6;
}

.bf_rich_text > * + * {
	margin-top: 1em;
}

.bf_rich_text :where(ul, ol) {
	padding-left: 1.2em;
}

.bf_rich_text a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.bf_rich_text strong {
	color: var(--s-testo);
}

/* Visibile solo agli amministratori quando l'HTML di un tipo ha un errore */
.bf_error {
	padding: 1rem;
	border: 2px dashed #b32d2e;
	background: #fff;
	color: #b32d2e;
	font-family: system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
	.bf_section * {
		transition: none !important;
	}
}