/*! BD Blocks 0.21.0 - blocco Profili social: 8 temi, colori ufficiali o monocromatici, chiaro e dark (.custom-dark) */

/* ------------------------------------------------------------------ Base
   --bds-b: colore della rete (inline su ogni link); --bds-gi: sfumatura (Instagram);
   --bds-on: colore dell'icona sopra il colore pieno; --bds-ml / --bds-md: monocromatico scelto. */
.bd-soc {
	--bds-size: 20px;
	--bds-gap: 10px;
	--bds-box: calc(var(--bds-size) * 2);
	--bds-r: 50%;
	--bds-m: var(--bds-ml, #1f2937);
	--bds-mon: #ffffff;
	--bds-ink: #0f172a;
	margin: 1.2em 0;
}
.custom-dark .bd-soc {
	--bds-m: var(--bds-md, #e5e7eb);
	--bds-mon: #111827;
	--bds-ink: #f1f5f9;
}
.bd-soc--sh-rounded { --bds-r: 28%; }
.bd-soc--sh-square { --bds-r: 4px; }

.bd-soc .bd-soc__title { margin: 0 0 .6em; font-size: .95em; font-weight: 700; }
.bd-soc.bd-soc--a-center .bd-soc__title { text-align: center; }
.bd-soc.bd-soc--a-right .bd-soc__title { text-align: right; }

/* Classi doppie: battono gli stili degli elenchi del tema. */
.bd-soc.bd-soc .bd-soc__list { display: flex; flex-wrap: wrap; gap: var(--bds-gap); margin: 0; padding: 0; list-style: none; }
.bd-soc.bd-soc--a-center .bd-soc__list { justify-content: center; }
.bd-soc.bd-soc--a-right .bd-soc__list { justify-content: flex-end; }
.bd-soc.bd-soc .bd-soc__item { margin: 0; padding: 0; list-style: none; }
.bd-soc.bd-soc .bd-soc__item::before,
.bd-soc.bd-soc .bd-soc__item::marker { content: none; }

.bd-soc.bd-soc .bd-soc__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	box-sizing: border-box;
	min-width: var(--bds-box);
	height: var(--bds-box);
	border-radius: var(--bds-r);
	color: var(--bds-c);
	text-decoration: none;
	line-height: 1;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* --bds-b / --bds-gi: colore e sfumatura ufficiali della rete (inline); --bds-c / --bds-g: quelli usati. */
.bd-soc .bd-soc__link { --bds-c: var(--bds-b); --bds-g: var(--bds-gi); }
.bd-soc.bd-soc .bd-soc__link:focus-visible { outline: 2px solid var(--bds-c); outline-offset: 3px; }
.bd-soc .bd-soc__ico { display: inline-flex; flex: none; width: var(--bds-size); height: var(--bds-size); }
.bd-soc .bd-soc__ico svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.bd-soc .bd-soc__txt { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.bd-soc .bd-soc__name { font-size: .9em; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.bd-soc .bd-soc__handle { margin-top: .2em; font-size: .78em; font-weight: 500; line-height: 1.15; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16em; }

/* Nome nascosto (resta per i lettori di schermo) se non richiesto. */
.bd-soc:not(.bd-soc--labels) .bd-soc__txt {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* Con il nome: l'icona diventa una pillola. */
.bd-soc.bd-soc--labels:not(.bd-soc--s-minimal):not(.bd-soc--s-card) .bd-soc__link { padding: 0 1em 0 calc((var(--bds-box) - var(--bds-size)) / 2); }
.bd-soc.bd-soc--labels.bd-soc--sh-circle:not(.bd-soc--s-card) .bd-soc__link { border-radius: 999px; }

/* Colori: le reti chiare (Snapchat) hanno l'icona scura sopra il colore pieno.
   Reti nere (X, TikTok, Threads, GitHub) in dark (0.20.1, 0.20.2):
   - temi a colore pieno (Pieno, Pillole, Schede): restano nere con il logo bianco,
     identiche alla modalità chiara (nessun bordo aggiunto);
   - gli altri temi usano il colore per l'icona o il bordo su fondo trasparente:
     lì il nero sparirebbe, quindi diventano chiare. */
.bd-soc .bd-soc__link--lt { --bds-on: #111111; }
.custom-dark .bd-soc:not(.bd-soc--s-solid):not(.bd-soc--s-pill):not(.bd-soc--s-card) .bd-soc__link--dk,
.bd-soc.bd-soc--s-neon .bd-soc__link--dk { --bds-c: #f3f4f6; --bds-on: #111111; }

/* Monocromatico: un solo colore per tutte le reti, niente sfumatura. */
.bd-soc.bd-soc--c-mono .bd-soc__link { --bds-c: var(--bds-m); --bds-on: var(--bds-mon); --bds-g: initial; }
.bd-soc.bd-soc--c-mono.bd-soc--s-neon { --bds-m: var(--bds-md, #e5e7eb); }

/* ------------------------------------------------------------------ Temi */

/* Tinta tenue: fondo leggero del colore della rete, pieno al passaggio. */
.bd-soc--s-soft .bd-soc__link { background: rgba(127, 127, 127, .12); background: color-mix(in srgb, var(--bds-c) 13%, transparent); }
.custom-dark .bd-soc--s-soft .bd-soc__link { background: color-mix(in srgb, var(--bds-c) 22%, transparent); }
.bd-soc.bd-soc--s-soft .bd-soc__link:hover,
.bd-soc.bd-soc--s-soft .bd-soc__link:focus-visible { color: var(--bds-on, #fff); background: var(--bds-g, var(--bds-c)); transform: translateY(-2px); }

/* Pieno: colore ufficiale, icona bianca, ombra colorata al passaggio. */
.bd-soc.bd-soc--s-solid .bd-soc__link { color: var(--bds-on, #fff); background: var(--bds-g, var(--bds-c)); }
.bd-soc.bd-soc--s-solid .bd-soc__link:hover,
.bd-soc.bd-soc--s-solid .bd-soc__link:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px -6px var(--bds-c); }

/* Contorno: bordo del colore della rete, si riempie al passaggio. */
.bd-soc.bd-soc--s-outline .bd-soc__link { border: 2px solid var(--bds-c); background: transparent; }
.bd-soc.bd-soc--s-outline .bd-soc__link:hover,
.bd-soc.bd-soc--s-outline .bd-soc__link:focus-visible { color: var(--bds-on, #fff); background: var(--bds-c); }

/* Solo icone: nessun fondo, l'icona si ingrandisce al passaggio. */
.bd-soc.bd-soc--s-minimal .bd-soc__link { min-width: 0; height: auto; padding: .15em; border-radius: 6px; }
.bd-soc.bd-soc--s-minimal .bd-soc__link:hover,
.bd-soc.bd-soc--s-minimal .bd-soc__link:focus-visible { transform: scale(1.14); }
.bd-soc.bd-soc--s-minimal.bd-soc--labels .bd-soc__link { gap: .4em; }
.bd-soc.bd-soc--s-minimal.bd-soc--labels .bd-soc__name { color: var(--bds-ink); }

/* Vetro: fondo traslucido e sfocato, bordo luminoso, icona colorata. */
.bd-soc.bd-soc--s-glass .bd-soc__link {
	background: rgba(255, 255, 255, .6);
	border: 1px solid rgba(255, 255, 255, .85);
	box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
}
.custom-dark .bd-soc.bd-soc--s-glass .bd-soc__link {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
	box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.bd-soc.bd-soc--s-glass .bd-soc__link:hover,
.bd-soc.bd-soc--s-glass .bd-soc__link:focus-visible { transform: translateY(-2px); border-color: var(--bds-c); }
.bd-soc.bd-soc--s-glass.bd-soc--labels .bd-soc__name { color: var(--bds-ink); }

/* Neon: fondo scuro sempre, icona luminosa con alone del colore della rete. */
.bd-soc.bd-soc--s-neon .bd-soc__link {
	background: #0b0f1a;
	border: 1px solid rgba(255, 255, 255, .16);
	border-color: color-mix(in srgb, var(--bds-c) 55%, transparent);
	box-shadow: 0 0 12px -2px var(--bds-c), inset 0 0 10px -4px var(--bds-c);
	box-shadow: 0 0 12px -2px color-mix(in srgb, var(--bds-c) 70%, transparent), inset 0 0 10px -4px var(--bds-c);
	filter: none;
}
.bd-soc.bd-soc--s-neon .bd-soc__ico { filter: drop-shadow(0 0 4px var(--bds-c)); }
.bd-soc.bd-soc--s-neon .bd-soc__link:hover,
.bd-soc.bd-soc--s-neon .bd-soc__link:focus-visible { box-shadow: 0 0 22px 0 var(--bds-c), inset 0 0 12px -2px var(--bds-c); transform: translateY(-2px); }
.bd-soc.bd-soc--s-neon .bd-soc__name { color: #f1f5f9; }

/* Pillole con nome: colore pieno, icona e nome della rete. */
.bd-soc.bd-soc--s-pill .bd-soc__link {
	height: auto;
	min-height: var(--bds-box);
	padding: .45em 1.15em .45em .75em;
	color: var(--bds-on, #fff);
	background: var(--bds-g, var(--bds-c));
	border-radius: 999px;
}
.bd-soc.bd-soc--s-pill.bd-soc--sh-rounded .bd-soc__link { border-radius: 12px; }
.bd-soc.bd-soc--s-pill.bd-soc--sh-square .bd-soc__link { border-radius: 4px; }
.bd-soc.bd-soc--s-pill .bd-soc__link:hover,
.bd-soc.bd-soc--s-pill .bd-soc__link:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px -6px var(--bds-c); }

/* Schede con nome utente: griglia di schede con icona colorata, rete e @nome. */
.bd-soc.bd-soc--s-card .bd-soc__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.bd-soc.bd-soc--s-card .bd-soc__link {
	justify-content: flex-start;
	gap: .75em;
	width: 100%;
	height: auto;
	padding: .7em .9em;
	color: var(--bds-ink);
	background: rgba(127, 127, 127, .06);
	border: 1px solid rgba(127, 127, 127, .22);
	border-radius: 14px;
}
.bd-soc.bd-soc--s-card.bd-soc--sh-square .bd-soc__link { border-radius: 4px; }
.bd-soc.bd-soc--s-card .bd-soc__ico {
	box-sizing: content-box;
	padding: calc(var(--bds-size) * .45);
	color: var(--bds-on, #fff);
	background: var(--bds-g, var(--bds-c));
	border-radius: var(--bds-r);
}
.bd-soc.bd-soc--s-card .bd-soc__link:hover,
.bd-soc.bd-soc--s-card .bd-soc__link:focus-visible { transform: translateY(-2px); border-color: var(--bds-c); box-shadow: 0 10px 22px -12px var(--bds-c); }
.custom-dark .bd-soc.bd-soc--s-card .bd-soc__link { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }

/* Chi preferisce meno movimento: niente spostamenti. */
@media (prefers-reduced-motion: reduce) {
	.bd-soc.bd-soc .bd-soc__link { transition: none; }
	.bd-soc.bd-soc .bd-soc__link:hover { transform: none; }
}

/* Contenitore dei vecchi blocchi Blocksy (rete di sicurezza). */
.bd-soc-wrap > :first-child { margin-top: 0; }

/* Sito ufficiale (grigio ardesia): piu' chiaro sul fondo scuro. */
.custom-dark .bd-soc .bd-soc__link--website,
.bd-soc.bd-soc--s-neon .bd-soc__link--website { --bds-c: #cbd5e1; --bds-on: #0f172a; }
.custom-dark .bd-soc.bd-soc--c-mono .bd-soc__link--website { --bds-c: var(--bds-m); --bds-on: var(--bds-mon); }