/* =========================================================================
   Melissa Kampers Social Share — front-end styles
   Theme-independent, light/dark aware, easily overridable via the
   custom properties below (set them on .mk-share or any ancestor).
   ========================================================================= */

.mk-share {
	/* Light defaults; override from your theme if you like. */
	--mk-share-bg: #ffffff;
	--mk-share-text: #1d2027;
	--mk-share-border: #d9dce3;
	--mk-share-accent: #2742e0;
	--mk-share-focus: var(--mk-share-accent);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.85rem;
	margin: 1.75em 0;
	font-family: inherit;
}

/* Dark mode: explicit theme attribute (e.g. the MelissaKampers News theme)… */
[data-theme="dark"] .mk-share {
	--mk-share-bg: #161a24;
	--mk-share-text: #e8ebf2;
	--mk-share-border: #2b3142;
	--mk-share-accent: #8da4ff;
}

/* …and system preference when no explicit choice is set. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mk-share {
		--mk-share-bg: #161a24;
		--mk-share-text: #e8ebf2;
		--mk-share-border: #2b3142;
		--mk-share-accent: #8da4ff;
	}
}

.mk-share__heading {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mk-share-text);
	opacity: 0.65;
}

.mk-share__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* One calm pill for every control — link or button alike. */
.mk-share__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--mk-share-border);
	border-radius: 999px;
	background: var(--mk-share-bg);
	color: var(--mk-share-text);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.mk-share__item:hover {
	border-color: var(--mk-share-accent);
	color: var(--mk-share-accent);
}

.mk-share__item:active {
	transform: scale(0.97);
}

.mk-share__item:focus-visible {
	outline: 2px solid var(--mk-share-focus);
	outline-offset: 2px;
}

.mk-share__icon {
	flex-shrink: 0;
	display: block;
}

/* Display modes ---------------------------------------------------------- */

/* Icons only: labels stay in the DOM for screen readers. */
.mk-share--icons .mk-share__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mk-share--icons .mk-share__item {
	padding: 0.45rem 0.7rem;
	min-width: 40px;
	justify-content: center;
}

/* Labels only: icons are decorative and simply removed. */
.mk-share--labels .mk-share__icon {
	display: none;
}

/* Copy-link state -------------------------------------------------------- */

/* The check icon is hidden until a successful copy. */
.mk-share__copy .mk-share__icon + .mk-share__icon {
	display: none;
}

.mk-share__copy.is-copied {
	border-color: var(--mk-share-accent);
	color: var(--mk-share-accent);
}

.mk-share__copy.is-copied .mk-share__icon {
	display: none;
}

.mk-share__copy.is-copied .mk-share__icon + .mk-share__icon {
	display: block;
}

.mk-share--labels .mk-share__copy.is-copied .mk-share__icon + .mk-share__icon {
	display: none;
}

/* Screen-reader-only live region (plugin-local, theme-independent). */
.mk-share-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mk-share__item {
		transition: none;
	}

	.mk-share__item:active {
		transform: none;
	}
}