/* ==========================================================================
   Candidaturas · estilos partilhados pelos 3 formulários e pelo seletor
   --------------------------------------------------------------------------
   Estava tudo inline no candidatura.html. Com três formulários passaria a
   estar copiado quatro vezes, e quatro cópias divergem sempre.
   ========================================================================== */

/* ---- o `hidden` tem de ganhar sempre ----
   O atributo hidden do HTML só esconde por causa de uma regra `[hidden]{
   display:none}` do browser, com especificidade (0,1,0). Qualquer regra nossa
   que ponha display no mesmo elemento empata ou ganha — e o `.field{display:
   grid}` do site.css e o `fieldset.field{display:block}` daqui de baixo fazem
   exactamente isso.

   Resultado sem esta linha: as perguntas escondidas continuavam no ecrã. Iam
   desactivadas, portanto não eram enviadas, mas quem respondia "não tenho
   experiência" via na mesma o formulário todo à sua frente. */
[hidden]{display:none !important}

/* ---- cabeçalho mínimo: só a marca, sem saídas ---- */
.cand-topo{padding:clamp(20px,3vw,28px) 0;border-bottom:1px solid var(--line)}
.cand-topo .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cand-topo img{height:26px;width:auto}
.cand-topo span{font-size:.875rem;color:var(--muted)}

.cand-hero{padding-block:clamp(40px,6vw,68px) clamp(24px,3vw,34px)}
.cand-hero h1{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem);letter-spacing:-.03em;max-width:18ch}
.cand-hero p{margin-top:16px;max-width:58ch;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);color:var(--body)}
.cand-selos{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cand-selo{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);
  font-size:.875rem;font-weight:500;color:var(--body);
}
.cand-selo svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}

/* voltar ao seletor de vagas, dentro do formulário */
.cand-voltar{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;
  font-size:.875rem;color:var(--muted);text-decoration:none;
}
.cand-voltar:hover{color:var(--body)}

/* ---- o formulário ---- */
.cand-wrap{max-width:720px;padding-bottom:clamp(56px,8vw,110px)}
.cand-bloco{
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  padding:clamp(22px,3vw,32px);margin-bottom:clamp(16px,2vw,22px);
}
.cand-bloco > legend, .cand-bloco > .legenda{
  font-size:1.125rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;
  margin-bottom:6px;padding:0;
}
.cand-bloco > .nota{font-size:.875rem;color:var(--muted);margin-bottom:20px}
.cand-bloco .contact-form{gap:18px}

/* O select não estava no site.css — o resto do site não tinha nenhum.

   O :not(.telcc) não é decorativo. Sem ele, esta regra (0,1,1) ganhava ao
   .telcc{width:116px} (0,1,0) e o seletor de indicativo esticava-se pela
   linha toda: no telemóvel ficava com 289px e o campo do número com 34,
   impossível de usar. Estava assim nos quatro formulários desde que este
   ficheiro nasceu — o campo do telefone nunca tinha sido visto ao pé do
   seletor num ecrã estreito. */
.field select:not(.telcc){
  width:100%;padding:13px 40px 13px 15px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:1rem;line-height:1.4;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2399a1ac' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}
.field select:focus{outline:none;border-color:var(--accent-soft);box-shadow:0 0 0 3px rgba(45,118,252,.25)}

/* grupos de caixas: alvo de toque grande, uma coluna no telemóvel */
.opcoes{display:grid;grid-template-columns:1fr;gap:9px}
@media (min-width:560px){.opcoes{grid-template-columns:1fr 1fr}}
.opcoes--uma{grid-template-columns:1fr}
@media (min-width:560px){.opcoes--uma{grid-template-columns:1fr}}

/* Respostas curtas — "Sim", "Não", "Até 15 dias" — em duas colunas mesmo no
   telemóvel. Numa coluna, uma pergunta de sim-ou-não ocupava 167px: dois
   blocos enormes para três letras, e o formulário ficava com seis mil pixels
   de altura. A classe é posta à mão porque o CSS não sabe medir texto: em
   opções longas, duas colunas partiam as palavras. */
.opcoes--curtas{grid-template-columns:1fr 1fr}
.opcao{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:12px 14px;min-height:46px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);
  font-size:.9375rem;line-height:1.35;color:var(--body);
  transition:border-color .18s ease,background-color .18s ease;
}
.opcao:hover{border-color:var(--line-strong)}
.opcao input{width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--accent)}
.opcao:has(input:checked){border-color:var(--accent-soft);background:var(--surface-2)}
.opcao input:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}

