/* ==========================================================================
   ottica.ablavoro.com — BASE
   Reset, contenitori, componenti condivisi.
   Dipende da tokens.css, che va caricato PRIMA di questo file.
   Le sezioni non ridefiniscono nulla di quanto sta qui: lo usano.
   Breakpoint: max-width 1100px e max-width 700px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET SOBRIO
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bianco);
  color: var(--testo);
  font-family: var(--font);
  font-size: var(--fs-18);
  font-weight: var(--w-normale);
  line-height: var(--lh-18);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Rete di sicurezza contro lo sfondamento laterale. `clip` e non `hidden`:
     `hidden` creerebbe un contenitore di scorrimento e romperebbe un header
     in position:sticky. Resta comunque un errore avere contenuto che sborda:
     va corretto nella sezione, non nascosto qui. */
  overflow-x: clip;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

a { color: inherit; }

/* --------------------------------------------------------------------------
   2. FOCUS — sempre visibile, colore ribaltato dentro le bande scure
   -------------------------------------------------------------------------- */
/* L'anello segue da solo il raggio dell'elemento: non dichiarare qui
   border-radius, squadrerebbe gli angoli dei campi al focus. */
:focus-visible {
  outline: 3px solid var(--focus-colore);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. SKIP-LINK
   -------------------------------------------------------------------------- */
/* Nascosto col ritaglio e non con una traslazione: una traslazione lascerebbe
   fuoriuscire l'ombra in cima alla pagina. */
.salta-al-contenuto {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-skip);
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--blu);
  color: var(--bianco);
  font-size: var(--fs-16);
  font-weight: var(--w-forte);
  line-height: var(--lh-16);
  text-decoration: none;
  border-radius: var(--raggio-btn);
}

.salta-al-contenuto:focus {
  width: auto;
  height: auto;
  margin: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  overflow: visible;
  clip-path: none;
  box-shadow: var(--ombra-card);
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. CONTENITORI
   Due sole larghezze in tutta la pagina:
   .wrap          = colonna larga   1080px (x=180 sul frame 1440)
   .wrap--stretto = colonna stretta  896px (x=272 sul frame 1440)
   La larghezza dichiarata e' quella del CONTENUTO: il padding laterale sta
   fuori, quindi a 1440px il contenuto cade esattamente dove lo mette Figma.
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--w-largo) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--stretto {
  max-width: calc(var(--w-stretto) + var(--gutter) * 2);
}

/* --------------------------------------------------------------------------
   5. BANDE
   .banda          fondo bianco (default)
   .banda--chiara  fondo #F4F7F9
   .banda--scura   fondo #244861: ribalta i colori di contesto, cosi' titoli,
                   prosa, occhielli, filetti, pulsanti a contorno e anello di
                   focus si adattano da soli. Nessuna sezione deve riscrivere
                   a mano il colore del testo su fondo scuro.
   -------------------------------------------------------------------------- */
.banda {
  position: relative;
  padding-block: var(--pad-banda);
  background: var(--superficie);
}

.banda--chiara {
  --superficie: var(--fondo-chiaro);
}

.banda--scura {
  --superficie: var(--blu);
  --ink-titolo: var(--bianco);
  --ink-corpo: var(--bianco);
  --ink-occhiello: var(--azzurro-ink);
  --filetto-colore: var(--bianco);
  --contorno-colore: var(--bianco);
  --contorno-velo: var(--velo-bianco);
  --focus-colore: var(--focus-su-scuro);
  color: var(--bianco);
}

/* --------------------------------------------------------------------------
   6. TIPOGRAFIA CONDIVISA
   -------------------------------------------------------------------------- */

/* Occhiello: nel Figma il testo e' gia' scritto in maiuscolo e la crenatura
   e' 0. text-transform e' solo una rete di sicurezza. */
.eyebrow {
  display: block;
  margin: 0;
  color: var(--ink-occhiello);
  font-size: var(--fs-16);
  font-weight: var(--w-semi);
  line-height: var(--lh-16-corto);
  letter-spacing: var(--ls-occhiello);
  text-transform: uppercase;
}

/* Titolo di sezione: 44px di default, 32px con il modificatore --m.
   Il colore e' nero pieno nel Figma (non --testo). */
