/**
 * SGS Social Sharing Buttons — Stylesheet
 *
 * All selectors are scoped to .sgsssb-* to prevent theme interference.
 * Uses CSS custom properties for easy customization.
 *
 * @package SGS_SSB
 * @since   2.0.0
 */

/* -------------------------------------------------------------------------
 * CSS Custom Properties (can be overridden in child theme)
 * ------------------------------------------------------------------------- */
.sgsssb-social {
	--sgsssb-icon-size: 32px;
	--sgsssb-gap: 8px;
	--sgsssb-padding: 8px 4px;
	--sgsssb-bg: #ffffff;
	--sgsssb-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	--sgsssb-border-radius: 8px;
	--sgsssb-hover-scale: 1.15;
	--sgsssb-transition-speed: 0.2s;
	--sgsssb-z-index: 999999;
}

/* -------------------------------------------------------------------------
 * Container — fixed vertical sidebar (desktop default)
 * ------------------------------------------------------------------------- */
.sgsssb-social {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--sgsssb-z-index);
	display: flex;
	flex-direction: column;
	gap: var(--sgsssb-gap);
	padding: var(--sgsssb-padding);
	background: var(--sgsssb-bg);
	border-radius: 0 var(--sgsssb-border-radius) var(--sgsssb-border-radius) 0;
	box-shadow: var(--sgsssb-shadow);
	width: auto;
	line-height: 1;
}

/* Right-position override (set via admin) */
.sgsssb-social.sgsssb-position-right,
body .sgsssb-social[style*="right"] {
	left: auto;
	right: 0;
	border-radius: var(--sgsssb-border-radius) 0 0 var(--sgsssb-border-radius);
}

/* -------------------------------------------------------------------------
 * Individual buttons
 * ------------------------------------------------------------------------- */
.sgsssb-link,
.sgsssb-link:link,
.sgsssb-link:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--sgsssb-icon-size);
	height: var(--sgsssb-icon-size);
	padding: 6px;
	border-radius: 6px;
	text-decoration: none;
	transition:
		transform var(--sgsssb-transition-speed) ease,
		background-color var(--sgsssb-transition-speed) ease,
		box-shadow var(--sgsssb-transition-speed) ease,
		opacity var(--sgsssb-transition-speed) ease;
	position: relative;
	color: inherit;
	background: transparent;
	margin: 0;
	border: 0;
	outline-offset: 2px;
	opacity: 1;
}

