/**
 * Back to top – design-system floating control.
 */

/* Font Awesome 6 Free – fa-arrow-up subset */
@font-face {
	font-family: "Font Awesome 6 Free";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("../webfonts/fa-solid-900.woff2") format("woff2");
}

.back-to-top {
	--back-to-top-size: 2.75rem;
	--back-to-top-inset-inline: clamp(1rem, 2.5vw, 1.5rem);
	--back-to-top-surface: var(--rietavomvvg-color-primary-dark);
	--back-to-top-border: var(--rietavomvvg-color-primary-dark);
	--back-to-top-tone: #fff;
	--back-to-top-bottom: clamp(4.75rem, 5vw + 2.75rem, 5.75rem);

	position: fixed;
	right: max(var(--back-to-top-inset-inline), env(safe-area-inset-right, 0px));
	bottom: max(var(--back-to-top-bottom), calc(env(safe-area-inset-bottom, 0px) + 4.5rem));
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--back-to-top-size);
	height: var(--back-to-top-size);
	padding: 0;
	border: 1px solid var(--back-to-top-border);
	border-radius: var(--rietavomvvg-radius-sm);
	background: var(--back-to-top-surface);
	color: var(--back-to-top-tone);
	box-shadow: var(--rietavomvvg-shadow-sm);
	font: inherit;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(0.5rem);
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease,
		transform 0.25s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		color 0.2s ease;
}

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

.back-to-top:hover,
.back-to-top:focus-visible {
	--back-to-top-surface: var(--rietavomvvg-color-primary);
	--back-to-top-border: var(--rietavomvvg-color-primary);
	--back-to-top-tone: #fff;

	box-shadow: var(--rietavomvvg-shadow-md);
}

.back-to-top:focus-visible {
	outline: 2px solid var(--rietavomvvg-color-primary-light);
	outline-offset: 2px;
}

.back-to-top__icon {
	flex-shrink: 0;
	font-family: "Font Awesome 6 Free", sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: 1rem;
	line-height: 1;
	color: inherit;
	-webkit-font-smoothing: antialiased;
}

.back-to-top__icon::before {
	content: "\f062";
}

@media (min-width: 48rem) {
	.back-to-top {
		--back-to-top-size: 2.875rem;
		--back-to-top-bottom: clamp(5rem, 4vw + 3rem, 6rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition:
			opacity 0.2s ease,
			visibility 0.2s ease,
			background-color 0.2s ease,
			border-color 0.2s ease,
			box-shadow 0.2s ease,
			color 0.2s ease;
		transform: none;
	}

	.back-to-top.is-visible {
		transform: none;
	}
}