/* =====================================================================
 * BOTÕES DO SITE — Blog Canela RS
 * Criado em 31/08/2026.
 *
 * Arquivo NOVO e isolado de propósito: nada foi editado dentro do
 * css/style.css nem do bootstrap.css. Se este visual não agradar, basta
 * apagar este arquivo e o site volta exatamente ao que era.
 *
 * Ele é carregado sozinho: o index.php varre a pasta wc_css/ e inclui
 * todo .css que encontrar, sempre DEPOIS do style.css. É por isso que
 * quase nada aqui precisa de !important — a ordem de carga já resolve.
 *
 * Detalhe para quem mexer aqui depois: o index.php usa scandir(), que
 * devolve em ORDEM ALFABÉTICA. Hoje a pasta tem só botoes.css e
 * estilo.css, e o estilo.css não tem nenhuma regra de botão — conferido.
 * Se um dia alguém escrever regra de .btn no estilo.css, ela vai ganhar
 * desta aqui, porque vem depois no alfabeto.
 *
 * O QUE MUDA
 *   - cantos arredondados
 *   - degradê da esquerda para a direita, escurecendo no canto direito
 *   - sombra projetada embaixo, na cor do próprio botão
 *   - hover que levanta 2px, clique que afunda 1px
 *   - contorno visível ao navegar por teclado (isso o site não tinha)
 *
 * O QUE NÃO MUDA
 *   - a cor de cada botão. O roxo segue roxo, o azul de editar segue
 *     azul, o vermelho de excluir segue vermelho. Cada um ganhou o
 *     degradê da SUA própria cor.
 *
 * PARA MUDAR O ARREDONDAMENTO de todos os botões de uma vez, altere só
 * a variável --wc-btn-raio logo abaixo. 8px = suave, 14px = médio (o
 * escolhido), 999px = pílula.
 * ===================================================================== */

:root {
    --wc-btn-raio:    8px;
    --wc-btn-raio-sm: 10px;
    --wc-btn-raio-lg: 16px;

    /* Sombra padrão, sobrescrita por cada variação com a cor dela. */
    --wc-btn-sombra: 20, 20, 20;
}

/* ---------------------------------------------------------------------
 * Base — forma, movimento e sombra. Vale para todo .btn do site.
 * ------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
 * NOTA DE 31/08/2026 - POR QUE NAO HA transform NEM filter AQUI
 *
 * A primeira versao usava `will-change: transform`, `transform:
 * translateY()` no hover e `filter: brightness()`. As tres coisas
 * promovem o botao a uma CAMADA DE COMPOSICAO propria na GPU, e texto em
 * camada composta perde o antisserrilhado de subpixel do sistema: as
 * letras ficam com aparencia dupla, como se houvesse uma escrita borrada
 * atras. Foi exatamente o que apareceu no site.
 *
 * Como o `body` deste tema esta com o -webkit-font-smoothing COMENTADO,
 * o resto da pagina usa subpixel normalmente — o que fazia o botao
 * destoar ainda mais.
 *
 * A subida no hover agora usa `top` com posicionamento relativo. Custa um
 * calculo de layout em vez de uma camada de GPU, o que para um botao e
 * irrelevante, e o texto continua nitido.
 * ------------------------------------------------------------------- */
.btn {
    position: relative;
    top: 0;
    border-radius: var(--wc-btn-raio);
    border-color: transparent;
    /* ------------------------------------------------------------------
     * A COPIA ESCURA ATRAS DA LETRA vinha daqui:
     *
     *     _cdn/bootcss/reset.css  ->  .btn { text-shadow: 1px 1px #555; }
     *
     * E CSS do proprio WorkControl, carregado em toda pagina publica pelo
     * index.php (linha 145), e existe desde sempre. So ficou visivel agora
     * porque os botoes cresceram, ganharam peso 700 e as tags de cidade
     * ficaram sobre fundo claro — no botao pequeno e escuro de antes o
     * deslocamento de 1px passava despercebido.
     *
     * Anulado aqui, e nao la, porque o reset.css tambem serve o painel.
     * ------------------------------------------------------------------ */
    text-shadow: none;
    /* 700 e um peso REAL da Rubik carregada pelo index.php
       (300, 400, 500, 700, 900). O 600 que estava aqui nao existe no
       arquivo da fonte, e peso inexistente e outro caminho conhecido
       para texto borrado, por sintese artificial do navegador. */
    font-weight: 700;
    /* Inteiro, e nao .02em: em fonte de 12px aquilo dava 0,24px e jogava
       cada letra para uma posicao fracionaria. 1px e o que o proprio
       style.css do tema ja usava. */
    letter-spacing: 1px;
    box-shadow:
        0 6px 16px rgba(var(--wc-btn-sombra), .34),
        inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: top .16s ease, box-shadow .16s ease, background-image .16s ease;
}

