/**
 * Social Links — Tier 2 JIT stylesheet ([celeste_social_links])
 *
 * Option C tokens (--sl-*) are bound inline from PHP on first paint.
 *
 * @package celeste_Theme
 */

.celeste-social-links {
	display: flex;
	justify-content: var(--sl-align, flex-start);
}

.celeste-social-links .csl-inner-container {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sl-gap, 1rem);
	align-items: center;
	line-height: 0;
	background-color: var(--sl-inner-bg, transparent);
	border-color: var(--sl-inner-border-color, transparent);
	border-style: var(--sl-inner-border-style, none);
	border-width: var(--sl-inner-border-width, 0);
	border-radius: var(--sl-inner-radius, 0);
	padding: var(--sl-inner-pad, 0);
	box-sizing: border-box;
}

.celeste-social-links[data-orientation="vertical"] .csl-inner-container {
	flex-direction: column;
}

.celeste-social-links .csl-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sl-color, currentColor);
	text-decoration: none;
	transition: color 0.2s ease;
	line-height: 0;
}

.celeste-social-links .csl-link:hover {
	color: var(--sl-hover, currentColor);
}

.celeste-social-links svg {
	width: var(--sl-size, 1.5rem);
	height: var(--sl-size, 1.5rem);
	display: block;
	fill: currentColor;
}

.celeste-social-links .csl-icon-wrap.csl-shape--circle,
.celeste-social-links .csl-icon-wrap.csl-shape--square,
.celeste-social-links .csl-icon-wrap.csl-shape--rounded {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35em;
	box-sizing: border-box;
	background-color: var(--sl-shape-bg, transparent);
	transition: background-color 0.2s ease;
}

.celeste-social-links .csl-icon-wrap.csl-shape--circle {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
}

.celeste-social-links .csl-icon-wrap.csl-shape--square {
	border-radius: 0;
}

.celeste-social-links .csl-icon-wrap.csl-shape--rounded {
	border-radius: 6px;
}

.celeste-social-links .csl-link:hover .csl-icon-wrap[class*="csl-shape--"] {
	background-color: var(--sl-shape-hover-bg, transparent);
}

.celeste-social-links .csl-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.celeste-social-links .csl-link {
		transition: none;
	}

	.celeste-social-links .csl-icon-wrap[class*="csl-shape--"] {
		transition: none;
	}
}

@media (max-width: 767px) {
	.celeste-social-links {
		justify-content: var(--sl-align-mob, var(--sl-align, flex-start));
	}
}