/* SVG sizing */
.sgsssb-link svg {
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

/* Hover — subtle scale + brand-color background */
.sgsssb-link:hover {
	transform: scale(var(--sgsssb-hover-scale));
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Brand-color hover backgrounds, one per network.
   The fill is kept on the SVG path for the default state;
   on hover the background takes over and the SVG uses white fill. */
.sgsssb-link:hover svg path {
	fill: #ffffff;
	transition: fill var(--sgsssb-transition-speed) ease;
}

.sgsssb-whatsapp:hover  { background-color: #25D366; }
.sgsssb-facebook:hover  { background-color: #1877F2; }
.sgsssb-x:hover         { background-color: #000000; }
.sgsssb-linkedin:hover  { background-color: #0A66C2; }
.sgsssb-telegram:hover  { background-color: #0088CC; }
.sgsssb-pinterest:hover { background-color: #E60023; }
.sgsssb-reddit:hover    { background-color: #FF4500; }
.sgsssb-email:hover     { background-color: #EA4335; }
.sgsssb-print:hover     { background-color: #555555; }

/* Focus visible — proper keyboard accessibility */
.sgsssb-link:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
	border-radius: 6px;
}

/* -------------------------------------------------------------------------
 * Tooltip on hover (network name)
 * ------------------------------------------------------------------------- */
.sgsssb-link::after {
	content: attr(aria-label);
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: #333;
	color: #fff;
	font-size: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.3;
	padding: 4px 10px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: calc(var(--sgsssb-z-index) + 1);
}

/* Right-position tooltip goes to the left */
.sgsssb-social.sgsssb-position-right .sgsssb-link::after,
body .sgsssb-social[style*="right"] .sgsssb-link::after {
	left: auto;
	right: calc(100% + 10px);
}

.sgsssb-link:hover::after {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Responsive — mobile: fixed bottom bar
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.sgsssb-social {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: none;
		flex-direction: row;
		justify-content: center;
		gap: 4px;
		padding: 6px 8px;
		width: 100%;
		border-radius: var(--sgsssb-border-radius) var(--sgsssb-border-radius) 0 0;
		--sgsssb-icon-size: 36px;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
	}

	.sgsssb-social.sgsssb-position-right {
		left: 0;
		right: 0;
		border-radius: var(--sgsssb-border-radius) var(--sgsssb-border-radius) 0 0;
	}

	/* Mobile tooltips go above the button */
	.sgsssb-link::after {
		left: 50%;
		top: auto;
		bottom: calc(100% + 8px);
		transform: translateX(-50%);
	}

	.sgsssb-social.sgsssb-position-right .sgsssb-link::after,
	body .sgsssb-social[style*="right"] .sgsssb-link::after {
		left: 50%;
		right: auto;
	}
}

/* -------------------------------------------------------------------------
 * Print — hide buttons
 * ------------------------------------------------------------------------- */
@media print {
	.sgsssb-social {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Dark mode
 * ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	.sgsssb-social {
		--sgsssb-bg: #ffffff50;
		--sgsssb-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
	}

	.sgsssb-link svg path {
		fill-opacity: 0.9;
	}

	.sgsssb-link::after {
		background: #555;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion — respect user preference
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sgsssb-social,
	.sgsssb-social.sgsssb-shake,
	.sgsssb-link,
	.sgsssb-link::after {
		animation: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Shake animation (opt-in via admin setting, class .sgsssb-shake)
 * ------------------------------------------------------------------------- */
.sgsssb-social.sgsssb-shake {
	animation: sgsssb-shaker 5s infinite;
	transform-origin: 50% 50%;
}

@keyframes sgsssb-shaker {
	0%      { transform: translateY(-50%) translate(0, 0); }
	1.78571%  { transform: translateY(-50%) translate(5px, 0); }
	3.57143%  { transform: translateY(-50%) translate(0, 0); }
	5.35714%  { transform: translateY(-50%) translate(5px, 0); }
	7.14286%  { transform: translateY(-50%) translate(0, 0); }
	8.92857%  { transform: translateY(-50%) translate(5px, 0); }
	10.71429% { transform: translateY(-50%) translate(0, 0); }
	100%   { transform: translateY(-50%) translate(0, 0); }
}

/* On mobile, the shake works without vertical centering */
@media screen and (max-width: 768px) {
	@keyframes sgsssb-shaker {
		0%      { transform: translate(0, 0); }
		1.78571%  { transform: translate(5px, 0); }
		3.57143%  { transform: translate(0, 0); }
		5.35714%  { transform: translate(5px, 0); }
		7.14286%  { transform: translate(0, 0); }
		8.92857%  { transform: translate(5px, 0); }
		10.71429% { transform: translate(0, 0); }
		100%   { transform: translate(0, 0); }
	}

	.sgsssb-social.sgsssb-shake {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * RTL support
 * ------------------------------------------------------------------------- */

/* Right-to-left: container on right, tooltip on left */
[dir="rtl"] .sgsssb-social {
	left: auto;
	right: 0;
	border-radius: var(--sgsssb-border-radius) 0 0 var(--sgsssb-border-radius);
}

[dir="rtl"] .sgsssb-link::after {
	left: auto;
	right: calc(100% + 10px);
}

@media screen and (max-width: 768px) {
	[dir="rtl"] .sgsssb-social {
		left: 0;
		right: 0;
		border-radius: var(--sgsssb-border-radius) var(--sgsssb-border-radius) 0 0;
	}
}