@charset "utf-8";
/* ==========================================================================
   emme-studio.eu — foglio di stile unico
   --------------------------------------------------------------------------
   Sostituisce il CSS che prima era scritto dentro ogni singola pagina.
   Da qui in avanti: una sola modifica qui cambia TUTTE le pagine del sito.

   PERCORSI: questo file sta in /css/, quindi le immagini si richiamano
   con ../img/nomefile — non con img/nomefile.

   PALETTE (invariata rispetto al sito 2012):
     verde  #99CC01   sfondo pagina, separatori del menu
     bianco #FFFFFF   titoli, righe orizzontali, testo del footer
     nero   #000000   testo corrente e link

   BREAKPOINT UNICO: 800/801px — allineato alla larghezza fissa (800px) del
   layout desktop originale, non un valore arbitrario:
     fino a 800px  = telefono   (colonna singola, menu a scomparsa)
     da 801px      = desktop    (impaginazione a 800px come l'originale)

   Ultimo aggiornamento: 01/08/2026 (fase 2, dopo revisione incrociata con
   una sessione parallela — vedi nota in fondo al file).
   ========================================================================== */

:root {
  --verde:  #99CC01;
  --bianco: #FFFFFF;
  --nero:   #000000;
  --font:   Verdana, Arial, Helvetica, sans-serif;
  /* 800px di contenuto + 16px di margine per lato = 832px */
  --contenitore: 832px;
  --margine: 16px;
}

/* --- azzeramenti ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;  /* impedisce a iOS di ingrandire il testo da solo */
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;                 /* telefono: soglia minima leggibilità,
                                       coincide con la soglia anti-zoom iOS;
                                       su desktop scende a 12px (§ sotto) */
  line-height: 1.6;
  color: var(--nero);
  background-color: var(--verde);
  /* NIENTE background-image: img/BG.gif e' un'immagine 1x2000 ripetuta in
     orizzontale, bianca fino a y=300 e poi verde. Creava una fascia bianca
     di altezza FISSA 300px, giusta solo finche' la testata era alta
     esattamente 300px. Con la testata che scala, su schermi stretti la
     fascia restava alta 300px mentre il banner ne occupava ~134: titolo e
     menu, che sono bianchi, finivano su fondo bianco e sparivano.
     La fascia bianca e' ora lo sfondo di .site-header, che si adatta da
     solo all'altezza reale della testata. BG.gif non serve piu' e puo'
     restare sul server senza essere referenziato. */
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

a           { color: var(--nero); text-decoration: none; }
a:hover     { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--bianco);
  outline-offset: 2px;
}

/* --- contenitore ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--contenitore);
  margin: 0 auto;
  padding: 0 var(--margine);
}

/* ==========================================================================
   TESTATA: immagine di intestazione + menu
   ========================================================================== */

/* La fascia bianca dietro la testata. Deve stare FUORI da .wrap perche' su
   schermi larghi attraversa tutta la finestra, non solo la colonna da 800px
   (era il comportamento di BG.gif, che si ripeteva in orizzontale).
   A differenza di BG.gif si adatta da sola all'altezza del contenuto. */
.site-header { background-color: var(--bianco); }

/* Il banner è un <img> vero (non uno sfondo CSS): uno sfondo CSS non ha
   testo alternativo, quindi è invisibile sia a chi usa uno screen reader
   sia a Google Immagini. La regola .img generale (max-width:100%;
   height:auto) basta a farlo scalare mantenendo le proporzioni. */
.banner-img { display: block; width: 100%; }

.nav-block { margin-top: 8px; }

/* interruttore del menu: invisibile ma raggiungibile da tastiera
   (non uso display:none, altrimenti esce dall'ordine di tabulazione) */
