/* Social share bar. */

.snmp-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block: 1.5rem;
}

.snmp-share__label {
	margin-inline-end: 0.35rem;
	color: var(--snmp-muted);
	font-family: var(--snmp-font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.snmp-share__link,
.snmp-share__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: 0.7rem;
	border: 1px solid var(--snmp-border);
	border-radius: var(--snmp-radius-sm, 10px);
	background: var(--snmp-surface);
	color: var(--snmp-text);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.snmp-share__link:hover,
.snmp-share__copy:hover {
	background: var(--snmp-primary);
	border-color: var(--snmp-primary);
	color: var(--snmp-on-primary, #fff);
	text-decoration: none;
	transform: translateY(-2px);
}

.snmp-share__link svg,
.snmp-share__copy svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
}

@media (max-width: 520px) {
	.snmp-share__link span { display: none; }
	.snmp-share__link { inline-size: 2.75rem; padding-inline: 0; }
}

.snmp-share__copy.is-copied {
	background: var(--snmp-success, #1c8a5b);
	border-color: var(--snmp-success, #1c8a5b);
	color: #fff;
}

/* Sticky floating variant on wide screens. */
@media (min-width: 1280px) {
	.snmp-share--floating {
		position: fixed;
		inset-inline-start: 1.25rem;
		inset-block-start: 30vh;
		flex-direction: column;
		z-index: 40;
	}

	.snmp-share--floating .snmp-share__label {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.snmp-share__link,
	.snmp-share__copy {
		transition: none;
	}

	.snmp-share__link:hover,
	.snmp-share__copy:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Brand tinting. Icons stay inline SVG (no icon font, no remote API); each
 * network gets its own accent so the row reads as real social buttons.
 * ------------------------------------------------------------------------ */

.snmp-share__name {
	font-weight: 600;
	white-space: nowrap;
}

.snmp-share__link {
	--snmp-brand: var(--snmp-primary, #e8562a);
	border-color: color-mix(in srgb, var(--snmp-brand) 28%, var(--snmp-border, #e5e7eb));
	color: color-mix(in srgb, var(--snmp-brand) 78%, var(--snmp-text, #111827));
}

.snmp-share__link:hover,
.snmp-share__link:focus-visible {
	background: var(--snmp-brand);
	border-color: var(--snmp-brand);
	color: #fff;
}

.snmp-share__link--x         { --snmp-brand: #101419; }
.snmp-share__link--facebook  { --snmp-brand: #1877f2; }
.snmp-share__link--whatsapp  { --snmp-brand: #25d366; }
.snmp-share__link--linkedin  { --snmp-brand: #0a66c2; }
.snmp-share__link--telegram  { --snmp-brand: #229ed9; }
.snmp-share__link--reddit    { --snmp-brand: #ff4500; }
.snmp-share__link--pinterest { --snmp-brand: #bd081c; }
.snmp-share__link--threads   { --snmp-brand: #101419; }
.snmp-share__link--email     { --snmp-brand: #6b7280; }
.snmp-share__link--copy,
.snmp-share__link--print     { --snmp-brand: #475569; }

@media (max-width: 640px) {
	.snmp-share__name { display: none; }
	.snmp-share__link { inline-size: 2.6rem; padding-inline: 0; }
}