/**
 * Renchlist custom social sharing.
 *
 * Desktop (>=1024px): fixed vertical rail beside the content column.
 * Mobile (<1024px):   fixed horizontal bar above the sticky ad bar.
 *
 * Classes are prefixed .renchlist-share to avoid colliding with any other
 * plugin/theme markup. !important was needed while this reused the theme's
 * .cb-social-* classes (which carried their own position/colour rules) — now
 * that everything is under its own namespace there is nothing left to win
 * against, so it has been dropped throughout.
 */

.renchlist-share {
	/* --- LIGHT VARIANT (current): white pill, #161616 icons --- */
	--renchlist-share-idle: #161616;
	--renchlist-share-bg: #ffffff;
	--renchlist-share-count: #161616;

	/* --- DARK VARIANT: black pill, white icons ---
	   To switch, comment out the three lines above and uncomment these.
	--renchlist-share-idle: #ffffff;
	--renchlist-share-bg: #161616;
	--renchlist-share-count: #ffffff;
	*/

	/* Post pages: rail sits 3/4 of the way from the viewport edge toward the
	   content column (halved the remaining gap again from the previous
	   midpoint) — lower the fraction to move it back toward the edge. */
	--renchlist-share-left: calc((50% - var(--renchlist-share-content-half)) * 0.75);
	/* Homepage/archives: collapsed heart pill, bottom-left, midway between the
	   viewport edge and the feed column. */
	--renchlist-share-corner-left: calc((50% - var(--renchlist-share-content-half)) / 2);
	/* Clearance for the sticky ad bar on mobile — raise if the ad unit grows. */
	--renchlist-share-bottom-offset: 5.75rem;
	/* Half the content wrap; the desktop rail sits just outside this. */
	--renchlist-share-content-half: 600px;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	z-index: 9999;
	box-sizing: border-box;
}

.renchlist-share__count {
	display: flex;
	flex-direction: column;
	line-height: 1;
	text-align: center;
	margin-bottom: 0.35rem;
}

.renchlist-share__count-num {
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--renchlist-share-count);
}

.renchlist-share__count-label {
	font-size: 0.6rem;
	font-weight: normal;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	color: #fafafa;
	opacity: 0.75;
}

.renchlist-share .renchlist-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--renchlist-share-idle);
	cursor: pointer;
	transition: color 0.15s ease-in-out;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.renchlist-share .renchlist-share__btn i,
.renchlist-share .renchlist-share__btn svg {
	font-size: 1em;
	width: 1em;
	height: 1em;
	display: block;
	color: inherit;
	/* No blanket fill here: CSS beats the SVG's inline fill attribute, so
	   setting it would fill the stroke-only icons (close, mail, link) solid.
	   The filled icons carry fill="currentColor" inline instead. */
}

/* Dark -> brand colour on hover/focus. */
.renchlist-share .renchlist-share__btn--fb:hover,
.renchlist-share .renchlist-share__btn--fb:focus-visible {
	color: #1877f2;
}
.renchlist-share .renchlist-share__btn--x:hover,
.renchlist-share .renchlist-share__btn--x:focus-visible {
	/* X's brand black. On the dark variant switch this to #ffffff. */
	color: #000000;
}
.renchlist-share .renchlist-share__btn--pin:hover,
.renchlist-share .renchlist-share__btn--pin:focus-visible {
	color: #e60023;
}
.renchlist-share .renchlist-share__btn--mail:hover,
.renchlist-share .renchlist-share__btn--mail:focus-visible {
	color: #cfa100;
}
/* Renchlist dark red. */
.renchlist-share .renchlist-share__btn--copy:hover,
.renchlist-share .renchlist-share__btn--copy:focus-visible {
	color: #6b0000;
}

/* Native share sheet uses Renchlist electric blue (mail keeps the gold). */
.renchlist-share .renchlist-share__native:hover,
.renchlist-share .renchlist-share__native:focus-visible {
	color: #00c3ff;
}

/* ---- Desktop: vertical rail beside the content column ---- */
@media (min-width: 1024px) {
	.renchlist-share--sticky {
		position: fixed;
		top: 50%;
		left: var(--renchlist-share-left);
		right: auto;
		bottom: auto;
		transform: translateY(-50%);
		flex-direction: column;
		gap: 0.2rem;
		padding: 0.5rem 0.35rem;
		/* background: var(--renchlist-share-bg); */
		/* border-radius: 0.5rem; */
		/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); */
	}
}

