/* ==========================================================================
   e-SwapMeet Core — Public Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Social Icons
   — .esm-social-icons--footer  : footer strip between main grid and copyright
   — .esm-social-icons--inline  : shortcode output on page content (light bg)
   -------------------------------------------------------------------------- */

.esm-social-icons {
	text-align: center;

	& .esm-social-icons__list {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.25em;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	& .esm-social-icons__item {
		margin: 0;
		padding: 0;
	}

	& .esm-social-icons__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75em;
		height: 2.75em;
		text-decoration: none;
		transition: color 0.2s ease;

		& svg {
			width: 1.375em;
			height: 1.375em;
			fill: currentColor;
			display: block;
			flex-shrink: 0;
		}
	}
}

/* Footer variant — dark background, white icons */
.esm-social-icons--footer[class] {
	padding: 0.75em 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);

	& .col-full {
		display: flex;
		justify-content: center;
	}

	& .esm-social-icons__link[class] {
		color: #fff;

		&:hover,
		&:focus {
			color: #3C3B6E;
		}
	}
}

/* Inline / shortcode variant — light background, brand-colored icons */
.esm-social-icons--inline[class] {
	padding: 0.75em 0;

	& .esm-social-icons__link[class] {
		color: #3C3B6E;

		&:hover,
		&:focus {
			color: #6d6bc8;
		}
	}
}