/*
 * FRENKEL - back-to-top button ("Back Button", Tools -> Back Button).
 *
 * Fully static: per-device activation, the bottom corner and the shape are
 * driven by classes the PHP puts on the element, so nothing here depends on
 * an inline stylesheet surviving a caching / CSS-combining plugin. Colours,
 * size and z-index arrive as custom properties on the element's own style
 * attribute (see inc/back-button.php).
 */

.cf-backtop {
	--cf-bt-gap: clamp(16px, 2vw, 28px);

	position: fixed;
	inset-block-end: var(--cf-bt-gap);
	right: var(--cf-bt-gap); /* replaced by the per-device corner classes */
	z-index: var(--cf-bt-z, 9990);

	/* Hidden until a breakpoint class below switches it on. */
	display: none;
	place-items: center;

	width: var(--cf-bt-w, 46px);
	height: var(--cf-bt-h, 46px);
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--cf-bt-bg, #605c54);
	color: var(--cf-bt-fg, #f2ede7);
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .45);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;

	/* Resting (invisible) state. `visibility` is delayed so the fade-out can
	   finish before the button stops being focusable. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--cf-dur, .3s) var(--cf-ease, cubic-bezier(.4, 0, .2, 1)),
		background var(--cf-dur, .3s) var(--cf-ease, cubic-bezier(.4, 0, .2, 1)),
		color var(--cf-dur, .3s) var(--cf-ease, cubic-bezier(.4, 0, .2, 1)),
		transform var(--cf-dur, .3s) var(--cf-ease, cubic-bezier(.4, 0, .2, 1)),
		box-shadow var(--cf-dur, .3s) var(--cf-ease, cubic-bezier(.4, 0, .2, 1)),
		visibility 0s linear var(--cf-dur, .3s);
}

/* --- Shape --- */
.cf-backtop--shape-circle { border-radius: 50%; }
.cf-backtop--shape-square { border-radius: 6px; }

/* --- Per-device activation + corner. Breakpoints match tokens.css. --- */
@media (min-width: 1025px) {
	.cf-backtop--on-desktop { display: grid; }
	.cf-backtop--desktop-left { left: var(--cf-bt-gap); right: auto; }
	.cf-backtop--desktop-right { right: var(--cf-bt-gap); left: auto; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.cf-backtop--on-tablet { display: grid; }
	.cf-backtop--tablet-left { left: var(--cf-bt-gap); right: auto; }
	.cf-backtop--tablet-right { right: var(--cf-bt-gap); left: auto; }
}
@media (max-width: 767px) {
	.cf-backtop--on-mobile { display: grid; }
	.cf-backtop--mobile-left { left: var(--cf-bt-gap); right: auto; }
	.cf-backtop--mobile-right { right: var(--cf-bt-gap); left: auto; }
}

/* --- Appearance effects: each sets the resting transform --- */
.cf-backtop--fx-slide { transform: translateY(10px); }
.cf-backtop--fx-zoom { transform: scale(.8); }
.cf-backtop--fx-none { transition: none; }

.cf-backtop.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

/* Hover / focus colours fall back to the resting ones when unset. */
.cf-backtop.is-visible:hover,
.cf-backtop.is-visible:focus-visible {
	background: var(--cf-bt-bg-h, var(--cf-bt-bg, #605c54));
	color: var(--cf-bt-fg-h, var(--cf-bt-fg, #f2ede7));
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .5);
}
.cf-backtop:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.cf-backtop__icon {
	/* Scale off the shorter side so a rectangular button keeps a sane arrow. */
	width: calc(min(var(--cf-bt-w, 46px), var(--cf-bt-h, 46px)) * .42);
	height: auto;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.cf-backtop {
		transition: opacity .01ms linear;
		transform: none;
	}
	.cf-backtop.is-visible:hover,
	.cf-backtop.is-visible:focus-visible { transform: none; }
}

@media print {
	.cf-backtop { display: none !important; }
}