/* Le pagine pubbliche delle candidature: modulo, conferma, informativa.
   ============================================================================

   Foglio a sé, e non una sezione di `style.css`, per due ragioni che vanno
   insieme. La prima è che queste pagine hanno un'identità visiva **diversa**:
   sono quelle che finiscono dentro abinsula.com, e devono somigliare a quel
   sito, non a SkillHub. Tenere due palette nello stesso file avrebbe voluto
   dire, alla prima modifica, un colore del sito finito su una pagina interna.
   La seconda è il peso: incorniciata in un iframe, questa pagina scaricava
   duemila righe di stile di cui usava trenta.

   I valori non sono a occhio: sono letti dalla pagina vera
   (https://abinsula.com/it/careers/candidatura-spontanea) il 9 settembre 2026.
   Stanno tutti nelle variabili qui sotto: se il sito cambia palette, si
   cambiano qui e basta.

   Il carattere è Inter, che il sito ospita per conto suo. Qui **non** si carica
   da un servizio esterno: sarebbe una chiamata a un terzo dal browser di ogni
   candidato, cioè un trattamento in più dentro un'informativa che parla di
   minimizzazione. Si dichiara Inter e si ripiega sul carattere di sistema, che
   è la stessa famiglia geometrica: la differenza la vede un grafico, non un
   candidato. Per averlo identico va ospitato qui, ed è una decisione che ha un
   file binario dentro, quindi si prende a voce. */

:root {
  --ab-navy: #0d1931;        /* titoli, etichette, testo del pulsante */
  --ab-testo: #0a0a0a;       /* il corpo del testo */
  --ab-grigio: #5b6472;      /* testo secondario */
  --ab-giallo: #fac31f;      /* il pulsante */
  --ab-giallo-scuro: #e8b30d;
  --ab-scheda: #f8f8f8;      /* il fondo della scheda del modulo */
  --ab-bordo: #e5e7eb;       /* il bordo dei campi */
  --ab-raggio: 10px;
  --ab-carattere: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body.ab {
  margin: 0; background: #fff; color: var(--ab-testo);
  font-family: var(--ab-carattere); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ab-navy); }
a:hover { text-decoration: none; }

/* ------------------------------------------------------------- intestazione */
/* La barra con il nome della piattaforma esiste solo quando la pagina si apre
   da sé. Incorniciata dentro il sito sparisce: lì l'intestazione ce l'ha già
   la pagina che ospita, e due intestazioni una sopra l'altra si leggono come
   un errore. */
.ab-top { border-bottom: 1px solid var(--ab-bordo); }
.ab-top-inner {
  max-width: 1120px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ab-marchio {
  font-size: 18px; font-weight: 700; color: var(--ab-navy);
  letter-spacing: -0.3px; text-decoration: none;
}
.ab-marchio small {
  font-weight: 500; color: var(--ab-grigio); font-size: 12px; margin-left: 8px;
  letter-spacing: 0;
}

/* selettore di lingua: due sigle, come nella piattaforma ma con questa palette */
.ab-lingua { display: flex; border: 1px solid var(--ab-bordo); border-radius: 999px; overflow: hidden; }
.ab-lingua button {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 10px; color: var(--ab-grigio);
}
.ab-lingua button:hover { background: var(--ab-scheda); color: var(--ab-navy); }
.ab-lingua button.on { background: var(--ab-navy); color: #fff; }

/* ------------------------------------------------------------------ pagina */
.ab-pagina { max-width: 1120px; margin: 0 auto; padding: 48px 24px 64px; }
/* Incorniciata: niente margini, niente fondo, niente respiro in cima. Dentro
   la pagina del sito si vede solo la scheda, come se fosse sua. */
body.ab-incorporato .ab-pagina { padding: 0; max-width: none; }

.ab-titolo {
  font-size: 48px; font-weight: 700; color: var(--ab-navy);
  line-height: 1.15; letter-spacing: -1.2px; margin: 0 0 8px;
}
@media (max-width: 720px) { .ab-titolo { font-size: 34px; letter-spacing: -0.6px; } }

/* Le due colonne: a sinistra il richiamo, a destra il modulo. Le proporzioni
   sono quelle del sito (4 e 8 colonne su dodici). */
.ab-griglia {
  display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start;
}
@media (max-width: 900px) { .ab-griglia { grid-template-columns: 1fr; gap: 24px; } }
/* Incorniciata, la colonna di sinistra non c'è (il richiamo lo fa la pagina che
   ospita) e il modulo diventa l'unico contenuto: senza questa riga finiva nella
   traccia stretta, larga un terzo, con due terzi di bianco accanto. */
body.ab-incorporato .ab-griglia { grid-template-columns: 1fr; }

.ab-occhiello {
  font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--ab-navy); margin: 0 0 12px;
}
.ab-intro { margin: 0; color: var(--ab-grigio); font-size: 15px; }
.ab-intro + .ab-intro { margin-top: 12px; }

/* -------------------------------------------------------------- la scheda */
.ab-scheda-modulo {
  background: var(--ab-scheda); border-radius: var(--ab-raggio); padding: 32px;
}
@media (max-width: 720px) { .ab-scheda-modulo { padding: 20px; } }
.ab-obbligatori { margin: 0 0 20px; font-size: 13px; color: var(--ab-grigio); }

.ab-righe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .ab-righe { grid-template-columns: 1fr; } }

