/*
 Theme Name:   Progroup Child
 Description:  Meu tema filho para o Astra
 Author:       Progroup
 Template:     astra
 Version:      1.0.1
*/

/* ==========================================================================
   Configuração Geral e Variáveis
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* --- Variáveis de Cor (baseado na imagem) --- */
:root {
    --cor-primaria: #4a80d5; /* Azul do botão e barra do footer */
    --cor-texto: #333;
    --cor-texto-claro: #555;
    --cor-fundo: #ffffff;
    --cor-borda: #eaeaea;
}

/* ==========================================================================
   Estilos do Cabeçalho (Header)
   ========================================================================== */

/* --- Estrutura Base do Cabeçalho --- */
.site-header {
    background-color: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
    padding: 15px 30px;
    width: 100%;
    box-sizing: border-box; 
    
}

.site-content {
    max-width: 1200px; /* <-- NOVO: Limita o conteúdo a 1200px */
    margin: 0 auto;     /* Centra o conteúdo */
    padding: 40px 30px; /* Adiciona espaço interno (topo/baixo, lados) */
    box-sizing: border-box;
    width: 100%;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 1. O Logo (Estático) --- */
.site-logo a {
    display: inline-block; /* Faz o link "envolver" a imagem */
}
.site-logo a img {
    display: block; /* Remove qualquer espaço extra abaixo da imagem */
    height: 36px;   /* Define a altura */
    width: auto;    /* Largura automática */
    max-height: 40px; /* Limite de segurança */
}

/* --- 2. O Botão Hamburger (Label) e Checkbox --- */

/* Esconde a checkbox (ela é funcional, não visual) */
.menu-toggle-checkbox {
    display: none;
}

/* Estiliza a LABEL para parecer o botão hamburger */
.menu-toggle-label {
    display: none; /* Escondido por defeito em desktop */
    background: none;
    border: 2px solid var(--cor-texto-claro);
    border-radius: 4px;
    padding: 8px 10px;
    cursor: pointer;
    z-index: 1100; /* Garante que está acima de tudo */
}
.hamburger-icon {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--cor-texto-claro);
    position: relative;
    transition: background-color 0.2s ease-in-out;
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--cor-texto-claro);
    position: absolute;
    transition: transform 0.2s ease-in-out;
}
.hamburger-icon::before { top: -7px; }
.hamburger-icon::after { bottom: -7px; }

/* Texto de acessibilidade */
.screen-reader-text {
    display: none;
}

/* Animação do Hamburger para "X" quando o menu está aberto */
.menu-toggle-checkbox:checked + .menu-toggle-label .hamburger-icon {
    background-color: transparent; /* Linha do meio desaparece */
}
.menu-toggle-checkbox:checked + .menu-toggle-label .hamburger-icon::before {
    transform: rotate(45deg) translate(5px, 5px); /* Gira para fazer / */
}
.menu-toggle-checkbox:checked + .menu-toggle-label .hamburger-icon::after {
    transform: rotate(-45deg) translate(5px, -5px); /* Gira para fazer \ */
}


/* --- 3. A Navegação Principal (Desktop) --- */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.main-navigation li {
    margin: 0 15px;
    position: relative;
}

.main-navigation li a {
    text-decoration: none;
    color: var(--cor-texto-claro);
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
    padding: 10px 0;
    transition: color 0.2s ease;
}

.main-navigation li a:hover,
.main-navigation li.current-menu-item > a {
    color: var(--cor-primaria);
}

/* Seta do Dropdown (Serviços, Links de Acesso) */
.main-navigation .menu-item-has-children > a {
    padding-right: 15px; /* Espaço para a seta */
}

.main-navigation .menu-item-has-children > a::after {
    content: '▼';
    font-size: 10px;
    color: var(--cor-texto-claro);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* --- Dropdowns (Sub-menus) --- */
.main-navigation ul ul,
.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -15px;
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-radius: 5px;
    padding: 10px 0;
    min-width: 250px;
    z-index: 1000;
}

.main-navigation li:hover > ul {
    display: block;
}

.main-navigation ul ul li {
    margin: 0;
    width: 100%;
}

.main-navigation ul ul li a {
    display: block;
    padding: 12px 20px;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
}

.main-navigation ul ul li a:hover {
    background-color: #f5f5f5;
}

.main-navigation ul ul .menu-item-has-children > a::after {
    display: none;
}


