/**
 * Baklolz Share Styles
 * Print-zine inspired: bold borders, deliberate, no gradient slop.
 */

:root {
	--baklolz-accent: #c0392b;
	--baklolz-ink: #111111;
	--baklolz-paper: #ffffff;
	--baklolz-muted: #6b6b6b;
	--baklolz-border: 2px;
}

/* ----------------------------------------------------------------- *
 * Inline bar
 * ----------------------------------------------------------------- */

.baklolz-share {
	margin: 2.5rem 0;
	font-family: inherit;
}

.baklolz-share__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--baklolz-ink);
	margin-bottom: 0.75rem;
	border-top: var(--baklolz-border) solid var(--baklolz-ink);
	padding-top: 0.75rem;
}

.baklolz-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.baklolz-share__list li {
	margin: 0;
	padding: 0;
}

.baklolz-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	background: var(--baklolz-paper);
	color: var(--baklolz-ink);
	border: var(--baklolz-border) solid var(--baklolz-ink);
	border-radius: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
	cursor: pointer;
}

.baklolz-share__btn:hover,
.baklolz-share__btn:focus-visible {
	background: var(--baklolz-accent);
	color: var(--baklolz-paper);
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--baklolz-ink);
	text-decoration: none;
	outline: none;
}

.baklolz-share__btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex-shrink: 0;
}

.baklolz-share__name {
	display: inline-block;
}

/* Subtle network color hints on hover ring */
.baklolz-share__btn--whatsapp:hover,
.baklolz-share__btn--whatsapp:focus-visible {
	background: #25D366;
	color: #ffffff;
}
.baklolz-share__btn--twitter:hover,
.baklolz-share__btn--twitter:focus-visible {
	background: #000000;
	color: #ffffff;
}
.baklolz-share__btn--facebook:hover,
.baklolz-share__btn--facebook:focus-visible {
	background: #1877F2;
	color: #ffffff;
}
.baklolz-share__btn--linkedin:hover,
.baklolz-share__btn--linkedin:focus-visible {
	background: #0A66C2;
	color: #ffffff;
}
.baklolz-share__btn--telegram:hover,
.baklolz-share__btn--telegram:focus-visible {
	background: #229ED9;
	color: #ffffff;
}
.baklolz-share__btn--instagram:hover,
.baklolz-share__btn--instagram:focus-visible {
	background: #E1306C;
	color: #ffffff;
}
.baklolz-share__btn--copy:hover,
.baklolz-share__btn--copy:focus-visible {
	background: var(--baklolz-accent);
	color: var(--baklolz-paper);
}

/* Copy success state */
.baklolz-share__btn.is-copied {
	background: var(--baklolz-ink);
	color: var(--baklolz-paper);
}

/* ----------------------------------------------------------------- *
 * Floating bar (desktop sidebar + mobile bottom dock)
 * ----------------------------------------------------------------- */

.baklolz-share--floating {
	position: fixed;
	z-index: 9999;
	margin: 0;
}

@media (min-width: 1024px) {
	.baklolz-share--floating {
		left: 1.25rem;
		top: 50%;
		transform: translateY(-50%);
	}

	.baklolz-share--floating .baklolz-share__list {
		flex-direction: column;
		gap: 0.4rem;
	}

	.baklolz-share--floating .baklolz-share__btn {
		padding: 0.6rem;
		width: 42px;
		height: 42px;
		justify-content: center;
	}

	.baklolz-share--floating .baklolz-share__name {
		display: none;
	}

	.baklolz-share--floating .baklolz-share__btn svg {
		width: 20px;
		height: 20px;
	}
}

@media (max-width: 1023px) {
	.baklolz-share--floating {
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--baklolz-paper);
		border-top: var(--baklolz-border) solid var(--baklolz-ink);
		padding: 0.6rem 0.75rem;
	}

	.baklolz-share--floating .baklolz-share__list {
		justify-content: space-around;
		gap: 0.35rem;
	}

	.baklolz-share--floating .baklolz-share__btn {
		padding: 0.5rem;
		min-width: 40px;
		min-height: 40px;
		justify-content: center;
		border-width: 1px;
	}

	.baklolz-share--floating .baklolz-share__name {
		display: none;
	}

	/* Push content up so floating bar does not cover the last paragraph */
	body.single-post {
		padding-bottom: 70px;
	}
}

/* ----------------------------------------------------------------- *
 * Toast for copy feedback
 * ----------------------------------------------------------------- */

.baklolz-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--baklolz-ink);
	color: var(--baklolz-paper);
	padding: 0.65rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	z-index: 10000;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
	border: var(--baklolz-border) solid var(--baklolz-ink);
	box-shadow: 4px 4px 0 var(--baklolz-accent);
}

.baklolz-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 1023px) {
	.baklolz-toast {
		bottom: 90px; /* above the floating bar */
	}
}

/* ----------------------------------------------------------------- *
 * Reduced motion
 * ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.baklolz-share__btn,
	.baklolz-toast {
		transition: none;
	}
	.baklolz-share__btn:hover,
	.baklolz-share__btn:focus-visible {
		transform: none;
		box-shadow: none;
	}
}