/**
 * Yoya Fun — Single-post Action Tools styles. Scoped to `.yf-sat`
 * (the enhanced `.yf-rail4__share` group on single posts only).
 *
 * The buttons are icon-only: the icon is a ::before mask-SVG ported from
 * the theme's original `.yf-rail4__share-item a` rules (so the restored
 * <button> shows the same Save/Share/Print/Copy glyphs as before). The
 * accessible name is on aria-label; a visual hover/focus tooltip shows the
 * translated action name via data-yf-tip. Logical properties (RTL-safe),
 * reduced-motion safe, hidden in print.
 */

/* Visually-hidden live region (announced to AT, no layout shift). */
.yf-sat__live {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* Icon button — mirrors the original .yf-rail4__share-item a circle. */
.yf-sat__btn {
	position: relative; /* tooltip anchor */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--ink-soft);
	font-size: 0; /* no visible text; icon-only */
	line-height: 0;
	cursor: pointer;
	transition:
		color 0.2s var(--wp--custom--yf--easing--air, ease-out),
		background-color 0.2s var(--wp--custom--yf--easing--air, ease-out),
		border-color 0.2s var(--wp--custom--yf--easing--air, ease-out);
}
.yf-sat__btn::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	        mask-size: contain;
}
.yf-sat__btn:hover,
.yf-sat__btn:focus-visible {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.yf-sat__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #A03B2A);
	outline-offset: 2px;
}
.yf-sat__btn.is-saved {
	color: var(--wp--preset--color--accent, #A03B2A);
	border-color: var(--wp--preset--color--accent, #A03B2A);
}

/* Icons — copied verbatim from the original .yf-rail4__share-item--* a::before. */
.yf-sat__btn--save::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4'><path d='M3 1.5h8v11l-4-3-4 3z'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4'><path d='M3 1.5h8v11l-4-3-4 3z'/></svg>");
}
.yf-sat__btn--share::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4'><circle cx='10.5' cy='3' r='2'/><circle cx='3.5' cy='7' r='2'/><circle cx='10.5' cy='11' r='2'/><path d='M5.3 6l3.4-2M5.3 8l3.4 2'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4'><circle cx='10.5' cy='3' r='2'/><circle cx='3.5' cy='7' r='2'/><circle cx='10.5' cy='11' r='2'/><path d='M5.3 6l3.4-2M5.3 8l3.4 2'/></svg>");
}
.yf-sat__btn--print::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4'><path d='M3.5 5.5V1.5h7v4M3 5.5h8v5H3zM4.5 9.5h5v3h-5z'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4'><path d='M3.5 5.5V1.5h7v4M3 5.5h8v5H3zM4.5 9.5h5v3h-5z'/></svg>");
}
.yf-sat__btn--copy::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4'><rect x='2' y='4' width='7' height='8'/><path d='M5 2h7v8'/></svg>");
	        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.4'><rect x='2' y='4' width='7' height='8'/><path d='M5 2h7v8'/></svg>");
}

/* Visual hover/focus tooltip (translated action name). aria-label remains the
   accessible name; this ::after is decorative. Absolute → no layout shift. */
.yf-sat__btn[data-yf-tip]::after {
	content: attr(data-yf-tip);
	position: absolute;
	inset-block-end: calc(100% + 8px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	padding: 4px 8px;
	background: var(--wp--preset--color--ink, #1C1814);
	color: var(--wp--preset--color--paper, #F4EEE3);
	font-family: var(--wp--preset--font-family--ui, sans-serif);
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 20;
}
.yf-sat__btn[data-yf-tip]:hover::after,
.yf-sat__btn[data-yf-tip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
}
/* RTL: the translateX centering is direction-agnostic; logical inset used above. */

@media ( prefers-reduced-motion: reduce ) {
	.yf-sat__btn { transition: none; }
	.yf-sat__btn[data-yf-tip]::after { transition: none; }
}

/* Print: action tools never print. */
@media print {
	.yf-sat,
	.yf-sat__btn { display: none !important; }
}