/* ==========================================================================
   ESTILOS PARA A NOVA GRADE DE CATEGORIAS (DESIGN LIMPO COM BORDAS)
   ========================================================================== */

/* A "caixa" que contém o título da categoria */
.titulo-categoria-bloco {
    color: #ffd62c; /* Cor do texto do título */
    font-size: 18px; /* Tamanho da fonte */
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

/* Efeito ao passar o mouse sobre o título */
a:hover .titulo-categoria-bloco {
    border-color: #00b19d; /* Cor da borda no hover (azul) */
    color: #00b19d; /* Cor do texto no hover (azul) */
}

/* Container para o primeiro post (com imagem) */
.post-item-com-imagem {
    display: flex;
    align-items: flex-start; /* Alinha no topo */
    gap: 12px; /* Espaço entre a imagem e o texto */
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f0; /* Linha separadora */
}

.post-item-imagem {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}

.post-item-titulo {
    font-size:14px !important;
    line-height: 1.4;
    color: #333;
    font-weight: bold;
}

/* Estilo para os posts seguintes (apenas texto) */
.post-item-sem-imagem {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}
/* Remove a borda do último item da lista para não ficar sobrando */
.post-item-sem-imagem:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}


/* Linha cinza abaixo da categoria */
.linha-categoria {
    border: none;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
  }

  /* Container do título da categoria mãe com linha roxa */
