/**
 * Social share — button, dropdown, and the copy toast.
 *
 * The theme styles every <button> globally; the share button resets those on its
 * own class so it matches the compact like pill in the social-actions row. Tokens
 * only — no new palette.
 */

/* -------------------------------------------------------------------------- */
/* Share button                                                               */
/* -------------------------------------------------------------------------- */

.mp-share-wrapper {
	position: relative;
	display: inline-block;
}

.mp-share-btn {
	/* Reset the global button treatment to a compact icon control. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: var(--space-2, 0.5rem);
	border: 1px solid var(--border-light, rgba(0, 0, 0, 0.1));
	border-radius: 999px;
	box-shadow: none;
	background: var(--bg-primary, #fff);
	color: var(--text-secondary, #555);
	line-height: 0;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.mp-share-btn:hover,
.mp-share-btn:focus-visible,
.mp-share-btn[aria-expanded="true"] {
	color: var(--brand-forest, #2f5d3a);
	border-color: var(--brand-forest, #2f5d3a);
}

.mp-share-btn__icon {
	width: 1.15rem;
	height: 1.15rem;
	display: block;
	fill: none;
	stroke: currentColor;
}

/* -------------------------------------------------------------------------- */
/* Dropdown menu                                                              */
/* -------------------------------------------------------------------------- */

.mp-share-menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + var(--space-2, 0.5rem));
	left: 0;
	min-width: 12rem;
	padding: var(--space-2, 0.5rem);
	border: 1px solid var(--border-light, rgba(0, 0, 0, 0.1));
	border-radius: var(--radius-md, 8px);
	background: var(--bg-primary, #fff);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mp-share-menu[hidden] {
	display: none;
}

/* On the detail-page hero the social row sits at the bottom of an
   `overflow: hidden` immersive header, so a downward menu is clipped by the
   hero. Open it upward instead (the tall hero always has room above the row). */
.mp-social-actions .mp-share-menu {
	top: auto;
	bottom: calc(100% + var(--space-2, 0.5rem));
}

/* Flip to the right edge on the card-overlay context if it would overflow:
   detail pages have room, so left-aligned is the default. */
.mp-share-option {
	display: flex;
	align-items: center;
	gap: var(--space-3, 0.75rem);
	padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
	border-radius: var(--radius-sm, 6px);
	color: var(--text-primary, #1a1a1a);
	font-size: 0.9rem;
	text-decoration: none;
}

.mp-share-option:hover,
.mp-share-option:focus-visible {
	background: var(--bg-secondary, #f5f3ee);
	color: var(--text-primary, #1a1a1a);
}

.mp-share-option__icon {
	display: inline-flex;
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	color: var(--text-secondary, #555);
}

.mp-share-option__svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* Brand glyphs (fill) vs the lucide copy-link glyph (stroke). */
.mp-share-option__svg.brand-icon {
	fill: currentColor;
	stroke: none;
}

.mp-share-option__svg.lucide {
	fill: none;
	stroke: currentColor;
}

/* -------------------------------------------------------------------------- */
/* Copy toast                                                                 */
/* -------------------------------------------------------------------------- */

.mp-toast {
	position: fixed;
	left: 50%;
	bottom: var(--space-8, 2rem);
	z-index: 1000;
	padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
	border-radius: 999px;
	background: var(--text-primary, #1a1a1a);
	color: var(--text-inverse, #fff);
	font-size: 0.9rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	transform: translate(-50%, 1rem);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.mp-toast--in {
	opacity: 1;
	transform: translate(-50%, 0);
}