/* ==========================================================================
   AnySolve Emprego, as três páginas públicas: AnySolve RH, Como me candidato,
   e Preços.
   Agente 7. Carregar DEPOIS do marca.css, que é quem define os símbolos.

   Regra desta folha: só entra aqui o que o marca.css e o cartoes.css ainda
   não têm. Tudo o que já existia é reutilizado tal como está, com os mesmos
   nomes: .as-sec, .as-larg, .as-barra, .as-rotulo, .as-btn, .as-etiqueta,
   .as-quadro, .as-passos, .as-sem, .as-oferta, .as-confianca, .as-accoes.
   Nenhuma cor literal: tudo sai dos símbolos, e por isso o tema escuro vem
   de graça, sem uma única cor definida dentro de um bloco de media.
   Telemóvel primeiro: escrito para 360px, cresce a partir daí.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Capa das páginas interiores
   O herói da entrada é uma promessa de uma linha; o de uma página interior é
   uma frase, e por isso ganha mais largura de texto e menos corpo de letra.
   -------------------------------------------------------------------------- */
.as-site .as-heroi--pagina .as-heroi__titulo {
  font-size: clamp(1.875rem, 6.6vw, 3rem);
  max-width: 24ch;
}

.as-site .as-heroi--pagina .as-heroi__linha {
  max-width: var(--as-larg-texto);
}

/* As acções da capa, debaixo do título. */
.as-site .as-heroi--pagina .as-accoes {
  margin-top: var(--as-e-6);
}

/* Fila de etiquetas debaixo do título. */
.as-site .as-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-2);
  margin-top: var(--as-e-5);
}

/* Nota de pé de secção: o que é preciso dizer mas não é título. */
.as-site .as-nota {
  margin-top: var(--as-e-5);
  max-width: var(--as-larg-texto);
  font-size: var(--as-t-base);
  color: var(--as-texto-fraco);
}

/* --------------------------------------------------------------------------
   2. Grelha de blocos
   Serve para arrumar cartões (.as-quadro) no tema claro e ofertas
   (.as-oferta) dentro do bloco invertido. Uma grelha só, dois tamanhos.
   -------------------------------------------------------------------------- */
.as-site .as-blocos {
  display: grid;
  gap: var(--as-e-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  .as-site .as-blocos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--as-e-5);
  }
}

@media (min-width: 1020px) {
  .as-site .as-blocos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   3. Lista com sinal
   A irmã clara da .as-oferta__lista, que só vive no bloco invertido.
   -------------------------------------------------------------------------- */
.as-site .as-lista-certos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--as-e-2);
  color: var(--as-texto-suave);
}

.as-site .as-lista-certos li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--as-e-2);
  align-items: start;
}

.as-site .as-lista-certos svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--as-estado-zap);
}

.as-site .as-lista-certos--cruz svg { color: var(--as-marca-tinta); }

/* --------------------------------------------------------------------------
   4. Prazos, com a data à esquerda
   -------------------------------------------------------------------------- */
.as-site .as-prazos {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--as-borda);
}

.as-site .as-prazo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--as-e-1);
  padding-block: var(--as-e-4);
  border-bottom: 1px solid var(--as-borda);
}

.as-site .as-prazo__quando {
  font-size: var(--as-t-lead);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--as-marca-tinta);
}

.as-site .as-prazo__o-que { font-weight: 700; }

.as-site .as-prazo__onde {
  font-size: var(--as-t-meta);
  color: var(--as-texto-fraco);
}

@media (min-width: 760px) {
  .as-site .as-prazo {
    grid-template-columns: 17rem minmax(0, 1fr);
    column-gap: var(--as-e-6);
    align-items: baseline;
  }
  .as-site .as-prazo__quando { grid-row: span 2; }
}

/* --------------------------------------------------------------------------
   5. Glossário: o que quer dizer cada coisa no anúncio
   -------------------------------------------------------------------------- */
.as-site .as-glossario {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--as-borda);
}

.as-site .as-glossario__t {
  padding-top: var(--as-e-4);
  font-size: var(--as-t-lead);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--as-texto);
}

.as-site .as-glossario__d {
  margin: 0;
  padding: var(--as-e-1) 0 var(--as-e-4);
  border-bottom: 1px solid var(--as-borda);
  color: var(--as-texto-suave);
  max-width: var(--as-larg-texto);
}

@media (min-width: 760px) {
  .as-site .as-glossario { grid-template-columns: 15rem minmax(0, 1fr); }
  .as-site .as-glossario__t {
    padding-bottom: var(--as-e-4);
    border-bottom: 1px solid var(--as-borda);
  }
  .as-site .as-glossario__d { padding-top: var(--as-e-4); }
}

/* --------------------------------------------------------------------------
   6. Mensagem boa e mensagem má, lado a lado
   O cartão é o .as-quadro de sempre; aqui só se acrescenta o filete de cima,
   verde na boa e vermelho na má, e o balão da mensagem.
   -------------------------------------------------------------------------- */
.as-site .as-mensagens {
  display: grid;
  gap: var(--as-e-4);
}

@media (min-width: 760px) {
  .as-site .as-mensagens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--as-e-5);
    align-items: start;
  }
}

.as-site .as-mensagem { border-top: 4px solid var(--as-borda-forte); }

