/* ==========================================================================
   Botão "Voltar ao Topo" — Configuração
   --------------------------------------------------------------------------
   EDITE APENAS AS VARIÁVEIS ABAIXO. O restante do arquivo aplica os
   valores automaticamente — não é necessário alterar nada além daqui.
   ========================================================================== */

:root {
  /* Cor de fundo do botão
     Padrão: cobre (#9d7b53). Substitua por var(--bs-primary) para usar a
     cor primária do Bootstrap configurada no tema. */
  --btt-cor-fundo:       var(--bs-primary, #9d7b53);

  /* Cor de fundo ao passar o mouse */
  --btt-cor-fundo-hover: var(--bs-link-hover-color, #7a5e3a);

  /* Cor do ícone (seta) */
  --btt-cor-icone:       #ffffff;

  /* Tamanho do botão (largura e altura iguais)
     Recomendado: mínimo 36px para acessibilidade */
  --btt-tamanho:         44px;

  /* Tamanho do ícone SVG dentro do botão */
  --btt-tamanho-icone:   20px;

  /* Formato do botão
     50%    → círculo
     0.5rem → quadrado com cantos arredondados
     0      → quadrado */
  --btt-border-radius:   50%;

  /* Posição na tela */
  --btt-bottom:          2rem;   /* distância da borda inferior */
  --btt-right:           2rem;   /* distância da borda direita  */

  /* Sombra
     Defina "none" para remover a sombra */
  --btt-sombra:          0 4px 12px rgba(0, 0, 0, 0.20);
}

/* ==========================================================================
   Aplicação das variáveis — não edite abaixo desta linha
   ========================================================================== */

#hm2-back-to-top {
  background-color: var(--btt-cor-fundo);
  color:            var(--btt-cor-icone);
  width:            var(--btt-tamanho);
  height:           var(--btt-tamanho);
  bottom:           var(--btt-bottom);
  right:            var(--btt-right);
  border-radius:    var(--btt-border-radius);
  box-shadow:       var(--btt-sombra);
}

#hm2-back-to-top svg {
  width:  var(--btt-tamanho-icone);
  height: var(--btt-tamanho-icone);
}

#hm2-back-to-top:hover {
  background-color: var(--btt-cor-fundo-hover);
}

#hm2-back-to-top:focus-visible {
  outline-color: var(--btt-cor-fundo);
}