/*----------------------------
Blog Conteudo
----------------------------*/
.blog-conteudo {
    display: grid;
    grid-template-columns: minmax(60%, 880px) 21%;
    gap: 5rem;
    grid-template-areas: "conteudo sidebar";
    margin-top: 5rem;
}
.botao-enviar-comentario{
    color: var(--borda-hover);
    border: 2px solid var(--azul);
    padding: 0rem 1em;
    font-size: 1.4rem;
    font-weight: 700; 
}

.blog-posts {
    max-width: 880px;
    grid-area: conteudo;
}

.artigo-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--azul);
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 3rem;
}

.blog-artigo .artigo img {
    max-width: 100%;
    width: 100%;
}

.artigo-comentarios {
    display: flex;
    align-items: center;
}

.artigo-comentarios img {
    margin-right: 1rem;
}

.comentarios-numero {
    margin-right: 0.3rem;
}

.blog-artigo .paragrafo-principal {
    font-size: 1.4rem;
    text-align: justify;
    line-height: 2.7rem;
    margin-top: 3rem;
}

.artigo-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3rem;
}

.artigo-leia-mais {
    color: var(--borda-hover);
    border: 2px solid var(--azul);
    padding: 1rem 5rem;
    font-size: 1.6rem;
    font-weight: 700;
}

.artigo-sociais a {
    margin-left: 3rem;
}

.blog-artigo hr {
    margin: 3rem 0;
}

/*----------------------------
Comentarios
----------------------------*/
.blog-comentario {
    display: flex;
}

.comentario-imagem {
    height: 100px;
    width: 100px;
    background: antiquewhite;
    border-radius: 50%;
    margin-right: 3rem;
    flex-shrink: 0;
}

.comentario-box {
    margin: 3rem;
}

.comentario-nome {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--azul);
    font-family: 'Montserrat', sans-serif;
}

.comentario-data {
    font-weight: 500;
    font-size: 1.8rem;
    font-family: 'Montserrat', sans-serif;
}

.comentario-paragrafo {
    font-size: 1.3rem;
    color: var(--cinza-paragrafo);
    line-height: 2rem;
    letter-spacing: .1rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.comentario-responder {
    margin: 3rem 0;
    color: var(--azul);
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}

/*----------------------------
Posts recomendados
----------------------------*/
.posts-recomendados .container-principal {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rem;
    margin-top: 2rem;
}

.post-recomendado {
    width: calc(100% / 3 - 2rem);
    box-shadow: 0px 0px 10px 0px rgba(208,208,208,0.75);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(208,208,208,0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(208,208,208,0.75);
    position: relative;
}

.recomendado-imagem img {
    max-width: 100%;
    width: 100%;
}

.recomendado-data {
    color: #575757;
    font-weight: 700;
    margin: 1vw;
}

.recomendado-titulo {
    color: var(--cinza-paragrafo);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0px 1vw;
    height: 40px;
}

.recomendado-descricao {
    color: var(--cinza-paragrafo);
    margin: 2vh 1vw 2rem 1vw;
}

.recomendado-leia-mais {
    color: #ffffff;
    border: 2px solid var(--azul);
    font-size: 1.3rem;
    font-weight: 700;
    position: absolute;
    background-color: #485d88;
    outline: none;
    border-radius: 10px;
    cursor: pointer;
    left: 33%;
    padding: 5px 15px;
    bottom: -5%;
}

/*----------------------------
Paginacao
----------------------------*/
.numeros {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

#paginacao {
    list-style: none;
    display: flex;
    align-items: center;
}

#paginacao li {
    margin: 0 10px;
}

#paginacao li a {
    color: var(--azul);
    padding: 5px;
    font-weight: 600;
}

#paginacao li.active a {
    color: var(--azul-hover);
    border: 1px solid var(--azul-hover);
}

#paginacao li:hover a {
    color: var(--azul-hover);
}


/*----------------------------
Blog Lateral
----------------------------*/
.blog-lateral {
    max-width: 26rem;
    grid-area: sidebar;
    margin-bottom: 5rem;
}

.blog-busca {
    height: 4.6rem;
    width: 100%;
    display: flex;
    position: relative;
    border: 2px solid var(--azul);
    margin-bottom: 5rem;
}

