/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* ==========================================================================
   Social Media Icons — appended after post content
   ========================================================================== */

.spellshare-social-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 1.5em;
	padding-top: 1em;
	border-top: 1px solid #e0e0e0;
}

.spellshare-social-icons__label {
	font-size: 0.9em;
	color: #555;
	margin-right: 4px;
}

.spellshare-social-icons__list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.spellshare-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f5f5f5;
	transition: transform 0.15s ease, background 0.15s ease;
	text-decoration: none;
}

.spellshare-social-icon:hover,
.spellshare-social-icon:focus {
	transform: scale(1.15);
	background: #eaeaea;
	text-decoration: none;
}

.spellshare-social-icon svg {
	width: 20px;
	height: 20px;
}