/* --- 4. O Botão de Contato --- */
.header-button .button-contato {
    background-color: var(--cor-primaria);
    color: var(--cor-fundo);
    font-size: 16px;
    font-weight: bold;
    font-family: "Montserrat", sans-serif;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

.header-button .button-contato:hover {
    background-color: #3a6abf;
}

/* --- Gestão do Botão Contato (Mobile vs Desktop) --- */
/* Esconde o "Contato" de dentro do menu em DESKTOP */
.main-navigation .menu-item-contato {
    display: none;
}


/* ==========================================================================
   Estilos do Rodapé (Footer)
   ========================================================================== */

.site-footer {
    /* Cor cinza-escuro da imagem */
    background-color: #505050; 
    color: #f0f0f0;
    font-family: "Montserrat", sans-serif;
}

/* Secção Principal (Cinza) */
.footer-main {
    padding: 60px 0 30px 0; /* Espaço interno (topo, baixo) */
}

/* Container (limita a largura e centra) */
.site-footer .footer-container {
    max-width: 1200px;    
    margin: 0 auto;
    box-sizing: border-box;
    display: flex; /* Usado para centrar a barra azul */
}

.footer-main .footer-container {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar em mobile */
    justify-content: space-between;
}

/* Colunas do Rodapé */
.footer-col {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 200px; /* Largura mínima antes de quebrar */
    box-sizing: border-box;
}

/* Coluna 1: Logo */
#footer-logo {
    min-width: 250px;
    flex-shrink: 0; /* Não encolhe o logo */
}
#footer-logo img {
    width: 190px; /* Largura similar ao do header */
    height: auto;
}

/* Colunas 2, 3, 4: Links */
.footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-links li {
    margin-bottom: 15px;
}
.footer-links li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.2s ease;
}
.footer-links li a:hover {
    color: #bbbbbb; /* Cor de hover */
}

/* Coluna 5: Contato */
#footer-contact {
    min-width: 280px;
}
#footer-contact ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#footer-contact li {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    font-size: 16px;
}
#footer-contact li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold; /* Texto em negrito como na imagem */
}
/* Estilo dos ícones de contato */
#footer-contact li i.fas {
    color: #ffffff;
    font-size: 18px;
    margin-right: 12px;
    width: 20px; /* Alinha os ícones */
    text-align: center;
}

/* Ícones Sociais */
.footer-social {
    display: flex;
    gap: 18px; /* Espaço entre ícones */
    margin-top: 15px;
}
.footer-social a {
    font-size: 22px;
    transition: color 0.2s ease;
}
.footer-social a:hover {
    color: #bbbbbb;
}

/* Barra Inferior Azul */
.footer-bottom-bar {
    /* Reusa a cor azul primária do header */
    background-color: var(--cor-primaria, #4a80d5); 
    padding: 15px 0;
}
.footer-bottom-bar .footer-container {
    justify-content: center; /* Centra o texto */
}
.footer-bottom-bar p {
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    margin: 0;
}
.footer-bottom-bar p a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}
.footer-bottom-bar p i {
    margin: 0 2px;
    font-size: 12px;
    position: relative;
    top: -1px;
}

/* ==========================================================================
   Responsividade (Até 992px - Tablets e Telemóveis)
   ========================================================================== */
/* ==========================================================================
   Responsividade (Até 992px - Tablets e Telemóveis)
   ========================================================================== */
