/* --- Estilos para a página HOME --- */

/* Hero Section */
.hero-section {
    /* Garante que a imagem de fundo seja dinâmica e fixe o tamanho */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    /* Adiciona um overlay sutil (opcional) */
    isolation: isolate; 
}
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Overlay escuro */
    z-index: -1;
}
.py-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

/* Efeito de Sombra no Texto para o Banner */
.text-shadow-lg {
    text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.7);
}

/* Efeito de levitar nos Cards */
.hover-lift {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.hover-lift:hover {
    transform: translateY(-5px); 
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; 
}

/* Estilo para parceiros (deixar a cor cinza) */
.grayscale-img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}
.grayscale-img:hover {
    filter: grayscale(0%);
}

.test-justificado {
    text-align: justify !important;
    text-justify: inter-word !important; 
}

/* css/style.css - Adicione ou verifique se estas regras estão presentes */

/* Correção para justificar o texto */
.force-justify {
    text-align: justify !important;
    text-justify: inter-word;
}

/* Regras para o Parallax (Agora sem conflitos do #root) */
.parallax-section {
    background-attachment: fixed; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* ESSENCIAL: Garante que a seção seja visível */
    min-height: 500px; 
    position: relative;
    overflow: hidden; 
}

/* Opcional: Estilo para o list-unstyled dos valores */
.list-unstyled li {
    font-size: 1.1rem;
}

/* css/style.css - Adicione ou verifique se estas regras estão presentes */

/* Efeito de levitar nos Cards (hover-lift) */
.hover-lift {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.hover-lift:hover {
    transform: translateY(-5px); /* Move o card 5px para cima */
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; /* Aumenta a sombra */
}

/* Justificar o texto da descrição (para melhor leitura) */
.small-justify {
    text-align: justify;
    text-justify: inter-word;
}


/* --- Estilos para o BLOG --- */

/* Força todas as imagens do card do blog a terem altura fixa */
.blog-card-img {
    width: 100%;
    height: 200px; /* Altura que você desejar */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
}

/* Garante que o efeito de lift funcione */
.hover-lift {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.hover-lift:hover {
    transform: translateY(-5px); 
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; 
}

/* --- Estilos para o POST ÚNICO (post-single.php) --- */

/* Imagem de Capa do Post */
.post-cover-img {
    width: 100%;
    max-height: 450px; /* Limita a altura para que não fique gigante */
    object-fit: cover;
}

/* Melhorar a tipografia do conteúdo principal */
.post-content h2, .post-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    font-weight: bold;
    color: #000;
}
.post-content p {
    line-height: 1.7; /* Aumenta o espaçamento entre linhas */
    margin-bottom: 1.2rem;
    text-align: justify; /* Melhora a leitura do corpo do texto */
}



/* ====================================
   ESTILOS GERAIS PARA A SEÇÃO HERO
   ==================================== */

   .hero-section {
    /* Define a imagem MOBILE como padrão para todos os dispositivos (Mobile-First) */
    background-image: url('../img/hero-banner-mobile.png'); 
    
    /* Configurações de fundo para garantir que a imagem cubra a seção */
    background-size: cover;
    background-position: top center; 
    background-repeat: no-repeat;
    
    /* Adiciona uma sobreposição escura para o texto branco (como na sua imagem de exemplo) */
    position: relative;
}

/* Camada escura/sombreada para melhorar a legibilidade do texto branco */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Cor preta com 30% de opacidade */
    background-color: rgba(0, 0, 0, 0.30); 
}

/* Garante que o conteúdo (texto e botões) fique acima da camada escura */
.hero-section .container {
    position: relative;
    z-index: 2; /* Acima do ::before (camada escura) */
}


.icon-principal-color {
    /* Define a cor do ícone */
    color: #9ac05b !important; 
    /* O !important garante que sobrescreva qualquer estilo Bootstrap padrão */
}


.btn-custom-green {
    /* Cor de fundo: #9ac05b */
    background-color: #9ac05b !important; 
    /* Cor da borda */
    border-color: #9ac05b !important;
    /* Cor do texto (branco) */
    color: #fff !important; 
}

/* Efeito Hover (opcional: um verde um pouco mais escuro para o efeito visual) */
.btn-custom-green:hover {
    background-color: #84a84e !important; 
    border-color: #84a84e !important;
}

/* Seu arquivo CSS principal */

.w-80 {
    width: 80%;
    /* Pode ser max-width se você quiser garantir que ela não estoure */
    /* max-width: 80%; */
}


/* ====================================
   MEDIA QUERY: Otimização para PC/Desktop
   ==================================== */

/* Aplica estas regras apenas para telas maiores que 768px (tablets e PCs) */
@media (min-width: 768px) {
    .hero-section {
        /* SOBRESCREVE: Usa a imagem de alta resolução/horizontal para desktop */
        background-image: url('../img/hero-banner-pc.png');
        background-position: center center;
    }
}


/* CONTAINER BASE PARA O MAPA (map-responsive-wrapper) */
.map-responsive-wrapper {
    position: relative;
    /* 56.25% = proporção 16:9. Você pode usar 75% para 4:3 se quiser mais altura. */
    padding-bottom: 75%; /* Garante altura de 75% da largura do container */
    height: 0;
    overflow: hidden; 
}

/* O IFRAME DEVE OCUPAR 100% DO ESPAÇO CALCULADO PELO PADDING */
.map-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Se for necessário fixar a altura em DESKTOP para o alinhamento lado a lado */
@media (min-width: 992px) {
    .map-responsive-wrapper {
        /* Remove o padding-bottom e define altura fixa para desktop (alinhamento com a coluna de contato) */
        padding-bottom: 0;
        height: 450px; /* Escolha a altura que se encaixe com a caixa de contato */
    }
}