/* ==========================================================================
   TeamCNF site info: the floating WhatsApp button and the round social
   media links (both filled from the "Site Info" settings screen).
   Every value comes from the theme tokens (theme.json): --wp--preset--* and
   --wp--custom--*.
   ========================================================================== */

/* ---- Floating WhatsApp button ------------------------------------------- */
.tcnf-fab {
	position: fixed;
	right: var(--wp--custom--gutter);
	bottom: var(--wp--custom--gutter);
	z-index: var(--wp--custom--z--fab);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--size--fab);
	height: var(--wp--custom--size--fab);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--custom--text--on-accent);
	box-shadow: var(--wp--preset--shadow--glow), var(--wp--custom--inset-sheen);
	text-decoration: none;
	transition:
		transform var(--wp--custom--duration--base) var(--wp--custom--ease--spring),
		box-shadow var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-fab .tcnf-glyph {
	--tcnf-glyph-size: var(--wp--custom--size--icon--lg);
}

.tcnf-fab:hover {
	color: var(--wp--custom--text--on-accent);
	transform: scale(1.06);
	box-shadow: var(--wp--preset--shadow--glow-strong), var(--wp--custom--inset-sheen);
}

.tcnf-fab:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--focus-ring);
}

.tcnf-fab__label {
	position: absolute;
	right: calc(100% + var(--wp--preset--spacing--30));
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill-header);
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(var(--wp--preset--spacing--20));
	transition:
		opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out),
		transform var(--wp--custom--duration--base) var(--wp--custom--ease--out);
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur));
	backdrop-filter: blur(var(--wp--custom--glass--blur));
	pointer-events: none;
}

.tcnf-fab:hover .tcnf-fab__label,
.tcnf-fab:focus-visible .tcnf-fab__label {
	opacity: 1;
	transform: none;
}

/* ---- Social media links ------------------------------------------------- */
.tcnf-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcnf-social li {
	margin: 0;
}

.tcnf-social a {
	display: grid;
	place-items: center;
	width: var(--wp--custom--size--control-sm);
	height: var(--wp--custom--size--control-sm);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: 50%;
	background: var(--wp--custom--glass--fill-subtle);
	color: var(--wp--custom--text--primary);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		transform var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-social a:hover {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--custom--text--on-accent);
	transform: translateY(calc(var(--wp--custom--nudge) * -1));
}

.tcnf-social a:focus-visible {
	outline: none;
	box-shadow: var(--wp--custom--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
	.tcnf-fab,
	.tcnf-fab__label,
	.tcnf-social a {
		transition: none;
	}

	.tcnf-fab:hover,
	.tcnf-social a:hover {
		transform: none;
	}
}