/* ==========================================================================
   Floating Contact Buttons
   Fixed buttons on the viewport edge, vertically centered.
   Label pill slides out on hover (desktop only).
   Colors inherit from theme.json via CSS custom properties.
   ========================================================================== */

.floating-contact {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.floating-contact.is-position-right {
	right: 1.25rem;
}

.floating-contact.is-position-left {
	left: 1.25rem;
}

/* ── Button (icon circle + hidden label) ── */

.floating-contact__btn {
	display: flex;
	align-items: center;
	gap: 0;
	text-decoration: none;
	justify-content: flex-end;
}

/* Left position: reverse button layout so label slides outward */
.floating-contact.is-position-left .floating-contact__btn {
	flex-direction: row-reverse;
}

.floating-contact__btn:hover .floating-contact__label {
	max-width: 200px;
	opacity: 1;
	padding: 0.5rem 1rem;
}

/* Right: label slides left (margin-right gap) */
.floating-contact.is-position-right .floating-contact__btn:hover .floating-contact__label {
	margin-right: 0.625rem;
}

/* Left: label slides right (margin-left gap) */
.floating-contact.is-position-left .floating-contact__btn:hover .floating-contact__label {
	margin-left: 0.625rem;
}

.floating-contact__btn:hover .floating-contact__icon {
	transform: scale(1.08);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

.floating-contact__btn:active .floating-contact__icon {
	transform: scale(0.95);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition-duration: 0.1s;
}

.floating-contact__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0073aa);
	outline-offset: 2px;
	border-radius: 999px;
}

/* ── Label pill (hidden, slides out on hover) ── */

.floating-contact__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	padding: 0.5rem 0;
	background: var(--wp--preset--color--secondary, #333);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 999px;
	transition:
		max-width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.25s ease-out,
		padding 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		margin 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}

/* ── Icon circle ── */

.floating-contact__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--primary, #0073aa);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition:
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.25s ease;
}

.floating-contact__icon svg {
	width: 20px;
	height: 20px;
	color: #fff;
	pointer-events: none;
}

/* ── Mobile: smaller, labels hidden (no hover on touch) ── */

@media (max-width: 768px) {
	.floating-contact.is-position-right { right: 0.875rem; }
	.floating-contact.is-position-left  { left: 0.875rem; }
	.floating-contact { gap: 0.625rem; }

	.floating-contact__icon {
		width: 44px;
		height: 44px;
	}

	.floating-contact__icon svg {
		width: 18px;
		height: 18px;
	}

	.floating-contact__label {
		display: none;
	}
}

@media (max-width: 576px) {
	.floating-contact.is-position-right { right: 0.75rem; }
	.floating-contact.is-position-left  { left: 0.75rem; }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
	.floating-contact__icon,
	.floating-contact__label {
		transition: none;
	}
}