/* Fontes Globais para Categoria */
body {
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    overflow-x: hidden; /* Impede que a página role para os lados */
}

/* Container Principal da Página de Categorias */
.content-container.category-page {
    max-width: 760px; /* Largura máxima ajustada para 760px */
    margin: 30px auto; /* Centraliza o conteúdo e adiciona 30px de margem superior e inferior */
    padding: 10px 10px; /* Mantém o padding no topo e nas laterais */
    box-sizing: border-box; /* Inclui padding na largura total */
}

/* Espaçamento entre o breadcrumb e o título da categoria */
.entry-header {
    margin-bottom: 10px; /* Espaço entre o breadcrumb e o título */
}


/* Título da Categoria */
.category-title {
    font-size: 3rem; /* Equivalente a 40px */
    margin-top: 5px; /* Reduz o espaço superior */
    margin-bottom: 30px; /* Espaço consistente abaixo do título */
    line-height: 1.2; /* Altura da linha confortável */
    font-weight: bold; /* Negrito */
    color: #1e1e1e; /* Cor preta */
}

/* Descrição da Categoria */
.category-description {
    font-size: 1.125rem; /* Equivalente a 18px */
    line-height: 1.6; /* Altura confortável */
    color: #1e1e1e; /* Cor preta */
    margin-top: 10px; /* Espaçamento do título acima */
    margin-bottom: 20px; /* Espaçamento abaixo para separação */
}


/* Lista de Postagens */
.posts-list {
    display: flex;
    flex-direction: column; /* Empilha os artigos verticalmente */
    gap: 30px; /* Espaçamento entre os artigos */
    margin: 0; /* Remove margem */
    padding: 0; /* Remove padding */
}

/* Estilo de Cada Postagem */
.post-item {
    display: flex;
    flex-direction: row; /* Imagem e texto lado a lado */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    height: 100%; /* Garante altura completa para o bloco */
}

/* Efeito ao Passar o Mouse */
.post-item:hover {
    transform: scale(1.02); /* Leve aumento no hover */
}

/* Imagem do Post */
.post-item .post-thumbnail {
    flex: 0 0 40%; /* Imagem ocupa 40% do espaço */
    max-width: 40%;
    height: auto; /* Remove restrição de altura fixa */
}

.post-item .post-thumbnail img {
    width: 100%;
    height: 100%; /* Garante que a imagem ocupe toda a altura do container */
    object-fit: cover; /* Ajusta a imagem ao espaço disponível */
}

/* Conteúdo do Post */
.post-item .post-content {
    flex: 1; /* O conteúdo ocupa o restante do espaço */
    display: flex;
    flex-direction: column; /* Empilha os elementos verticalmente */
    justify-content: flex-start; /* Alinha no topo */
    padding: 15px; /* Reduz o espaçamento interno */
}

/* Categoria do Post */
.post-category {
    font-size: 0.875rem; /* Tamanho menor */
    font-weight: bold;
    margin-bottom: 3px; /* Reduz o espaço abaixo */
}

.post-category a {
    text-decoration: none;
    color: #1e1e1e; /* Preto */
}

.post-category a:hover {
    text-decoration: underline;
}

/* Título do Post */
.post-item .post-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1e1e1e; /* Preto */
    margin: 0 0 2px 0; /* Margem inferior ajustada */
    line-height: 1.4;
}

.post-item .post-title a {
    color: #1e1e1e; /* Preto */
    text-decoration: none;
}

.post-item .post-title a:hover {
    text-decoration: underline; /* Adiciona sublinhado no hover */
}

/* Descrição do Post */
.post-item .post-excerpt {
    font-size: 1rem;
    line-height: 1.6;
    color: #6c6c6c;
    margin: 0; /* Remove margens extras */
    margin-top: 5px; /* Reduz o espaço acima */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limita a 3 linhas */
    -webkit-box-orient: vertical;
}

/* Footer do Post */
.post-footer {
    display: flex;
    justify-content: space-between; /* Espaça meta e botão */
    align-items: center;
    margin-top: 10px; /* Reduz o espaço acima do footer */
}

/* Meta do Autor e Data no Footer do Post */
.post-meta {
    display: flex;
    align-items: center; /* Alinha verticalmente a imagem e o texto */
    gap: 10px; /* Espaçamento entre a imagem e o texto */
}

/* Imagem do Autor */
.post-meta .post-author-avatar {
    width: 35px; /* Tamanho reduzido para categorias */
    height: 35px;
    border-radius: 50%; /* Deixa a imagem redonda */
    object-fit: cover; /* Ajusta a imagem ao espaço */
}

