/**
 * Global back-to-top control.
 *
 * Fixed, bottom-left (right side is reserved for a future chat/WhatsApp
 * widget). See project-docs/05-components.md for the full spec.
 */

.ed-back-to-top {
	position: fixed;
	left: 12px;
	/*
	 * Always fixed to the viewport: the offset never changes with scroll
	 * position. There is deliberately no footer-avoidance/"dock" logic — the
	 * footer reserves its own bottom clearance (footer.css) instead.
	 */
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 40;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--ed-radius-full);

	background-color: var(--ed-color-primary);
	/*
	 * Dark icon, not white: white-on-#00B7B7 measures ~2.48:1, failing
	 * WCAG 2.2 AA's 3:1 non-text-contrast minimum. Verified by hand from
	 * the actual token values, not assumed. --ed-color-heading on the same
	 * background measures ~7.3:1.
	 */
	color: var(--ed-color-heading);
	box-shadow: var(--ed-shadow-md);
	cursor: pointer;

	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--ed-transition-base),
		transform var(--ed-transition-base),
		visibility var(--ed-transition-base),
		background-color var(--ed-transition-fast);
}

.ed-back-to-top[hidden] {
	display: flex; /* keep it laid out so the transition can run; visibility handles hiding */
}

.ed-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ed-back-to-top:hover {
	background-color: var(--ed-color-primary-hover);
}

.ed-back-to-top:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
}

.ed-back-to-top svg {
	width: 20px;
	height: 20px;
}

@media (min-width: 768px) {
	.ed-back-to-top {
		left: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.ed-back-to-top {
		transition: opacity var(--ed-transition-fast), visibility var(--ed-transition-fast);
		transform: none;
	}
}

/*
 * Joinchat (WhatsApp) floating button — bottom-right corner.
 *
 * The right-hand counterpart of the back-to-top control above, so both
 * floating controls are positioned from one global file. The plugin
 * positions its container at right/bottom: var(--sep) and insets the round
 * button a further 8px inside it, so the visible offset = --sep + 8px:
 * desktop 6+8 = 14px, mobile 4+8 = 12px (+ the bottom safe area).
 *
 * Replaces the retired widget-positions.php mu-plugin, which raised the
 * button 80px (`--bottom: 80px !important`) to clear the removed Tawk.to
 * widget. `body .joinchat` out-specifies the plugin's own `.joinchat`
 * rules (including its <=480px `--sep: 6px`), so no !important is needed.
 *
 * z-index 60: above the page and back-to-top (40), below the sticky header
 * (90) and every modal/lightbox/popup layer (100-130 and the cart modal),
 * so an open dialog always covers the widget.
 */
body .joinchat {
	--sep: 6px;
	--bottom: calc(var(--sep) + env(safe-area-inset-bottom, 0px));
	z-index: 60;
}

@media (max-width: 767px) {
	body .joinchat {
		--sep: 4px;
	}
}

/*
 * Cart and Checkout below 1280px: no floating WhatsApp button.
 *
 * Below 1280px the content reaches the corner (the full width on a phone, a 1200px
 * column up to ~1268px), so a fixed button always ends up over a control at some
 * scroll position (measured: overlaps at 1024, 1100 and 1200px, none from 1279px).
 * WhatsApp stays reachable from the header (the "WhatsApp" link from 1024px, the
 * hamburger menu below it). From 1280px the normal floating button is kept — the
 * content column leaves the corner free. Every other page is untouched.
 */
@media (max-width: 1279px) {
	body.woocommerce-cart .joinchat,
	body.woocommerce-checkout .joinchat {
		display: none;
	}
}

/* -------------------------------------------------------------------- */
/* Floating controls yield to content (assets/js/floating-yield.js)       */
/* -------------------------------------------------------------------- */

/*
 * Back-to-top (left) / Joinchat (right) fade out while content they would cover is under
 * them. The class is only ever set by floating-yield.js, which is enqueued on the pages
 * that need it (Home, Estores Screen); everywhere else these rules never match.
 */
html.ed-floats-yield-left .ed-back-to-top.is-visible,
html.ed-floats-yield-right body .joinchat {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--ed-transition-fast), visibility var(--ed-transition-fast); /* hide fast, return at the normal pace */
}

@media (prefers-reduced-motion: reduce) {
	html.ed-floats-yield-left .ed-back-to-top.is-visible,
	html.ed-floats-yield-right body .joinchat {
		transition: none;
	}
}