.titolo-sezione {
  color: var(--ink-titolo);
  font-size: var(--fs-h2);
  font-weight: var(--w-semi);
  line-height: var(--lh-h2);
  letter-spacing: 0;
  text-wrap: balance;
}

.titolo-sezione--m {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

/* Filetto: riga piena sotto il blocco titolo, larga quanto il contenitore.
   Misurata sul render: 2px, nero pieno (bianco dentro .banda--scura).
   Si applica all'elemento che chiude il blocco titolo — di solito l'h2,
   oppure il div che raccoglie occhiello + h2 (sez. 07 e 11).
   Il gap standard e' 18px; la sez. 03 usa 30px sovrascrivendo --filetto-gap. */
.filetto {
  padding-bottom: var(--filetto-gap);
  border-bottom: var(--filetto-spessore) solid var(--filetto-colore);
}

/* Prosa: 18/28. ATTENZIONE: nel Figma i paragrafi consecutivi NON hanno
   spazio fra loro, scorrono come righe continue (verificato sul render della
   sez. 03 e sulle altezze dei box di testo). Il margine e' quindi zero:
   usa .prosa--spaziata solo dove il render mostra davvero uno stacco. */
.prosa {
  color: var(--ink-corpo);
  font-size: var(--fs-18);
  font-weight: var(--w-normale);
  line-height: var(--lh-18);
}

.prosa p { margin: 0; }

/* uno stacco pari a una riga piena: 1.555556em di 18px = 28px */
.prosa--spaziata p + p { margin-top: 1.555556em; }

.prosa strong,
.prosa b { font-weight: var(--w-forte); }

.prosa a { color: inherit; }

/* Link di testo sottolineato (privacy policy, mailing list, fonte) */
.link-testo {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   7. PULSANTI
   Geometria Figma: altezza 52px, padding laterale 24px, etichetta
   Archivo 800 18/28, angoli 2px con l'angolo BASSO-DESTRA a 16px
   (--raggio-btn-br: e' la firma del design, vale per tutti e sette i pulsanti
   della pagina, pieni e a contorno — vedi la nota in tokens.css).
   .btn           pieno blu, testo bianco (default)
   .btn--chiaro   pieno bianco, testo blu — su banda scura
   .btn--contorno trasparente con bordo 1px: prende il colore dal contesto
                  (blu su fondo chiaro, bianco dentro .banda--scura)
   .btn--pieno    occupa tutta la larghezza disponibile
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-6);
  border: 0;
  border-radius: var(--raggio-btn) var(--raggio-btn) var(--raggio-btn-br) var(--raggio-btn);
  background: var(--blu);
  color: var(--bianco);
  font-family: var(--font);
  font-size: var(--fs-18);
  font-weight: var(--w-extra);
  line-height: var(--lh-18-titolo);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--blu-hover); }
.btn:active { background: var(--blu-premuto); }

.btn--chiaro {
  background: var(--bianco);
  color: var(--blu);
}

.btn--chiaro:hover { background: var(--chiaro-hover); }
.btn--chiaro:active { background: var(--chiaro-premuto); }

.btn--contorno {
  background: transparent;
  color: var(--contorno-colore);
  box-shadow: inset 0 0 0 1px var(--contorno-colore);
}

.btn--contorno:hover { background: var(--contorno-velo); }
.btn--contorno:active { background: var(--contorno-velo); }

.btn--pieno {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. CAMPI DEL FORM
   Geometria Figma: etichetta 12px sopra, campo alto 50px, bordo #C0C0C0,
   angoli 8px, testo 16/24, padding laterale 20px.
   Il gruppo etichetta+campo e' alto 64px: 14px di etichetta + 50px di campo.
   -------------------------------------------------------------------------- */
.campo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 12px di etichetta + 2px = i 14px che il Figma lascia sopra il campo,
   per un gruppo alto esattamente 64px (14 + 50).
   Il rientro di 8px e' del componente, non di un solo form: nella scheda del
   Figma il nodo TEXT «Label» sta 8px dentro il frame del campo in ENTRAMBI i
   form (hero: campo x=772, etichetta x=780 — newsletter: campo x=1002,
   etichetta x=1010). Stava solo nella sez. 09 e il form principale, quello
   che porta il curriculum, era l'istanza fuori posto. */
.campo__etichetta {
  margin-bottom: var(--sp-05);
  padding-inline-start: var(--sp-2);
  color: var(--testo-etichetta);
  font-size: var(--fs-12);
  font-weight: var(--w-normale);
  line-height: var(--lh-12-corto);
}

.campo__input {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--bordo-comando);
  border-radius: var(--raggio-campo);
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--font);
  font-size: var(--fs-16);
  font-weight: var(--w-normale);
  line-height: var(--lh-16);
  appearance: none;
}