@media (max-width: 992px) {
    
    /* --- Responsividade do Header --- */

    /* Mostra o botão hamburger (label) */
    .menu-toggle-label {
        display: block;
        order: 3; /* Põe o botão no fim */
    }

    .site-header{
        background-color: white;
        z-index: 99999 !important;
    }
        .main-navigation ul{
            background-color: white;
        }

    /* Esconde o botão azul principal em MOBILE */
    .header-button {
        display: none; 
    }
    
    /* Mostra o "Contato" de dentro do menu em MOBILE */
    .main-navigation .menu-item-contato {
        display: block;
    }

    .header-container {
        justify-content: space-between;
    }

    /* --- O Menu Mobile (CSS-Puro) --- */
    .main-navigation {
        order: 2; 
        
        /* * CORREÇÃO APLICADA AQUI
         * O menu está escondido por defeito.
         * Adicionámos !important para garantir que esta regra vence 
         * qualquer conflito com o tema.
        */
        display: none !important; 
        
        /* Layout do menu mobile */
        position: absolute;
        top: 75px; /* Ajuste conforme a altura final do seu header */
        left: 0;
        width: 100%;
        background-color: var(--cor-fundo);
        border-bottom: 1px solid var(--cor-borda);
        box-shadow: 0 4px 10px rgba(0,0,0,0.03);
        z-index: 1000;
    }
    
    /* * CORREÇÃO APLICADA AQUI
     * Quando a checkbox está (checked), MOSTRA o menu.
     * Adicionámos !important para garantir que esta regra
     * consegue sobrepor-se ao "display: none !important;"
    */
    .menu-toggle-checkbox:checked ~ .main-navigation {
        display: block !important;
    }
    
    /* Itens de menu passam a ser verticais */
    .main-navigation ul {
        flex-direction: column;
        width: 100%;
    }
    .main-navigation li {
        margin: 0;
        width: 100%;
        border-top: 1px solid #f0f0f0;
    }
    .main-navigation li a {
        padding: 15px 20px;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Dropdowns em mobile */
    .main-navigation ul ul,
    .main-navigation .sub-menu {
        position: static;
        display: block;
        border: none;
        box-shadow: none;
        width: 100%;
        padding: 0;
        min-width: 0;
        background-color: #f9f9f9;
    }
    .main-navigation ul ul li a {
        padding-left: 40px;
        font-size: 14px;
        color: var(--cor-texto);
    }
    .main-navigation .menu-item-has-children > a::after {
        right: 20px;
    }

    /* Estilo do botão Contato dentro do menu mobile */
    .main-navigation .menu-item-contato a {
        background-color: var(--cor-primaria) !important;
        color: var(--cor-fundo) !important;
        text-align: center;
        font-weight: bold;
        margin: 10px 20px;
        width: auto;
        border-radius: 5px;
    }
    .main-navigation .menu-item-contato a:hover {
        background-color: #3a6abf !important;
    }
    .main-navigation .menu-item-contato {
        border-top: none !important;
    }

    /* --- Responsividade do Footer --- */
    .footer-main .footer-container {
        flex-direction: column; /* Empilha as colunas */
        align-items: center; /* Centra tudo no mobile */
        text-align: center;
    }

    .footer-col {
        min-width: 100%; /* Ocupa 100% da largura */
        padding-right: 0;
    }

    #footer-contact li {
        justify-content: center; /* Centra itens de contato */
    }

    .footer-social {
        justify-content: center; /* Centra ícones sociais */
    }
}

/* ==========================================================================
   Estilos da Lista de Posts (do template-blog.php)
   ========================================================================== */

/* Este .blog-post-list é o "wrapper" que criámos no template */
/* Ele vive dentro do .site-content que já tem max-width: 1200px */
.blog-post-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    padding-top: 40px;
    padding-bottom: 40px;
}