.btn:hover {
    top: -2px;
    box-shadow:
        0 10px 22px rgba(var(--wc-btn-sombra), .42),
        inset 0 1px 0 rgba(255, 255, 255, .20);
}

.btn:active,
.btn:not(:disabled):not(.disabled):active {
    top: 1px;
    box-shadow:
        0 3px 8px rgba(var(--wc-btn-sombra), .32),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Acessibilidade: quem navega por teclado precisa enxergar onde está.
   :focus-visible não dispara no clique de mouse, então o contorno não
   aparece para quem usa o site clicando. */
.btn:focus,
.btn.focus {
    box-shadow:
        0 6px 16px rgba(var(--wc-btn-sombra), .34),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

.btn:focus-visible {
    outline: 3px solid #cc639b;
    outline-offset: 3px;
}

.btn:disabled,
.btn.disabled {
    top: 0;
    box-shadow: none;
    opacity: .55;
}

/* Tamanhos: o raio acompanha, senão o botão pequeno fica redondo demais
   e o grande fica quadrado demais. */
.btn-sm { border-radius: var(--wc-btn-raio-sm); }
.btn-lg { border-radius: var(--wc-btn-raio-lg); }

/* Quem respeita "menos movimento" no sistema não recebe a animação. */
@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn:hover,
    .btn:active { top: 0; }
}

/* ---------------------------------------------------------------------
 * ROXO — o botão principal do site (64 usos no tema).
 * Base #852b5b: clareia para #9a3570 na esquerda e fecha em #5f1c42 na
 * direita. O ângulo de 100deg é o que produz o escurecimento no canto.
 * ------------------------------------------------------------------- */
.btn-outline-zatti {
    --wc-btn-sombra: 95, 28, 66;
    color: #fff !important;
    background-color: #852b5b;
    background-image: linear-gradient(100deg, #9a3570 0%, #7c2557 52%, #5f1c42 100%);
    border-color: transparent;
}

.btn-outline-zatti:hover,
.btn-outline-zatti:focus,
.btn-outline-zatti.focus {
    color: #fff !important;
    background-color: #9a3570;
    background-image: linear-gradient(100deg, #a83c7c 0%, #8a2b62 52%, #6b214b 100%);
    border-color: transparent;
}

/* ---------------------------------------------------------------------
 * AZUL — "Editar" do painel dentro do site (visível só para admin)
 * ------------------------------------------------------------------- */
.btn-info {
    --wc-btn-sombra: 15, 115, 133;
    color: #fff;
    background-color: #18a2b9;
    background-image: linear-gradient(100deg, #1fc0da 0%, #18a2b9 52%, #0f7385 100%);
    border-color: transparent;
}

.btn-info:hover,
.btn-info:focus {
    color: #fff;
    background-image: linear-gradient(100deg, #2ccfe9 0%, #1aaec6 52%, #12808f 100%);
    border-color: transparent;
}

/* ---------------------------------------------------------------------
 * VERDE-ÁGUA
 * ------------------------------------------------------------------- */
.btn-primary {
    --wc-btn-sombra: 1, 138, 122;
    color: #fff;
    background-color: #00bda7;
    background-image: linear-gradient(100deg, #10d3bb 0%, #00bda7 52%, #018a7a 100%);
    border-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-image: linear-gradient(100deg, #22e2ca 0%, #04cbb4 52%, #039a88 100%);
    border-color: transparent;
}

/* ---------------------------------------------------------------------
 * VERDES
 * ------------------------------------------------------------------- */
.btn-secondary {
    --wc-btn-sombra: 29, 138, 32;
    color: #fff;
    background-color: #2abc2d;
    background-image: linear-gradient(100deg, #34d137 0%, #2abc2d 52%, #1d8a20 100%);
    border-color: transparent;
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: #fff;
    background-image: linear-gradient(100deg, #43e046 0%, #2fcb32 52%, #229b25 100%);
    border-color: transparent;
}

.btn-success {
    --wc-btn-sombra: 26, 115, 49;
    color: #fff;
    background-color: #28a745;
    background-image: linear-gradient(100deg, #31c052 0%, #28a745 52%, #1a7331 100%);
    border-color: transparent;
}

.btn-success:hover,
.btn-success:focus {
    color: #fff;
    background-image: linear-gradient(100deg, #3ad35d 0%, #2cb64c 52%, #1f8339 100%);
    border-color: transparent;
}

/* ---------------------------------------------------------------------
 * LARANJA / AMARELO — texto escuro, como já era
 * ------------------------------------------------------------------- */
.btn-warning {
    --wc-btn-sombra: 190, 138, 0;
    color: #212529;
    background-color: #ffc209;
    background-image: linear-gradient(100deg, #ffd24a 0%, #ffc209 52%, #d99e00 100%);
    border-color: transparent;
}

.btn-warning:hover,
.btn-warning:focus {
    color: #212529;
    background-image: linear-gradient(100deg, #ffdc70 0%, #ffcb26 52%, #eaad00 100%);
    border-color: transparent;
}

/* ---------------------------------------------------------------------
 * VERMELHOS
 * ------------------------------------------------------------------- */
.btn-danger {
    --wc-btn-sombra: 165, 32, 44;
    color: #fff;
    background-color: #dc3645;
    background-image: linear-gradient(100deg, #e8505e 0%, #dc3645 52%, #a5202c 100%);
    border-color: transparent;
}

.btn-danger:hover,
.btn-danger:focus {
    color: #fff;
    background-image: linear-gradient(100deg, #ef6270 0%, #e34252 52%, #ba2635 100%);
    border-color: transparent;
}

.btn-default {
    --wc-btn-sombra: 212, 51, 51;
    color: #fff;
    background-color: #ff4d4d;
    background-image: linear-gradient(100deg, #ff6a6a 0%, #ff4d4d 52%, #d43333 100%);
    border-color: transparent;
}

.btn-default:hover,
.btn-default:focus {
    color: #fff;
    background-image: linear-gradient(100deg, #ff8484 0%, #ff5d5d 52%, #e33c3c 100%);
    border-color: transparent;
}

/* ---------------------------------------------------------------------
 * ROXO ESCURO sobre fundo claro
 * ------------------------------------------------------------------- */
.btn-white-zatti {
    --wc-btn-sombra: 37, 12, 25;
    color: #fff;
    background-color: #381226;
    background-image: linear-gradient(100deg, #4d1a35 0%, #381226 52%, #250c19 100%);
    border-color: transparent;
}

.btn-white-zatti:hover,
.btn-white-zatti:focus {
    color: #fff;
    background-image: linear-gradient(100deg, #6b2549 0%, #4e1935 52%, #351226 100%);
    border-color: transparent;
}

/* ---------------------------------------------------------------------
 * BOTÕES VAZADOS (outline de verdade)
 *
 * Estes existem para serem discretos: preencher com degradê tiraria a
 * função deles, que é ser o botão secundário ao lado do principal.
 * Ganham a forma e uma sombra bem leve; o preenchimento só aparece no
 * hover, que é quando o botão precisa responder.
 * ------------------------------------------------------------------- */
.btn-outline-blog {
    --wc-btn-sombra: 133, 43, 91;
    color: #852b5b !important;
    background-color: #fff;
    background-image: linear-gradient(100deg, #ffffff 0%, #fdf6fa 52%, #f4e7ef 100%);
    border: 1px solid #d9b9cd;
    box-shadow: 0 4px 12px rgba(133, 43, 91, .16);
}

.btn-outline-blog:hover,
.btn-outline-blog:focus {
    color: #fff !important;
    background-image: linear-gradient(100deg, #9a3570 0%, #7c2557 52%, #5f1c42 100%);
    border-color: transparent;
}

.btn-outline-danger {
    --wc-btn-sombra: 165, 32, 44;
    color: #dc3645 !important;
    background-color: transparent;
    background-image: none;
    border: 1px solid #dc3645;
    box-shadow: 0 4px 12px rgba(165, 32, 44, .14);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: #fff !important;
    background-image: linear-gradient(100deg, #e8505e 0%, #dc3645 52%, #a5202c 100%);
    border-color: transparent;
}

/* ---------------------------------------------------------------------
 * Link disfarçado de botão: não leva sombra nem degradê, senão vira
 * botão de verdade e perde a hierarquia da tela.
 * ------------------------------------------------------------------- */
.btn-default-link,
.btn-link {
    box-shadow: none;
    background-image: none;
}

.btn-default-link:hover,
.btn-link:hover {
    top: 0;
    box-shadow: none;
}