.campo__input::placeholder {
  color: var(--testo-placeholder);
  opacity: 1;
}

.campo__input:hover { border-color: var(--blu); }

.campo__input:focus-visible {
  outline: 3px solid var(--focus-colore);
  outline-offset: 1px;
  border-color: var(--blu);
}

/* textarea: stessa pelle, altezza libera */
textarea.campo__input {
  height: auto;
  min-height: 120px;
  padding: var(--sp-3) var(--sp-5);
  resize: vertical;
}

/* Select con la freccia del Figma (vettore 12x6, tratto 1.5px, #244861).
   Il colore e' scritto dentro la data URI perche' un SVG inline non puo'
   leggere una custom property: e' l'unica eccezione alla regola 2 nei
   componenti condivisi, ed e' lo stesso valore di --blu. */
.campo__input--select {
  padding-right: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23244861' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-5) center;
  cursor: pointer;
}

/* Finche' e' selezionata l'opzione neutra (value=""), la tendina e' un
   segnaposto e non un valore: prende il grigio dei placeholder, come fanno
   gia' gli input e il campo file della hero. */
.campo__input--select:has(option[value=""]:checked) {
  color: var(--testo-placeholder);
}

/* Riga di consenso: quadretto 18x18, angoli 4px, testo 12/20 */
.consenso {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  color: var(--quasi-nero);
  font-size: var(--fs-12);
  font-weight: var(--w-normale);
  line-height: var(--lh-12);
  cursor: pointer;
}

.consenso__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid var(--bordo-comando);
  border-radius: var(--raggio-checkbox);
  background: var(--bianco);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.consenso__box:checked {
  border-color: var(--blu);
  background-color: var(--blu);
  /* spunta bianca: stesso motivo di eccezione della freccia del select */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* --------------------------------------------------------------------------
   9. SEGNAPOSTO
   Blocchi il cui testo nel Figma e' Lorem ipsum: il testo resta in pagina,
   il contorno tratteggiato dice che va sostituito dal cliente.
   Contorno leggero, nessun ingombro aggiunto: usa outline, non border.
   -------------------------------------------------------------------------- */
.segnaposto {
  position: relative;
  outline: 1px dashed rgba(42, 114, 186, .55);
  outline-offset: 6px;
}

@media (hover: hover) {
  .segnaposto::after {
    content: attr(data-segnaposto);
    position: absolute;
    top: -10px;
    right: 0;
    z-index: var(--z-fluttua);
    padding: 2px var(--sp-2);
    border-radius: var(--raggio-btn);
    background: var(--accento-ink);
    color: var(--bianco);
    font-size: 11px;
    font-weight: var(--w-semi);
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }

  .segnaposto:hover::after { opacity: 1; }
}

/* --------------------------------------------------------------------------
   10. UTILITA' MINIME
   -------------------------------------------------------------------------- */
.solo-lettori-schermo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   11. MOVIMENTO — solo se l'utente non ha chiesto di ridurlo
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .btn,
  .campo__input,
  .consenso__box,
  .salta-al-contenuto,
  .segnaposto::after {
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      color var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease),
      opacity var(--dur-veloce) var(--ease),
      transform var(--dur) var(--ease);
  }
}

/* --------------------------------------------------------------------------
   12. ADATTAMENTO — 1100px
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root {
    --pad-banda: clamp(48px, 6vw, 80px);
    --filetto-gap: 16px;
  }
}

/* --------------------------------------------------------------------------
   13. ADATTAMENTO — 700px
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --gutter: var(--gutter-mobile);
    --pad-banda: 48px;
  }

  /* I pulsanti NON diventano a piena larghezza per automatismo: la CTA
     dell'header deve restare compatta. Dove serve, la sezione mette
     .btn--pieno. */
  .campo__input { font-size: var(--fs-16); } /* mai sotto 16px: iOS zooma */

  .segnaposto { outline-offset: 4px; }
}