/*
 * Floating WhatsApp contact button (docs/HOMEPAGE-IMPROVEMENT-PHASE-1.md).
 * Site-wide fixed element, rendered once via footer.php.
 *
 * Colour: --color-success (existing, already-accessible design-system
 * token), not a new one-off hex value — it reads as "WhatsApp green" without
 * introducing a colour that exists nowhere else in the system.
 *
 * Bottom offset is two-tier, not one fixed value everywhere: on the single-
 * product page, .bholats-mobile-purchase-bar is a second fixed element
 * pinned to the same bottom edge below 1024px (see single-product.css) —
 * measured live (Puppeteer, iPhone-width viewport, real product page) at up
 * to 92px tall including its safe-area padding. Below 1024px this button
 * sits above that bar with a clear gap (measured/re-verified after an
 * initial 84px estimate proved 8px too short and actually overlapped); at
 * 1024px and up the purchase bar is always `display: none`
 * (single-product.css), so the button can sit at the normal, closer corner
 * offset there instead.
 *
 * That 112px "elevated" value used to apply unconditionally on every
 * mobile page, not just the single-product page the purchase bar actually
 * exists on — leaving the button sitting awkwardly far from the corner on
 * the homepage, Shop, category archives, cart, and checkout, none of
 * which have a purchase bar to clear at all. `body:has(...)` below reads
 * the same `--visible` class product-purchase-bar.js already toggles
 * (IntersectionObserver-driven, once the real add-to-cart area scrolls out
 * of view) — no new JS needed, and no per-page-type class required, since
 * .bholats-mobile-purchase-bar only ever exists in the DOM at all on a
 * product page to begin with. Ordinary pages now get a normal close-to-
 * the-corner offset; the 112px clearance only applies while that bar is
 * genuinely on screen.
 */

.bholats-whatsapp-button {
	position: fixed;
	right: var(--space-4);
	bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
	z-index: var(--z-sticky);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	background: var(--color-success);
	color: var(--color-text-on-brand);
	/* Tight/subtle at rest (--shadow-lg's large 24px-blur spread was built for
	   big elevated surfaces, not a small circular FAB — on a 56px circle it
	   read as a diffuse halo well past the button's own edge, part of why the
	   button looked oversized). A visibly bigger shadow still appears, but
	   only as a hover/elevation cue below. */
	box-shadow: var(--shadow-md);
	transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.bholats-whatsapp-button svg {
	/* --icon-xl (32px), not --icon-lg (24px): this glyph is a thin 1.5px-stroke
	   outline icon, not a bold/filled mark — at 24px inside a solid-colour
	   circle it read as visually sparse/small even though the raw box ratio
	   (24/56) matched common FAB conventions. 32px fills the circle properly
	   without changing the button's own 56px footprint. */
	width: var(--icon-xl);
	height: var(--icon-xl);
}

.bholats-whatsapp-button:hover {
	transform: scale(1.06);
	box-shadow: var(--shadow-lg);
}

.bholats-whatsapp-button:active {
	transform: scale(0.98);
}

/* Elevated only while the mobile sticky purchase bar is genuinely visible
   on screen — see the docblock above. Scoped below 1024px, matching the
   purchase bar's own breakpoint (single-product.css forces it hidden at
   1024px and up): a :has() selector's specificity would otherwise beat
   the plain .bholats-whatsapp-button media-query rule below regardless of
   source order, so without this guard a stray --visible class surviving
   past a resize (e.g. devtools responsive mode) could wrongly override
   the desktop offset even though the bar itself stays display:none. */
@media (max-width: 1023px) {
	body:has(.bholats-mobile-purchase-bar--visible) .bholats-whatsapp-button {
		bottom: calc(112px + env(safe-area-inset-bottom, 0px));
	}
}

@media (min-width: 1024px) {
	.bholats-whatsapp-button {
		right: var(--space-5);
		bottom: var(--space-5);
	}
}

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