/**
 * The floating buttons of the bottom-right corner, loaded by
 * includes/floating-buttons.php: the WhatsApp button (WP-36, markup and texts
 * in includes/whatsapp-button.php) and, above it, the theme's back-to-top
 * (WP-50). lemorau-floating-buttons.js sets --lemorau-whatsapp-lift while the
 * cookie banner is in the way.
 *
 * Bottom-RIGHT, at Lemorau's request (it was bottom-left until 7 Oct 2026).
 * The Complianz banner and its "Manage consent" tab moved to the bottom-left
 * for it (SETUP_COMPLIANZ.md §3.2), so on any screen wider than 768px the
 * two 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;
	right: 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), which covers it only on narrow screens, where the script
	   lifts it clear. */
	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;
}

/* The theme's scroll-to-top (WP-50), on phones and tablets only: up to
   1024px, Elementor's tablet breakpoint. Fabrik prints it on every page and
   hides it in both its stylesheets with display: none, which nothing turns
   back on; its script only fades it in (inline opacity: 1) half a screen down.
   Shown here above the button, centred on it 16px apart, and lifted with it
   over the banner. Faded out it keeps its full size, so visibility takes it
   out of reach of clicks and focus. The script makes it a keyboard button.
   The theme's stylesheet loads after this one and its narrow-screen rule is
   body.responsive-layout #scroll-to-top, hence the extra weight here; .hidden
   is the theme's own, set while a menu overlay is open. */
@media (max-width: 1024px) {
	html body #scroll-to-top.vamtam-scroll-to-top:not(.hidden) {
		display: block;
		right: 26px;
		bottom: calc(92px + var(--lemorau-whatsapp-lift, 0px) + env(safe-area-inset-bottom, 0px));
		box-sizing: border-box;
		width: 44px;
		height: 44px;
		/* The theme draws it light grey on near-white, and it barely shows:
		   white with the WhatsApp button's shadow, the arrow in the accent. */
		border-color: transparent;
		background: #fff;
		color: var(--e-global-color-vamtam_accent_1, #0054a4);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.25);
		visibility: hidden;
		transition: opacity 0.3s ease-out, color 0.3s ease-out, transform 0.3s ease-out, bottom 0.25s ease, visibility 0s linear 0.3s;
	}

	html body #scroll-to-top.vamtam-scroll-to-top[style*="opacity: 1"]:not(.hidden) {
		visibility: visible;
		transition: opacity 0.3s ease-out, color 0.3s ease-out, transform 0.3s ease-out, bottom 0.25s ease;
	}

	/* The theme's arrow is a 15px glyph of its icon font, rotated; a chevron
	   drawn here instead, in the colour above. Its weight sits in the upper
	   half of the turned square, hence the square set a little low. */
	html body #scroll-to-top.vamtam-scroll-to-top #scroll-to-top-text {
		display: none;
	}

	html body #scroll-to-top.vamtam-scroll-to-top::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		box-sizing: border-box;
		width: 14px;
		height: 14px;
		margin: -4px 0 0 -7px;
		border-top: 3px solid currentColor;
		border-left: 3px solid currentColor;
		transform: rotate(45deg);
	}

	html body #scroll-to-top.vamtam-scroll-to-top:focus-visible {
		outline: 3px solid var(--e-global-color-vamtam_accent_1, #0054a4);
		outline-offset: 3px;
	}
}

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

	html body #scroll-to-top.vamtam-scroll-to-top:not(.hidden) {
		right: 22px;
		bottom: calc(88px + var(--lemorau-whatsapp-lift, 0px) + env(safe-area-inset-bottom, 0px));
	}
}

/* A page without the WhatsApp button (lemorau_whatsapp_enabled) gives its
   place in the corner to the back-to-top, which the script then lifts. */
@media (max-width: 1024px) {
	html body.lemorau-no-whatsapp #scroll-to-top.vamtam-scroll-to-top:not(.hidden) {
		right: 20px;
		bottom: calc(20px + var(--lemorau-whatsapp-lift, 0px) + env(safe-area-inset-bottom, 0px));
	}
}

@media (max-width: 480px) {
	html body.lemorau-no-whatsapp #scroll-to-top.vamtam-scroll-to-top:not(.hidden) {
		right: 16px;
		bottom: calc(16px + var(--lemorau-whatsapp-lift, 0px) + env(safe-area-inset-bottom, 0px));
	}
}

/* The script moves focus to the top of the page after a keyboard jump. */
body[tabindex="-1"]:focus {
	outline: none;
}

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

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