.nav-toggle {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-button {
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  padding: 8px 14px;
  border: 1px solid var(--nero);
  background: var(--bianco);
  user-select: none;
}

.nav-toggle:focus-visible + .nav-button {
  outline: 2px solid var(--bianco);
  outline-offset: 2px;
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a,
.site-nav .corrente { font-weight: bold; }

.site-nav .corrente { text-decoration: underline; }

/* --- menu su telefono: chiuso di default, si apre col pulsante ------------- */

@media (max-width: 800px) {
  .site-nav { display: none; }
  .nav-toggle:checked ~ .site-nav { display: block; }

  .site-nav ul {
    background: var(--bianco);
    border: 1px solid var(--nero);
    border-top: 0;
    margin-top: -1px;
  }
  .site-nav li { border-top: 1px solid #d9d9d9; }
  .site-nav li:first-child { border-top: 0; }
  .site-nav a,
  .site-nav .corrente { display: block; padding: 12px 14px; }
}

/* ==========================================================================
   DA 801px IN SU: impaginazione desktop, identica all'originale
   ========================================================================== */

@media (min-width: 801px) {

  body { font-size: 12px; }   /* dimensione esatta del sito originale */

  .nav-button, .nav-toggle { display: none; }

  /* il menu risale di 20px per posarsi sul bordo inferiore di top.gif,
     esattamente dov'era nel layout a tabelle */
  .nav-block { margin-top: -20px; position: relative; z-index: 2; }

  .site-nav ul {
    display: flex;
    align-items: center;
    height: 20px;
    font-size: 13px;
  }
  .site-nav li + li::before {
    content: "\2022";              /* pallino separatore */
    color: var(--verde);
    padding: 0 .6em;
  }
}

/* ==========================================================================
   ELEMENTI DI PAGINA
   ========================================================================== */

.titolo-pagina {
  margin: 24px 0 8px;
  text-align: right;
  color: var(--bianco);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}

.riga {
  border: 0;
  border-top: 1px solid var(--bianco);
  margin: 0;
}

.corpo { padding: 24px 0 32px; }

/* --- impaginazione a due colonne ------------------------------------------ */

.due-colonne {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.colonna-img { text-align: center; }
.colonna-img img { max-width: 200px; }

/* Locandine e simili: immagini orizzontali dense di testo, dove il vincolo
   stretto pensato per le foto ritratto (200px) renderebbe il testo
   illeggibile. Il riquadro indicato in fase di richiesta era puramente
   posizionale, non dimensionale: qui si privilegia la leggibilità. */
.colonna-img--locandina img {
  max-width: min(420px, 100%);
  border: 1px solid #d0d0d0;
}

/* --- pagine di solo testo (informativa privacy e simili) ------------------
   Riga di lettura limitata: oltre i ~70 caratteri l'occhio fatica a
   ritrovare l'inizio della riga successiva.                              */

.testo-lungo { max-width: 68ch; }

.testo-lungo h2 {
  margin: 28px 0 8px;
  font-size: 15px;
  font-weight: bold;
  color: var(--bianco);
}
.testo-lungo h2:first-of-type { margin-top: 8px; }
.testo-lungo p  { margin: 0 0 12px; }
.testo-lungo ul { margin: 0 0 12px; padding-left: 18px; }
.testo-lungo li { margin-bottom: 8px; }
.testo-lungo a  { text-decoration: underline; }

.privacy-data { font-size: 11px; font-style: italic; }

/* --- variante per foto di taglio ORIZZONTALE ------------------------------
   Decisione ancora aperta (backlog). Se le foto sostitutive saranno
   orizzontali, basta aggiungere questa classe accanto a .due-colonne nel
   tag <div> della pagina:  <div class="due-colonne due-colonne--foto-larga">
   Nessun'altra modifica necessaria. Su telefono non cambia nulla: le colonne
   si impilano comunque e l'immagine usa la larghezza disponibile.          */
.due-colonne--foto-larga .colonna-img img { max-width: 340px; }

/* --- segnaposto delle pagine non ancora scritte --------------------------- */

.in-costruzione {
  background: var(--bianco);
  border: 1px solid var(--nero);
  padding: 20px 24px;
  max-width: 520px;
}
.in-costruzione p        { margin: 0 0 .6em; }
.in-costruzione p:last-child { margin-bottom: 0; }

/* --- elenchi puntati con pallino bianco (come nella pagina servizi) -------- */

.elenco-servizi {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.elenco-servizi > li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 14px;
}
.elenco-servizi > li::before {
  content: "\2022";
  color: var(--bianco);
  position: absolute;
  left: 0;
  top: 0;
}

/* --- icona LinkedIn inline accanto a un nome (es. pagina collaboratori) --- */

.icona-linkedin-inline {
  vertical-align: middle;
  margin-left: 4px;
}

/* --- riga dei "• • •" che precede i link ai PDF --------------------------- */

.punti {
  color: var(--bianco);
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 2px;
}

/* --- riga recapiti -------------------------------------------------------- */

.recapiti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 6px;
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  text-align: center;
}
.recapiti .sep { color: var(--bianco); }

/* --- social --------------------------------------------------------------- */

.social {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  font-size: 13px;
}
.social img { width: 36px; height: 33px; }

/* --- piede di pagina ------------------------------------------------------ */

.site-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  padding-bottom: 32px;
  color: var(--bianco);
  font-size: 11px;
  font-weight: bold;
}
.site-footer a { color: var(--bianco); text-decoration: underline; }
.site-footer .firma img { width: 200px; height: auto; }

@media (min-width: 801px) {
  .titolo-pagina { font-size: 22px; margin-top: 30px; }
  .corpo         { padding: 30px 0 40px; }
  .due-colonne   { grid-template-columns: 200px 1fr; gap: 30px; }
  .due-colonne--pari       { grid-template-columns: 1fr 1fr; }
  .due-colonne--foto-larga { grid-template-columns: 340px 1fr; }
  .recapiti      { font-size: 12px; }
  .social        { font-size: 12px; }
  .site-footer   { grid-template-columns: 1fr 200px; font-size: 10px; }
  .site-footer .firma { justify-self: end; }

  /* testo giustificato solo su schermi larghi: su telefono il giustificato
     apre buchi bianchi fra le parole ed è meno leggibile */
  .giustificato { text-align: justify; }
}

/* ==========================================================================
   MODULO DI CONTATTO
   ========================================================================== */

.modulo label {
  display: block;
  font-weight: bold;
  font-size: 13px;
  margin: 14px 0 4px;
}

.modulo input[type="text"],
.modulo input[type="email"],
.modulo input[type="tel"],
.modulo textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--nero);
  background: var(--bianco);
  font-family: var(--font);
  font-size: 16px;    /* 16px obbligatorio: sotto questa soglia iOS ingrandisce
                         automaticamente la pagina quando si tocca il campo */
}