/* ---- grupos de rádios e caixas usam <fieldset>, não <div> ----
   É o elemento certo: liga o enunciado ao grupo todo para quem usa leitor de
   ecrã. Mas o browser dá-lhe borda, margens e um <legend> com posicionamento
   próprio — e um legend dentro de um grid sai do fluxo no Chrome. Por isso o
   fieldset fica em block com margens explícitas, e não em grid como .field. */
fieldset.field{border:0;padding:0;margin:0;min-width:0;display:block}
fieldset.field > .label-legenda{
  display:block;width:100%;padding:0;margin-bottom:8px;
  font-size:.9375rem;font-weight:500;color:var(--body);
}
fieldset.field > .label-legenda .req{color:var(--accent-soft)}
fieldset.field > .nota{margin:-2px 0 10px;font-size:.875rem;color:var(--muted)}
fieldset.field > .field-hint{margin-top:8px}

/* ---- escala 1-10 ----
   Rádios a sério, não um slider: o slider não diz ao leitor de ecrã em que
   valor está sem trabalho extra, e obriga a arrastar no telemóvel. */
.cand-escala{margin-top:10px}
.cand-escala-linha{display:flex;flex-wrap:wrap;gap:6px}
.cand-escala label{
  flex:1 1 auto;min-width:40px;
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 4px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg);
  font-size:.9375rem;font-weight:500;color:var(--body);
  transition:border-color .18s ease,background-color .18s ease,color .18s ease;
}
.cand-escala label:hover{border-color:var(--line-strong)}
.cand-escala input{position:absolute;opacity:0;width:0;height:0}
.cand-escala label:has(input:checked){
  border-color:var(--accent);background:var(--accent);color:#fff;
}
.cand-escala label:has(input:focus-visible){outline:3px solid var(--accent-soft);outline-offset:2px}
.cand-escala-pontas{
  display:flex;justify-content:space-between;gap:12px;margin-top:8px;
  font-size:.8125rem;color:var(--muted);
}

/* ---- o travão: quem responde "Não" à pergunta de corte ---- */
.cand-parado{
  margin-top:16px;padding:18px 20px;border-radius:var(--radius-lg);
  border:1px solid var(--line-strong);background:var(--surface-2);
}
.cand-parado p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--body)}
.cand-parado p + p{margin-top:10px}
.cand-parado a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.cand-fim{margin-top:8px}
.cand-fim .btn{width:100%;justify-content:center}
.cand-fim .btn[disabled]{opacity:.45;cursor:not-allowed}

.cand-rodape{padding-block:28px;border-top:1px solid var(--line);font-size:.875rem;color:var(--muted)}
.cand-rodape a{color:var(--body);text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Seletor de vagas (/candidatura)
   ========================================================================== */
.cand-vagas{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
@media (min-width:820px){.cand-vagas{grid-template-columns:repeat(3,1fr)}}

.cand-vaga-cartao{
  display:flex;flex-direction:column;gap:10px;
  padding:clamp(22px,3vw,28px);border-radius:var(--radius-lg);
  border:1px solid var(--line);background:var(--surface);
  text-decoration:none;color:inherit;
  transition:border-color .18s ease,transform .18s ease;
}
.cand-vaga-cartao:hover{border-color:var(--accent-soft);transform:translateY(-2px)}
.cand-vaga-cartao h2{font-size:1.1875rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0}
.cand-vaga-cartao p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--body)}
.cand-vaga-cartao .cand-tempo{font-size:.8125rem;color:var(--muted)}
.cand-vaga-cartao .cand-seta{
  margin-top:auto;padding-top:10px;font-size:.9375rem;font-weight:600;color:var(--accent);
}
@media (prefers-reduced-motion:reduce){
  .cand-vaga-cartao{transition:border-color .18s ease}
  .cand-vaga-cartao:hover{transform:none}
}