/* O Card */
.post-item {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Imagem destacada */
.post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Título do post */
.post-content h2 {
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 15px;
}
.post-content h2 a {
    text-decoration: none;
    color: #333; /* Cor do título */
    transition: color 0.2s ease;
}
.post-content h2 a:hover {
    color: var(--cor-primaria); /* Azul ao passar o rato */
}

/* Resumo do post */
.post-excerpt p {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
}

/* Botão "Leia Mais" */
.read-more-link {
    display: inline-block;
    background-color: var(--cor-primaria);
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}
.read-more-link:hover {
    background-color: #3a6abf;
}

/* Paginação */
.pagination-links {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    font-size: 16px;
    font-weight: bold;
}
.pagination-links a {
    text-decoration: none;
    color: var(--cor-primaria);
}
.pagination-links a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Estilos da Lista de Posts (do template-blog.php) - Layout de Card
   ========================================================================== */

.blog-post-list {
    display: grid;
    /* 1. O layout de 3 colunas */
    grid-template-columns: repeat(3, 1fr); 
    /* 2. Espaço entre os cards */
    gap: 30px; 
    padding-top: 40px;
    padding-bottom: 40px;
}

/* O Card */
.post-item {
    background-color: #fff;
    border-radius: 10px; /* Cantos arredondados (como na imagem) */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Sombra suave */
    overflow: hidden; /* Garante que a imagem não "vaze" dos cantos */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    /* Remove os estilos antigos de "lista" */
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.post-item:hover {
    transform: translateY(-5px); /* Efeito de flutuar ao passar o rato */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* A Imagem */
.post-thumbnail {
    position: relative;
    overflow: hidden;
    line-height: 0;
    
    /* * MUDANÇA AQUI:
     * Definimos uma altura fixa para a imagem.
     * 220px é um bom valor, mas pode ajustar (ex: 200px, 250px)
     * conforme o seu gosto.
    */
    height: 220px;
}
.post-thumbnail a {
    display: block;
    /* MUDANÇA AQUI: Faz o link preencher a altura fixa */
    height: 100%;
}
.post-thumbnail img {
   width: 100%;
    
    /* * MUDANÇA AQUI:
     * 1. A imagem vai ocupar 100% da altura do contentor (220px).
     * 2. object-fit: cover; impede a imagem de distorcer.
     * Ela vai ser "cortada" para caber perfeitamente.
    */
    height: 100%;
    object-fit: cover; 
    
    display: block;
    transition: transform 0.3s ease;
    margin-bottom: 0;
}
.post-item:hover .post-thumbnail img {
    transform: scale(1.05); /* Efeito de zoom na imagem */
}

/* Sobreposição (Overlay) Azul (como na imagem) */
.post-thumbnail::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Usa a cor primária que já definimos no :root */
    background-color: var(--cor-primaria);
    opacity: 0.6; /* 60% de opacidade (ajuste 0.1 a 1.0) */
    pointer-events: none; /* Deixa o clique passar para o link <a> */
    transition: opacity 0.3s ease;
}
.post-item:hover .post-thumbnail::after {
    opacity: 0.4; /* Menos opacidade no hover */
}

/* O Conteúdo (parte branca do card) */
.post-content {
    padding: 25px; /* Espaçamento interno */
}

/* Título do post (H2) */
.post-content h2 {
    font-size: 22px; /* Tamanho do título da imagem */
    font-weight: 700; /* Negrito forte */
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.3; /* Espaço entre linhas do título */
}
.post-content h2 a {
    text-decoration: none;
    color: #333;
    transition: color 0.2s ease;
}
.post-content h2 a:hover {
    color: var(--cor-primaria);
}

/* Resumo do post */
.post-excerpt {
    font-size: 16px;
    line-height: 1.6;
    color: #555; /* Cor do texto (como na imagem) */
}
/* Remove a margem do <p> automático do WordPress */
.post-excerpt p {
    margin: 0;
}

/* Botão "Leia Mais" (Escondido para bater com o design da imagem) */
.read-more-link {
    display: none;
}
    
/* Paginação (ocupa toda a largura do grid) */
.pagination-links {
    /* Faz a paginação ocupar todas as 3 colunas */
    grid-column: 1 / -1; 
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    font-size: 16px;
    font-weight: bold;
}
.pagination-links a {
    text-decoration: none;
    color: var(--cor-primaria);
}
.pagination-links a:hover {
    text-decoration: underline;
}
    
/* --- Responsividade da Grelha de Posts --- */

/* Tablets (usando o mesmo breakpoint do header) */
@media (max-width: 992px) {
    .blog-post-list {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        gap: 20px;
    }
}

/* Telemóveis */
@media (max-width: 767px) {
    .blog-post-list {
        grid-template-columns: 1fr; /* 1 coluna */
        gap: 25px;
    }
    .post-content h2 {
        font-size: 20px; /* Título um pouco menor */
    }
}

/* ==========================================================================
   Estilos do Banner (Hero) do Blog
   ========================================================================== */

.blog-hero-banner {
    /* 1. Carrega a nova imagem de fundo (URL externo) */
    background-image: 
        /* 2. Esta é a sobreposição (overlay) azul (como na imagem) */
        linear-gradient(rgba(0, 40, 100, 0.75), rgba(0, 40, 100, 0.75)),
        
        /* 3. Este é o novo URL da imagem */
        /* (Usei a versão 1920w do seu link para melhor qualidade) */
        url('https://lirp.cdn-website.com/6a3da601/dms3rep/multi/opt/banner-cc24649c-1920w.jpg');
    
    background-size: cover;
    background-position: center center;
    padding: 80px 30px; /* Espaçamento interno (cima/baixo, lados) */
    color: #ffffff; /* Cor do texto */
    text-align: center; /* Alinha todo o texto ao centro */
    
    width: 100%;
    box-sizing: border-box;
}

.hero-content-wrapper h1{
    color: white;
}

/* (O resto dos estilos .hero-content-wrapper, .blog-hero-banner h1, etc. 
   podem permanecer exatamente como estão) */