/*
  vagas-reconecta :: 10-pagina-vaga.css
  Layout do job posting: header, hero, corpo em 2 colunas (conteudo + coluna do
  form sticky), footer, barra CTA fixa no mobile. Visual neutro de carreiras.
*/

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-sans);
  font-size: var(--texto-base);
  line-height: var(--lh-normal);
  color: var(--cor-corpo);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cor-acento); }
a:hover { color: var(--cor-acento-hover); }

.vaga-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

/* ============ HEADER ============ */
.vaga-header {
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
}
.vaga-header__inner {
  display: flex;
  align-items: center;
  min-height: 64px;
}
.vaga-header__logo {
  font-weight: var(--peso-bold);
  font-size: var(--texto-lg);
  color: var(--cor-titulo);
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
/* Logo em imagem: altura fixa no header, largura proporcional. */
.vaga-header__logo-img { display: block; height: 30px; width: auto; max-width: 60vw; }

/* ============ HERO ============ */
.vaga-hero {
  padding-block: var(--esp-8) var(--esp-6);
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
}
.vaga-hero__titulo {
  margin: 0 0 var(--esp-4);
  font-size: var(--texto-3xl);
  line-height: var(--lh-apertado);
  font-weight: var(--peso-bold);
  color: var(--cor-titulo);
  letter-spacing: -0.02em;
  /* Antes era 20ch (~20 caracteres): titulos longos ficavam espremidos no canto
     esquerdo, quebrando em varias linhas sem usar a largura da tela. Agora
     aproveita o espaco horizontal (equivalente a max-w-5xl), sem passar do
     container (--container-max = 1200px). */
  max-width: 64rem;
}
.vaga-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.vaga-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-pill);
  background: var(--cor-acento-suave);
  color: var(--cor-acento-hover);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}

/* ============ CORPO EM 2 COLUNAS ============ */
.vaga-layout {
  display: grid;
  grid-template-columns: 1fr var(--coluna-form);
  gap: var(--esp-8);
  align-items: start;
  padding-block: var(--esp-7) var(--esp-9);
}

.vaga-conteudo > section { margin-bottom: var(--esp-7); }
.vaga-conteudo h2 {
  font-size: var(--texto-xl);
  font-weight: var(--peso-semibold);
  color: var(--cor-titulo);
  margin: 0 0 var(--esp-3);
}
.vaga-conteudo p { margin: 0 0 var(--esp-3); line-height: var(--lh-relaxado); }
.vaga-conteudo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.vaga-conteudo ul li {
  position: relative;
  padding-left: var(--esp-5);
  line-height: var(--lh-relaxado);
}
.vaga-conteudo ul { margin: 0 0 var(--esp-3); }
.vaga-conteudo ul li {
  padding-left: var(--esp-6);
}
.vaga-conteudo ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cor-acento);
}

/* Conteudo RICO da descricao (editor formatado): negrito, italico, links,
   subtitulos e listas com marcador e recuo bem visiveis e alinhados. */
.vaga-conteudo strong, .vaga-conteudo b { font-weight: var(--peso-bold); color: var(--cor-titulo); }
.vaga-conteudo em, .vaga-conteudo i { font-style: italic; }
.vaga-conteudo u { text-decoration: underline; }
.vaga-conteudo a { color: var(--cor-acento-hover); text-decoration: underline; }
.vaga-conteudo a:hover { text-decoration: none; }
.vaga-conteudo h3, .vaga-conteudo h4 {
  font-weight: var(--peso-semibold); color: var(--cor-titulo);
  margin: var(--esp-4) 0 var(--esp-2); font-size: var(--texto-lg);
}
/* Lista ORDENADA (ol) da descricao: numeros visiveis com recuo (a ul acima usa
   o marcador redondo custom; a ol usa numeracao nativa). */
.vaga-conteudo ol { margin: 0 0 var(--esp-3); padding-left: var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-2); }
.vaga-conteudo ol li { line-height: var(--lh-relaxado); }

/* ============ SOBRE A EMPRESA ============ */
/* Bloco institucional do cliente, PRIMEIRO da coluna de conteudo (o Worker
   injeta em runtime). Mesma familia das outras secoes: titulo herda
   .vaga-conteudo h2, corpo herda o paragrafo padrao. So o divisor e o destaque
   do posicionamento sao proprios, pra separar "quem contrata" de "a vaga" sem
   virar caixa de landing. O filete fica EMBAIXO porque o bloco abre a coluna:
   no topo ele seria uma linha solta logo abaixo do hero. */
