/* A lista do blog e a página de categoria do blog no Conecta (class-solex-conecta-blog-pagina.php).
   A página é toda do Conecta: abre sem o tema, então este arquivo cuida também da base do documento, pela classe do body,
   que só estas páginas imprimem. O desenho é o do blog de antes, com os mesmos valores, na Inter das outras páginas do
   Conecta, que a casca já carrega, para a página do blog ficar igual ao resto da loja; as cores são as da marca do
   topo, que a página sempre traz em cima. A lista e a categoria têm o mesmo desenho, o da lista de antes: o cartão com
   a moldura e o botão cheio. Fora do desenho de antes, só o que a regra pede: o número da página atual no texto da
   ação, legível sobre ela, e os 40px de toque no celular. */
.solex-conecta-blog-pagina {
    --solex-conecta-blog-superficie: var(--solex-conecta-cabecalho-marca-superficie, #ffffff);
    --solex-conecta-blog-texto: var(--solex-conecta-cabecalho-marca-texto, #000000);
    --solex-conecta-blog-acao: var(--solex-conecta-cabecalho-marca-acao, #000000);
    --solex-conecta-blog-acao-texto: var(--solex-conecta-cabecalho-marca-acao-texto, #ffffff);
    /* O botão cheio escurece com o mouse em cima, e o título do cartão clareia, como no blog de antes. */
    --solex-conecta-blog-sombra-passar: inset 0 0 0 100px rgba(0, 0, 0, 0.2);
    --solex-conecta-blog-opacidade-passar: 0.7;
    --solex-conecta-blog-transicao: 0.3s;
    --solex-conecta-blog-fonte: 'Inter';
    /* O texto só para o leitor de tela, no tamanho mínimo, fora da vista. */
    --solex-conecta-blog-oculto: 1px;
    --solex-conecta-blog-largura: 1170px;
    /* A coluna da lista: dez das doze partes da largura, como no blog de antes. */
    --solex-conecta-blog-coluna: 83.3333%;
    --solex-conecta-blog-borda-fina: 1px;
    --solex-conecta-blog-borda-forte: 2px;
    --solex-conecta-blog-raio: 5px;
    --solex-conecta-blog-raio-redondo: 99px;
    --solex-conecta-blog-espaco-pagina: 30px;
    --solex-conecta-blog-espaco-lateral: 15px;
    --solex-conecta-blog-espaco-cartao: 10px;
    --solex-conecta-blog-espaco-topo: 24px;
    --solex-conecta-blog-espaco-divisor: 16px;
    --solex-conecta-blog-espaco-titulo: 12.8px;
    --solex-conecta-blog-espaco-botao-acima: 22.5px;
    --solex-conecta-blog-espaco-botao-abaixo: 15px;
    --solex-conecta-blog-espaco-botao-lado: 18px;
    --solex-conecta-blog-espaco-rodape-acima: 6.4px;
    --solex-conecta-blog-espaco-rodape-abaixo: 7.68px;
    --solex-conecta-blog-espaco-paginas: 5px;
    --solex-conecta-blog-espaco-entre-paginas: 5.44px;
    --solex-conecta-blog-espaco-numero: 7px;
    --solex-conecta-blog-espaco-cabecalho: 9.2px;
    --solex-conecta-blog-selo-dentro: 2px;
    --solex-conecta-blog-selo-lado: 2.8em;
    --solex-conecta-blog-selo-topo: 7%;
    --solex-conecta-blog-selo-recuo: -0.4em;
    --solex-conecta-blog-divisor-largura: 30px;
    --solex-conecta-blog-divisor-altura: 3px;
    --solex-conecta-blog-numero-lado: 33.66px;
    --solex-conecta-blog-numero-altura: 29.92px;
    --solex-conecta-blog-toque: 40px;
    --solex-conecta-blog-fonte-texto: 16px;
    --solex-conecta-blog-fonte-pequena: 11.2px;
    --solex-conecta-blog-fonte-titulo: 25.6px;
    --solex-conecta-blog-fonte-botao: 15px;
    --solex-conecta-blog-fonte-rodape: 12.8px;
    --solex-conecta-blog-fonte-paginas: 13.6px;
    --solex-conecta-blog-fonte-numero: 14.96px;
    --solex-conecta-blog-fonte-seta: 17.952px;
    --solex-conecta-blog-fonte-selo-dia: 16px;
    --solex-conecta-blog-fonte-selo-mes: 12.8px;
    --solex-conecta-blog-fonte-cabecalho: 18.4px;
    --solex-conecta-blog-linha-texto: 25.6px;
    --solex-conecta-blog-linha-titulo: 33.28px;
    --solex-conecta-blog-linha-data: 13.44px;
    --solex-conecta-blog-linha-botao: 37.5px;
    --solex-conecta-blog-linha-rodape: 20.48px;
    --solex-conecta-blog-linha-paginas: 21.76px;
    --solex-conecta-blog-linha-selo-dia: 13.6px;
    --solex-conecta-blog-linha-selo-mes: 10.88px;
    --solex-conecta-blog-linha-cabecalho: 22.08px;
    --solex-conecta-blog-letra-pequena: 0.56px;
    --solex-conecta-blog-letra-botao: 0.45px;
    --solex-conecta-blog-letra-cabecalho: 0.92px;
    --solex-conecta-blog-peso-normal: 400;
    --solex-conecta-blog-peso-medio: 500;
    --solex-conecta-blog-peso-forte: 700;
    margin: 0;
    background: var(--solex-conecta-blog-superficie);
    color: var(--solex-conecta-blog-texto);
    font-family: var(--solex-conecta-blog-fonte);
    font-size: var(--solex-conecta-blog-fonte-texto);
    line-height: var(--solex-conecta-blog-linha-texto);
    /* A base que o tema dava ao documento: o traço da fonte e o tamanho do texto no celular deitado. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.solex-conecta-blog {
    padding: var(--solex-conecta-blog-espaco-pagina) 0;
}

.solex-conecta-blog a {
    color: inherit;
}

/* O que fica só para o leitor de tela: o título da lista, que o blog de antes não mostrava, e o "Publicado em" da linha
   da data de todo cartão, que a lista de antes deixava transparente. */
.solex-conecta-blog-leitor {
    position: absolute;
    width: var(--solex-conecta-blog-oculto);
    height: var(--solex-conecta-blog-oculto);
    margin: calc(var(--solex-conecta-blog-oculto) * -1);
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.solex-conecta-blog-cabecalho {
    max-width: var(--solex-conecta-blog-largura);
    margin: 0 auto;
    padding: 0 var(--solex-conecta-blog-espaco-lateral) var(--solex-conecta-blog-espaco-pagina);
    box-sizing: border-box;
    text-align: center;
}

.solex-conecta-blog-cabecalho-titulo {
    margin: 0 0 var(--solex-conecta-blog-espaco-cabecalho);
    font-size: var(--solex-conecta-blog-fonte-cabecalho);
    font-weight: var(--solex-conecta-blog-peso-normal);
    line-height: var(--solex-conecta-blog-linha-cabecalho);
    letter-spacing: var(--solex-conecta-blog-letra-cabecalho);
    text-transform: uppercase;
}

.solex-conecta-blog-linha {
    display: flex;
    justify-content: center;
    max-width: var(--solex-conecta-blog-largura);
    margin: 0 auto;
}

.solex-conecta-blog-coluna {
    width: var(--solex-conecta-blog-coluna);
    max-width: var(--solex-conecta-blog-coluna);
    min-width: 0;
    padding: 0 var(--solex-conecta-blog-espaco-lateral) var(--solex-conecta-blog-espaco-pagina);
    box-sizing: border-box;
}

.solex-conecta-blog-cartao {
    margin: 0 0 var(--solex-conecta-blog-espaco-pagina);
}

.solex-conecta-blog-vazio {
    margin: 0;
    padding: var(--solex-conecta-blog-espaco-pagina) 0;
    text-align: center;
}

.solex-conecta-blog-cartao-dentro {
    padding: var(--solex-conecta-blog-espaco-cartao) var(--solex-conecta-blog-espaco-cartao) 0;
    background: var(--solex-conecta-blog-superficie);
    border: var(--solex-conecta-blog-borda-fina) solid var(--solex-conecta-blog-acao);
    border-radius: var(--solex-conecta-blog-raio);
}

.solex-conecta-blog-cartao-topo {
    padding: 0 var(--solex-conecta-blog-espaco-topo) var(--solex-conecta-blog-espaco-topo);
    text-align: center;
}

.solex-conecta-blog-cartao-titulo a,
.solex-conecta-blog-data a {
    text-decoration: none;
}

.solex-conecta-blog-cartao-titulo {
    margin: 0 0 var(--solex-conecta-blog-espaco-titulo);
    font-size: var(--solex-conecta-blog-fonte-titulo);
    font-weight: var(--solex-conecta-blog-peso-normal);
    line-height: var(--solex-conecta-blog-linha-titulo);
}

.solex-conecta-blog-cartao-titulo a {
    transition: opacity var(--solex-conecta-blog-transicao);
}

.solex-conecta-blog-cartao-titulo a:hover {
    opacity: var(--solex-conecta-blog-opacidade-passar);
}

.solex-conecta-blog-divisor {
    width: var(--solex-conecta-blog-divisor-largura);
    height: var(--solex-conecta-blog-divisor-altura);
    margin: var(--solex-conecta-blog-espaco-divisor) auto;
    background: var(--solex-conecta-blog-acao);
}

.solex-conecta-blog-data {
    margin: 0;
    font-size: var(--solex-conecta-blog-fonte-pequena);
    line-height: var(--solex-conecta-blog-linha-data);
    letter-spacing: var(--solex-conecta-blog-letra-pequena);
    text-transform: uppercase;
}

.solex-conecta-blog-imagem {
    position: relative;
}

.solex-conecta-blog-imagem img {
    display: block;
    width: 100%;
    height: auto;
}

.solex-conecta-blog-selo {
    position: absolute;
    top: var(--solex-conecta-blog-selo-topo);
    left: 0;
    display: table;
    width: var(--solex-conecta-blog-selo-lado);
    height: var(--solex-conecta-blog-selo-lado);
    margin-left: var(--solex-conecta-blog-selo-recuo);
    pointer-events: none;
}

.solex-conecta-blog-selo-dentro {
    display: table-cell;
    padding: var(--solex-conecta-blog-selo-dentro);
    background: var(--solex-conecta-blog-superficie);
    border: var(--solex-conecta-blog-borda-forte) solid var(--solex-conecta-blog-acao);
    color: var(--solex-conecta-blog-acao);
    font-weight: var(--solex-conecta-blog-peso-forte);
    text-align: center;
    vertical-align: middle;
}

.solex-conecta-blog-imagem img,
.solex-conecta-blog-selo-dentro {
    border-radius: var(--solex-conecta-blog-raio);
}

.solex-conecta-blog-selo-dia {
    display: block;
    font-size: var(--solex-conecta-blog-fonte-selo-dia);
    line-height: var(--solex-conecta-blog-linha-selo-dia);
}

.solex-conecta-blog-selo-mes {
    display: block;
    font-size: var(--solex-conecta-blog-fonte-selo-mes);
    line-height: var(--solex-conecta-blog-linha-selo-mes);
}

.solex-conecta-blog-resumo {
    padding-top: var(--solex-conecta-blog-espaco-topo);
}

.solex-conecta-blog-resumo p {
    margin: 0;
}

.solex-conecta-blog-continuar {
    text-align: center;
}

/* Com o .solex-conecta-blog (a lista) ou o .solex-conecta-blog-post (o post) na frente, a cor do botão vence a do link
   da página. No post, o botão é também o do envio do formulário, um <button>: sem a moldura e com a fonte da página. */
.solex-conecta-blog .solex-conecta-blog-botao,
.solex-conecta-blog-post .solex-conecta-blog-botao {
    display: inline-block;
    max-width: 100%;
    margin: var(--solex-conecta-blog-espaco-botao-acima) 0 var(--solex-conecta-blog-espaco-botao-abaixo);
    padding: 0 var(--solex-conecta-blog-espaco-botao-lado);
    box-sizing: border-box;
    background: var(--solex-conecta-blog-acao);
    color: var(--solex-conecta-blog-acao-texto);
    border: 0;
    border-radius: var(--solex-conecta-blog-raio);
    font-family: inherit;
    cursor: pointer;
    font-size: var(--solex-conecta-blog-fonte-botao);
    font-weight: var(--solex-conecta-blog-peso-medio);
    line-height: var(--solex-conecta-blog-linha-botao);
    letter-spacing: var(--solex-conecta-blog-letra-botao);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    transition: box-shadow var(--solex-conecta-blog-transicao);
}

.solex-conecta-blog .solex-conecta-blog-botao:hover,
.solex-conecta-blog-post .solex-conecta-blog-botao:hover {
    box-shadow: var(--solex-conecta-blog-sombra-passar);
}

.solex-conecta-blog-cartao-rodape {
    display: flex;
    justify-content: center;
    padding: var(--solex-conecta-blog-espaco-rodape-acima) 0 var(--solex-conecta-blog-espaco-rodape-abaixo);
    font-size: var(--solex-conecta-blog-fonte-rodape);
    line-height: var(--solex-conecta-blog-linha-rodape);
}

.solex-conecta-blog-comentarios a {
    text-decoration: underline;
}

.solex-conecta-blog-paginacao ul {
    margin: var(--solex-conecta-blog-espaco-paginas) 0;
    padding: 0;
    list-style: none;
    font-size: var(--solex-conecta-blog-fonte-paginas);
    line-height: var(--solex-conecta-blog-linha-paginas);
    text-align: center;
}

.solex-conecta-blog-paginacao li {
    display: inline-block;
    margin: 0 var(--solex-conecta-blog-espaco-entre-paginas);
}

.solex-conecta-blog-paginacao li:first-child {
    margin-left: 0;
}

.solex-conecta-blog-paginacao li:last-child {
    margin-right: 0;
}

.solex-conecta-blog-numero {
    display: block;
    min-width: var(--solex-conecta-blog-numero-lado);
    height: var(--solex-conecta-blog-numero-lado);
    padding: 0 var(--solex-conecta-blog-espaco-numero);
    box-sizing: border-box;
    border: var(--solex-conecta-blog-borda-forte) solid var(--solex-conecta-blog-texto);
    border-radius: var(--solex-conecta-blog-raio-redondo);
    color: var(--solex-conecta-blog-texto);
    font-size: var(--solex-conecta-blog-fonte-numero);
    font-weight: var(--solex-conecta-blog-peso-forte);
    line-height: var(--solex-conecta-blog-numero-altura);
    text-decoration: none;
}

a.solex-conecta-blog-numero {
    transition: background-color var(--solex-conecta-blog-transicao), border-color var(--solex-conecta-blog-transicao), color var(--solex-conecta-blog-transicao);
}

/* O número com o mouse em cima fica como o da página atual, como no blog de antes. */
.solex-conecta-blog-numero.is-atual,
a.solex-conecta-blog-numero:hover {
    background: var(--solex-conecta-blog-acao);
    border-color: var(--solex-conecta-blog-acao);
    color: var(--solex-conecta-blog-acao-texto);
}

.solex-conecta-blog-numero i {
    font-size: var(--solex-conecta-blog-fonte-seta);
}

@media (max-width: 949px) {
    .solex-conecta-blog-pagina {
        --solex-conecta-blog-fonte-titulo: 19.2px;
        --solex-conecta-blog-linha-titulo: 24.96px;
        --solex-conecta-blog-espaco-titulo: 9.6px;
        --solex-conecta-blog-fonte-cabecalho: 16px;
        --solex-conecta-blog-linha-cabecalho: 19.2px;
        --solex-conecta-blog-letra-cabecalho: 0.8px;
        --solex-conecta-blog-espaco-cabecalho: 8px;
    }

    .solex-conecta-blog-coluna {
        width: 100%;
        max-width: 100%;
    }

    /* Os links do cartão, pequenos no desenho de antes, com a altura de toque; o do título de uma linha também. */
    .solex-conecta-blog-cartao-titulo a,
    .solex-conecta-blog-data a,
    .solex-conecta-blog-cartao-rodape a {
        display: inline-flex;
        align-items: center;
        min-height: var(--solex-conecta-blog-toque);
    }

    .solex-conecta-blog-numero {
        min-width: var(--solex-conecta-blog-toque);
        height: var(--solex-conecta-blog-toque);
        line-height: calc(var(--solex-conecta-blog-toque) - 2 * var(--solex-conecta-blog-borda-forte));
    }

    .solex-conecta-blog .solex-conecta-blog-botao,
    .solex-conecta-blog-post .solex-conecta-blog-botao {
        min-height: var(--solex-conecta-blog-toque);
        line-height: var(--solex-conecta-blog-toque);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solex-conecta-blog-cartao-titulo a,
    .solex-conecta-blog .solex-conecta-blog-botao,
    .solex-conecta-blog-post .solex-conecta-blog-botao,
    a.solex-conecta-blog-numero {
        transition: none;
    }
}