/* ==========================================================================
   AnySolve Emprego, cartões de vaga, arquivo e filtros do WP Career Board
   Agente 5. Carregar depois de marca.css.

   Regra de leitura do cartão: num telemóvel, em um segundo, tem de sair
   cargo, empresa, província, tipo de contrato, salário, há quanto tempo, e
   se aceita candidatura por WhatsApp. Sete coisas, três níveis de peso.

   Especificidade: os ganchos do plugin entram dentro de :where() para não
   somarem peso, e quem carrega a propriedade é a nossa classe. Fica em
   0,2,0, que chega para passar à frente dos selectores de elemento do
   BuddyX sem um unico !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. O cartão
   -------------------------------------------------------------------------- */
.as-site :where(.wcb-job-card, .as-vaga) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--as-e-2);
  padding: var(--as-e-4) var(--as-e-4) var(--as-e-5);
  background-color: var(--as-superficie);
  border: 1px solid var(--as-borda);
  border-top: 2px solid var(--as-borda-forte);
  border-radius: var(--as-r-papel);
  box-shadow: none;
  transition: border-color 0.12s linear;
}

.as-site :where(.wcb-job-card, .as-vaga):hover,
.as-site :where(.wcb-job-card, .as-vaga):focus-within {
  border-top-color: var(--as-marca);
}

/* Linha de cima: quando foi posta, e a marca do WhatsApp. */
.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--as-e-2);
  min-height: 24px;
}

.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__quando {
  font-size: var(--as-t-rotulo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--as-texto-fraco);
  font-variant-numeric: tabular-nums;
}

.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__quando--nova {
  color: var(--as-marca-tinta);
}

/* Cargo: o único elemento grande do cartão. */
.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__cargo {
  margin: 0;
  font-size: var(--as-t-md);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--as-texto);
}

.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__cargo a {
  color: inherit;
  text-decoration: none;
}

/* O cartão inteiro é alvo de toque, sem prender o resto das ligações. */
.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__cargo a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__cargo a:hover {
  text-decoration: underline;
  text-decoration-color: var(--as-marca);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
}

.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__empresa {
  margin: 0;
  font-size: var(--as-t-base);
  font-weight: 600;
  color: var(--as-texto-suave);
}

.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__empresa a {
  position: relative;
  z-index: 1;
  color: inherit;
}

/* Meta: província e tipo de contrato, com ícone mínimo. */
.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-2) var(--as-e-4);
  margin: var(--as-e-1) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--as-t-meta);
  color: var(--as-texto-fraco);
}

.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__meta svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--as-texto-fraco);
}

/* Salário: o número é o argumento, por isso é tabular e pesado. */
.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__salario {
  margin: var(--as-e-2) 0 0;
  padding-top: var(--as-e-3);
  border-top: 1px dashed var(--as-borda);
  font-size: var(--as-t-base);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--as-texto);
}

.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__salario span {
  font-weight: 600;
  color: var(--as-texto-fraco);
  letter-spacing: 0;
}

.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__salario--sem {
  font-weight: 600;
  color: var(--as-texto-fraco);
}

/* Botão de candidatura dentro do cartão, quando existir. */
.as-site :where(.wcb-job-card, .as-vaga) .as-vaga__accao {
  position: relative;
  z-index: 1;
  margin-top: var(--as-e-4);
}

/* Cartão em destaque: mais tinta, sem cor nova. */
.as-site :where(.wcb-job-card, .as-vaga).as-vaga--destaque {
  border-top-color: var(--as-marca);
}

@media (min-width: 700px) {
  .as-site :where(.wcb-job-card, .as-vaga) {
    padding: var(--as-e-5) var(--as-e-5) var(--as-e-6);
  }
}

/* --------------------------------------------------------------------------
   2. Neutralizar o que o tema costuma pintar por baixo
   -------------------------------------------------------------------------- */
.as-site :where(.wcb-job-card, .as-vaga) :is(h2, h3, h4) {
  font-family: var(--as-letra);
}

.as-site :where(.wcb-job-card, .as-vaga) img.avatar,
.as-site :where(.wcb-job-card, .as-vaga) .wcb-job-card__logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--as-r-papel);
  background-color: var(--as-superficie-2);
}

/* --------------------------------------------------------------------------
   3. O arquivo: filtros e resultados
   Telemóvel: os filtros ficam por cima, num painel fechado por defeito
   (o plugin usa <details> ou uma classe de aberto; os dois casos abaixo).
   -------------------------------------------------------------------------- */
.as-site :where(.wcb-archive-shell) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--as-e-5);
  width: 100%;
  max-width: var(--as-larg);
  margin-inline: auto;
  padding: var(--as-e-6) var(--as-e-4) var(--as-e-16);
}

.as-site :where(.wcb-archive-main) {
  display: grid;
  gap: var(--as-e-4);
  align-content: start;
  min-width: 0;
}

.as-site :where(.wcb-archive-main) .wcb-jobs-list,
.as-site :where(.wcb-archive-main) .wcb-job-list {
  display: grid;
  gap: var(--as-e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.as-site .as-arquivo__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--as-e-3);
  padding-bottom: var(--as-e-3);
  border-bottom: 2px solid var(--as-borda-forte);
}

