/* =========================================
   1. Cores e base
   ========================================= */

:root {
  --bs-primary: #1b5e20;         /* verde escuro */
  --bs-link-color: #2e7d32;      /* verde médio */
  --bs-link-hover-color: #1b5e20;
}

/* Fundo geral em tom bem claro/esverdeado */
body {
  background-color: #e9fcf1;
  font-size: 0.95rem;
}

/* Tamanhos de títulos globais */
h1 {
  font-size: 1.9rem;
}
h2 {
  font-size: 1.6rem;
}
h3 {
  font-size: 1.3rem;
}

/* Container mais largo, colado à esquerda */
.quarto-container {
  max-width: 100%;
  margin: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Remover padding extra no main */
main.content {
  padding-left: 0;
  padding-right: 0;
}

/* =========================================
   2. Navbar
   ========================================= */

/* Barra de navegação verde escuro */
.navbar {
  background-color: #1b5e20 !important;
  font-size: 0.9rem;
}

/* Título do site (brand) em amarelo */
.navbar-brand {
  color: #FFFF99 !important;
}
.navbar-brand:hover {
  color: #ffffff !important;
}

/* Abas (links do menu) em amarelo por padrão */
.navbar a.nav-link {
  color: #FFFF99 !important;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;  /* pill */
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover nas abas */
.navbar a.nav-link:hover {
  background-color: rgba(255, 255, 153, 0.25);  /* amarelo translúcido */
  color: #ffffff !important;
}

/* Aba ativa */
.navbar .nav-link.active {
  font-weight: 600;
  text-decoration: underline;
}

/* =========================================
   3. Title block e banners
   ========================================= */

/* Cor do título/subtítulo por cima do banner */
#title-block-header .title,
#title-block-header .subtitle {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* Título grande em caixa verde (todas as páginas) */
.quarto-title-block .title {
  display: inline-block;
  background-color: rgba(27, 94, 32, 0.9);
  color: #ffffff;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* Subtítulo em caixa escura */
.quarto-title-block .subtitle {
  display: inline-block;
  margin-top: 0.4rem;
  background-color: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
}

/* Faixa com imagem de fundo no final da Home */
.home-bottom-banner {
  background-image: url("img/down-ecology.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: 3rem 1.5rem;
  margin-top: 3rem;
}

.home-bottom-banner h2,
.home-bottom-banner p {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.home-bottom-banner .banner-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* =========================================
   4. Botões e ícones
   ========================================= */

/* Botões mais arredondados, menores e com fonte menor */
.btn {
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem; /* espaço entre ícone e texto */
  font-weight: 500;
}

/* Botão primary no verde principal */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-outline-primary:hover {
  background-color: var(--bs-primary);
  color: #ffffff;
}

/* Ícones dentro dos botões (caso use <i>) */
.btn i {
  font-size: 0.9em;
}

/* Ícones dos links (Lattes, Scholar etc.) */
.link-icon {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* Foto de perfil (Index) */
.profile-photo {
  border-radius: 50%;
  max-width: 350px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Foto menor específica da página About/Home */
.profile-photo.about-photo {
  max-width: 220px;
}

/* Agrupar ícones abaixo da foto na página About */
.about-links {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* =========================================
   5. Responsivo - Index (celular)
   ========================================= */

@media (max-width: 576px) {
  /* Reduz a foto de perfil no mobile */
  .profile-photo {
    max-width: 150px;  /* ajuste aqui se quiser menor/maior */
  }

  /* Ícones "Learn more" menores no mobile */
  .learn-icon {
    height: 36px;
  }

  /* Ícones dos links (Lattes, Scholar etc.) menores */
  .link-icon {
    height: 45px;
  }
}



/* =========================================
   6. Vídeo responsivo
   ========================================= */

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 1.5rem 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* =========================================
   7. "Learn more" na Home
   ========================================= */

.learn-more {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.learn-label {
  font-weight: 600;
  color: #1b5e20;
  margin-right: 0.5rem;
}

.learn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  color: #1b5e20;
  text-decoration: none;
  font-size: 0.85rem;
}

.learn-link:hover {
  background-color: rgba(27, 94, 32, 0.08);
  text-decoration: underline;
}

.learn-icon {
  height: 46px;
  width: auto;
  object-fit: contain;
}

/* =========================================
   8. Home - About grid layout
   ========================================= */

/* Bloco com duas colunas (foto+links à esquerda, texto à direita) */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* duas colunas iguais */
  gap: 1rem;
  /* background-color removido para deixar transparente */
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 1rem 0 1.5rem;
}

/* Coluna esquerda: foto + nome + ícones, com linha cinza à direita */
.about-left {
  border-right: 1px solid #dddddd;
  padding-right: 1rem;
  text-align: center;  /* centraliza nome e subtítulo */
}

/* Coluna direita: texto, com respiro à esquerda */
.about-right {
  padding-left: 1rem;
}

/* Centralizar também os h4 e h5 dentro de .about-left */
.about-left h4,
.about-left h5 {
  text-align: center;
  margin: 0.5rem 0;
}

/* Centralizar os links (ícones) */
.about-links {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;  /* centraliza os ícones */
}

/* Separador horizontal entre o topo (colunas) e a parte pessoal */
hr.about-separator {
  border: 0;
  border-top: 1px solid #dddddd;
  margin: 1.5rem 0 1rem;
}

/* Bloco da história pessoal (texto de baixo) */
.personal-story {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

/* Links dentro da história pessoal (ex: LEEG) */
.personal-story a,
.personal-story a.inline-link {
  color: #1b5e20;
  text-decoration: underline;
  font-weight: 500;
}

.personal-story a:hover,
.personal-story a.inline-link:hover {
  color: #2e7d32;
  text-decoration: underline;
}

/* Responsivo: em tela estreita, as colunas empilham e a linha vira horizontal */
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-left {
    border-right: none;
    border-bottom: 1px solid #dddddd;
    padding-right: 0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .about-right {
    padding-left: 0;
  }
}
/* =========================================
   9. Headings em caixas amarelas
   ========================================= */

/* Seções (##) em caixas amarelas discretas */
main.content h2 {
  display: inline-block;
  background-color: rgba(255, 255, 153, 0.9);
  color: #1b5e20;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
}

/* Sub-seções (###) em caixas mais suaves */
main.content h3 {
  display: inline-block;
  background-color: rgba(255, 255, 153, 0.6);
  color: #1b5e20;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
  font-size: 1.02rem;
}

/* Cards suaves para blocos de texto genéricos */
.text-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
}

/* =========================================
   10. Publications
   ========================================= */

/* Filtros da página de publicações */
.pub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.pub-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pub-filters select,
.pub-filters input[type="text"] {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #cccccc;
  font-size: 0.9rem;
}

/* Lista de publicações */
.pub-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Cada publicação em formato de card */
.pub-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;  /* texto | figura */
  column-gap: 1rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 153, 0.45);
  border-radius: 8px;
  border-left: 4px solid #1b5e20;
}

.pub-title {
  font-weight: 600;
  font-size: 1rem;
  color: #1b5e20;
  text-decoration: none;
}

.pub-title:hover {
  text-decoration: underline;
}

.pub-authors {
  font-size: 0.8rem;
  color: #444444;
}

.pub-journal {
  font-size: 0.9rem;
  color: #222222;
}

.pub-journal em {
  font-style: italic;
}

/* Thumb da figura do artigo */
.pub-thumb {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

/* Responsivo: figura abaixo do texto */
@media (max-width: 768px) {
  .pub-item {
    grid-template-columns: 1fr;
  }
  .pub-figure {
    margin-top: 0.5rem;
  }
}

/* =========================================
   11. Research projects (cards)
   ========================================= */

/* Filtros (ano e palavra-chave) */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.project-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.project-filters select,
.project-filters input[type="text"] {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #cccccc;
  font-size: 0.9rem;
}

/* Lista de cards */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Card individual */
.project-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* ano | conteúdo */
  column-gap: 1rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  background-color: rgba(255, 255, 153, 0.45);
  border-radius: 8px;
  border-left: 4px solid #1b5e20;
}

/* Coluna da esquerda: anos */
.project-year {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1b5e20;
  min-width: 7rem;
}

/* Coluna da direita: texto */
.project-main {
  font-size: 0.9rem;
}

/* Título do projeto (link) */
.project-title {
  font-weight: 600;
  font-size: 1rem;
  color: #1b5e20;
  text-decoration: none;
}

.project-title:hover {
  text-decoration: underline;
}

/* Pequeno respiro entre "Role/Funding" e texto */
.project-main p {
  margin-top: 0.35rem;
}

/* Responsivo: ano em cima, texto embaixo */
@media (max-width: 768px) {
  .project-card {
    grid-template-columns: 1fr;
  }
  .project-year {
    margin-bottom: 0.25rem;
  }
}

/* =========================================
   12.Contact page layout
   ========================================= */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  background-color: #f7f7f7;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0 1.5rem;
}

.contact-left {
  border-right: 1px solid #dddddd;
  padding-right: 1rem;
}

.contact-left p {
  font-size: 0.95rem;
  margin-top: 0.75rem;
}

.contact-right {
  padding-left: 1rem;
}

/* Campos do formulário */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1b5e20;
}

.contact-field input,
.contact-field textarea {
  border-radius: 6px;
  border: 1px solid #cccccc;
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  font-family: inherit;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: #1b5e20;
  box-shadow: 0 0 0 2px rgba(27, 94, 32, 0.12);
}

/* Responsivo */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-left {
    border-right: none;
    border-bottom: 1px solid #dddddd;
    padding-right: 0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .contact-right {
    padding-left: 0;
  }
}


/* ===========================
   13.Publications year tabs
   =========================== */

.pub-year-tabs {
  margin: 1.5rem 0 1rem;
}

/* esconde os radios */
.pub-year-tabs input[type="radio"] {
  display: none;
}

/* deixa os labels (anos) em linha */
.pub-year-tabs > label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.8rem;
  margin: 0 0.25rem 0.4rem 0;
  border-radius: 999px;
 border: 1px solid #1b5e20;
  font-size: 0.85rem;
  cursor: pointer;
  color: #1b5e20;
  background-color: #fffde7; /* amarelo bem claro */
 : background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* hover nas abas */
.pub-year-tabs > label:hover {
  background-color: #c5e1a5; /* verd claro */
}

/* blocos de conteúdo de cada ano */
.pub-year-tab-content {
  display: none;
 padding: 0.75rem 0.9rem;
  border-radius: 8px;
  background-color: #fafafa;
  border: 1px solid #e0e0e0;
  margin-top: 0.5rem;
* título interno do ano */
.pub-year-heading {
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #33691e;
  font-size: 0.9rem;
}

/* mostra só o conteúdo do anoado */
#pub-2025:checked ~ .pub-year-tab-content:nth-of-type(1),
#pub-2024:checked ~ .pub-year-tab-content:nth-of-type(2),
#pub-2023:checked ~ .pub-year-tab-content:nth-of-type(3),
#pub-2022:checked ~ .pub-year-tab-content:nth-of-type(4),
#pub-2021:checked ~ .pub-year-tab-content:nth-of-type(5),
#pub-2019:checked ~ .pub-year-tab-content:nth-of-type(6),
#pub-2018:checked ~ .pub-year-tab-content:nth-of-type(7),
#pub-2017:checked ~ .pub-year-tab-content:nth-of-type(8),
#pub-2012:checked ~ .pub-year-tab-content:nth-of-type(9) {
  display: block;
}

/* aba ativa (ano selecionado) */
#pub-2025:checked + label,
#pub-2024:checked + label,
#pub-2023:checked + label,
#pub-2022:checked + label,
#pub-2021:checked + label,
#pub-2019:checked + label,
#pub-2018:checked + label,
#pub-2017:checked + label,
#pub-2012:checked + label {
  background-color: #1b5e20; /* verde escuro */
  color: #ffffff;
  border-color: #1b5e20;
}

/* =========================================
   Media & Press Page
   ========================================= */

.media-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
}

.media-item {
  border-left: 4px solid #5cb85c;
  padding: 1rem 1.2rem;
  background-color: #f9f9f9;
  border-radius: 0 8px 8px 0;
}

.media-outlet {
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666;
  margin-bottom: 0.6rem;
}

.media-content {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: flex-start;
}

.media-text {
  flex: 1;
}

.media-title {
  font-size: 1.05rem;
  font-weight: bold;
}

.media-byline {
  display: block;
  font-size: 0.85rem;
  color: #888;
  margin: 0.3rem 0 0.6rem 0;
  font-style: italic;
}

.media-desc {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
}

.media-figure {
  flex-shrink: 0;
  width: 160px;
}

.media-thumb {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Mobile */
@media screen and (max-width: 768px) {
  .media-content {
    flex-direction: column;
  }
  .media-figure {
    width: 100%;
  }
}