/* ==========================================================================
   TTS Floating Social Glass — Frontend styles
   ========================================================================== */

/* ── CSS variable defaults (overridden by wp_add_inline_style) ────────────── */
:root {
	--tts-fsg-size:   56px;
	--tts-fsg-zi:     9999;
	--tts-fsg-mb:     24px;
	--tts-fsg-mr:     24px;
	--tts-fsg-db:     40px;
	--tts-fsg-dl:     24px;

	/* Glass palette */
	--tts-fsg-glass-bg:     rgba(255, 255, 255, 0.55);
	--tts-fsg-glass-border: rgba(255, 255, 255, 0.75);
	--tts-fsg-glass-shadow: 0 8px 32px rgba(80, 90, 120, 0.18),
							0 1.5px 6px  rgba(80, 90, 120, 0.10);
	--tts-fsg-glass-blur:   blur(18px) saturate(180%);

	/* Animation */
	--tts-fsg-ease:   cubic-bezier(0.34, 1.56, 0.64, 1);
	--tts-fsg-dur:    350ms;
}

/* ── Floating container ────────────────────────────────────────────────────── */

.tts-fsg-container {
	position: fixed;
	display:  flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;

	/* Mobile default: bottom-left */
	bottom: var(--tts-fsg-mb);
	left:   var(--tts-fsg-dl);
	right:  auto;

	z-index: var(--tts-fsg-zi);

	/* Prevent layout interference */
	width: var(--tts-fsg-size);
	pointer-events: none; /* children opt-in */
}

/* Desktop: also left side (same axis, different offsets) */
@media (min-width: 768px) {
	.tts-fsg-container {
		bottom: var(--tts-fsg-db);
		left:   var(--tts-fsg-dl);
		right:  auto;
	}
}

/* ── Glass mixin (applied to both toggle and menu) ────────────────────────── */

.tts-fsg-glass {
	background:        var(--tts-fsg-glass-bg);
	-webkit-backdrop-filter: var(--tts-fsg-glass-blur);
	        backdrop-filter: var(--tts-fsg-glass-blur);
	border:            1.5px solid var(--tts-fsg-glass-border);
	box-shadow:        var(--tts-fsg-glass-shadow);
}

/* ── Toggle button ────────────────────────────────────────────────────────── */

.tts-fsg-toggle {
	/* Reset */
	-webkit-appearance: none;
	appearance: none;
	margin:  0;
	padding: 0;
	border:  none;
	cursor:  pointer;
	outline: none;

	/* Size */
	width:  var(--tts-fsg-size);
	height: var(--tts-fsg-size);

	/* Layout */
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;

	/* Glass */
	background:        var(--tts-fsg-glass-bg);
	-webkit-backdrop-filter: var(--tts-fsg-glass-blur);
	        backdrop-filter: var(--tts-fsg-glass-blur);
	border:            1.5px solid var(--tts-fsg-glass-border);
	box-shadow:        var(--tts-fsg-glass-shadow);

	/* Colour */
	color: #2d3a5a;

	/* Animation */
	transition:
		transform      var(--tts-fsg-dur) var(--tts-fsg-ease),
		box-shadow     var(--tts-fsg-dur) ease,
		background     var(--tts-fsg-dur) ease;

	pointer-events: all;
	-webkit-tap-highlight-color: transparent;
}

.tts-fsg-toggle:hover {
	background: rgba(255, 255, 255, 0.72);
	box-shadow:
		0 12px 40px rgba(80, 90, 120, 0.22),
		0 2px 8px   rgba(80, 90, 120, 0.14);
	transform: scale(1.06);
}

.tts-fsg-toggle:focus-visible {
	outline: 3px solid rgba(80, 90, 200, 0.55);
	outline-offset: 3px;
}

.tts-fsg-toggle:active {
	transform: scale(0.94);
}

/* When menu is open, rotate toggle slightly */
.tts-fsg-toggle[aria-expanded="true"] {
	transform: scale(1.06) rotate(45deg);
	background: rgba(255, 255, 255, 0.80);
}

.tts-fsg-toggle[aria-expanded="true"]:hover {
	transform: scale(1.12) rotate(45deg);
}

