/* css styles */

/* Rolagem suave para links de rolagem de página */
html {
  scroll-behavior: smooth;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,400&family=Raleway:wght@300;400;600&display=swap');

body {
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  font-size: 18px;

  color: #b3b3b3;
  background-color: #333333; /* Cor de fundo escura conforme o HTML original */
}

/* Títulos */
h1, h2, h3, h4 {
  font-family: 'Raleway', sans-serif;
  color: #ffffff;
}

/* Links do perfil e redes */
a {
  color: #03a9f4;
  text-decoration: none;
}

a:hover {
  color: #a6dcf4;
  text-decoration: underline;
}


/* REMOVER ESPAÇO / GAP ENTRE A BARRA SUPERIOR (NAVBAR) E A IMAGEM DE CAPA */
body #quarto-content,
#quarto-content {
  padding-top: 0 !important; /* Corrigido: padding não pode ser negativo */
  margin-top: 0 !important;  /* Zera para não bagunçar outras páginas do site */
}

/* Quando a navbar superior for fixa, força o topo a colar exatamente abaixo da barra */
body.nav-fixed #quarto-content {
  padding-top: 0px !important;
}

/* OCULTAR TÍTULO PADRÃO AUTOMÁTICO DO QUARTO */
#title-block-header, 
.quarto-title-block, 
header.quarto-title-block,
header#title-block-header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* MENU LATERAL (Sidebar) */
/* Ao passar o mouse, a palavra fica sublinhada mantendo a cor original */
.sidebar a:hover, 
.sidebar .nav-link:hover, 
.sidebar .sidebar-link:hover, 
.sidebar .sidebar-item-text:hover {
  color: inherit !important;
  text-decoration: underline !important;
}

/* =========================================================
   BARRA SUPERIOR - NAVBAR
   ========================================================= */
   
/* Ao passar o mouse ou quando a página/item estiver selecionado (ativo) */
.navbar a:hover, 
.navbar .nav-link:hover, 
.navbar .nav-link.active,
.navbar .navbar-nav .nav-link.active {
  color: #4CA7EE !important;
  text-decoration: underline !important;
}

/* ALTERAR TAMANHO DO LOGO NO NAVBAR */   
.navbar-brand img {
  max-height: 50px; /* Altere este valor para o tamanho desejado */
  height: auto;     /* Garante que a imagem não fique esticada */
}


/* SUMÁRIO DA PÁGINA (TOC - "Nesta página") */

/* =========================================================
   OCULTAR A CAIXA / BARRA SUSPENSA "On this page" DO TOPO
   ========================================================= */

/* Oculta a barra secundária do topo no desktop e mobile */
#quarto-header .quarto-secondary-nav,
header#quarto-header .quarto-secondary-nav,
nav.quarto-secondary-nav,
.quarto-secondary-nav,
#quarto-margin-sidebar-toggle,
.quarto-btn-toggle,
#quarto-sidebar-glass,
.quarto-sidebar-collapse-item {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================================
   SUMÁRIO LATERAL (TOC) - Pós-rolagem
   ========================================================= */

/* Empurra o sumário lateral fixo para começar apenas na altura do texto (abaixo da foto) */
.margin-sidebar, 
#quarto-margin-sidebar {
  margin-top: 0vh !important; /* Deve ser igual à altura (height) do Hero Banner */
  padding-top: 0px !important;
}

/* Links do sumário ao passar o mouse ou selecionar */
#TOC a:hover,
#TOC a.active,
nav#TOC ul li a.active,
nav#TOC ul li a:hover {
  color: #4CA7EE !important;
  text-decoration: underline !important;
}

/* Linha vertical indicadora do item selecionado no sumário */
#TOC ul li a.active,
nav#TOC ul li a.active {
  border-left: 2px solid #4CA7EE !important;
  padding-left: 8px !important;
}


/* =========================================================
   CAPA EM TELA CHEIA (Hero Banner)
   ========================================================= */

.hero-banner {
  height: 100vh !important; /* Crava exatamente no tamanho da sua tela */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Centralização perfeita em Flexbox */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; 
  align-items: center !important;     
  text-align: center !important;
  
  color: #ffffff;
  position: relative;
  
  /* Margens zeradas! O truque agora será no HTML */
  margin-top: 0 !important; 
  padding-top: 0 !important; 
  
  margin-bottom: 2em;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Título da Capa */
.hero-banner p,
.hero-banner h1 { 
  font-size: 4.5rem;
  font-weight: 300; /* Ajustado para a grossura 300 que estava no seu HTML */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  margin-top: 0 !important;
  margin-bottom: 0.3em !important;
  color: #ffffff !important;
  border-bottom: none !important;
}

/* Seta animada apontando para baixo */
.scroll-down-arrow {
  position: absolute;
  bottom: 30px; /* Levemente ajustado para compensar a tela */
  font-size: 2rem;
  color: #ffffff !important;
  text-decoration: none !important;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}

/* 1. Folga global para qualquer título que receba um link de âncora */
h1, h2, h3, h4, h5, h6, [id] {
  scroll-margin-top: 50px !important;
}

/* 2. Define o padding de rolagem na raiz do documento */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 50px !important;
}

