/**
 * P15 Share row (patterns/share-row.php, inc/share.php): three 36px Dusk circles,
 * 19px apart, LinkedIn / Facebook / email glyphs in Clear (Figma 224:6869, 224:6872, 224:6875,
 * row at the left edge of the content column).
 *
 * Extends the parent's .kd-share / .kd-share__inner. This partial sorts BEFORE the parent's
 * share-component.css and global.css (basename order), so a tie would LOSE on order. The link
 * colour has to beat global.css `.entry-content a:not(.wp-element-button):not([class*=kd-btn])`
 * (0,3,0): `.kd-share.lts-share a.lts-share__link` is (0,3,1), so it wins on specificity (verified
 * by computed colour), not on position.
 *
 * Tokens only. Hover (Hearth) and the dark-surface Tide fill follow the foundation's icon
 * buttons (lts-global.css); they are not drawn. Mobile: circles grow to 44px (tap target).
 */

.kd-share.lts-share {
	--lts-share-size: var(--wp--custom--control--social); /* 36px */
	--lts-share-gap: 1.1875rem; /* 19px: 55px pitch in the design */
	padding: 0;
	background: transparent;
}

.kd-share.lts-share .lts-share__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lts-share-gap);
	max-width: none; /* the parent caps it to the reading measure; the row follows the column. */
}

.kd-share.lts-share a.lts-share__link {
	--lts-share-bg: var(--wp--preset--color--secondary); /* Dusk */
	display: inline-flex;
	flex: none;
	box-sizing: border-box;
	width: var(--lts-share-size);
	height: var(--lts-share-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--lts-share-bg);
	color: var(
		--wp--preset--color--base
	); /* Clear: beats the parent's prose-link colour. */
	text-decoration: none;
	transition: background-color var(--kd-transition-fast);
}

.kd-share.lts-share a.lts-share__link:hover {
	--lts-share-bg: var(
		--wp--preset--color--accent
	); /* Hearth, as the footer socials */
}

.kd-share.lts-share a.lts-share__link:focus-visible {
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: 3px;
}

.kd-share.lts-share .lts-share__icon {
	display: block;
	width: 100%;
	height: 100%;
}
.kd-share.lts-share .lts-share__link--email path {
	transition: stroke var(--kd-transition-fast); /* the flap follows the circle fill. */
}

/* On dark surfaces: Tide circles (foundation "on dark"); the base hover (higher specificity) still turns them Hearth. */
:where(
		.has-contrast-background-color,
		.has-secondary-background-color,
		.kd-site-footer,
		.lts-dark,
		.kd-mobile-panel,
		.kd-hero-interior,
		.wp-block-cover:not(.is-light)
	)
	.kd-share.lts-share
	a.lts-share__link {
	--lts-share-bg: var(--wp--preset--color--primary);
}

@media (max-width: 781.98px) {
	.kd-share.lts-share {
		--lts-share-size: 2.75rem; /* 44px tap target (no mobile frame: derived) */
		--lts-share-gap: 0.75rem;
	}
}