@font-face {
	font-family: "Tossface";
	src:
		url("../fonts/TossFaceFontMac-00.woff2") format("woff2"),
		url("../fonts/TossFaceFontMac-00.woff") format("woff");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

.article-reactions {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(10px, 4vw, 22px);
	margin: 30px 0;

	/* Override this on .article-reactions in your theme's custom
	   CSS to resize the emojis, e.g.:
	   .article-reactions { --ar-emoji-size: 44px; }
	   This is treated as the size on wide screens - it scales
	   down fluidly on narrower ones, no fixed breakpoint. */
	--ar-emoji-size: 34px;
}

.article-reactions .article-reaction,
.article-reactions .article-reaction:hover,
.article-reactions .article-reaction:focus,
.article-reactions .article-reaction:active,
.article-reactions .article-reaction:visited {
	/* Completely remove browser/theme/Elementor button styling */
	appearance: none !important;
	-webkit-appearance: none !important;

	border: 0 !important;
	outline: 0;
	box-shadow: none !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;

	padding: 0 !important;
	margin: 0 !important;

	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;

	cursor: pointer;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;

	color: inherit !important;
	font-family: inherit;
	font-size: inherit;
	line-height: 1;

	border-radius: 0 !important;

	transition: transform 0.15s ease;
}

.article-reactions .article-reaction::before,
.article-reactions .article-reaction::after {
	content: none !important;
	background: none !important;
	box-shadow: none !important;
}

.article-reactions .article-reaction:hover {
	transform: translateY(-2px);
}

.article-reactions .article-reaction:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.35);
	outline-offset: 5px;
	border-radius: 4px !important;
}

.article-reaction-emoji {
	font-family: "Tossface", sans-serif !important;
	/* Fluid scaling: never smaller than 70% of the configured size,
	   never larger than the configured size, growing with viewport
	   width in between. Adapts to any screen without a breakpoint
	   jump. */
	font-size: clamp(
		calc(var(--ar-emoji-size, 34px) * 0.7),
		calc(var(--ar-emoji-size, 34px) * 0.55 + 2.5vw),
		var(--ar-emoji-size, 34px)
	);
	font-weight: 400;
	line-height: 1;
	display: block;
}

.article-reaction-count {
	font-family: inherit;
	font-size: clamp(11px, 0.9vw + 9px, 13px);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
	min-width: 16px;
	text-align: center;
}

.article-reaction.is-selected {
	background: transparent !important;
}

.article-reaction.is-selected .article-reaction-emoji {
	transform: scale(1.08);
}

.article-reaction.is-selected .article-reaction-count {
	opacity: 1;
	font-weight: 600;
}