/**
 * Jedi-Robe scroll-to-top control.
 *
 * Provides the site-wide fixed back-to-top utility used by the Jedi child
 * theme. The component follows the shared dark technical interface language
 * while remaining large enough for reliable touch interaction.
 *
 * Interaction:
 * - Hidden until JavaScript adds .is-visible.
 * - Fine pointers receive the restrained hover treatment.
 * - Touch devices retain a minimum 48px interaction target.
 * - Reduced-motion users receive no transform animation.
 *
 * @package    Jedi_Theme
 * @subpackage Components
 * @since      1.1.0
 */


/* ==========================================================================
   Control
   ========================================================================== */

.jedi-scroll-to-top {
	position: fixed;
	right:
		clamp(
			1rem,
			1.8vw,
			1.5rem
		);
	bottom:
		clamp(
			1rem,
			1.8vw,
			1.5rem
		);
	z-index: 999;

	display: grid;

	width: 3.25rem;
	height: 3.25rem;

	place-items: center;

	margin: 0;
	padding: 0;

	border: 1px solid rgba(152, 169, 192, 0.3);
	border-radius: 0.2rem;

	background:
		linear-gradient(
			145deg,
			rgba(111, 203, 255, 0.045),
			transparent 46%
		),
		rgba(5, 10, 16, 0.96);

	color: rgba(245, 247, 250, 0.9);

	box-shadow:
		0 0.85rem 2rem rgba(0, 0, 0, 0.32),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);

	opacity: 0;
	visibility: hidden;

	transform:
		translateY(
			0.55rem
		);

	transition:
		opacity 180ms ease,
		visibility 180ms ease,
		transform 180ms ease,
		border-color 180ms ease,
		background 180ms ease,
		color 180ms ease,
		box-shadow 180ms ease;

	pointer-events: none;

	cursor: pointer;

	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* ==========================================================================
   Visible state
   ========================================================================== */

.jedi-scroll-to-top.is-visible {
	opacity: 1;
	visibility: visible;

	transform:
		translateY(
			0
		);

	pointer-events: auto;
}


/* ==========================================================================
   Icon
   ========================================================================== */

.jedi-scroll-to-top svg {
	display: block;

	width: 1.35rem;
	height: 1.35rem;

	color: currentcolor;
}


.jedi-scroll-to-top svg path {
	fill: none;

	stroke: currentcolor;
}


/* ==========================================================================
   Fine-pointer interaction
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

	.jedi-scroll-to-top:hover {
		border-color:
			rgba(
				69,
				217,
				107,
				0.44
			);

		background:
			linear-gradient(
				145deg,
				rgba(69, 217, 107, 0.055),
				transparent 46%
			),
			rgba(7, 13, 20, 0.98);

		color:
			var(--jr-green-light);

		box-shadow:
			0 1rem 2.25rem rgba(0, 0, 0, 0.38),
			0 0 1.1rem rgba(45, 166, 83, 0.055),
			inset 0 1px 0 rgba(255, 255, 255, 0.045);

		transform:
			translateY(
				-0.15rem
			);
	}
}


/* ==========================================================================
   Keyboard focus
   ========================================================================== */

.jedi-scroll-to-top:focus-visible {
	outline:
		2px solid
		var(--jr-blue-light);

	outline-offset: 3px;
}


/* ==========================================================================
   Touch
   ========================================================================== */

@media (any-pointer: coarse) {

	.jedi-scroll-to-top {
		width: 3rem;
		height: 3rem;
	}
}


/* ==========================================================================
   Mobile positioning
   ========================================================================== */

@media (max-width: 767px) {

	.jedi-scroll-to-top {
		right:
			calc(
				1rem
				+
				env(safe-area-inset-right)
			);

		bottom:
			calc(
				1rem
				+
				env(safe-area-inset-bottom)
			);
	}
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

	.jedi-scroll-to-top {
		transition:
			opacity 0.01ms linear,
			visibility 0.01ms linear;

		transform: none;
	}


	.jedi-scroll-to-top.is-visible,
	.jedi-scroll-to-top:hover {
		transform: none;
	}
}