/* Informações do Autor e Data */
.post-meta .author-info {
    display: flex;
    flex-direction: column; /* Nome acima da data */
    line-height: 1.4; /* Altura entre os textos */
}

.post-meta .author-name {
    font-size: 0.75rem; /* Tamanho do texto do nome */
    font-weight: bold; /* Negrito */
    color: #333; /* Cor preta */
    margin: 0; /* Remove margens extras */
    text-decoration: none; /* Remove sublinhado do nome do autor */
}

/* Remover sublinhado por padrão */
.post-meta .author-name a {
    text-decoration: none; /* Remove o sublinhado */
}

/* Adicionar sublinhado ao passar o mouse */
.post-meta .author-name a:hover {
    text-decoration: underline; /* Adiciona o sublinhado */
}

.post-meta .post-date {
    font-size: 0.75rem; /* Tamanho menor para a data */
    color: #666; /* Cor cinza */
    margin: 0; /* Remove margens extras */
}

/* Botão Saiba Mais */
.post-read-more {
    background: transparent; /* Sem fundo */
    color: #000; /* Texto preto */
    font-size: 0.875rem; /* Tamanho do texto */
    font-weight: normal; /* Peso normal */
    text-transform: none; /* Texto normal, sem capsular */
    padding: 4px 10px; /* Margens internas menores */
    border: 1px solid #000; /* Contorno preto */
    border-radius: 25px; /* Borda bem arredondada */
    text-decoration: none; /* Remove sublinhado */
    transition: background 0.3s ease, color 0.3s ease; /* Transição suave */
}

.post-read-more:hover {
    background: #000; /* Fundo preto no hover */
    color: #fff; /* Texto branco no hover */
    text-decoration: none; /* Remove o sublinhado no hover */
}

/* Container principal da paginação */
.custom-pagination {
    display: flex;
    justify-content: center; /* Centraliza o conteúdo */
    align-items: center;
    margin: 30px 0;
    padding: 2px; /* Reduz o padding */
    background-color: #fcfcfc; /* Fundo claro */
    border-radius: 50px; /* Borda arredondada */
    max-width: 500px; /* Largura máxima ajustada */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra em volta de todo o container */
    min-height: 48px; /* Altura mínima para manter consistência visual */
}

/* Wrapper para centralizar os elementos */
.custom-pagination-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between; /* Espaça os botões corretamente */
    align-items: center;
    position: relative; /* Para centralizar o texto fixamente */
}

/* Estilo base dos botões */
.custom-pagination-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff; /* Texto branco */
    background-color: #000; /* Fundo preto */
    border: none; /* Remove borda */
    border-radius: 50px; /* Borda arredondada */
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap; /* Evita quebra de texto */
    margin: 0 2px; /* Margem uniforme */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra ao redor dos botões */
}

/* Remove qualquer seta ou ícone duplicado de SVG */
.custom-pagination-nav svg {
    display: none; /* Garante que o ícone SVG não será exibido */
}

/* Botão anterior e próximo com setas únicas */
.custom-pagination-nav::before {
    content: ''; /* Remove qualquer conteúdo anterior */
    margin: 0; /* Remove margens das setas */
}

.custom-next-nav::before {
    content: ''; /* Define a seta única para "Próximo" */
    margin-left: 8px; /* Adiciona espaço antes da seta */
}

/* Hover dos botões */
.custom-pagination-nav:hover {
    background-color: #444; /* Fundo cinza escuro ao passar o mouse */
    color: #ffffff; /* Mantém o texto branco */
}

/* Botão anterior alinhado à esquerda */
.custom-prev-nav {
    margin-right: auto;
    border-radius: 50px; /* Borda arredondada */
}

/* Botão próximo alinhado à direita */
.custom-next-nav {
    margin-left: auto;
    border-radius: 50px; /* Borda arredondada */
}

/* Texto informativo centralizado */
.custom-pagination-info {
    font-size: 1rem;
    font-weight: 500;
    color: #333; /* Texto cinza escuro */
    text-align: center;
    position: absolute; /* Fixa o texto no centro do wrapper */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajuste para centralização perfeita */
    margin: 0;
    white-space: nowrap; /* Evita quebra de texto */
}

/* Botão desativado */
.custom-pagination-nav[aria-disabled="true"] {
    background-color: #ccc; /* Fundo cinza claro */
    color: #666; /* Texto cinza escuro */
    pointer-events: none;
    cursor: not-allowed;
}

/* Para cenários sem botões de paginação */
.custom-pagination-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fcfcfc; /* Fundo claro */
    border-radius: 50px; /* Borda arredondada */
    min-height: 48px; /* Altura mínima para manter o espaço */
    max-width: 500px; /* Mesma largura do container */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra para consistência visual */
}