/**
 * The floating WhatsApp button (WP-36). Markup and texts live in
 * includes/whatsapp-button.php; assets/lemorau-whatsapp.js sets
 * --lemorau-whatsapp-lift while the cookie banner is in the way.
 *
 * Bottom-LEFT, on purpose. The bottom-right corner on this site already has
 * three tenants -- the Complianz banner while it is open (configured
 * bottom-right, see SETUP_COMPLIANZ.md §3.2), Complianz's "Manage consent"
 * tab once it has been answered (right: 40px), and the theme's
 * #scroll-to-top. The bottom-left has none, so on any screen wider than
 * 768px the button and the banner simply coexist and nothing here reacts
 * to anything.
 *
 * At 768px and below Complianz makes the banner full-width, and there is no
 * free corner. The script measures the banner and lifts the button to sit
 * above it, through the custom property below; the button drops back when
 * the banner is answered. Never hidden: a visitor who ignores the banner --
 * it has no close button -- must still be able to find and use this.
 */

.lemorau-whatsapp {
	position: fixed;
	left: 20px;
	bottom: calc(20px + var(--lemorau-whatsapp-lift, 0px) + env(safe-area-inset-bottom, 0px));
	width: 56px; /* comfortably above the 44px touch-target minimum */
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	/* WhatsApp's own logo: its green, white glyph. The 1.9:1 the white gives
	   on this green is fine -- WCAG exempts a brand's presentation of itself
	   from the non-text contrast rule, and it is the mark visitors recognise. */
	background: #25d366;
	color: #fff;
	/* The white ring is what separates the button from a dark page background;
	   the shadow does the same on a light one. */
	box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(0, 0, 0, 0.25);
	/* Above the theme's scroll-to-top (200); below the Complianz banner
	   (99999) and its manage-consent tab (9998), which live in the other
	   corner anyway. */
	z-index: 1000;
	text-decoration: none;
	transition: bottom 0.25s ease, transform 0.2s ease;
}

.lemorau-whatsapp svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
	display: block;
}

.lemorau-whatsapp:hover {
	transform: scale(1.06);
	color: #fff;
}

.lemorau-whatsapp:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.lemorau-whatsapp {
		left: 16px;
		bottom: calc(16px + var(--lemorau-whatsapp-lift, 0px) + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.lemorau-whatsapp {
		transition: none;
	}

	.lemorau-whatsapp:hover {
		transform: none;
	}
}