/**
 * PW Scroll to Top
 *
 * Colours/size are exposed as custom properties so a host theme can restyle the
 * button without forking the plugin (e.g. set --pw-stt-bg in its own CSS).
 * Design ref: Figma green #004a3b background, white up-chevron, ~2px radius.
 * Button size is bumped to 44px so it meets the minimum tap-target guideline.
 */
.pw-stt {
	--pw-stt-bg: #004a3b;
	--pw-stt-bg-hover: #00624e;
	--pw-stt-fg: #ffffff;
	--pw-stt-size: 44px;
	--pw-stt-gap: 16px;
	--pw-stt-radius: 4px;

	position: fixed;
	right: var(--pw-stt-gap);
	bottom: calc(var(--pw-stt-gap) + env(safe-area-inset-bottom, 0px));
	z-index: 9990;

	display: none; /* base: never shown until a mobile viewport opts in */
	align-items: center;
	justify-content: center;
	width: var(--pw-stt-size);
	height: var(--pw-stt-size);
	padding: 0;
	margin: 0;

	color: var(--pw-stt-fg);
	background-color: var(--pw-stt-bg);
	border: 0;
	border-radius: var(--pw-stt-radius);
	box-shadow: 0 4px 12px rgba(0, 51, 41, 0.28);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;

	/* Hidden state — faded out + nudged down, lifted out of the tab order. */
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

/* The button only exists as a mobile affordance. The breakpoint mirrors the
 * pw_stt_breakpoint() PHP default (1024px); JS also gates on the same value. */
@media (max-width: 1024px) {
	.pw-stt:not([hidden]) {
		display: inline-flex;
	}
}

.pw-stt.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.pw-stt:hover,
.pw-stt:focus-visible {
	background-color: var(--pw-stt-bg-hover);
}

.pw-stt:focus-visible {
	outline: 2px solid var(--pw-stt-fg);
	outline-offset: 2px;
}

.pw-stt:active {
	transform: translateY(1px);
}

.pw-stt__icon {
	display: block;
	width: 18px;
	height: 10px;
}

/* A custom uploaded icon (SVG/PNG) keeps its own colour; size it to fit. */
.pw-stt__icon--custom {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.pw-stt {
		transition: opacity 0.01ms;
		transform: none;
	}
	.pw-stt.is-visible {
		transform: none;
	}
}