/* ---- Mobile: horizontal bar above the ad bar ---- */
@media (max-width: 1023.98px) {
	.renchlist-share--sticky {
		position: fixed;
		left: 0;
		right: 0;
		top: auto;
		/* Sit above the sticky ad bar rather than behind it. */
		bottom: calc(var(--renchlist-share-bottom-offset) + env(safe-area-inset-bottom, 0px));
		justify-content: space-around;
		gap: 0;
		padding: 0.25rem 0.5rem;
		background: var(--renchlist-share-bg);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	/* On mobile the count sits inline, not stacked. */
	.renchlist-share--sticky .renchlist-share__count {
		flex-direction: row;
		align-items: baseline;
		gap: 0.25rem;
		margin: 0 auto 0 0.25rem;
	}

	.renchlist-share__count-num {
		font-size: 0.95rem;
	}

	/* Native share sheet is the primary mobile action. */
	.renchlist-share .renchlist-share__native {
		display: inline-flex;
	}
}

/* ---- Inline variant: end-of-article row, all breakpoints ---- */
.renchlist-share--inline {
	display: flex;
	position: static;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin: 1.5rem 0;
	padding: 0.5rem;
	background: var(--renchlist-share-bg);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	flex-wrap: wrap;
}

.renchlist-share--inline .renchlist-share__count {
	flex-direction: row;
	align-items: baseline;
	gap: 0.3rem;
	margin: 0 0.5rem 0 0;
}

/* ---- Minimise toggle (sticky variant only) ---- */
.renchlist-share__items {
	display: flex;
	flex-direction: inherit;
	align-items: center;
	gap: inherit;
}

.renchlist-share--sticky .renchlist-share__items {
	flex-direction: column;
}

@media (max-width: 1023.98px) {
	.renchlist-share--sticky .renchlist-share__items {
		flex-direction: row;
		flex: 1;
		justify-content: space-around;
	}
}

/* Collapsed: hide everything but the heart. */
.renchlist-share--collapsed .renchlist-share__items {
	display: none;
}

.renchlist-share__toggle-heart {
	display: none;
}

.renchlist-share--collapsed .renchlist-share__toggle-heart {
	display: block;
}

.renchlist-share--collapsed .renchlist-share__toggle-close {
	display: none;
}

.renchlist-share .renchlist-share__toggle {
	width: 2rem;
	height: 2rem;
	opacity: 0.65;
}

/* CustomBike.cc red. */
.renchlist-share .renchlist-share__toggle:hover,
.renchlist-share .renchlist-share__toggle:focus-visible {
	opacity: 1;
	color: #dd3333;
}

.renchlist-share .renchlist-share__toggle svg {
	width: 1.05rem;
	height: 1.05rem;
}

/* Collapsed heart is the primary affordance, so show it full size. */
.renchlist-share--collapsed .renchlist-share__toggle {
	width: 2.5rem;
	height: 2.5rem;
	opacity: 1;
}

.renchlist-share--collapsed .renchlist-share__toggle svg {
	width: 1.45rem;
	height: 1.45rem;
}

/* ---- Corner variant: collapsed pill, off-article pages ---- */
.renchlist-share--corner {
	position: fixed;
	background: var(--renchlist-share-bg);
	right: auto;
	top: auto;
	left: var(--renchlist-share-corner-left);
	bottom: calc(var(--renchlist-share-bottom-offset) + env(safe-area-inset-bottom, 0px));
	flex-direction: row;
	width: auto;
	padding: 0.15rem 0.5rem;
	border-radius: 2rem;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* Expanded from the corner: buttons stack above the toggle. */
.renchlist-share--corner:not(.renchlist-share--collapsed) {
	flex-direction: column-reverse;
	border-radius: 1.5rem;
	padding: 0.4rem 0.3rem;
}

.renchlist-share--corner:not(.renchlist-share--collapsed) .renchlist-share__items {
	flex-direction: column;
	justify-content: flex-start;
}

/* "Share" label sits beside the heart, collapsed state only. */
.renchlist-share__toggle-label {
	display: none;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--renchlist-share-count);
}

.renchlist-share--corner.renchlist-share--collapsed .renchlist-share__toggle-label {
	display: inline;
}

.renchlist-share--corner.renchlist-share--collapsed .renchlist-share__toggle {
	width: auto;
	gap: 0.4rem;
	padding: 0 0.25rem;
}

/* ---- Hidden only while the featured image is still on screen ----
   Visible by default on purpose: if JS is delayed or blocked (script-delay
   plugins do this for logged-out visitors), the rail must still appear. */
.renchlist-share--sticky {
	transition: opacity 0.25s ease-in-out, visibility 0.25s;
}

.renchlist-share--sticky.is-hidden {
	opacity: 0;
	visibility: hidden;
}

/* ---- Official-buttons variant (RENCHLIST_SHARE_OFFICIAL_BUTTONS) ----
   Each network renders its own widget with its own native sizing/styling, so
   this only inherits position from .renchlist-share--sticky/--inline and
   otherwise gets out of the way — none of the .renchlist-share__btn box/icon
   rules apply. */
.renchlist-share--official {
	background: transparent;
	box-shadow: none;
	padding: 0.5rem;
}

.renchlist-share--official .renchlist-share__items {
	gap: 0.6rem;
	align-items: center;
}

.renchlist-share--official .renchlist-share__official-mail {
	font-size: 0.85rem;
	color: #161616;
	text-decoration: underline;
}