/* ================================================
   PATCH — GPE Huíla
   Carregar DEPOIS de style.css e candidaturas.css:
     <link rel="stylesheet" href="assets/css/style.css"/>
     <link rel="stylesheet" href="assets/css/candidaturas.css"/>
     <link rel="stylesheet" href="assets/css/patch.css"/>   <-- novo
   ================================================ */

/* ---------- 1. HERO: imagem de fundo "morta"/desalinhada ---------- */
/* O problema: .hero__img-placeholder é pintado por cima de .hero__orb no DOM,
   por isso as esferas animadas ficavam escondidas atrás de uma foto opaca, e o
   overlay ia até branco 100% sólido, lavando a imagem quase por completo.
   Além disso 100vh em mobile "salta" quando a barra do navegador aparece/desaparece. */

.hero { min-height: 100svh; }

.hero__bg { z-index: 0; }
.hero__orb { z-index: 1; }               /* esferas voltam a aparecer por cima da foto */
.hero__img-placeholder {
  z-index: 0;
  background-image: url('../img/workshop.jpg');
  background-position: center 30%;        /* ajuste o enquadramento da foto aqui */
  background-size: cover;
  background-repeat: no-repeat;
}
.hero__img-overlay {
  z-index: 1;
  /* overlay mais suave — a foto passa a ser visível, não "lavada" a branco */
  background: linear-gradient(180deg,
    rgba(255,255,255,.25) 0%,
    rgba(255,255,255,.55) 55%,
    rgba(255,255,255,.92) 100%);
}
.hero__content { z-index: 2; }
.hero__scroll-hint { z-index: 2; }

@media (max-width: 768px) {
  .hero { min-height: auto; padding-block: 7rem 3rem; }
  .hero__img-placeholder { background-position: center 20%; }
  .hero__scroll-hint { display: none; } /* evita sobrepor o conteúdo em ecrãs curtos */
}

/* ---------- 2. MENU MOBILE: faltava opção para fechar ---------- */

.nav-close {
  display: none;
  position: fixed;
  top: 1.1rem; right: 1.25rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  align-items: center; justify-content: center;
  z-index: 1100;
}
.nav-close svg { width: 20px; height: 20px; color: var(--clr-text); }
.navbar__nav.open + .nav-close { display: flex; }

@media (max-width: 768px) {
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.nav-open { overflow: hidden; }
}

/* ---------- 3. FICHA DE CANDIDATURA: sair da "caixinha" ---------- */
.form-page { padding-block: 6.5rem 3rem; }

.form-wrapper {
  border-radius: var(--radius-xl);
}

@media (max-width: 700px) {
  .form-wrapper {
    max-width: 100%;
    border-radius: 0;
    border-left: none; border-right: none;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem)); /* estica até à margem do ecrã */
    box-shadow: none;
  }
  .form-header { padding: 1.5rem 1.25rem 1.1rem; }
  .form-body { padding: 1.25rem; }
}

/* topo da página do formulário: links de retorno lado a lado */
.form-page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.form-page__back-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.form-page__back-links a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; color: var(--clr-text-muted);
  transition: color var(--transition);
}
.form-page__back-links a:hover { color: var(--clr-blue); }

/* barra de acções fixa no fundo do ecrã em mobile — evita ter de rolar até ao fim */
@media (max-width: 700px) {
  .form-actions {
    position: sticky;
    bottom: 0; left: 0; right: 0;
    background: var(--clr-surface);
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
    margin: 1.5rem -1.25rem -1.25rem;
    border-top: 1px solid var(--clr-border);
    box-shadow: 0 -4px 16px rgba(0,0,0,.06);
    z-index: 5;
  }
  .form-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- 4. Validação em tempo real dos campos ---------- */
.form-group.is-valid .form-input,
.form-group.is-valid select {
  border-color: var(--clr-emerald);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.form-group.is-invalid .form-input,
.form-group.is-invalid select {
  border-color: var(--clr-rose);
  box-shadow: 0 0 0 3px rgba(244,63,94,.12);
}
.field-msg {
  font-size: .76rem;
  margin-top: -.1rem;
  display: none;
  align-items: center;
  gap: .35rem;
}
.field-msg svg { width: 13px; height: 13px; flex-shrink: 0; }
.form-group.is-invalid .field-msg--error { display: flex; color: var(--clr-rose); }
.form-group.is-valid .field-msg--ok { display: flex; color: var(--clr-emerald); }

/* ---------- 5. Nota de segurança no topo do formulário ---------- */
.security-note {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  background: rgba(59,130,246,.06);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: var(--radius-md);
  font-size: .8rem;
  color: var(--clr-text-muted);
  margin-bottom: 1.25rem;
}
.security-note svg { color: var(--clr-blue); flex-shrink: 0; margin-top: .1rem; }