/* ==========================================================================
   NANTE - Folha de estilos principal
   CSS3 puro (sem frameworks, sem imagens bitmap)
   Organizada por seções para facilitar o estudo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variáveis de cor e tipografia
   -------------------------------------------------------------------------- */
:root {
  --cor-primaria: #0f4c5c;      /* azul petróleo (cor principal) */
  --cor-secundaria: #157a6e;    /* verde-água (apoio) */
  --cor-destaque: #f4a261;      /* laranja suave (botões/detalhes) */
  --cor-texto: #1f2933;         /* texto escuro */
  --cor-texto-claro: #ffffff;   /* texto sobre fundo escuro */
  --cor-fundo: #f5f7f8;         /* fundo geral da página */
  --cor-caixa: #ffffff;         /* fundo dos cartões */
  --cor-borda: #d9e2e5;

  --espaco: 1rem;               /* espaçamento base */
  --raio: 10px;                 /* arredondamento padrão */
  --sombra: 0 2px 8px rgba(15, 76, 92, 0.12);
}

/* --------------------------------------------------------------------------
   2. Reset simples e regras básicas
   -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* a largura passa a incluir padding e borda */
}

body {
  font-family: Georgia, "Times New Roman", serif;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  line-height: 1.6;

  /* Flexbox na vertical: rodapé sempre no fim da página */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  line-height: 1.25;
  color: var(--cor-primaria);
}

a {
  color: var(--cor-secundaria);
}

/* Container que centraliza o conteúdo e limita a largura */
.container {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 var(--espaco);
}

/* --------------------------------------------------------------------------
   3. Cabeçalho e menu de navegação
   -------------------------------------------------------------------------- */
.cabecalho {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria));
  color: var(--cor-texto-claro);
  padding: calc(var(--espaco) * 1.5) 0;
}

/* Flexbox: logo à esquerda, menu à direita */
.cabecalho__conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* O "símbolo" da marca é feito com SVG inline (nada de JPG/PNG) */
.logo__simbolo {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.logo__texto h1 {
  color: var(--cor-texto-claro);
  font-size: 1.7rem;
  letter-spacing: 2px;
}

.logo__texto p {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Menu de navegação (também com Flexbox) */
.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none; /* remove os marcadores da lista */
}

.menu a {
  display: block;
  padding: 0.45rem 0.9rem;
  border-radius: var(--raio);
  color: var(--cor-texto-claro);
  text-decoration: none;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.menu a:hover,
.menu a:focus {
  background-color: rgba(255, 255, 255, 0.18);
}

/* --------------------------------------------------------------------------
   4. Conteúdo principal
   -------------------------------------------------------------------------- */
main {
  flex: 1; /* faz o main ocupar o espaço livre, empurrando o rodapé */
  padding: calc(var(--espaco) * 2) 0;
}

.secao {
  margin-bottom: calc(var(--espaco) * 2.5);
}

.secao__titulo {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--cor-destaque);
  display: inline-block;
}

/* Apresentação da instituição: texto + destaque lateral */
.apresentacao {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--espaco) * 1.5);
  align-items: flex-start;
}

.apresentacao__texto {
  flex: 2 1 380px; /* cresce mais que o aside */
}

.apresentacao__aside {
  flex: 1 1 240px;
  background-color: var(--cor-caixa);
  border-left: 5px solid var(--cor-secundaria);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: var(--espaco);
}

.apresentacao__aside h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.apresentacao__aside ul {
  list-style: none;
  font-size: 0.95rem;
}

.apresentacao__aside li::before {
  content: "▸ "; /* ícone em caractere Unicode, sem imagem */
  color: var(--cor-destaque);
}

/* --------------------------------------------------------------------------
   5. Cartões dos cursos
   -------------------------------------------------------------------------- */
.cursos {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--espaco) * 1.5);
}

.curso {
  flex: 1 1 300px; /* cada cartão ocupa no mínimo 300px */
  display: flex;
  flex-direction: column;
  background-color: var(--cor-caixa);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: calc(var(--espaco) * 1.25);
}

.curso__selo {
  font-size: 1.8rem;          /* ícone feito com caractere Unicode */
  color: var(--cor-secundaria);
  margin-bottom: 0.3rem;
}

.curso h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.curso p {
  font-size: 0.98rem;
  margin-bottom: var(--espaco);
}

.curso__info {
  list-style: none;
  font-size: 0.88rem;
  color: #52606d;
  margin-bottom: var(--espaco);
}

/* margin-top:auto empurra o botão para a base do cartão */
.curso .botao {
  margin-top: auto;
  align-self: flex-start;
}

/* Botão reutilizável */
.botao {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background-color: var(--cor-primaria);
  color: var(--cor-texto-claro);
  text-decoration: none;
  border-radius: var(--raio);
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.95rem;
}

.botao:hover,
.botao:focus {
  background-color: var(--cor-secundaria);
}

/* --------------------------------------------------------------------------
   6. Seção do processo seletivo (lista de PDFs)
   -------------------------------------------------------------------------- */
.documentos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco);
  list-style: none;
}

.documentos li {
  flex: 1 1 240px;
}

.documento {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: var(--espaco);
  background-color: var(--cor-caixa);
  border: 1px solid var(--cor-borda);
  border-left: 5px solid var(--cor-destaque);
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--cor-texto);
}

.documento:hover,
.documento:focus {
  background-color: #fff8f0;
}

.documento__icone {
  font-size: 1.5rem; /* "📄" em Unicode, sem imagem bitmap */
}

.documento__nome {
  font-family: "Trebuchet MS", sans-serif;
  font-weight: bold;
  display: block;
}

.documento__detalhe {
  font-size: 0.85rem;
  color: #52606d;
}

/* --------------------------------------------------------------------------
   7. Aviso usado nas páginas de curso (conteúdo em construção)
   -------------------------------------------------------------------------- */
.aviso {
  background-color: #fff6e8;
  border: 1px dashed var(--cor-destaque);
  border-radius: var(--raio);
  padding: var(--espaco);
  font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   8. Rodapé
   -------------------------------------------------------------------------- */
.rodape {
  background-color: var(--cor-primaria);
  color: var(--cor-texto-claro);
  padding: calc(var(--espaco) * 1.5) 0;
  font-size: 0.92rem;
}

.rodape__conteudo {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--espaco) * 1.5);
  justify-content: space-between;
}

.rodape h3 {
  color: var(--cor-texto-claro);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.rodape ul {
  list-style: none;
}

.rodape a {
  color: var(--cor-texto-claro);
}

.rodape__creditos {
  margin-top: var(--espaco);
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  text-align: center;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   9. Responsividade
   Em telas pequenas os itens do Flexbox passam a ficar em coluna.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .cabecalho__conteudo,
  .rodape__conteudo {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu ul {
    justify-content: flex-start;
  }

  .logo__texto h1 {
    font-size: 1.4rem;
  }
}