.modulo textarea { min-height: 120px; resize: vertical; }

.modulo input[type="submit"] {
  margin-top: 18px;
  padding: 10px 28px;
  border: 1px solid var(--nero);
  background: var(--bianco);
  font-family: var(--font);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
.modulo input[type="submit"]:hover { background: var(--verde); }

/* --- caselle di consenso (GDPR) --------------------------------------------
   Ogni consenso ha una finalita' diversa e va espresso separatamente: non
   si può far firmare in un colpo solo "invio del documento" e "contatti
   commerciali", sono due trattamenti diversi con basi giuridiche diverse.
   La casella obbligatoria non e' mai preselezionata: la spunta deve essere
   una scelta attiva della persona, non un default da disattivare.          */
.consenso {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0;
  font-size: 12px;
  line-height: 1.5;
}
.consenso input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.consenso .obbligatorio::after { content: " *"; color: #b00000; font-weight: bold; }

.nota-privacy {
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.5;
}

/* campo trappola anti-spam: deve restare invisibile all'occhio umano ma
   presente nel documento, perché formmail.php lo usa per scartare i bot */
.honeypot {
  position: absolute;
  left: -9999px;
}

@media (min-width: 801px) {
  .modulo label { font-size: 11px; }
  .modulo input[type="text"],
  .modulo input[type="email"],
  .modulo input[type="tel"],
  .modulo textarea { font-size: 12px; }
  .nota-privacy { font-size: 10px; }
}

/* --- blocco sede (sostituisce la vecchia mappa incorporata) ---------------
   L'iframe di Google Maps e' stato rimosso in fase 4: impostava cookie di
   terze parti prima di qualsiasi consenso. Questo blocco non fa alcuna
   richiesta a domini esterni finche' l'utente non clicca il pulsante.     */

.sede {
  background: var(--bianco);
  border: 1px solid var(--nero);
  padding: 22px 24px;
}
.sede img { margin-bottom: 16px; }

/* immagine della mappa: scala con il blocco ma non oltre la sua dimensione
   naturale (308px), altrimenti su schermi larghi risulterebbe sgranata */
.sede-mappa {
  display: block;
  width: 100%;
  max-width: 308px;
  height: auto;
  border: 1px solid #d0d0d0;
  margin-bottom: 4px;
}

/* attribuzione a Google: obbligatoria quando si pubblica una schermata di
   Maps. Piccola ma leggibile, non nascosta. */
.sede-credito {
  margin: 0 0 16px;
  font-size: 10px;
  color: #666666;
}

.sede-titolo {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: bold;
}
.sede-indirizzo { margin: 0 0 18px; line-height: 1.7; }
.sede-nota      { margin: 10px 0 0; font-size: 11px; }

/* pulsante: stessa gabbia visiva del tasto Invia del modulo, per coerenza */
.bottone {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid var(--nero);
  background: var(--verde);
  font-weight: bold;
  text-decoration: none;
}
.bottone:hover { background: var(--nero); color: var(--bianco); text-decoration: none; }

/* ==========================================================================
   STAMPA
   Un professionista i cui recapiti potrebbero essere stampati: costo quasi
   nullo, nessun rischio, foglio di stile separato che il browser applica
   da solo quando l'utente stampa.
   ========================================================================== */

@media print {
  body { background: none; color: #000; font-size: 11pt; }
  .nav-toggle, .nav-button, .site-nav, .social, .bottone { display: none; }
  .titolo-pagina, .site-footer { color: #000; }
  .riga { border-top-color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ==========================================================================
   NOTA DI MANUTENZIONE — revisione incrociata del 01/08/2026

   Questo file è stato rivisto confrontandolo con un CSS prodotto in una
   sessione parallela che non conosceva le decisioni architetturali di
   questo progetto (7 voci di menu, telemetria, nomi dei file nuovi).
   Da quel confronto sono stati adottati 5 correttivi, tutti applicati qui:

     1. Il banner della testata è ora un <img> vero con testo alternativo,
        non uno sfondo CSS — uno sfondo non ha alt text, quindi è invisibile
        sia agli screen reader sia a Google Immagini (vedi .banner-img).
     2. Il font-size di base su telefono è 16px, non 15px: è la soglia
        minima di leggibilità raccomandata, e coincide con la soglia sotto
        la quale iOS Safari forza lo zoom sui campi di input.
     3. Il font-size di base su desktop è tornato a 12px, il valore esatto
        del sito originale (prima era stato alzato a 13px).
     4. Il breakpoint è passato da 700px a 800/801px, allineandolo alla
        larghezza fissa (800px) del layout desktop originale invece di un
        valore arbitrario.
     5. Aggiunto il foglio di stile per la stampa qui sopra.
     6. IL PIU' IMPORTANTE — eliminata la dipendenza da img/BG.gif.
        Quell'immagine (1x2000, bianca fino a y=300 poi verde, ripetuta in
        orizzontale) disegnava una fascia bianca di altezza FISSA 300px,
        corretta solo finche' la testata era alta esattamente 300px. Con la
        testata che scala, su uno schermo da 390px il banner occupava ~134px
        ma la fascia restava alta 300: il titolo di pagina e il menu, che
        sono bianchi, finivano su fondo bianco e diventavano INVISIBILI.
        Ora la fascia e' lo sfondo di .site-header e si adatta da sola.
        Verificato: bianco fino a y=184 a 390px di larghezza, fino a y=300
        a 1200px (identico al comportamento originale su desktop).
        BG.gif puo' restare sul server: non e' piu' referenziato da nulla.

   Una proposta della sessione parallela — un logo dedicato per mobile via
   <picture>/<source media> — NON è stata adottata: richiede un file
   (img/logo-mobile.gif) che non esiste nella cartella immagini del sito
   attuale, quindi è una decisione di contenuto in sospeso, non un
   refactor. Da confermare prima di un'eventuale implementazione.

   --------------------------------------------------------------------------
   02/08/2026 — aggiunte le regole per: pagine "in costruzione" (fase 3),
   variante foto orizzontale (ancora inutilizzata), blocco .sede che
   sostituisce l'iframe Google Maps rimosso (fase 4), .testo-lungo per
   privacy.htm, .sede-mappa/.sede-credito per la schermata statica della
   mappa, .consenso per i due consensi separati del modulo di richiesta
   documenti, .colonna-img--locandina per la locandina del corso.

   04/08/2026 — IMPORTANTE: in KB era rimasta una versione di questo file
   ferma al 01/08/2026, prima di tutte le regole del paragrafo precedente.
   Una sessione parallela ha lavorato su collaboratori.htm partendo da
   quella versione incompleta e vi ha aggiunto correttamente
   .icona-linkedin-inline — non per un errore proprio, semplicemente perche'
   quella era l'unica versione disponibile in KB in quel momento. Questo
   file e' stato ricostruito unendo tutto, preservando ogni commento
   originale: nessuna regola perduta, nessuna spiegazione persa,
   .icona-linkedin-inline mantenuta.
   LEZIONE: quando questo file viene modificato, ricaricarlo in KB per
   intero SUBITO, non a fine sessione — e' l'unico file del progetto dove
   un caricamento parziale in corso d'opera cancella silenziosamente il
   lavoro fatto altrove.
   ========================================================================== */