/**
 * SCF Linktree — stili pubblici.
 *
 * Qui stanno TUTTE le regole. I valori configurabili dalle impostazioni
 * (colori, font, arrotondamento, larghezza) arrivano come custom properties
 * su :root, iniettate da SCF_LT_Renderer::register_assets() subito dopo
 * questo file, e sovrascrivono i default dichiarati qui sotto.
 */

:root {
	/* Sovrascritte dalle impostazioni del plugin. */
	--scf-bg: #ffffff;
	--scf-bg2: #ffffff;
	--scf-text: #111827;
	--scf-muted: #6b7280;
	--scf-btn-bg: #ffffff;
	--scf-btn-text: #111827;
	--scf-accent: #2563eb;
	--scf-featured-text: #ffffff;
	--scf-radius: 14px;
	--scf-width: 620px;
	--scf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--scf-link-title-size: 18px;
	--scf-link-subtitle-size: 14px;

	--scf-avatar-size: 132px;

	--scf-site-title-size: 32px;
	--scf-site-title-weight: 700;
	--scf-site-title-color: var( --scf-text );
	--scf-site-title-font: var( --scf-font );

	--scf-contact-size: 15px;
	--scf-contact-weight: 500;
	--scf-contact-color: var( --scf-muted );
	--scf-contact-font: var( --scf-font );

	/* Solo CSS: per modificarle usa il campo "CSS aggiuntivo" nelle impostazioni. */
	--scf-shadow: 0 1px 2px rgba( 17, 24, 39, 0.06 ), 0 4px 12px rgba( 17, 24, 39, 0.09 );
	--scf-shadow-hover: 0 4px 8px rgba( 17, 24, 39, 0.09 ), 0 14px 30px rgba( 17, 24, 39, 0.15 );
	--scf-hairline: rgba( 17, 24, 39, 0.08 );
	--scf-chip: rgba( 17, 24, 39, 0.06 );
}

/* Le superfici neutre seguono il colore del testo, così restano visibili
   sia su fondo chiaro sia su fondo scuro. */
@supports ( background: color-mix( in srgb, red 10%, transparent ) ) {
	:root {
		--scf-hairline: color-mix( in srgb, var( --scf-text ) 12%, transparent );
		--scf-chip: color-mix( in srgb, var( --scf-text ) 8%, transparent );
	}
}

/* Pagina dedicata
   ------------------------------------------------------------------ */
body.scf-linktree-page {
	margin: 0;
	min-height: 100vh;
	background: var( --scf-bg );
	background-image: linear-gradient( 160deg, var( --scf-bg ) 0%, var( --scf-bg2 ) 100% );
	background-attachment: fixed;
	color: var( --scf-text );
	font-family: var( --scf-font );
	-webkit-font-smoothing: antialiased;
}

body.scf-linktree-page .scf-page-main {
	display: flex;
	justify-content: center;
	padding: clamp( 32px, 7vw, 72px ) 20px 56px;
}

/* Contenitore
   ------------------------------------------------------------------ */
.scf-linktree {
	width: 100%;
	max-width: var( --scf-width );
	margin: 0 auto;
	font-family: var( --scf-font );
	color: var( --scf-text );
	box-sizing: border-box;
}

.scf-linktree *,
.scf-linktree *::before,
.scf-linktree *::after {
	box-sizing: inherit;
}

/* Profilo
   ------------------------------------------------------------------ */
.scf-profile {
	text-align: center;
	margin-bottom: 32px;
}

.scf-avatar {
	/* Su schermi stretti il logo non supera mai metà della larghezza. */
	width: min( var( --scf-avatar-size ), 50vw );
	height: min( var( --scf-avatar-size ), 50vw );
	margin: 0 auto 18px;
	overflow: hidden;
	border: 3px solid var( --scf-hairline );
	box-shadow: var( --scf-shadow );
}

.scf-avatar--circle {
	border-radius: 50%;
}

.scf-avatar--rounded {
	border-radius: 20px;
}

.scf-avatar--square {
	border-radius: 0;
}

.scf-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Logo e titolo cliccabili verso la home. */
.scf-home-link {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.18s ease;
}

.scf-home-link:hover {
	opacity: 0.8;
}

.scf-home-link:focus-visible {
	outline: 3px solid var( --scf-accent );
	outline-offset: 4px;
	border-radius: 6px;
}

.scf-avatar .scf-home-link {
	display: block;
	width: 100%;
	height: 100%;
}