/* ── Icon switching ──────────────────────────────────────────────────────────*/

.tts-fsg-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width:  78%;
	height: 78%;
	transition: opacity var(--tts-fsg-dur) ease, transform var(--tts-fsg-dur) var(--tts-fsg-ease);
	position: absolute;
}

.tts-fsg-icon svg {
	width:  100%;
	height: 100%;
}

/* The open icon holds an <img> — let it fill the span */
.tts-fsg-icon--open img {
	width:  100%;
	height: 100%;
	border-radius: 50%;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

.tts-fsg-icon--open {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

.tts-fsg-icon--close {
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}

.tts-fsg-toggle[aria-expanded="true"] .tts-fsg-icon--open {
	opacity: 0;
	transform: rotate(90deg) scale(0.6);
}

.tts-fsg-toggle[aria-expanded="true"] .tts-fsg-icon--close {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/* ── Social menu ─────────────────────────────────────────────────────────── */

.tts-fsg-menu {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap: 10px;

	/* Fixed width = button width */
	width: var(--tts-fsg-size);

	/* Glass container */
	padding: 10px 0;
	border-radius: calc(var(--tts-fsg-size) * 0.5);
	background:        var(--tts-fsg-glass-bg);
	-webkit-backdrop-filter: var(--tts-fsg-glass-blur);
	        backdrop-filter: var(--tts-fsg-glass-blur);
	border:            1.5px solid var(--tts-fsg-glass-border);
	box-shadow:        var(--tts-fsg-glass-shadow);

	/* Hidden state */
	opacity:   0;
	transform: translateY(12px) scale(0.88);
	pointer-events: none;

	/* Transition */
	transition:
		opacity   var(--tts-fsg-dur) ease,
		transform var(--tts-fsg-dur) var(--tts-fsg-ease);

	/* Remove from accessibility tree when hidden */
	visibility: hidden;
}

/* Open state */
.tts-fsg-menu.tts-fsg-menu--open {
	opacity:  1;
	transform: translateY(0) scale(1);
	pointer-events: all;
	visibility: visible;
}

/* Staggered icon entrance */
.tts-fsg-menu.tts-fsg-menu--open .tts-fsg-social-link:nth-child(1) { transition-delay: 40ms; }
.tts-fsg-menu.tts-fsg-menu--open .tts-fsg-social-link:nth-child(2) { transition-delay: 80ms; }
.tts-fsg-menu.tts-fsg-menu--open .tts-fsg-social-link:nth-child(3) { transition-delay: 120ms; }

/* ── Social link items ───────────────────────────────────────────────────── */

.tts-fsg-social-link {
	display:         flex;
	align-items:     center;
	justify-content: center;

	width:  var(--tts-fsg-size);
	height: var(--tts-fsg-size);
	border-radius: 50%;

	/* Transitions */
	transition:
		transform  250ms var(--tts-fsg-ease),
		box-shadow 250ms ease,
		opacity    var(--tts-fsg-dur) ease;

	/* Initial hidden position for stagger */
	opacity: 0;
	transform: translateY(6px) scale(0.85);

	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

/* When menu is open, items become visible */
.tts-fsg-menu.tts-fsg-menu--open .tts-fsg-social-link {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.tts-fsg-social-link:hover {
	transform: scale(1.14);
	box-shadow: 0 6px 20px rgba(80, 90, 120, 0.22);
}

.tts-fsg-social-link:focus-visible {
	outline: 3px solid rgba(80, 90, 200, 0.55);
	outline-offset: 3px;
}

.tts-fsg-social-link:active {
	transform: scale(0.93);
}

.tts-fsg-social-link img {
	width:  76%;
	height: 76%;
	border-radius: 50%;
	object-fit: contain;
	display: block;
	pointer-events: none;
	/* Slight drop shadow on the icon itself */
	filter: drop-shadow(0 2px 5px rgba(0,0,0,0.15));
}

/* ── Accessibility: reduce motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.tts-fsg-toggle,
	.tts-fsg-menu,
	.tts-fsg-social-link,
	.tts-fsg-icon {
		transition: none !important;
	}
}