.as-site .as-arquivo__conta {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* --- painel de filtros --- */
.as-site :where(.wcb-filter-panel) {
  min-width: 0;
  padding: var(--as-e-4);
  background-color: var(--as-superficie);
  border: 1px solid var(--as-borda);
  border-top: 2px solid var(--as-borda-forte);
  border-radius: var(--as-r-papel);
  align-self: start;
}

.as-site :where(.wcb-filter-panel) :is(h2, h3, .wcb-filter-panel__titulo) {
  font-size: var(--as-t-rotulo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--as-texto-fraco);
  margin: 0 0 var(--as-e-3);
}

.as-site :where(.wcb-filter-panel) .wcb-filter-group,
.as-site :where(.wcb-filter-panel) fieldset {
  margin: 0 0 var(--as-e-5);
  padding: 0 0 var(--as-e-5);
  border: 0;
  border-bottom: 1px solid var(--as-borda);
}

.as-site :where(.wcb-filter-panel) legend {
  padding: 0;
  font-size: var(--as-t-rotulo);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--as-texto-fraco);
}

.as-site :where(.wcb-filter-panel) label {
  display: flex;
  align-items: center;
  gap: var(--as-e-3);
  min-height: var(--as-toque);
  font-size: var(--as-t-base);
  color: var(--as-texto);
  cursor: pointer;
}

.as-site :where(.wcb-filter-panel) :is(input[type="checkbox"], input[type="radio"]) {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--as-marca);
}

.as-site :where(.wcb-filter-panel) :is(input[type="text"], input[type="search"], select) {
  width: 100%;
  min-height: var(--as-toque);
  padding: var(--as-e-2) var(--as-e-3);
  border: 1px solid var(--as-borda-forte);
  border-radius: var(--as-r-toque);
  background-color: var(--as-papel);
  color: var(--as-texto);
  font-family: inherit;
  font-size: var(--as-t-base);
}

.as-site :where(.wcb-filter-panel) .wcb-filter-count {
  margin-inline-start: auto;
  font-size: var(--as-t-meta);
  font-variant-numeric: tabular-nums;
  color: var(--as-texto-fraco);
}

/* Filtros escolhidos, em pílula, para se poderem tirar com o polegar. */
.as-site .as-filtros-postos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-2);
}

.as-site .as-filtro-posto {
  display: inline-flex;
  align-items: center;
  gap: var(--as-e-2);
  min-height: 36px;
  padding: 0 var(--as-e-3);
  border: 1px solid var(--as-marca-borda);
  border-radius: var(--as-r-pilula);
  background-color: var(--as-marca-tenue);
  color: var(--as-marca-tinta);
  font-size: var(--as-t-meta);
  font-weight: 700;
  text-decoration: none;
}

/* --- computador: filtros à esquerda, colados --- */
@media (min-width: 900px) {
  .as-site :where(.wcb-archive-shell) {
    grid-template-columns: 272px minmax(0, 1fr);
    gap: var(--as-e-10);
    padding-inline: var(--as-e-8);
  }
  .as-site :where(.wcb-filter-panel) {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
  }
  .as-site :where(.wcb-archive-main) .wcb-jobs-list,
  .as-site :where(.wcb-archive-main) .wcb-job-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .as-site :where(.wcb-archive-shell) { grid-template-columns: 300px minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   4. Paginação
   -------------------------------------------------------------------------- */
.as-site :where(.wcb-archive-main) .wcb-pagination,
.as-site .as-paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--as-e-2);
  margin-top: var(--as-e-6);
  padding-top: var(--as-e-5);
  border-top: 1px solid var(--as-borda);
}

.as-site :where(.wcb-archive-main) .wcb-pagination a,
.as-site :where(.wcb-archive-main) .wcb-pagination span,
.as-site .as-paginacao a,
.as-site .as-paginacao span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--as-toque);
  min-height: var(--as-toque);
  padding: 0 var(--as-e-3);
  border: 1px solid var(--as-borda-forte);
  border-radius: var(--as-r-toque);
  color: var(--as-texto);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.as-site :where(.wcb-archive-main) .wcb-pagination .current,
.as-site .as-paginacao .current {
  background-color: var(--as-marca);
  border-color: var(--as-marca);
  color: var(--as-sobre-marca);
}

/* --------------------------------------------------------------------------
   5. Página de uma vaga: o botão de WhatsApp não se perde no fim.
   -------------------------------------------------------------------------- */
.as-site .as-vaga-fixa {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: grid;
  gap: var(--as-e-2);
  padding: var(--as-e-3) var(--as-e-4);
  margin-inline: calc(var(--as-e-4) * -1);
  background-color: var(--as-superficie);
  border-top: 2px solid var(--as-estado-zap-borda);
}

@media (min-width: 900px) {
  .as-site .as-vaga-fixa {
    position: static;
    margin-inline: 0;
    border: 1px solid var(--as-borda);
    border-top: 2px solid var(--as-estado-zap);
    border-radius: var(--as-r-papel);
    padding: var(--as-e-5);
  }
}

/* --------------------------------------------------------------------------
   6. Impressão de uma lista de vagas
   -------------------------------------------------------------------------- */
@media print {
  .as-site :where(.wcb-filter-panel),
  .as-site .as-vaga-fixa { display: none; }
  .as-site :where(.wcb-archive-shell) { display: block; }
  .as-site :where(.wcb-job-card, .as-vaga) {
    border: 1pt solid var(--as-impressao-linha);
    break-inside: avoid;
    margin-bottom: 8pt;
  }
}