.ab-campo { display: block; margin-bottom: 16px; }
.ab-campo > span.ab-etichetta {
  display: block; font-size: 14px; font-weight: 600; color: var(--ab-navy);
  margin-bottom: 6px;
}
/* Sul sito le etichette dei campi di testo stanno **dentro** il campo, come
   segnaposto, e non sopra. Copiare l'aspetto senza copiarne il difetto: il
   segnaposto sparisce appena si scrive, e chi legge con un lettore di schermo
   resterebbe senza. L'etichetta quindi c'è, nel documento, ed è solo invisibile
   a chi guarda. Il campo del CV la tiene visibile, come nell'originale: un
   caricamento file senza etichetta non si capisce che cos'è. */
.ab-campo > span.ab-solo-lettore {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ab-campo input[type="text"], .ab-campo input[type="email"],
.ab-campo input[type="tel"], .ab-campo textarea, .ab-campo input[type="file"] {
  width: 100%; background: #fff; color: var(--ab-testo);
  border: 1px solid var(--ab-bordo); border-radius: var(--ab-raggio);
  font-family: inherit; font-size: 14px; padding: 9px 12px;
}
.ab-campo textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.ab-campo input::placeholder, .ab-campo textarea::placeholder { color: #9aa1ad; }
.ab-campo input:focus, .ab-campo textarea:focus {
  outline: none; border-color: var(--ab-navy);
  box-shadow: 0 0 0 3px rgba(13, 25, 49, 0.08);
}
.ab-campo input[type="file"] { padding: 7px 12px; font-size: 13px; }
.ab-campo input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--ab-navy);
  background: #fff; border: 1px solid var(--ab-bordo); border-radius: 999px;
  padding: 4px 14px; margin-right: 12px; cursor: pointer;
}
.ab-campo input[type="file"]::file-selector-button:hover { background: var(--ab-scheda); }
.ab-nota { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ab-grigio); }

/* Le due spunte: informativa (obbligatoria) e conservazione (facoltativa). */
.ab-spunta {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--ab-testo); margin-top: 14px; cursor: pointer;
}
.ab-spunta input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--ab-navy); }
.ab-spunta small { display: block; color: var(--ab-grigio); font-size: 12.5px; margin-top: 2px; }

.ab-azioni { display: flex; justify-content: flex-end; margin-top: 24px; }
.ab-invia {
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--ab-navy); background: var(--ab-giallo);
  border: 0; border-radius: 999px; padding: 12px 28px; cursor: pointer;
}
.ab-invia:hover { background: var(--ab-giallo-scuro); }
.ab-invia:focus-visible { outline: 3px solid rgba(13, 25, 49, 0.35); outline-offset: 2px; }

/* La trappola anti-robot: fuori dallo schermo, non `display:none`, perché
   alcuni robot saltano proprio ciò che è nascosto in quel modo. */
.ab-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------- messaggi */
.ab-avviso {
  border-radius: var(--ab-raggio); padding: 14px 16px; margin-bottom: 20px;
  font-size: 14px; background: #fdecec; color: #8c1d18;
}
.ab-avviso ul { margin: 6px 0 0; padding-left: 18px; }
.ab-avviso b { font-weight: 600; }

/* ---------------------------------------------------- conferma e informativa */
.ab-testo-lungo { max-width: 760px; }
.ab-testo-lungo h2 {
  font-size: 20px; font-weight: 700; color: var(--ab-navy); margin: 28px 0 8px;
  letter-spacing: -0.2px;
}
.ab-testo-lungo h2:first-of-type { margin-top: 0; }
.ab-testo-lungo p { margin: 0 0 12px; }
.ab-collegamento {
  display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600;
  color: var(--ab-navy); text-decoration: underline; text-underline-offset: 3px;
}

.ab-pie {
  border-top: 1px solid var(--ab-bordo); margin-top: 48px;
  padding: 20px 24px; text-align: center; font-size: 13px; color: var(--ab-grigio);
}
.ab-pie a { color: var(--ab-grigio); }