/* ==========================================================================
   Floating WhatsApp button (hidden at the top, revealed on scroll)
   ========================================================================== */

.whatsapp {
	position: fixed;
	left: clamp(1rem, 2.5vw, 1.5rem);
	bottom: clamp(1rem, 2.5vw, 1.5rem);
	z-index: calc(var(--z-header) - 1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: #FFFFFF;
	background: #25D366;
	/* base.css squares every corner with !important; this button is the one round exception. */
	border-radius: 50% !important;
	box-shadow: 0 6px 18px rgba(8, 18, 38, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.85);
	transition:
		opacity var(--dur-fast) var(--ease-premium),
		transform var(--dur-base) var(--ease-premium),
		visibility 0s linear var(--dur-fast),
		background-color var(--dur-fast) var(--ease-standard);
}

.whatsapp--visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.whatsapp:hover {
	background: #1EBE5A;
	transform: scale(1.06);
}

.whatsapp:focus-visible {
	outline: 2px solid var(--ace-navy);
	outline-offset: 3px;
}

.whatsapp .icon {
	width: 28px;
	height: 28px;
}

.menu-open .whatsapp {
	opacity: 0;
	visibility: hidden;
}

@media (min-width: 1025px) {
	.whatsapp {
		width: 60px;
		height: 60px;
	}

	.whatsapp .icon {
		width: 30px;
		height: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.whatsapp,
	.whatsapp:hover {
		transform: none;
	}
}