/* =====================================================================
 * CHAMADA DO CANAL DO WHATSAPP — Blog Canela RS
 * Criado em 23/09/2026. Revisado no mesmo dia para entrar também no
 * rodapé dos artigos.
 *
 * Fica em themes/wc_blogcanelars/wc_css/ porque o index.php da raiz
 * carrega sozinho todo .css dessa pasta (linhas 231-236). Não precisa
 * declarar o arquivo em lugar nenhum.
 *
 * ---------------------------------------------------------------------
 * O QUE É
 *
 * Opção C do preview — cartão branco com filete verde na lateral — com
 * o anel pulsante da opção A em volta do ícone. O cartão claro não
 * briga com o banner de descontos que fica acima dele na home, e o anel
 * devolve o movimento que o cartão claro não tinha. O olho é chamado
 * pelo ponto verde, não pela faixa inteira.
 *
 * ---------------------------------------------------------------------
 * OS DOIS LUGARES, E POR QUE ELES PRECISAM DE CORTES DIFERENTES
 *
 * Na HOME o cartão ocupa dez das doze colunas: 1037px numa tela de
 * 1280. Cabe folgado em uma linha (ícone, texto, botão).
 *
 * No ARTIGO ele vive dentro da coluna de conteúdo, que é 8/12 e divide
 * a tela com a barra lateral. Numa tela de 1024 isso dá 610px de
 * cartão, e sobram 266px para o texto — que então quebra em três
 * linhas e encosta no botão. MEDIDO, não suposto.
 *
 * Por isso o arquivo é escrito ao contrário do intuitivo: EMPILHADO é o
 * padrão, e a linha única é a exceção, ligada por min-width. Cada
 * lugar acende a linha única na largura em que ela de fato cabe —
 * 769px na home, 1200px no artigo. Uma regra só não serviria para os
 * dois sem deixar um deles apertado.
 *
 * ---------------------------------------------------------------------
 * REGRAS QUE VALEM AQUI (as mesmas de agosto)
 *
 * • Nenhum transform, filter ou will-change sobre TEXTO. Promover texto
 *   para camada de GPU derruba o antisserrilhado de subpixel e o
 *   desenho fica borrado. Foi o que aconteceu com os botões do site.
 *   O transform aqui só toca em dois elementos sem texto: o anel
 *   (::after do ícone) e a seta (svg).
 * • Quem pede menos animação no sistema recebe menos animação.
 * • Tudo com prefixo .wc-canal, para não encostar em nada do template.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * O ESPAÇO EM VOLTA
 * ------------------------------------------------------------------- */

/* HOME. O bloco dos descontos acima é .space-small e a seção PASSEIOS
   abaixo é .space-medium, que já traz a folga dela. */
.wc-canal-bloco {
    padding-bottom: 10px;
}

/* ARTIGO. A barra cinza de compartilhar não tem margem embaixo nenhuma
   (ver _cdn/widgets/share/share.wc.css) — sem este respiro o cartão
   cola nela. */
.wc-canal-bloco--junto {
    margin-top: 24px;
    margin-bottom: 30px;
    padding-bottom: 0;
}

/* ---------------------------------------------------------------------
 * O CARTÃO — forma empilhada, que é o padrão
 *
 * O elemento inteiro é o link. No celular isso importa mais do que
 * parece: a área de toque passa a ser o cartão todo, e não só o botão.
 * Por isso o "botão" lá dentro é um <span> — <a> dentro de <a> é HTML
 * inválido e o navegador desmonta a árvore.
 * ------------------------------------------------------------------- */
.wc-canal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    padding: 18px;
    background: #fff;
    border: 1px solid #d3ecdd;
    border-left: 5px solid #25d366;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(60, 20, 45, .07);

    text-decoration: none;
    /* O template pinta <a> de roxo em vários lugares. Aqui cada parte
       tem a cor própria, então a herança é neutralizada na raiz. */
    color: inherit;

    transition: box-shadow .16s ease, border-color .16s ease;
}

.wc-canal:hover,
.wc-canal:focus {
    text-decoration: none;
    color: inherit;
    border-color: #a8dfc0;
    border-left-color: #25d366;
    box-shadow: 0 10px 24px rgba(60, 20, 45, .12);
}

.wc-canal:focus-visible {
    outline: 3px solid #128c7e;
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------
 * O ÍCONE E O ANEL
 *
 * O anel é um ::after em absolute que nasce do tamanho exato do círculo
 * e cresce para fora até sumir. Não usa box-shadow animado de propósito:
 * animar box-shadow repinta a área inteira a cada quadro, enquanto
 * transform + opacity ficam na composição e não custam layout.
 *
 * pointer-events: none porque o anel passa por cima do ícone durante a
 * animação, e sem isso ele roubaria o clique em alguns navegadores.
 * ------------------------------------------------------------------- */
.wc-canal__ico {
    position: relative;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e9f9ef;

    display: flex;
    align-items: center;
    justify-content: center;
}

.wc-canal__ico svg {
    display: block;
    width: 28px;
    height: 28px;
    fill: #128c7e;
}

.wc-canal__ico::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .8);
    pointer-events: none;
    animation: wc-canal-anel 2.6s ease-out infinite;
}