.blog-busca > input {
    width: 93%;
    height: 100%;
    padding: 0 2.5rem;
    border: none;
    border-top-left-radius: 2.5rem;
    border-bottom-left-radius: 2.5rem;
    outline: none;
    color: var(--azul);
    font-size: 2rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.blog-busca > input::placeholder {
    color: var(--azul-menu);
    font-size: 1.6rem;
    font-weight: 300;
}

.blog-busca > button {
    height: 100%;
    width: 15%;
    border-radius: 50%;
    position: absolute;
    right: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
}

/* Categorias */
.botao-categorias,
.botao-mais-lidas,
.botao-arquivo {
    border: none;
    outline: none;
    background: var(--azul);
    color: #ffffff;
    height: 4.6rem;
    width: 100%;
    text-align: left;
    padding: 0 1.5rem;
}

.lista-categorias,
.lista-mais-lidas,
.lista-arquivo {
    list-style: none;
}

.lista-categorias li,
.lista-mais-lidas li,
.lista-arquivo li {
    margin-top: 1rem;
    padding-left: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e4e4e4;
}

.lista-categorias a {
    font-weight: 700;
}

.lista-categorias a,
.lista-mais-lidas a,
.lista-arquivo a {
    font-size: 1.6rem;
    color: var(--azul);
}

.blog-mais-lidas,
.blog-arquivo {
    margin-top: 3rem;
}

/*----------------------------
Blog Interna
----------------------------*/
.artigo p {
    font-size: 1.6rem;
    text-align: justify;
    line-height: 2.7rem;
    color: var(--cinza-paragrafo);
}

.artigo a span {
    color: var(--azul);
}

.comentario-dados {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comentario-dados label {
    color: var(--azul);
}

.comentario-dados input {
    width: calc(100% / 2 - 1rem);
    font-family: 'Titillium Web', sans-serif;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--branco);
    color: var(--azul);
    /* cursor: pointer; */
    padding: 1.8rem 4rem;
    border: none;
    outline: none;
    font-size: 2rem;
    box-shadow: var(--sombra);
    margin: 1rem auto;
    border-radius: 1rem;
    margin-left: 10px;
}

.comentario-dados + textarea {
    width: calc(100%);
    font-family: 'Titillium Web', sans-serif;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--branco);
    color: var(--azul);
    /* cursor: pointer; */
    padding: 1.8rem 4rem;
    border: none;
    outline: none;
    font-size: 2rem;
    box-shadow: var(--sombra);
    margin: 1rem auto;
    border-radius: 1rem;
}

/*----------------------------
Responsivo
----------------------------*/
@media screen and (max-width: 800px) {
    .blog-conteudo {
        grid-template-columns: 1fr;
        gap: unset;
        grid-template-areas:
        "sidebar"
        "conteudo";
    }

    .blog-lateral {
        order: -1;
        max-width: 100%;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .blog-busca,
    .blog-categorias,
    .blog-mais-lidas,
    .blog-arquivo {
        width: calc(100% / 4 - 1rem);
    }

    .dropdown {
        display: none;
        position: absolute;
        z-index: 1;
        background: var(--cinza-fundo);
        box-shadow: var(--sombra);
        left: 0;
        right: 0;
    }

    .botao-categorias,
    .botao-mais-lidas,
    .botao-arquivo {
        position: relative;
    }

    .botao-categorias::after,
    .botao-mais-lidas::after,
    .botao-arquivo::after {
        font-family: "FontAwesome"; 
        font-weight: 900; 
        content: "\f0d7";
        position: absolute;
        right: 15px;
    }

    .botao-categorias.ativado::after,
    .botao-mais-lidas.ativado::after,
    .botao-arquivo.ativado::after {
        font-family: "FontAwesome"; 
        font-weight: 900; 
        content: "\f0d8";
        position: absolute;
        right: 15px;
    }

    .btn-dropdown.ativado + .dropdown {
        display: block;
    }
}

@media screen and (max-width: 700px) {
    .blog-lateral {
        flex-wrap: wrap;
    }

    .blog-busca,
    .blog-categorias,
    .blog-mais-lidas,
    .blog-arquivo {
        width: calc(100% / 2 - 1rem);
        margin: 0;
        position: relative;
    }

    .blog-busca {
        margin-bottom: 2rem;
    }
}

@media screen and (max-width: 615px) {
    /* Blog Interno */
    .posts-recomendados .container-principal {
        flex-direction: column;
        align-items: center;
    }

    .post-recomendado {
        width: 90%;
        font-size: 1.6rem;
        margin-bottom: 3rem;
    }
}

@media screen and (max-width: 385px) {
    .lista-categorias li, 
    .lista-mais-lidas li, 
    .lista-arquivo li {
        padding-right: 15px;
    }

    .dropdown {
        position: absolute;
        width: 100%;
    }

    .artigo-rodape {
        flex-direction: column;
    }

    .artigo-sociais {
        margin-top: 5rem;
    }

    .artigo-sociais a {
        margin: 0 2rem;
    }

    /* Blog interna */
    .blog-comentario {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .comentario-imagem {
        margin-right: 0;
    }
}