.sobre-empresa {
  padding-bottom: var(--esp-6);
  border-bottom: 1px solid var(--cor-borda);
}
/* A tag entra no seletor de proposito: as regras de cima (.vaga-conteudo h2 e
   .vaga-conteudo p) pesam mais que uma classe sozinha, entao classe pura aqui
   seria declaracao morta. Com h2/p o peso empata e vale a ordem do arquivo. */
h2.sobre-empresa__titulo { margin-bottom: var(--esp-4); }
/* Posicionamento: entra como lead (um tom acima do corpo), com filete discreto
   no acento. E texto formatado (o admin pode deixar uma linha com link pro
   Instagram do cliente), entao o destaque vive no container e a tipografia nos
   paragrafos de dentro. Uma frase ou duas, nunca um bloco. */
.sobre-empresa__posicionamento {
  margin: 0 0 var(--esp-4);
  padding-left: var(--esp-4);
  border-left: 3px solid var(--cor-acento-suave);
}
.sobre-empresa__posicionamento p {
  font-size: var(--texto-lg);
  font-weight: var(--peso-medio);
  line-height: var(--lh-relaxado);
  color: var(--cor-titulo);
}
.sobre-empresa__posicionamento p:last-child { margin-bottom: 0; }
.sobre-empresa__descricao p:last-child { margin-bottom: 0; }

/* coluna lateral com o form (sticky no desktop) */
/* A coluna do formulario NAO e mais sticky: com as perguntas fixas da etapa 1 o
   form ficou mais alto que a tela. Um sticky mais alto que a viewport prende o
   topo e esconde o fim do form (botao de enviar), fazendo o candidato so alcancar
   o resto depois de rolar a vaga inteira. Em fluxo normal, o form rola junto com
   a pagina e todas as perguntas ficam acessiveis ao descer. */
.vaga-aside { position: static; }

/* ============ FOOTER ============ */
.vaga-footer {
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-fundo-alt);
  padding-block: var(--esp-6);
  color: var(--cor-secundario);
  font-size: var(--texto-sm);
}
.vaga-footer__inner { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-5); align-items: center; justify-content: space-between; }
.vaga-footer a { color: var(--cor-secundario); text-decoration: underline; }
.vaga-footer a:hover { color: var(--cor-corpo); }

/* ============ Pagina legal (politica de privacidade) ============ */
/* Reaproveita header/hero/conteudo/footer da pagina de vaga; so ajusta a
   largura de leitura e libera o titulo (que na vaga tem max-width curto). */
.vaga-hero__titulo--full { max-width: none; }
.vaga-legal { padding-block: var(--esp-7) var(--esp-9); }
.vaga-legal .vaga-conteudo { max-width: 760px; }
.vaga-legal__data { margin: var(--esp-2) 0 0; color: var(--cor-secundario); font-size: var(--texto-sm); }
.vaga-conteudo a { color: var(--cor-acento-hover); }

/* ============ BARRA CTA FIXA (mobile) ============ */
.vaga-cta-fixo {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-barra-mobile);
  padding: var(--esp-3) var(--container-pad);
  background: var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
  box-shadow: 0 -4px 16px rgb(16 24 40 / 0.06);
}
.vaga-cta-fixo .vaga-btn { width: 100%; }

/* ============ RESPONSIVO ============ */
@media (max-width: 1023px) {
  .vaga-layout {
    grid-template-columns: 1fr;
    gap: var(--esp-6);
  }
  .vaga-aside { position: static; }
}

@media (max-width: 767px) {
  .vaga-hero { padding-block: var(--esp-6) var(--esp-5); }
  /* deixa respiro pra barra fixa nao cobrir o footer */
  .vaga-footer { margin-bottom: 76px; }
  /* mesmo respiro no fim do form: sem isso, o botao real "Candidatar-se" do
     form (dentro do card) fica embaixo da barra fixa quando o candidato rola
     ate o fim, e o toque acerta a barra (que so rola ate #candidatura, sem
     submeter nada) em vez do submit de verdade. Candidato preenche tudo e
     "nao consegue clicar". */
  .vaga-aside { margin-bottom: 76px; }
  .vaga-cta-fixo { display: block; }
}

/* utilitario de leitor de tela */
.vaga-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }