/*
 * ============================================================
 * Arquivo: voltar-ao-topo/assets/gbl-voltar-topo.css
 * Projeto: Law Thesis
 * Pasta:   voltar-ao-topo/assets
 * Módulo:  Botão "Voltar ao topo" (estilos)
 * ============================================================
 * Descrição:
 *   Botão flutuante no canto inferior direito. Fica escondido no
 *   topo e aparece (fade + subida) ao rolar a página; ao clicar,
 *   rola suavemente de volta ao início. Segue o tema via tokens
 *   --lt-* (fundo verde da marca). No mobile, sobe acima do menu
 *   inferior para não sobrepor.
 *
 * Prefixo CSS: gbl-vtopo
 * ============================================================
 */

.gbl-vtopo {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9990;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--lt-brand, #2FB877);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .45);

	/* escondido por padrão — o JS mostra ao rolar */
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background-color .2s ease;
}

/* estado visível (classe adicionada pelo JS ao rolar) */
.gbl-vtopo.gbl-vtopo--on {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.gbl-vtopo:hover {
	background: var(--lt-brand-strong, #0FA958);
	transform: translateY(-2px);
}

.gbl-vtopo:focus-visible {
	outline: 2px solid var(--lt-brand, #2FB877);
	outline-offset: 3px;
}

.gbl-vtopo svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Mobile: sobe acima do menu inferior (bottom nav do plugin). */
@media (max-width: 768px) {
	.gbl-vtopo {
		right: 16px;
		bottom: 84px;
		width: 42px;
		height: 42px;
	}
}

/* Respeita quem prefere menos movimento. */
@media (prefers-reduced-motion: reduce) {
	.gbl-vtopo { transition: opacity .2s ease, visibility .2s ease; transform: none; }
	.gbl-vtopo.gbl-vtopo--on { transform: none; }
	.gbl-vtopo:hover { transform: none; }
}