/**
 * Simó Lorenzo Kit — Redes sociales (compartido: Menú móvil y widget "Redes sociales").
 *
 * Todos los valores llegan como variables CSS desde los controles de Elementor.
 */

.slk-social {
	--slk-social-size: 20px;          /* tamaño del icono */
	--slk-social-gap: 16px;           /* separación entre redes */
	--slk-social-color: currentColor;
	--slk-social-color-hover: var(--slk-social-color);
	--slk-social-bg: transparent;     /* fondo de cada icono (círculo, cuadrado...) */
	--slk-social-bg-hover: var(--slk-social-bg);
	--slk-social-border: transparent;
	--slk-social-border-w: 0px;
	--slk-social-pad: 0px;            /* aire alrededor del icono, dentro del fondo */
	--slk-social-radius: 50%;
	--slk-social-dir: row;
	--slk-social-jc: flex-start;
	--slk-social-ai: center;

	display: flex;
	flex-direction: var(--slk-social-dir);
	flex-wrap: wrap;
	justify-content: var(--slk-social-jc);
	align-items: var(--slk-social-ai);
	gap: var(--slk-social-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.slk-social__item {
	margin: 0;
	padding: 0;
}

.slk-social__item::before,
.slk-social__item::marker {
	content: none;
}

.slk-social__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--slk-social-color);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.slk-social__link:hover,
.slk-social__link:focus-visible {
	color: var(--slk-social-color-hover);
}

/* Caja del icono: siempre cuadrada (1em + aire), así el fondo redondo queda un círculo perfecto. */
.slk-social__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	padding: var(--slk-social-pad);
	font-size: var(--slk-social-size);
	line-height: 1;
	background: var(--slk-social-bg);
	border: var(--slk-social-border-w) solid var(--slk-social-border);
	border-radius: var(--slk-social-radius);
	transition: inherit;
}

.slk-social__link:hover .slk-social__icon,
.slk-social__link:focus-visible .slk-social__icon {
	background: var(--slk-social-bg-hover);
	border-color: var(--slk-social-border-hover, var(--slk-social-border));
}

.slk-social__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.slk-social__icon i {
	font-size: inherit;
	line-height: 1;
}

/* Texto oculto a la vista pero accesible para lectores de pantalla ("Solo icono"). */
.slk-social__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.slk-social__link,
	.slk-social__icon {
		transition: none;
	}
}