/**
 * Component: Social links
 * Usage: <ul class="social-links"><li><a><svg class="social-links__icon">...
 * Icon markup comes from inc/social-links.php (kate_siber_social_links()).
 */

.social-links {
	list-style: none;
	display: flex;
	gap: var(--space-3);
	padding: 0;
	margin: 0;
}

.social-links a {
	display: inline-flex;
	color: var(--color-ink-soft);
	transition: color var(--transition-base), transform var(--transition-base);
}

.social-links a:hover,
.social-links a:focus-visible {
	color: var(--color-primary);
	transform: translateY(-2px);
}

.social-links__icon {
	width: 1.75rem;
	height: 1.75rem;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.social-links a {
		transition: color var(--transition-base);
	}

	.social-links a:hover,
	.social-links a:focus-visible {
		transform: none;
	}
}