/**
 * BirdsBuzz v2.4.3: article share toggle.
 * Red main button; Instagram, Facebook, and X fan out to the right on
 * hover, keyboard focus, or tap. Mouse off slides them back and hides them.
 */

.bb-share-toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 38px 0;
	flex-wrap: wrap;
}

.bb-share-toggle-label {
	font-family: var(--bb-font-head);
	font-weight: 800;
	font-size: 17px;
}

.bb-share-list {
	position: relative;
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 52px;
}

.bb-share-main {
	position: relative;
	z-index: 3;
}

.bb-share-main-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	color: #ffffff;
	background: linear-gradient(135deg, #ff2d55, #f75085);
	box-shadow: 0 8px 24px rgba(255, 45, 85, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bb-share-main-btn:hover,
.bb-share-main-btn:focus-visible {
	transform: scale(1.06);
	box-shadow: 0 12px 28px rgba(255, 45, 85, 0.55), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.bb-share-main-btn:focus-visible {
	outline: 3px solid #4f7fff;
	outline-offset: 3px;
}

.bb-share-main-btn svg {
	width: 22px;
	height: 22px;
}

/* Social buttons rest stacked behind the main button, fully hidden. */
.bb-share-item {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(0) scale(0.5);
	transition: left 0.35s ease, top 0.35s ease, opacity 0.25s ease, visibility 0.25s ease, transform 0.35s ease;
	transition-delay: calc((7 - var(--bb-share-index, 1)) * 40ms);
}

.bb-share-item-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, filter 0.2s ease;
}

.bb-share-item-btn:hover,
.bb-share-item-btn:focus-visible {
	transform: scale(1.08);
	filter: brightness(1.08);
}

.bb-share-item-btn:focus-visible {
	outline: 3px solid #4f7fff;
	outline-offset: 3px;
}

.bb-share-item-btn svg {
	width: 20px;
	height: 20px;
}

.bb-share-item-btn.is-instagram {
	background: #22c55e;
}

.bb-share-item-btn.is-facebook {
	background: #1877f2;
}

.bb-share-item-btn.is-x {
	background: #ff2d55;
}

.bb-share-item-btn.is-pinterest {
	background: #e60023;
}

.bb-share-item-btn.is-linkedin {
	background: #0a66c2;
}

.bb-share-item-btn.is-reddit {
	background: #ff4500;
}

.bb-share-item-btn.is-whatsapp {
	background: #25d366;
}

/* Fan out to the right, staggered by index. */
.bb-share-toggle:hover .bb-share-item,
.bb-share-toggle:focus-within .bb-share-item,
.bb-share-toggle.is-open .bb-share-item {
	left: calc(var(--bb-share-index, 1) * 64px);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0) scale(1);
	transition-delay: calc(var(--bb-share-index, 1) * 50ms);
}

/* Small screens: two rows of fanned buttons so nothing overflows. */
@media (max-width: 560px) {
	.bb-share-toggle:hover .bb-share-list,
	.bb-share-toggle:focus-within .bb-share-list,
	.bb-share-toggle.is-open .bb-share-list {
		height: 116px;
	}

	.bb-share-toggle:hover .bb-share-item:nth-child(n + 5),
	.bb-share-toggle:focus-within .bb-share-item:nth-child(n + 5),
	.bb-share-toggle.is-open .bb-share-item:nth-child(n + 5) {
		top: 64px;
		left: calc((var(--bb-share-index, 1) - 3) * 64px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-share-main-btn,
	.bb-share-item,
	.bb-share-item-btn {
		transition: none;
	}
}

/* ============ Dark mode (v2.4.5) ============ */
/* The label has no color in light mode (it inherits page text), so it
   gets an explicit light color here or it would risk inheriting ink
   on a dark article background. */
.bb-dark .bb-share-toggle-label {
	color: #ececf4;
}

/* Main red button: gradient stays, glow and shadow go dark. */
.bb-dark .bb-share-main-btn {
	background: linear-gradient(135deg, #ff2d55, #f75085);
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(255, 45, 85, 0.5), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.bb-dark .bb-share-main-btn:hover,
.bb-dark .bb-share-main-btn:focus-visible {
	box-shadow: 0 12px 28px rgba(255, 45, 85, 0.6), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.bb-dark .bb-share-main-btn:focus-visible {
	outline-color: #6a94ff;
}

/* Fanned buttons: brand circle fills stay (they are the affordance),
   shadows go dark, focus ring brightens for dark backgrounds. */
.bb-dark .bb-share-item-btn {
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.bb-dark .bb-share-item-btn:focus-visible {
	outline-color: #6a94ff;
}

.bb-dark .bb-share-item-btn.is-instagram {
	background: #22c55e;
}

.bb-dark .bb-share-item-btn.is-facebook {
	background: #1877f2;
}

.bb-dark .bb-share-item-btn.is-x {
	background: #ff2d55;
}

.bb-dark .bb-share-item-btn.is-pinterest {
	background: #e60023;
}

.bb-dark .bb-share-item-btn.is-linkedin {
	background: #0a66c2;
}

.bb-dark .bb-share-item-btn.is-reddit {
	background: #ff4500;
}

.bb-dark .bb-share-item-btn.is-whatsapp {
	background: #25d366;
}