/* =========================
   Variáveis globais
========================= */
:root{
  --bs-primary: #2c3e50;
  --nav-h: 64px;        /* atualizado via JS conforme altura real da navbar */

  /* Paleta para seções */
  --c-navy-1:#10253a;   /* escuro */
  --c-navy-2:#17334a;   /* azul médio */
  --c-ice:#f5f7fb;      /* claro */
}

/* =========================
   Base
========================= */
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  padding-top: var(--nav-h);   /* compensa a navbar fixa */
  background: var(--c-navy-1); /* cor de fundo padrão (seções sobrescrevem) */
  color: #fff;
}

/* =========================
   Navbar / Botões
========================= */
.navbar{
  transition: all .3s ease-in-out;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.navbar .nav-link{ padding: .5rem 1rem; }

.btn-primary{
  border-radius: 30px;
  padding: 12px 30px;
}

/* =========================
   Seções (layout)
========================= */
/* 100svh para mobile moderno + fallback 100vh */
section{
  min-height: calc(100svh - var(--nav-h));
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  scroll-margin-top: calc(var(--nav-h) + 4px); /* ancora perfeita */
}
section .container{ padding: 2rem 0; }

/* Cores das seções */
.section-dark  { background: var(--c-navy-1); color:#fff; }
.section-mid   { background: var(--c-navy-2); color:#fff; }
.section-light { background: var(--c-ice);    color:#0f1216; }

/* Divisórias suaves entre blocos */
.section-light{ position:relative; }
.section-light::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background: rgba(0,0,0,.06);
}
.section-dark::before, .section-mid::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background: rgba(255,255,255,.06);
}

/* Imagens dentro das seções */
section img{
  max-height: 70svh;
  max-height: 70vh;
  object-fit: cover;
}

/* =========================
   Cards (projetos)
========================= */
.card{
  display: flex;
  flex-direction: column;
  transition: transform .3s;
}
.card-body{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.card img{
  width: 100%;
  height: 220px;        /* padroniza a altura das thumbs */
  object-fit: cover;
}
.card:hover{ transform: translateY(-10px); }

/* Em seções claras, cartões brancos */
.section-light .card{ background:#fff; }

/* =========================
   Ícones / detalhes
========================= */
.text-secondary i{ font-size: 1.25rem; }
.fa-code, .bi-code-slash{ color: #5370a7; }
.fa-chart-line{ color: #513e96; }

.social-icons a{ text-decoration: none; }
.social-icons i{ transition: color .2s ease, transform .2s ease; }
.social-icons .fa-github{ color:#000; }
.social-icons .fa-linkedin{ color:#0A66C2; }
.social-icons .fa-whatsapp{ color:#25D366; }
.social-icons a:hover i{ transform: translateY(-2px); }
.social-icons a:hover .fa-github{ color:#333; }
.social-icons a:hover .fa-linkedin{ color:#004182; }
.social-icons a:hover .fa-whatsapp{ color:#128C7E; }

/* =========================
   Contato + Rodapé (um bloco)
========================= */
#contato{
  display: block;
}
#contato .contato-wrapper{
  min-height: calc(100svh - var(--nav-h));
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  grid-template-rows: auto 1fr auto;  /* título/form | espaço | rodapé */
  gap: 1.5rem;
  padding: 2rem 0;
}
#contato footer{
  margin: 0;
  border-top: 2px solid var(--bs-primary);
}
footer a:hover{
  color: var(--bs-primary) !important;
  transition: .3s;
}

/* =========================
   Ajustes específicos da seção PROJETOS
========================= */
/* Deixa a seção crescer (não força altura de viewport) e alinha do topo */
#projetos{
  min-height: auto;
  align-items: flex-start;
}
#projetos .container{
  padding: 3rem 0;        /* respiro extra */
}

/* Botões dos cards em formato pílula (iguais) */
#projetos .card .btn{
  border-radius: 999px;   /* pílula */
  padding: .65rem 1.2rem;
  line-height: 1;
}
/* Mantém o tema escuro do botão Github */
#projetos .card .btn-dark{
  background-color: #222;
  border-color: #222;
}
#projetos .card .btn-dark:hover{
  background-color: #111;
  border-color: #111;
}

/* Assegura que o bloco de botões fique no rodapé do card quando houver muito texto */
#projetos .card .mt-auto{ margin-top: auto !important; }

/* =========================
   Responsivo
========================= */
@media (max-width: 992px){
  #contato .contato-wrapper{
    grid-template-rows: auto auto auto; /* deixa fluir no mobile */
  }
  /* centraliza melhor a foto do herói no mobile */
  #inicio .text-center img{ width: 80% !important; }
}

/* (Ajuste de contraste quando um elemento tiver .text-light dentro de seção clara) */
.section-light .text-light{ color:#0f1216 !important; }