/**
 * HomeBlesh article share toggle.
 * v2.5.3: the main button was redesigned with its own identity (a
 * rounded-square "squircle" in the HomeBlesh leaf-to-green brand
 * gradient with a shine sweep on hover) instead of the red circle
 * used up to v2.5.2. Facebook, Instagram, LinkedIn, TikTok, X,
 * Reddit, Pinterest, and WhatsApp fan out to the right on hover,
 * keyboard focus, or tap. Mouse off slides them back and hides them.
 */

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

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

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

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

.hb-share-main-btn {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 18px;
	color: #ffffff;
	background: linear-gradient(135deg, #0b6b4c, #1d6fb8);
	box-shadow: 0 10px 24px rgba(123, 108, 255, 0.42), 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Shine sweep across the button on hover or keyboard focus. */
.hb-share-main-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.6s ease;
	pointer-events: none;
}

.hb-share-main-btn:hover,
.hb-share-main-btn:focus-visible {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 14px 30px rgba(123, 108, 255, 0.55), 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.hb-share-main-btn:hover::after,
.hb-share-main-btn:focus-visible::after {
	transform: translateX(120%);
}

.hb-share-main-btn:focus-visible {
	outline: 3px solid #1d6fb8;
	outline-offset: 3px;
}

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

/* Social buttons rest stacked behind the main button, fully hidden. */
.hb-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((8 - var(--hb-share-index, 1)) * 40ms);
}

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

/* Color restated on hover so the global a:hover green in main.css
   cannot recolor the white glyph on the brand circle fills. */
.hb-share-item-btn:hover,
.hb-share-item-btn:focus-visible {
	color: #ffffff;
	transform: scale(1.08);
	filter: brightness(1.08);
}

.hb-share-item-btn:focus-visible {
	outline: 3px solid #1d6fb8;
	outline-offset: 3px;
}

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

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

.hb-share-item-btn.is-instagram {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

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

.hb-share-item-btn.is-tiktok {
	background: #000000;
}

.hb-share-item-btn.is-x {
	background: #000000;
}

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

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

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

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

/* Small screens: two rows of fanned buttons so nothing overflows.
   Items 1-4 stay on row one, items 5-8 (li 6-9, since li 1 is the main
   button) drop to row two, and the list grows taller so page content
   shifts down instead of overlapping. */
@media (max-width: 560px) {
	/* The label takes its own row so the fanned rows start at the
	   article content edge. On one line, the label width (about
	   150px at 17px) plus the 14px gap would push the last button
	   of each row past the viewport on phones. */
	.hb-share-toggle-label {
		flex: 0 0 100%;
	}

	.hb-share-toggle:hover .hb-share-list,
	.hb-share-toggle:focus-within .hb-share-list,
	.hb-share-toggle.is-open .hb-share-list {
		height: 116px;
	}

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

/* Phones up to 400px: a tighter fan step so each row fits the
   article content width. At a 320px viewport the content column is
   320 - 2 x 24px container padding = 272px; the 64px step spans
   4 x 64 + 52 = 308px and overflows, while a 54px step spans
   4 x 54 + 52 = 268px and fits with 4px to spare. */
@media (max-width: 400px) {
	.hb-share-toggle:hover .hb-share-item,
	.hb-share-toggle:focus-within .hb-share-item,
	.hb-share-toggle.is-open .hb-share-item {
		left: calc(var(--hb-share-index, 1) * 54px);
	}

	.hb-share-toggle:hover .hb-share-item:nth-child(n + 6),
	.hb-share-toggle:focus-within .hb-share-item:nth-child(n + 6),
	.hb-share-toggle.is-open .hb-share-item:nth-child(n + 6) {
		left: calc((var(--hb-share-index, 1) - 4) * 54px);
	}
}

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

	.hb-share-main-btn:hover,
	.hb-share-main-btn:focus-visible,
	.hb-share-item-btn:hover,
	.hb-share-item-btn:focus-visible {
		transform: none;
		filter: 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. */
.hb-dark .hb-share-toggle-label {
	color: #ececf4;
}

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

.hb-dark .hb-share-main-btn:hover,
.hb-dark .hb-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);
}

.hb-dark .hb-share-main-btn:focus-visible {
	outline-color: #1d6fb8;
}

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

.hb-dark .hb-share-item-btn:focus-visible {
	outline-color: #1d6fb8;
}

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

.hb-dark .hb-share-item-btn.is-instagram {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

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

.hb-dark .hb-share-item-btn.is-tiktok {
	background: #000000;
}

.hb-dark .hb-share-item-btn.is-x {
	background: #000000;
}

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

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

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