.titulo-categoria-mae-container {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  .titulo-categoria-mae {
    margin: 0;
    margin-right: 15px;
    white-space: nowrap;
  }
  
  .linha-title-categoria {
    flex: 1;
    height: 1px;
    background-color: #00b19d;
    margin-left: 3px;
    margin-bottom: 22px;
}
  

  
.post-item-titulo-simples {
        font-size:14px !important;
        line-height: 1.4;
        color: #333;
        font-weight: bold;
        margin-top: 16px;
    }

.meta-date {
    font-size: 0.75rem;
    color: #666;
    display: block;
}

.meta-date-margin {
    font-size: 0.75rem;
    color: #666;
    display: block;
    margin-top: -5px;
}

/* Efeito de hover geral para os títulos dos posts */
a:hover .post-item-titulo,
a:hover .post-item-titulo-simples {
    color: #007bff; /* Cor do texto no hover (azul) */
}

/* ======================================================================
   ESTILOS PARA AS NOVAS SEÇÕES (RECENTES E MAIS LIDOS)
   ====================================================================== */

/* Título geral da seção */
.titulo-secao {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: #212529;
}

/* Card de post principal (usado em ambas as seções) */
.card-post {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 406px;
    height: 100%;
    border: 1px solid #e9ecef;
}

.card-post-image-link {
    display: block;
    position: relative;
}

.card-post-image {
    height: 180px;
    background-size: cover;
    background-position: center;
}

.card-post-tag-artigo {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 5px;
}

.card-post-content {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-post-category {
    color: #00b19d; /* Cor rosa */
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 8px;
}

.card-post-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
}

.card-post-title a {
    color: #212529;
    text-decoration: none;
    transition: color 0.2s;
}

.card-post-title a:hover {
    color: #00b19d;
}

.card-post-excerpt {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1;
}

.card-post-meta {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Estilos específicos para o Slider de Recentes */
.artigos-recentes-slider {
    overflow: hidden; /* Garante que nada saia do container */
}

.swiper-pagination-bullet-active {
    background-color: linear-gradient(45deg, #00b19d, #f2a832) !important;
}

.swiper-button-next, .swiper-button-prev {
    color: linear-gradient(45deg, #00b19d, #f2a832) !important;
}

/* Estilos específicos para o Layout de Mais Lidos */
.layout-mais-lidos {
    display: grid;
    grid-template-columns: 1fr; /* Coluna única em mobile */
    gap: 30px;
}

@media (min-width: 992px) {
    .layout-mais-lidos {
        grid-template-columns: 1fr 1fr; /* Duas colunas em telas grandes */
    }
}

.coluna-grandes {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.coluna-lista {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-lista-item {
    display: flex;
    gap: 15px;
    align-items: center;
}

.post-lista-imagem {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}

.post-lista-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
}
.post-lista-title a {
    color: #212529;
    text-decoration: none;
}
.post-lista-excerpt {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 8px;
}

/* Layout para os posts só de texto */
.layout-mais-lidos-texto {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #e9ecef;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 768px) {
    .layout-mais-lidos-texto {
        grid-template-columns: 1fr 1fr; /* Duas colunas em telas médias e grandes */
    }
}

.post-texto-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.post-texto-title a {
    color: #212529;
    text-decoration: none;
}

.post-texto-excerpt {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 15px;
}

/* ======================================================================
   CORREÇÃO PARA O LAYOUT DE COLUNAS COM SLIDER (FLEXBOX)
   ====================================================================== */
.main-content-area {
    min-width: 0; /* Impede que o conteúdo interno (slider) force a expansão da coluna principal */
}

/* ======================================================================
   LIMITADOR DE LINHAS PARA OS RESUMOS (EXCERPTS)
   ====================================================================== */

.card-post-excerpt,
.post-lista-excerpt,
.post-texto-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Altere o '3' abaixo para o número de linhas que desejar */
    -webkit-line-clamp: 3; 
}

/* Para o layout de lista, 2 linhas talvez fiquem melhor */
.post-lista-excerpt {
    /* Altere o '2' abaixo se quiser um limite diferente para esta lista específica */
    -webkit-line-clamp: 2;
}

/* --- Estilos para a Nova Página de Web Stories --- */

/* Estilo do Card da Story */
.story-card {
  display: block;
  position: relative;
  width: 100%;
  height: 450px; /* Altura do card, ajuste se necessário */
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.story-card:hover {
  transform: scale(1.03); /* Efeito de zoom sutil ao passar o mouse */
}

/* Overlay para escurecer a imagem de fundo e garantir legibilidade */
.story-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
  display: flex;
  align-items: flex-end; /* Alinha o título na parte de baixo */
  padding: 20px;
}

/* Título dentro do Card */
.story-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.3;
  color: #FFFFFF;
}

/* --- Estilos para a Sidebar --- */

.sidebar-widget {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.sidebar-widget-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0f0f0;
}

/* Ajuste no formulário de busca padrão do WP */
.sidebar-widget .search-form {
  display: flex;
}
.sidebar-widget .search-form input[type="search"] {
  flex-grow: 1;
  border-right: 0;
  border-radius: 5px 0 0 5px;
}
.sidebar-widget .search-form input[type="submit"] {
  border-radius: 0 5px 5px 0;
  background-color: #845EC2; /* Cor roxa do seu botão Pesquisar */
  border-color: #845EC2;
  color: white;
}

/* Estilo para a lista de categorias */
.sidebar-widget ul {
  padding-left: 0;
  margin-bottom: 0;
}
.sidebar-widget ul li {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f5f5f5;
}
.sidebar-widget ul li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.sidebar-widget ul li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.2s ease;
}
.sidebar-widget ul li a:hover {
  color: #845EC2; /* Cor roxa do seu site */
}


/* --- Estilos para a Paginação --- */
.pagination-wrapper .pagination {
    justify-content: center;
}
.pagination-wrapper .page-numbers {
    display: inline-flex;
    list-style: none;
    padding-left: 0;
}
.pagination-wrapper .page-numbers li {
    margin: 0 5px;
}
.pagination-wrapper .page-numbers .page-numbers {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #845EC2; /* Cor roxa do seu site */
    background-color: #fff;
}
.pagination-wrapper .page-numbers .page-numbers.current,
.pagination-wrapper .page-numbers .page-numbers:hover {
    background-color: #845EC2; /* Cor roxa do seu site */
    color: #fff;
    border-color: #845EC2;
}

/* --- Estilos para a Página de Autor --- */

/* Caixa de informações do Autor */
.author-box {
  display: flex;
  align-items: center;
  gap: 20px; /* Espaçamento entre a foto e o texto */
}

.author-avatar img {
  border: 3px solid #f0f0f0;
}

.author-title {
  font-weight: 700;
  color: #333;
}

.author-description {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- Ajustes no Item de Post (Autor e outros listings) --- */

/* 1. PADRONIZANDO O TAMANHO DAS IMAGENS */
.post-item-thumbnail {
    flex-shrink: 0;
    width: 100%; /* Em telas pequenas, ocupa toda a largura */
    height: 180px; /* Altura fixa para a imagem em telas pequenas */
}

/* Em telas maiores (a partir de 768px), definimos largura e altura fixas */
@media (min-width: 768px) {
    .post-item-thumbnail {
        width: 200px;
        height: 140px; /* Altura fixa para o container */
    }
}

.post-item-thumbnail img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* ESSA É A PROPRIEDADE MÁGICA! */
    /* Ela faz a imagem cobrir todo o espaço, cortando o excesso sem distorcer. */
}

/* 2. ESTILIZANDO AS TAGS DE CATEGORIA */
.post-category-tag {
    color: #fff !important; /* Força a cor do texto para branco */
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    background-color: #6c757d; /* Cor padrão cinza para categorias sem cor definida */
    transition: opacity 0.2s ease;
}

.post-category-tag:hover {
    opacity: 0.85;
}

/* 3. CORES ESPECÍFICAS POR CATEGORIA (ADICIONE QUANTAS QUISER) */
/* Use a classe "category-" + "slug-da-categoria" */

/* Exemplo para a categoria INSS */
.post-category-tag.category-inss {
    background-color: #845EC2; /* Roxo do seu site */
}

/* Exemplo para uma categoria "Notícias" (slug: noticias) */
.post-category-tag.category-noticias {
    background-color: #0081CF; /* Azul */
}

/* Exemplo para uma categoria "Empréstimos" (slug: emprestimos) */
.post-category-tag.category-emprestimos {
    background-color: #00C9A7; /* Verde-água */
}

/* Ajuste no título para não ficar colado na tag */
.post-title {
    margin-top: 0.75rem !important;
}

.new_row {
    display: flex!important;
    flex-wrap: wrap!important;
}

/* Estilo para os botões/tags das subcategorias */
.subcategory-tag {
  background-color: #FEF6FB; /* Cor de fundo rosa bem claro */
  color: #845EC2;             /* Cor do texto (rosa escuro, baseado no seu print) */
  border: 1px solid #845EC2;  /* Borda sutil */
  border-radius: 8px;         /* Bordas arredondadas */
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.subcategory-tag:hover {
  background-color: #FBEFF6; /* Fundo um pouco mais escuro ao passar o mouse */
  color: #845EC2;
  border-color: #F4D9E9;
  transform: translateY(-2px); /* Efeito de leve flutuação */
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* Estilos para a página de Fale Conosco */
.contact-form-wrapper {
    background-color: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.contact-form-wrapper .form-label {
    font-weight: bold;
}

.contact-form-wrapper .form-control {
    padding: 0.75rem 1rem;
    border-radius: 5px;
}

.contact-form-wrapper .btn-primary {
    background-color: #A608BB; /* Um roxo para combinar com seu tema */
    border-color: #A608BB;
    padding: 10px 30px;
    font-weight: bold;
}

.contact-form-wrapper .btn-primary:hover {
    background-color: #8e07a1;
    border-color: #8e07a1;
}

/* Estilos para as mensagens de feedback */
.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}
.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/*
 * Correção HÍBRIDA para o Bloco de Destaque Principal na Home
 */

/* 1. Estilos Base (Mobile First) */
.hero-main-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px; /* Opcional */
  width: 100%; /* Garante que o link ocupe toda a largura da coluna */

  /* Proporção vertical para mobile, evitando que a imagem estique a página */
  aspect-ratio: 4 / 3; 
}

/* 2. Estilos para a imagem e o texto sobreposto (comuns para mobile e desktop) */
.hero-main-link .hero,
.hero-main-link article {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-main-link .hero {
  object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
}

.hero-main-link article {
  background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0.9) 85%);
}

/* 3. Ajustes para Desktop (a partir do breakpoint de 768px) */
@media (min-width: 768px) {
  .hero-main-link {
    /* Desativa a proporção fixa para permitir que a altura se ajuste ao flex container */
    aspect-ratio: auto;
    
    /* Reativa a altura de 100% para preencher a coluna e alinhar com os posts da direita */
    height: 100%;
  }
}

/*
 * Otimização de Imagem para a Seção "Mais Recentes" (VERSÃO COM IMAGEM MAIOR)
 */

/* 1. O contêiner da imagem. Agora com largura responsiva. */
.post-thumb-1 {
  /* Define a largura como 30% do espaço disponível no contêiner do post.
     Ajuste este valor (ex: para 35% ou 25%) se quiser maior ou menor. */
  width: 30%;
  
  /* Define uma largura máxima para que não fique gigante em telas muito largas. */
  max-width: 180px;

  /* Usa aspect-ratio para definir a altura automaticamente com base na largura.
     4/3 é uma proporção comum (widescreen mais quadrado). */
  aspect-ratio: 4 / 3;

  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
  background-color: #e9ecef;
}

/* 2. As tags <picture> e <img> continuam preenchendo 100% do contêiner. */
.post-thumb-1 picture,
.post-thumb-1 img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 3. A propriedade object-fit continua garantindo que a imagem não se distorça. */
.post-thumb-1 img {
  object-fit: cover;
}

/*
 * ===================================================================
 * OTIMIZAÇÃO DE CLS (CUMULATIVE LAYOUT SHIFT) PARA A PÁGINA SINGLE
 * Reserva espaço para os elementos do cabeçalho do post.
 * ===================================================================
 */

/* 1. Reserva espaço para o contêiner do Breadcrumb e Título H1 */
.post-single-main > .container:first-of-type {
    /* Define uma altura mínima para o contêiner inteiro. 
       Ajuste este valor se, após a mudança, o CLS persistir ou se ficar muito alto.
       A ideia é ser um pouco maior que a altura final do conteúdo. */
    min-height: 150px; 
}

/* 2. Reserva espaço para o bloco de Meta (Autor e Data) */
/* Você já tinha um 'height' aqui, vamos trocá-lo por 'min-height'
   que é mais flexível e robusto. */
.post-meta-header {
    min-height: 60px; /* Reduzimos um pouco o valor que estava no seu código. */
    display: flex; /* Adiciona flex para garantir o alinhamento vertical */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
}

/* 3. Reserva espaço para a Imagem de Destaque */
.post-featured-image {
    /* Define uma proporção para a imagem de destaque, similar ao que fizemos na home.
       Isso evita o salto quando a imagem finalmente carrega. 
       16/9 é uma proporção comum para desktops. */
    
    background-color: #f0f0f0; /* Um fundo cinza claro para o espaço reservado */
    border-radius: 0.25rem; /* Opcional: para combinar com a imagem */
}

/* Garante que a imagem dentro do espaço reservado se comporte bem */
.post-featured-image img {
    
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Ajuste para telas menores (mobile) onde uma proporção mais vertical é melhor */
@media (max-width: 767px) {
    .card-post {
        min-height: 425px;
    }
    .post-featured-image {
        aspect-ratio: 4 / 3;
    }
    .post-featured-image img {
        aspect-ratio: 4 / 3;
    }
}



/* ==========================================================================
   ESTILOS PARA CATEGORIAS MÃE
   ========================================================================== */

  /* Título da categoria mãe */
  .titulo-categoria-mae {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    margin-bottom: 1.5rem;
  }
  
  .titulo-categoria-mae a {
    color: #00b19d;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .titulo-categoria-mae a:hover {
    color: #00b19d;
  }
  
  /* Ajuste para títulos de subcategorias */
  .titulo-categoria-bloco {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  @media (min-width: 768px) {
    .titulo-categoria-mae {
      font-size: 32px;
      text-align: left;
    }
    
    .categoria-mae-container {
      padding: 2rem;
    }
  }
  
  @media (min-width: 1200px) {
    .titulo-categoria-mae {
      font-size: 36px;
    }
  }

  /* ==========================================================================
   ESTILOS CUSTOMIZADOS
   ========================================================================== */


.text-violet {
    color: #00b19d !important;
}

/* Css do Footer */

.footer {
    background: url(https://emprestimohoje.com.br/img/footer_bg.svg);
    padding-top: 140px !important;
    /* background: #00b19d; */
    background-repeat: no-repeat !important;
    background-position: top center !important;
    background-size: 105% auto !important;
}

/* Background do footer para mobile */
@media (max-width: 767px) {
    .footer {
        background: url('https://emprestimohoje.com.br/img/footer_mob.svg') !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        background-size: 105% auto !important;
        padding-top: 80px !important;
    }
}