.scf-title {
	/* Sotto i 420px di viewport il titolo si riduce in proporzione,
	   così un corpo grande non manda a capo il nome del sito. */
	font-size: min( var( --scf-site-title-size ), calc( var( --scf-site-title-size ) * 0.6 + 4vw ) );
	font-weight: var( --scf-site-title-weight );
	font-family: var( --scf-site-title-font );
	color: var( --scf-site-title-color );
	margin: 0 0 8px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Il link alla home eredita il colore scelto per il titolo. */
.scf-title .scf-home-link {
	color: inherit;
}

.scf-bio {
	margin: 0 auto;
	max-width: 46ch;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var( --scf-muted );
}

.scf-bio a {
	color: var( --scf-accent );
}

/* Contatti (email e telefono)
   ------------------------------------------------------------------ */
.scf-contacts {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.scf-contacts--stacked {
	flex-direction: column;
	gap: 8px;
}

.scf-contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var( --scf-contact-font );
	font-size: var( --scf-contact-size );
	font-weight: var( --scf-contact-weight );
	line-height: 1.4;
	color: var( --scf-contact-color );
	text-decoration: none;
	word-break: break-word;
	transition: color 0.18s ease, opacity 0.18s ease;
}

a.scf-contact:hover,
a.scf-contact:focus-visible {
	color: var( --scf-accent );
}

a.scf-contact:focus-visible {
	outline: 3px solid var( --scf-accent );
	outline-offset: 3px;
	border-radius: 6px;
}

.scf-contact__icon {
	flex: 0 0 auto;
	opacity: 0.75;
}

.scf-contact__text {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Link
   ------------------------------------------------------------------ */
.scf-links {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.scf-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	min-height: 60px;
	border-radius: var( --scf-radius );
	background: var( --scf-btn-bg );
	color: var( --scf-btn-text );
	text-decoration: none;
	font-weight: 600;
	border: 1px solid var( --scf-hairline );

	/* Ombra su ogni link, in tutte le varianti di stile. */
	box-shadow: var( --scf-shadow );
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.scf-link:hover,
.scf-link:focus-visible {
	transform: translateY( -2px );
	box-shadow: var( --scf-shadow-hover );
}

.scf-link:focus-visible {
	outline: 3px solid var( --scf-accent );
	outline-offset: 3px;
}

.scf-link:active {
	transform: translateY( 0 );
	box-shadow: var( --scf-shadow );
}

.scf-link__media {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 65px;
	height: 65px;
}

.scf-link__media:empty {
	display: none;
}

.scf-link__img {
	width: 65px;
	height: 65px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.scf-link__body {
	flex: 1 1 auto;
	min-width: 0;
}

.scf-link__title {
	display: block;
	font-size: var( --scf-link-title-size );
	line-height: 1.3;
}

.scf-link__subtitle {
	display: block;
	margin-top: 3px;
	font-size: var( --scf-link-subtitle-size );
	line-height: 1.4;
	font-weight: 400;
	opacity: 0.75;
}

.scf-link__arrow {
	flex: 0 0 auto;
	opacity: 0.35;
	display: flex;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.scf-link:hover .scf-link__arrow {
	opacity: 0.75;
	transform: translateX( 3px );
}

/* Link in evidenza */
.scf-link--featured {
	background: var( --scf-accent );
	color: var( --scf-featured-text );
	border-color: transparent;
}

/* Varianti di stile
   ------------------------------------------------------------------ */
.scf-style-outline .scf-link {
	background: transparent;
	color: var( --scf-text );
	border-color: currentColor;
}

.scf-style-outline .scf-link:hover,
.scf-style-outline .scf-link:focus-visible {
	background: var( --scf-btn-bg );
	color: var( --scf-btn-text );
	border-color: var( --scf-hairline );
}

.scf-style-outline .scf-link--featured {
	border-color: var( --scf-accent );
	color: var( --scf-accent );
}

.scf-style-glass .scf-link {
	background: var( --scf-chip );
	color: var( --scf-text );
	border-color: var( --scf-hairline );
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
}

.scf-style-glass .scf-link:hover,
.scf-style-glass .scf-link:focus-visible {
	background: var( --scf-btn-bg );
	color: var( --scf-btn-text );
}

.scf-style-glass .scf-link--featured {
	background: var( --scf-accent );
	color: var( --scf-featured-text );
	border-color: transparent;
}

/* Social
   ------------------------------------------------------------------ */
.scf-socials {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.scf-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var( --scf-text );
	background: var( --scf-chip );
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.scf-social:hover,
.scf-social:focus-visible {
	background: var( --scf-accent );
	color: var( --scf-featured-text );
	transform: translateY( -2px );
}

.scf-social:focus-visible {
	outline: 3px solid var( --scf-accent );
	outline-offset: 3px;
}

/* Extra
   ------------------------------------------------------------------ */
.scf-credits {
	margin-top: 34px;
	text-align: center;
	font-size: 0.78rem;
	color: var( --scf-muted );
}

.scf-empty {
	text-align: center;
	padding: 22px;
	border: 1px dashed var( --scf-muted );
	border-radius: var( --scf-radius );
	color: var( --scf-muted );
}

/* Animazione di entrata
   ------------------------------------------------------------------ */
.scf-animate .scf-profile,
.scf-animate .scf-link,
.scf-animate .scf-socials {
	animation: scf-in 0.5s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

.scf-animate .scf-link:nth-child( 1 ) { animation-delay: 0.05s; }
.scf-animate .scf-link:nth-child( 2 ) { animation-delay: 0.1s; }
.scf-animate .scf-link:nth-child( 3 ) { animation-delay: 0.15s; }
.scf-animate .scf-link:nth-child( 4 ) { animation-delay: 0.2s; }
.scf-animate .scf-link:nth-child( 5 ) { animation-delay: 0.25s; }
.scf-animate .scf-link:nth-child( 6 ) { animation-delay: 0.3s; }
.scf-animate .scf-link:nth-child( n + 7 ) { animation-delay: 0.35s; }
.scf-animate .scf-socials { animation-delay: 0.4s; }

@keyframes scf-in {
	from {
		opacity: 0;
		transform: translateY( 12px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.scf-animate .scf-profile,
	.scf-animate .scf-link,
	.scf-animate .scf-socials {
		animation: none;
	}

	.scf-link,
	.scf-social,
	.scf-link__arrow,
	.scf-contact {
		transition: none;
	}
}

/* Mobile
   ------------------------------------------------------------------ */
@media ( max-width: 480px ) {
	.scf-link {
		padding: 13px 15px;
		gap: 12px;
	}

	/* Il logo si adatta già con min(): qui si accorcia solo lo stacco. */
	.scf-avatar {
		margin-bottom: 14px;
	}

	.scf-contacts {
		gap: 6px 16px;
	}
}