.as-site .as-mensagem--boa { border-top-color: var(--as-estado-zap); }
.as-site .as-mensagem--ma { border-top-color: var(--as-marca); }

.as-site .as-mensagem__cabeca {
  display: flex;
  align-items: center;
  gap: var(--as-e-2);
  margin-bottom: var(--as-e-4);
  font-size: var(--as-t-md);
}

.as-site .as-mensagem__cabeca > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.as-site .as-mensagem--boa .as-mensagem__cabeca > svg { color: var(--as-estado-zap); }
.as-site .as-mensagem--ma .as-mensagem__cabeca > svg { color: var(--as-marca-tinta); }

.as-site .as-mensagem__balao {
  padding: var(--as-e-4);
  border: 1px solid var(--as-estado-zap-borda);
  border-radius: var(--as-r-toque);
  background-color: var(--as-estado-zap-tenue);
  color: var(--as-texto);
}

.as-site .as-mensagem--ma .as-mensagem__balao {
  border-color: var(--as-borda-forte);
  background-color: var(--as-superficie-2);
}

.as-site .as-mensagem__notas { margin-top: var(--as-e-4); }

.as-site .as-mensagens__depois { margin-top: var(--as-e-5); }

/* --------------------------------------------------------------------------
   7. Escalões de preço
   Quatro cartões e uma faixa larga para o "mais de 100".
   -------------------------------------------------------------------------- */
.as-site .as-precos {
  display: grid;
  gap: var(--as-e-4);
  grid-template-columns: minmax(0, 1fr);
}

.as-site .as-preco {
  display: flex;
  flex-direction: column;
  gap: var(--as-e-3);
}

.as-site .as-preco--gratis {
  border-color: var(--as-estado-zap-borda);
  background-color: var(--as-estado-zap-tenue);
}

.as-site .as-preco__faixa {
  font-size: var(--as-t-md);
  letter-spacing: -0.02em;
}

.as-site .as-preco__valor {
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--as-texto);
}

.as-site .as-preco--gratis .as-preco__valor { color: var(--as-estado-zap); }

.as-site .as-preco__valor--anunciar {
  font-size: var(--as-t-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--as-texto-fraco);
}

.as-site .as-preco__por {
  margin-top: calc(var(--as-e-1) * -1);
  font-size: var(--as-t-meta);
  color: var(--as-texto-fraco);
}

.as-site .as-preco__lista { margin-top: var(--as-e-1); }

.as-site .as-preco__fim { margin-top: auto; padding-top: var(--as-e-2); }

.as-site .as-preco--proposta { grid-column: 1 / -1; }

@media (min-width: 700px) {
  .as-site .as-precos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--as-e-5);
  }
}

@media (min-width: 1020px) {
  .as-site .as-precos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   8. Factos do mercado
   O corpo de letra do número é o mesmo do herói: .as-numero__valor.
   -------------------------------------------------------------------------- */
.as-site .as-factos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--as-e-5);
  padding-top: var(--as-e-5);
  border-top: 1px solid var(--as-borda);
}

@media (min-width: 900px) {
  .as-site .as-factos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.as-site .as-factos__depois { margin-top: var(--as-e-8); }

/* --------------------------------------------------------------------------
   9. Perguntas rápidas. Abrem e fecham sem uma linha de JavaScript.
   -------------------------------------------------------------------------- */
.as-site .as-perguntas {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--as-borda);
}

.as-site .as-pergunta { border-bottom: 1px solid var(--as-borda); }

.as-site .as-pergunta__t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--as-e-4);
  min-height: var(--as-toque);
  padding-block: var(--as-e-3);
  font-size: var(--as-t-lead);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--as-texto);
  cursor: pointer;
  list-style: none;
}

.as-site .as-pergunta__t::-webkit-details-marker { display: none; }

.as-site .as-pergunta__t::after {
  content: "+";
  flex: 0 0 auto;
  font-size: var(--as-t-md);
  font-weight: 800;
  line-height: 1;
  color: var(--as-marca-tinta);
}

.as-site .as-pergunta[open] .as-pergunta__t::after { content: "\2212"; }

.as-site .as-pergunta__c {
  padding-bottom: var(--as-e-4);
  max-width: var(--as-larg-texto);
  color: var(--as-texto-suave);
}

/* --------------------------------------------------------------------------
   10. Impressão: nada se parte ao meio.
   -------------------------------------------------------------------------- */
@media print {
  .as-site .as-preco,
  .as-site .as-mensagem,
  .as-site .as-prazo { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   11. Sair do contentor estreito do tema
   O integracao.css já faz isto para o .as-inicio na entrada. As três páginas
   interiores precisam do mesmo, mas só quando o invólucro está mesmo lá
   dentro, para não mexer no resto do site. Se o navegador não souber :has(),
   a página fica apenas mais estreita: nada parte.
   -------------------------------------------------------------------------- */
.as-pagina,
.as-pagina > * {
  max-width: none;
  width: auto;
}

body.as-site :where(.entry-content, .wp-block-post-content, .wcb-page-article, .site-main, .container):has(> .as-pagina) {
  max-width: none;
  padding-inline: 0;
}

/* Cada facto é uma célula de grelha: não pode empurrar a linha. */
.as-site .as-facto { min-width: 0; }