/*
 * Arquivo: profissionais.css
 * Descrição: Estilos personalizados para as páginas de perfil de profissional (CPT 'profissional').
 */

/* Estilos gerais para a página de perfil */
.profissional-single-page {
    padding: 60px 0; /* Espaçamento vertical para a página */
    background-color: #f8faff; /* Um fundo suave para o corpo da página */
    font-family: 'Open Sans', sans-serif; /* Fonte padrão, ajuste conforme o tema */
    color: #333;
}

/* Container principal do conteúdo */
.profissional-single-page .custom-container {
    max-width: 960px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o container */
    background-color: #ffffff; /* Fundo branco para o card do profissional */
    padding: 40px;
    border-radius: 12px; /* Cantos arredondados */
    box-shadow: 0 8px 25px rgba(0,0,0,0.08); /* Sombra sutil para profundidade */
    position: relative;
    overflow: hidden;
}

/* Estilo do card individual do profissional */
.profissional-card {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Espaço entre as principais seções do card */
}

/* Seção de Cabeçalho do Profissional (Foto, Nome, Especialidade) */
.profissional-header-section {
    display: flex;
    align-items: center;
    gap: 30px; /* Espaço entre foto e texto */
    padding-bottom: 30px;
    border-bottom: 1px solid #e0e0e0; /* Linha divisória */
}

/* Wrapper da foto para centralização/estilização */
.foto-profissional-wrapper {
    flex-shrink: 0; /* Impede que a foto encolha */
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-image {
    width: 180px; /* Tamanho da foto do perfil */
    height: 180px;
    border-radius: 50%; /* Torna a foto redonda */
    object-fit: cover; /* Garante que a imagem preencha o círculo */
    border: 4px solid #0056b3; /* Borda colorida para destaque */
    box-shadow: 0 0 0 8px rgba(0,86,179,0.1); /* Anel externo sutil */
}

/* Informações principais (Nome, Título) */
.profissional-info-main {
    flex-grow: 1; /* Permite que o texto ocupe o espaço restante */
}

.profissional-info-main h1 {
    font-size: 2.8em; /* Tamanho maior para o nome */
    color: #222;
    margin: 0 0 10px 0;
    line-height: 1.1;
    font-weight: 700;
}

.profissional-info-main .titulo-especialidade {
    font-size: 1.3em;
    color: #0056b3; /* Cor destacada para a especialidade */
    margin: 0;
    font-weight: 600;
}

/* Seção do Corpo do Profissional */
.profissional-body-section {
    display: flex;
    flex-direction: column;
    gap: 35px; /* Espaço entre as subseções do corpo */
}

/* Estilo para cada bloco de conteúdo (Sobre, Endereço, Artigos, Contato) */
.section-content {
    padding-bottom: 25px;
    border-bottom: 1px dashed #e9ecef; /* Linha divisória pontilhada */
}
.section-content:last-of-type {
    border-bottom: none; /* Remove a borda do último bloco de conteúdo */
    padding-bottom: 0;
}


.section-content h2, .section-content h3 {
    color: #0056b3; /* Cor dos títulos de seção */
    font-size: 1.8em;
    margin-bottom: 20px;
    position: relative;
    padding-left: 15px;
}
.section-content h3 {
    font-size: 1.4em;
    color: #444;
}
.section-content h2::before, .section-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 80%;
    background-color: #007bff; /* Linha vertical como destaque */
    border-radius: 3px;
}
.section-content h3::before {
    width: 4px;
    height: 70%;
    background-color: #5aa6ed;
}

.bio-text, .articles-content {
    line-height: 1.8;
    font-size: 1.05em;
    color: #4a4a4a;
}
.bio-text p, .articles-content p {
    margin-bottom: 1em;
}

/* Seção de Redes Sociais */
.redes-sociais {
    display: flex;
    flex-wrap: wrap; /* Quebra linha se houver muitos ícones */
    gap: 20px;
    margin-top: 20px;
}

.redes-sociais a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 25px;
    background-color: #e6f2ff; /* Fundo suave para os links sociais */
    color: #0056b3;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.redes-sociais a:hover {
    background-color: #d1e5ff;
    color: #003d80;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* Para adicionar ícones, você precisaria de uma biblioteca de ícones (Font Awesome, por exemplo) */
/* .social-icon.instagram::before { content: "\f16d"; font-family: 'Font Awesome 5 Brands'; } */


/* Botão CTA de WhatsApp */
.cta-section {
    margin-top: 40px;
    text-align: center;
}

.btn-whatsapp {
    display: inline-block;
    background-color: #25D366; /* Cor do WhatsApp */
    color: #fff;
    padding: 18px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 20px rgba(37,211,102,0.4);
    letter-spacing: 0.5px;
}

.btn-whatsapp:hover {
    background-color: #1DA851;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37,211,102,0.5);
}

/* Responsividade */
@media (max-width: 768px) {
    .profissional-single-page .custom-container {
        padding: 30px 20px;
    }
    .profissional-header-section {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding-bottom: 25px;
    }
    .profile-image {
        width: 150px;
        height: 150px;
    }
    .profissional-info-main h1 {
        font-size: 2.2em;
    }
    .profissional-info-main .titulo-especialidade {
        font-size: 1.1em;
    }
    .section-content h2 {
        font-size: 1.6em;
    }
    .section-content h3 {
        font-size: 1.3em;
    }
    .redes-sociais {
        justify-content: center;
    }
    .btn-whatsapp {
        padding: 15px 30px;
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .profissional-single-page {
        padding: 30px 0;
    }
    .profissional-single-page .custom-container {
        padding: 20px 15px;
    }
    .profissional-header-section {
        gap: 15px;
    }
    .profile-image {
        width: 120px;
        height: 120px;
    }
    .profissional-info-main h1 {
        font-size: 1.8em;
    }
    .profissional-info-main .titulo-especialidade {
        font-size: 1em;
    }
    .section-content h2 {
        font-size: 1.4em;
    }
    .section-content h3 {
        font-size: 1.1em;
    }
    .redes-sociais {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start; /* Alinha links à esquerda em mobile */
    }
    .btn-whatsapp {
        font-size: 1em;
        padding: 12px 25px;
    }
}