/* =====================================================================
 * VOLTAR AO TOPO — Blog Canela RS
 * Criado em 22/09/2026.
 *
 * ---------------------------------------------------------------------
 * O QUE JÁ EXISTIA
 *
 * O comportamento inteiro já estava no site e nunca funcionou por um
 * detalhe: o js/return-to-top.js é carregado no rodapé desde sempre, e o
 * css/style.css do template já tinha as regras de #return-to-top. Só
 * faltava o elemento no HTML. O script procurava por um botão que nunca
 * foi escrito.
 *
 * Então isto aqui não cria um recurso novo: liga um que estava pronto e
 * troca a aparência, que era quadrada e com hover vermelho — cor que não
 * existe em nenhum outro lugar do site.
 *
 * As regras abaixo vencem as do style.css porque wc_css/ é carregado
 * depois, e a especificidade é a mesma.
 * ===================================================================== */

#return-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9990;          /* abaixo do aviso de cookies, que é 9999 */

    /* 48px é o alvo de toque confortável. O original tinha 35px, que no
       celular obriga a mirar. */
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;     /* era 4px — o pedido era redondo */

    display: none;          /* o JS revela ao rolar 50px */
    line-height: 0;         /* mata o vao de linha de base do inline */

    cursor: pointer;
    background-image: linear-gradient(140deg, #9a3570 0%, #7c2557 55%, #5f1c42 100%);
    box-shadow: 0 8px 20px rgba(95, 28, 66, .34),
                inset 0 1px 0 rgba(255, 255, 255, .16);

    /* Sem transform nem filter no hover, pelo mesmo motivo dos botões do
       site: promover a camada de GPU borra o desenho. Aqui só a sombra
       e o fundo mudam. */
    transition: box-shadow .16s ease, background-image .16s ease;
}

/* ---------------------------------------------------------------------
 * A CENTRALIZAÇÃO DA SETA — corrigido em 23/09/2026
 *
 * Aqui havia flexbox no botão, e uma regra que tentava ligá-lo quando o
 * jQuery revelasse o elemento. Não funcionava, e a seta ficava colada na
 * borda esquerda do círculo: 0px de folga de um lado, 28px do outro.
 *
 * MEDIDO: o fadeIn() do jQuery escreve "display: inline-block" no style
 * do elemento, e não "display: block" como eu supus. O seletor nunca
 * casava, o botão nunca virava flex, e align-items/justify-content são
 * ignorados em qualquer display que não seja flex ou grid.
 *
 * Forçar "display: flex !important" resolveria a centralização e
 * quebraria outra coisa: o fadeOut() esconde o botão escrevendo
 * "display: none" inline, e o !important passaria por cima — o botão
 * ficaria visível para sempre.
 *
 * A saída é não depender do display do pai. A seta é posicionada em
 * absolute dentro do círculo, o que centraliza igual sendo ele block,
 * inline-block ou flex.
 * ------------------------------------------------------------------- */
#return-to-top svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#return-to-top:hover {
    background-image: linear-gradient(140deg, #ac3d7e 0%, #8c2a62 55%, #6b204b 100%);
    box-shadow: 0 10px 26px rgba(95, 28, 66, .45),
                inset 0 1px 0 rgba(255, 255, 255, .2);
}

#return-to-top:focus-visible {
    outline: 3px solid #cc639b;
    outline-offset: 3px;
}

#return-to-top svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    overflow: visible;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------------------
 * Celular: um pouco mais para dentro, para não brigar com a barra de
 * navegação do sistema, e afastado da caixa de cookies enquanto ela
 * estiver aberta — ela fica no canto ESQUERDO, então só o respiro de
 * baixo importa.
 * ------------------------------------------------------------------- */
@media (max-width: 600px) {
    #return-to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
    }
}

/* ---------------------------------------------------------------------
 * Quem pediu menos animação no sistema recebe menos animação. O salto
 * suave do topo é feito pelo jQuery no return-to-top.js; aqui fica pelo
 * menos a transição desligada.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #return-to-top {
        transition: none;
    }
}