/* ==========================================================================
   EDILinCloud — landing
   Servito STATICO da public/css/, nessun precompile: il layout lo linka con
   un path assoluto. Bootstrap 5.3.3 arriva da CDN e sta SOPRA di questo file
   nell'ordine di caricamento, quindi qui si puo' overridare senza !important.

   REGOLA CROMATICA DI FAMIGLIA (come gli altri siti inCloud):
   il blu --blu fa la STRUTTURA, l'azzurro --azzurro fa AZIONE e ACCENTO.
   Un solo elemento azzurro per elemento: se ne metti due, non risalta piu'.
   ========================================================================== */

@font-face {
  font-family: "Ganky";
  src: url("/fonts/ganky-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Struttura e accento --- */
  --blu:            #0F5AA8;
  --azzurro:        #2E9BE6;
  /* Azzurro chiaro: l'accento delle sezioni SCURE. L'azzurro pieno su fondo
     blu scuro sta sotto il 4,5:1; questo ci arriva sopra e resta lo stesso
     colore di famiglia. Su fondo bianco non va usato: li' non contrasta. */
  --azzurro-chiaro: #8FCFF7;

  /* --- Colori funzionali: SOLO gli stati della sezione geotracking ---
     Verde = timbratura valida / dipendente in orario, rosso = fuori area.
     Sono l'unica deroga alla regola blu-azzurro e non vanno usati altrove:
     fuori da quel pannello smetterebbero di voler dire «valido» e «bloccato». */
  --verde:          #35D0A5;
  --rosso:          #FF6B6B;

  /* --- Fondali scuri (hero): dal piu' scuro in basso al piu' chiaro in alto --- */
  --scuro-1:        #04101E;
  --scuro-2:        #06182B;
  --scuro-3:        #0A2E52;
  --scuro-4:        #12558F;

  /* --- Testo --- */
  --testo-forte:    #10243B;
  --testo:          #4A5A6B;
  --testo-tenue:    #6B7A8B;
  --testo-chevron:  #8AA0B4;

  /* --- Superfici e bordi --- */
  --bianco:         #FFFFFF;
  --tinta:          #F1F7FD;   /* card dentro i pannelli */
  --filetto:        #E1E9F2;

  /* --- Famiglie tipografiche ---
     Ganky esiste SOLO in peso 400 (unico file disponibile): dove serve un
     peso alto si compensa con dimensione e spaziatura, non con font-weight,
     che produrrebbe un finto grassetto sintetico. */
  --f-display:  "Ganky", "Ubuntu", system-ui, sans-serif;
  --f-titolo:   "Ubuntu", system-ui, sans-serif;
  --f-etichetta:"Poppins", system-ui, sans-serif;
  --f-testo:    "Roboto", system-ui, sans-serif;

  /* --- Ritmo --- */
  --contenuto:  1180px;
  --r-piccolo:  14px;
  --r-medio:    16px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--f-testo);
  color: var(--testo);
  background: var(--bianco);
  -webkit-font-smoothing: antialiased;
}

.edil-contenuto {
  max-width: var(--contenuto);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Occhiello: etichetta in maiuscoletto azzurro, ricorrente in tutte le sezioni */
.edil-occhiello {
  font-family: var(--f-etichetta);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--azzurro);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Accessibilita': una sola dichiarazione globale, le sezioni non la ripetono.
   Chi ha attivato "riduci animazioni" vede la stessa immagine, ferma.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visibile e coerente su tutta la pagina (tastiera) */
:focus-visible {
  outline: 3px solid var(--azzurro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salta al contenuto: primo elemento focusabile, invisibile finche' non serve.
   inset-inline-start e non left: il lato "fuori schermo" deve essere quello da
   cui comincia la lettura, altrimenti in arabo il link parcheggiato a
   -9999px cade dal lato in cui l'RTL fa scorrere la pagina e apre una barra
   orizzontale su tutto il sito. */
.edil-salta {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  background: var(--bianco);
  color: var(--blu);
  padding: 12px 20px;
  /* L'unico angolo arrotondato e' quello opposto all'origine della lettura:
     in fondo, dal lato dove il link finisce. Logico, quindi si specchia. */
  border-radius: 0;
  border-end-end-radius: var(--r-piccolo);
  font-family: var(--f-etichetta);
  font-weight: 600;
}
.edil-salta:focus { inset-inline-start: 0; }