/**
 * Sitewide back-to-top floating action button.
 *
 * Renders on every page via patterns/back-to-top.php, inserted into
 * parts/footer.html. Visibility is controlled entirely by JS
 * (assets/js/back-to-top.js) toggling `.is-visible` on scroll direction —
 * this file only ever expresses the two states and the transition between
 * them.
 *
 * This is a fixed-position overlay, not a section, and it is not in
 * vertical flow — AGENTS.md §8.1's ban on horizontal padding/margin
 * applies to sections on the rail, which this deliberately is not, so its
 * fixed offsets below are not a rail violation.
 *
 * @package idia
 */

.idia-back-to-top {
	position: fixed;
	right: var(--wp--preset--spacing--24);
	bottom: var(--wp--preset--spacing--24);

	/* z-index: sits above ordinary page content (which never sets its own
	   z-index above 3, see header.css's over-hero variants) but below the
	   header's z-index: 100, so an open mobile nav overlay is never hidden
	   behind this button. */
	z-index: 90;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--radius--pill);
	height: var(--wp--custom--radius--pill);

	border: none;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
	cursor: pointer;

	opacity: 0;
	transform: translateY(var(--wp--preset--spacing--16));
	pointer-events: none;

	transition: opacity var(--wp--custom--transition) cubic-bezier(0.32, 0.72, 0, 1),
		transform var(--wp--custom--transition) cubic-bezier(0.32, 0.72, 0, 1),
		border-radius var(--wp--custom--transition) cubic-bezier(0.32, 0.72, 0, 1);
}

.idia-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* House hover: pill -> 16px radius only, per AGENTS.md §11.1. No colour
   shift, scale or shadow on top of it. */
.idia-back-to-top:hover {
	border-radius: var(--wp--custom--radius--16);
}

.idia-back-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.idia-back-to-top svg {
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
}

@media (prefers-reduced-motion: reduce) {

	/* The button is meant to be invisible until armed — that requirement is
	   satisfied by the JS toggling .is-visible (§11.1), not by animation —
	   so this only removes the transition itself. Both states already set
	   opacity/transform directly, so turning the transition off can never
	   leave the button stuck mid-fade or off-screen. */
	.idia-back-to-top {
		transition: none;
	}
}

@media (max-width: 767px) {

	/* Checked against the footer CTA button at this width — the fixed
	   offset stays clear of it, so no further reduction is needed here. */
	.idia-back-to-top {
		right: var(--wp--preset--spacing--16);
		bottom: var(--wp--preset--spacing--16);
	}
}