/* 
Theme Name: BRK Theme
Theme URI: https://blog.brkambiental.com.br/
Author: Mosten.com - Lucas Pereira
Description: BRK Ambiental Blog
Version: 1.0
*/

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *:before, *:after {
    box-sizing: inherit;
}

h2, h3, p {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Verdana", sans-serif !important;
    overflow-x: hidden;
    text-shadow: none;
}

/* Preserva os estilos dos blocos do Gutenberg */
.wp-block-paragraph,
.wp-block-heading,
.wp-block-list,
.wp-block-quote,
.wp-block-image,
.wp-block-gallery,
.wp-block-table,
.wp-block-button,
.wp-block-columns,
.wp-block-group {
    margin: revert;
    padding: revert;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* colors */
:root {
    --primary-color: #3700FF;
    --secondary-color: #42EEDC;
    --tertiary-color: #110043;
    --font-color: #505050;
}

a {
    text-decoration: none;
    color: var(--font-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.category {
    color: var(--secondary-color);
    font-size: 12px;
    font-weight: bold;
}

.category:hover {
    color: var(--primary-color);
}

/* Paginacao */
.pagination {
    margin: auto;
    display: flex;
    gap: 20px;
}

.pagination span,
.pagination a {
    font-size: 20px;
    color: var(--font-color);
    font-weight: bold;
}

.pagination span.current {
    color: var(--primary-color);
}

.pagination a:hover {
    color: var(--primary-color);
}

.pagination-wrapper {
    width: 100%;
    margin: 40px 0px;
    display: flex;
    justify-content: center;
}

/* Posts */
.posts {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.post {
    width: 31%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 25px;
    border-bottom: 1px solid #F0F0F0;
}

.post .category {
    text-shadow: none;
}

.post .image-post {
    width: 100%;
    height: 260px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
}

.post h3 {
    font-size: 26px;
    color: var(--font-color);
}

.post .description {
    font-size: 14px;
    color: var(--font-color);
    font-weight: 400;
}

.post .post-categories {
    color: var(--secondary-color);
    text-transform: uppercase;
}

@media screen and (max-width: 1024px) {
    .posts {
        flex-direction: column;
    }
    .post {
        width: 100% !important;
    }
    
}