@keyframes wc-canal-anel {
      0% { transform: scale(1);    opacity: .8 }
     70% { transform: scale(1.45); opacity: 0  }
    100% { transform: scale(1.45); opacity: 0  }
}

/* ---------------------------------------------------------------------
 * O TEXTO
 *
 * A pergunta é o que para o olho; a explicação é o que convence. Por
 * isso a primeira linha é forte e roxa (a cor dos títulos do site) e a
 * segunda é cinza e menor.
 *
 * min-width: 0 no flex-item que contém texto é obrigatório quando o
 * cartão vira linha: sem ele o item não encolhe abaixo do conteúdo e
 * empurra o botão para fora.
 * ------------------------------------------------------------------- */
.wc-canal__txt {
    flex: 1 1 auto;
    min-width: 0;
}

.wc-canal__titulo {
    display: block;
    margin-bottom: 4px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.25;
    color: #852b5b;
}

.wc-canal__linha {
    display: block;
    font-size: 12.5px;
    line-height: 18px;
    color: #7d7280;
}

/* ---------------------------------------------------------------------
 * O BOTÃO (um span, não um link — ver acima)
 * ------------------------------------------------------------------- */
.wc-canal__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;

    padding: 12px 22px;
    border-radius: 8px;
    background: #25d366;
    box-shadow: 0 5px 14px rgba(37, 211, 102, .3);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Verde #25d366 com texto branco dá contraste 1.8:1 — ilegível.
       Com este verde-escuro quase preto dá 9.4:1. */
    color: #08381d;

    transition: box-shadow .16s ease, background-color .16s ease;
}

.wc-canal:hover .wc-canal__btn {
    background: #1fc25d;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .42);
}

.wc-canal__btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: #08381d;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .16s ease;
}

/* A seta anda 3px quando o mouse chega. É um svg, não texto — pode
   receber transform sem borrar. */
.wc-canal:hover .wc-canal__btn svg {
    transform: translateX(3px);
}

/* =====================================================================
 * A LINHA ÚNICA
 *
 * As duas regras abaixo são idênticas de propósito. O que muda é só o
 * ponto em que cada uma acende, e por isso não dá para juntar: media
 * query não aceita var(), então a largura de corte precisa estar
 * escrita na própria regra.
 * ===================================================================== */

/* --- HOME: 10 colunas de 12, cabe a partir de 769px ------------------
 * 769 é o mesmo corte do menu do celular. Os dois precisam concordar;
 * se um virasse em 768 e o outro em 769 existiria uma largura com
 * comportamento misturado.
 * ------------------------------------------------------------------- */
@media (min-width: 769px) {
    .wc-canal-bloco:not(.wc-canal-bloco--junto) .wc-canal {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 20px 24px;
    }

    .wc-canal-bloco:not(.wc-canal-bloco--junto) .wc-canal__btn {
        width: auto;
    }

    .wc-canal-bloco:not(.wc-canal-bloco--junto) .wc-canal__titulo {
        font-size: 16.5px;
    }

    .wc-canal-bloco:not(.wc-canal-bloco--junto) .wc-canal__linha {
        font-size: 13.5px;
        line-height: 20px;
    }
}

/* --- ARTIGO: 8 colunas de 12, ao lado da barra lateral ---------------
 * Só a partir de 1200px (o ponto xl do Bootstrap, onde o container vai
 * a 1140px) a coluna de conteúdo passa de 700px e o texto cabe em duas
 * linhas ao lado do botão. Abaixo disso o empilhado é melhor —
 * e o botão de largura inteira ainda por cima acerta mais o dedo.
 * ------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .wc-canal-bloco--junto .wc-canal {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 20px 24px;
    }

    .wc-canal-bloco--junto .wc-canal__btn {
        width: auto;
    }

    .wc-canal-bloco--junto .wc-canal__titulo {
        font-size: 16.5px;
    }

    .wc-canal-bloco--junto .wc-canal__linha {
        font-size: 13.5px;
        line-height: 20px;
    }
}

/* ---------------------------------------------------------------------
 * MENOS ANIMAÇÃO
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wc-canal__ico::after {
        animation: none;
    }

    .wc-canal,
    .wc-canal__btn,
    .wc-canal__btn svg {
        transition: none;
    }
}