/* =========================================================
   LAYOUT DA PAGINA PEOPLE
   ========================================================= */

/* Centralização perfeita para os blocos da equipe */
.membro-equipe {
  display: flex !important;
  align-items: center !important;
}

/* Remove a margem inferior do parágrafo que envolve a imagem */
.membro-equipe .column:first-child p {
  margin-bottom: 0 !important;
}

/* Garante que a última linha de texto também não tenha margem sobrando */
.membro-equipe .column:last-child p:last-child {
  margin-bottom: 0 !important;
}


/* =========================================================
   EFEITO DE INTERATIVIDADE DAS CARTELAS (Cards) DA HOME
   ========================================================= */
   
.image-card {
  height: 300px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
  margin-top: 15px;
}

/* Camada azul por cima da imagem no estado normal */
.image-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  transition: background-color 0.5s ease;
}

/* Camada escurece ao passar o mouse */
.image-card:hover::before {
  background-color: rgba(0, 0, 0, 0.6);
}

/* Botão invisível no estado normal */
.btn-more {
  position: relative;
  z-index: 1;
  opacity: 0;
  background-color: #03a9f4;
  color: #ffffff !important;
  padding: 10px 20px;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 4px;
  transition: opacity 0.5s ease, background-color 0.3s ease;
}

/* Mostra o botão ao passar o mouse na cartela */
.image-card:hover .btn-more {
  opacity: 1;
}

/* Efeito de cor ao passar o mouse no próprio botão */
.btn-more:hover {
  background-color: #00bf87;
  color: #ffffff;
  text-decoration: none;
}


/* =========================================================
   TRANSIÇÃO DA NAVBAR AO ROLAR (SCROLL)
   ========================================================= */

/* Torna a navbar inicialmente transparente e adiciona uma transição suave */
.navbar {
  background-color: transparent !important;
  transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out !important;
  border-bottom: none !important;
}

/* Classe aplicada via JavaScript quando a página rolar */
.navbar.navbar-scrolled {
  background-color: #333333 !important; /* Ajustado para a cor escura do seu site em vez do cinza original */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important; 
}

/* Ajusta a cor do texto da navbar para branco */
.navbar-brand, .nav-link {
  color: white !important;
}

/* =========================================================
   REMOVER FAIXA DO TOPO EM TODAS AS PÁGINAS E FIXAR NAVBAR
   ========================================================= */

/* 1. Remove o padding dinâmico que o Quarto injeta no body */
body, body.nav-fixed {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. Garante que a barra de navegação fique flutuando sempre no topo */
header#quarto-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1030 !important; /* Garante que a barra fique acima de tudo */
}

/* 3. Zera os contêineres globais e o main em todo o site */
#quarto-content, 
.quarto-container,
main#quarto-document-content,
main.content,
main.page-columns {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 4. Previne que um título em branco ocupe espaço */
header.quarto-title-block {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   CLASSE AUXILIAR PARA PÁGINAS SEM "HERO BANNER"
   ========================================================= */
/* Use esta classe nas páginas de texto para o conteúdo não ficar atrás da navbar */
.conteudo-sem-capa {
    padding-top: 100px !important; 
}


/* =========================================================
   RESPONSIVIDADE EXCLUSIVA PARA CELULARES E TABLETS
   ========================================================= */
@media (max-width: 768px) {
  
  /* 1. Quebra as colunas lado a lado para ficarem uma embaixo da outra */
  .columns, .membro-equipe {
    flex-direction: column !important;
    display: block !important;
  }

  /* 2. Força os blocos de texto e imagem a usarem 100% da tela do celular (ignorando as larguras de 30% ou 65% do computador) */
  .column {
    width: 100% !important;
    margin-bottom: 30px !important;
  }

  /* 3. Reduz o tamanho da fonte da capa para não vazar da tela */
  .hero-banner p, .hero-banner h1 {
    font-size: 2.2rem !important;
  }

  /* 4. ATROPELA as margens de 12% ou 15% do computador e aplica apenas 5% de margem no celular */
  .column-screen {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}