/* ClavisStudio: la pagina d'ingresso di clavisstudio.it. Statica: nessuno script, nessuna risorsa esterna; il carattere è un file nostro.
   Specifiche: Docs/specifiche-pagina-di-ingresso.md. I colori sono SOLO variabili (qui sotto); il contrasto lo calcola il test
   server/deploy/script/pagina-ingresso.test.mjs (tema chiaro e scuro, testo sopra l'immagine nel caso peggiore). */

/* Tema chiaro (di serie) e fissi dell'eroe, la parte con l'immagine: uguali nei due temi perché sopra una fotografia. */
:root {
  --sfondo: #f6f3ea;
  --superficie: #ffffff;
  --testo: #1c1a14;
  --testo-tenue: #4b473b;
  --accento: #8a4b00;
  --bordo: #7a7466;
  --focus: #0a4aa6;

  --pulsante-sfondo: #ffffff;
  --pulsante-testo: #15140f;
  --eroe-testo: #ffffff;
  --eroe-sfondo: #1c2a1c;
  --focus-eroe: #ffd36b;
  /* Nessun velo sulla foto: resta luminosa e il testo si stacca con l'ombra attorno alle lettere (--ombra-testo, misurata: specifiche). */
  --ombra-testo: #000000d9;
  /* Contorno di «Entra» e alone del focus, gli unici scuri sopra la foto oltre all'ombra. Il test lo mette sopra un pixel bianco, il caso peggiore. */
  --alone-eroe: #00000099;

  /* L'avviso del cellulare: sfondo velato che copre la pagina, scatola, bordo, focus e comando «Chiudi». Contrasto calcolato dal test. */
  --avviso-velo: #000000b3;
  --avviso-superficie: #ffffff;
  --avviso-testo: #1c1a14;
  --avviso-bordo: #ffffff;
  --avviso-focus: #0a4aa6;
  --avviso-comando-sfondo: #8a4b00;
  --avviso-comando-testo: #ffffff;
  /* L'etichetta «In arrivo» (cantiere): ciò che si farà e non c'è ancora, sempre uguale. Testo e sfondo ≥ 4,5; bordo ≥ 3 sui fondi della pagina. */
  --arrivo-testo: #4a2d00;
  --arrivo-sfondo: #ffeeb8;
  --arrivo-bordo: #8a4b00;
  --arrivo-nastro-chiaro: #f2b705;
  --arrivo-nastro-scuro: #1c1a14;
  /* Gli schemi dei moduli (suite.html): linea piena = c'è già, tratteggiata = in arrivo; cerchi e frecce. Contrasto calcolato dal test pagina-suite.test.mjs (S15). */
  --schema-linea: #4b473b;
  --schema-linea-arrivo: #8a4b00;
  --schema-cerchio: #fff3d6;
  --schema-cerchio-bordo: #8a4b00;
  --schema-cerchio-arrivo: #ffffff;
  --schema-centro: #8a4b00;
  --schema-centro-testo: #ffffff;
}

/* Tema scuro: lo decide il sistema della persona, non c'è un interruttore (la pagina pubblica non conosce le sue preferenze). */
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #15140f;
    --superficie: #201e17;
    --testo: #f3efe3;
    --testo-tenue: #cbc5b4;
    --accento: #e6b45f;
    --bordo: #8e8878;
    --focus: #8db4ff;
    --alone-eroe: #000000aa;
    --avviso-velo: #000000cc;
    --avviso-superficie: #201e17;
    --avviso-testo: #f3efe3;
    --avviso-bordo: #e6b45f;
    --avviso-focus: #8db4ff;
    --avviso-comando-sfondo: #e6b45f;
    --avviso-comando-testo: #15140f;
    --arrivo-testo: #ffe19a;
    --arrivo-sfondo: #3a2c05;
    --arrivo-bordo: #e6b45f;
    --arrivo-nastro-chiaro: #f2b705;
    --arrivo-nastro-scuro: #15140f;
    --schema-linea: #cbc5b4;
    --schema-linea-arrivo: #e6b45f;
    --schema-cerchio: #3a2c05;
    --schema-cerchio-bordo: #e6b45f;
    --schema-cerchio-arrivo: #201e17;
    --schema-centro: #e6b45f;
    --schema-centro-testo: #15140f;
  }
}

/* Outfit (licenza libera, caratteri/OFL.txt), servito da noi: nessuna richiesta a terzi. «swap»: il testo si vede subito, con il carattere di sistema, finché il file non arriva. */
@font-face {
  font-family: "Outfit";
  src: url("caratteri/outfit-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

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

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

body {
  margin: 0;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background: var(--sfondo);
  color: var(--testo);
}

a { color: var(--accento); text-underline-offset: 0.2em; }

/* Il contorno del focus: spesso e staccato, di colore dalle variabili (sopra l'immagine ne ha uno suo). */
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

h1, h2, h3, p { margin-top: 0; }

/* ---------- L'eroe: immagine e titolo ---------- */
.eroe {
  position: relative;
  isolation: isolate;
  min-height: clamp(30rem, 82svh, 62rem);
  display: grid;
  align-content: center;
  padding: 7rem 1.25rem 3rem;
  background: var(--eroe-sfondo);
  color: var(--eroe-testo);
  overflow: hidden;
}

.eroe picture,
.eroe img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

/* La porta sta a destra: su schermi stretti il taglio la tiene dentro. */
.eroe img {
  object-fit: cover;
  object-position: 72% center;
}

.eroe-testo {
  /* Quattro strati, dal più stretto al più largo: il bordo netto delle lettere, poi un alone che svanisce senza disegnare forme sulla foto. */
  text-shadow: 0 1px 2px var(--ombra-testo), 0 1px 6px var(--ombra-testo), 0 0 1rem var(--ombra-testo), 0 0 2.5rem var(--ombra-testo);
  max-width: 34rem;
  /* 100% è già senza i margini dell'eroe (2,5rem in tutto): così il titolo sta in colonna con i testi del piede. */
  margin-inline-start: max(0rem, calc((100% + 2.5rem - 72rem) / 2));
}

.eroe h1 {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
}

/* La riga ha lettere più sottili del titolo: due strati stretti in più, perché sopra l'erba resti netta anche sul telefono. */
.riga {
  text-shadow: 0 0 2px var(--ombra-testo), 0 1px 2px var(--ombra-testo), 0 1px 4px var(--ombra-testo), 0 1px 6px var(--ombra-testo), 0 0 1rem var(--ombra-testo), 0 0 2.5rem var(--ombra-testo);
  font-size: clamp(1.15rem, 3.2vw, 1.6rem);
  margin-bottom: 0;
}

/* La nota sull'immagine generata dall'IA (AI Act, art. 50): piccola, in basso a destra sopra la foto, con lo stesso alone della riga per restare leggibile. */
.nota-immagine {
  position: absolute;
  right: 1rem;
  bottom: 0.75rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--eroe-testo);
  text-shadow: 0 0 2px var(--ombra-testo), 0 1px 2px var(--ombra-testo), 0 1px 4px var(--ombra-testo), 0 0 1rem var(--ombra-testo);
}

.barra {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
}

/* «Entra» (e la sua gemella del cellulare, identica): sempre in alto, area di tocco da almeno 44 px, sfondo pieno e contorno scuro (non dipende dall'immagine, nemmeno sui punti chiari). */
.entra,
.entra-cellulare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 1.75rem;
  border-radius: 2rem;
  box-shadow: 0 0 0 2px var(--alone-eroe);
  background: var(--pulsante-sfondo);
  color: var(--pulsante-testo);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

.eroe a:focus-visible {
  outline-color: var(--focus-eroe);
  box-shadow: 0 0 0 8px var(--alone-eroe);
}

/* La gemella del cellulare e l'avviso: fuori dal cellulare non si vedono mai, nemmeno se l'indirizzo finisce con #avviso-cellulare. */
.entra-cellulare { display: none; }

#avviso-cellulare { display: none; }

/* Il cellulare: dito come puntatore e lato corto sotto i 600 px. I tablet hanno il lato corto più lungo; un cellulare in «versione desktop» passa, e la pagina, senza script, non può distinguerlo.
   «Entra» resta dov'è, uguale al computer: si scambiano solo i due collegamenti. L'avviso si apre con l'indirizzo che finisce per #avviso-cellulare e solo qui. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  .entra { display: none; }
  .entra-cellulare { display: inline-flex; }
  /* Lo sfondo copre tutto e scorre se lo schermo è basso (orizzontale, testo ingrandito); la scatola ha il margine «auto», che la centra senza mai tagliarne la parte alta. */
  #avviso-cellulare:target {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 10;
    place-items: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    background: var(--avviso-velo);
  }
}

#avviso-cellulare:focus-visible { outline: none; }

.avviso-scatola {
  box-sizing: border-box;
  margin: auto;
  width: 100%;
  max-width: min(24rem, 100%);
  padding: 1.5rem 1.25rem;
  border: 2px solid var(--avviso-bordo);
  border-radius: 1rem;
  background: var(--avviso-superficie);
  color: var(--avviso-testo);
  text-align: center;
}

.avviso-scatola p { margin: 0 0 1.25rem; font-size: 1.1rem; color: var(--avviso-testo); }

.avviso-chiudi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.5rem 1.75rem;
  border-radius: 2rem;
  background: var(--avviso-comando-sfondo);
  color: var(--avviso-comando-testo);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

.avviso-chiudi:focus-visible {
  outline: 3px solid var(--avviso-focus);
  outline-offset: 3px;
}

/* ---------- Piede, informativa e 404 ---------- */
.fondo-piede,
.pagina footer {
  border-top: 1px solid var(--bordo);
  background: var(--superficie);
}

.piede {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}

.piede h2 { font-size: 1.25rem; }
.piede p { color: var(--testo-tenue); }

/* I link del piede: area di tocco da almeno 44 px. */
.piede a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
}

.pagina {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.pagina header { padding-bottom: 1rem; }
.marchio { font-weight: 700; font-size: 1.25rem; margin: 0; }
.pagina h1 { font-size: 2rem; }
.pagina h2 { font-size: 1.3rem; margin-top: 2rem; }
.pagina a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------- Preferenze del sistema ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Contrasto elevato di Windows e simili: il browser sceglie i colori; qui restano solo i bordi, con i colori di sistema. */
@media (forced-colors: active) {
  .entra, .entra-cellulare, .avviso-chiudi { border: 2px solid ButtonText; }
  .avviso-scatola { border-color: CanvasText; }
  /* Con i colori forzati il testo non può stare sopra una fotografia: l'immagine si toglie, resta il fondo di sistema. */
  .eroe picture { display: none; }
  .eroe { background: Canvas; color: CanvasText; }
  a:focus-visible, .eroe a:focus-visible { outline-color: Highlight; }
}

/* La sezione della presentazione sta sopra i contatti, nella stessa colonna del piede. */
.presentazione { margin-bottom: 1.5rem; }

/* ---------- Liste delle pagine di testo e etichetta «In arrivo» ---------- */
.pagina ul { padding-left: 1.25rem; }
.pagina li { margin: 0.6rem 0; }
.pagina section { margin: 2rem 0; }

/* Un segnale solo, sempre lo stesso: parole («In arrivo», non solo colore), bordo tratteggiato e un nastro da cantiere disegnato qui (nessuna immagine). */
.in-arrivo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.5rem;
  margin-right: 0.5rem;
  padding: 0 0.6rem 0 0.35rem;
  border: 2px dashed var(--arrivo-bordo);
  border-radius: 0.4rem;
  background: var(--arrivo-sfondo);
  color: var(--arrivo-testo);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.1em;
}

.in-arrivo::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 0.15rem;
  background: repeating-linear-gradient(45deg, var(--arrivo-nastro-chiaro) 0 0.25rem, var(--arrivo-nastro-scuro) 0.25rem 0.5rem);
}

@media (forced-colors: active) {
  .in-arrivo { border-color: ButtonText; background: Canvas; color: CanvasText; }
  .in-arrivo::before { background: none; border: 2px dashed ButtonText; }
}

/* ---------- Gli schemi dei moduli in «La suite» ----------
   Disegni in linea (SVG), decorativi rispetto al testo: ogni schema ha role="img" e un aria-label che dice i legami. Nessuno stile in linea (la CSP del sito
   non li ammette): forma e colori stanno qui, i colori da variabili. Nessun movimento. Cinque schemi grandi (uno per sezione) e tanti piccoli (due cerchi e una
   funzione scritta sulla linea, una catena di tre, una stella): i piccoli riempiono le due ali ai lati del testo.
   Sotto i 1500 px non ci sono ali: si vedono solo i cinque grandi, sotto il testo della loro sezione; i piccoli si nascondono, così la pagina stretta non diventa infinita. */
.schema { margin: 1.5rem auto 0; max-width: 22rem; }
.schema svg { display: block; width: 100%; height: auto; }
.schema-piccolo { display: none; }
.ala { display: contents; }
.schema-linea { stroke: var(--schema-linea); stroke-width: 2.5; fill: none; }
.schema-linea-arrivo { stroke: var(--schema-linea-arrivo); stroke-dasharray: 7 5; }
.schema-freccia { fill: var(--schema-linea); }
.schema-freccia-arrivo { fill: var(--schema-linea-arrivo); }
.schema-cerchio { fill: var(--schema-cerchio); stroke: var(--schema-cerchio-bordo); stroke-width: 2.5; }
.schema-cerchio-arrivo { fill: var(--schema-cerchio-arrivo); stroke-dasharray: 5 4; }
.schema-centro { fill: var(--schema-centro); }
.schema-testo { fill: var(--testo); font-size: 14px; font-weight: 600; }
.schema-testo-centro { fill: var(--schema-centro-testo); font-size: 15px; font-weight: 700; }
.schema-legenda { font-size: 13px; font-weight: 500; }
/* La funzione scritta sulla linea (o il titolo di una stella): più leggera dei nomi dei moduli. */
.schema-funzione { font-size: 13px; font-weight: 500; paint-order: stroke; stroke: var(--sfondo); stroke-width: 4px; stroke-linejoin: round; }

@media (min-width: 1500px) {
  .pagina-suite section { position: relative; }
  .schema-piccolo { display: block; }
  /* Le ali: ai lati della colonna di testo (41,5 rem di contenuto), a 3 rem dal testo, alte quanto la sezione, larghe quanto lo spazio che resta (al massimo 22 rem).
     Gli schemi si distribuiscono lungo la sezione; se una sezione ne ha più di quanti ne stiano, sbordano: lo si controlla nel browser a 1536 e 1920 px. */
  .ala { display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; position: absolute; top: 0; bottom: 0; width: min(22rem, calc((100vw - 41.5rem) / 2 - 4.5rem)); }
  .ala .schema { margin: 0; width: 100%; }
  .ala-sx { right: calc(100% + 3rem); }
  .ala-dx { left: calc(100% + 3rem); }
  /* Disposizione meno rigida: ogni schema è spostato di poco, a sbalzo, e le distanze verticali non sono tutte uguali. Quattro classi di scostamento che si
     alternano (sb1–sb4: più fuori, a filo, più dentro) e quattro di distanza (vm0–vm3), solo con la posizione relativa: nessuno stile in linea. Verso il testo al massimo 2 rem
     (ne restano 1 di respiro), verso il bordo della finestra al massimo 1 rem (a 1536 px restano 21 px: nessuno scorrimento orizzontale). Sotto i 1500 px non c'è nessuno scostamento. */
  .ala .schema { position: relative; }
  .ala-sx .sb1 { left: -1rem; }
  .ala-sx .sb2 { left: 0; }
  .ala-sx .sb3 { left: 2rem; }
  .ala-sx .sb4 { left: 0.75rem; }
  .ala-dx .sb1 { left: 1rem; }
  .ala-dx .sb2 { left: 0; }
  .ala-dx .sb3 { left: -2rem; }
  .ala-dx .sb4 { left: -0.75rem; }
  .ala .vm0 { margin-top: 0; }
  .ala .vm1 { margin-top: 0.75rem; }
  .ala .vm2 { margin-top: 0.25rem; }
  .ala .vm3 { margin-top: 1.25rem; }
}

/* Le frasi «in pratica»: raccontano a parole semplici la funzione degli schemi della sezione. */
.in-pratica p { margin: 0.6rem 0; }

@media (forced-colors: active) {
  .schema-linea { stroke: CanvasText; }
  .schema-linea-arrivo { stroke: LinkText; }
  .schema-freccia { fill: CanvasText; }
  .schema-freccia-arrivo { fill: LinkText; }
  .schema-cerchio { fill: Canvas; stroke: CanvasText; }
  .schema-centro { fill: CanvasText; }
  .schema-testo { fill: CanvasText; }
  .schema-testo-centro { fill: Canvas; }
  .schema-funzione { stroke: Canvas; }
}

/* Pagina «Chiedi la presentazione» (servizio clavis-presentazione): il modulo con due campi. Solo variabili di colore già controllate nel contrasto. */
.modulo-richiesta { max-width: 32rem; margin: 1.5rem 0; }
.modulo-richiesta .campo { margin: 0 0 1.25rem; }
.modulo-richiesta label { display: block; margin: 0 0 0.35rem; font-weight: 700; }
.modulo-richiesta input[type="email"],
.modulo-richiesta input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--bordo);
  border-radius: 0.4rem;
  background: var(--superficie);
  color: var(--testo);
  font: inherit;
}
.modulo-richiesta input:focus-visible,
.modulo-richiesta .pulsante-invio:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.modulo-richiesta .pulsante-invio {
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--avviso-comando-sfondo);
  border-radius: 0.4rem;
  background: var(--avviso-comando-sfondo);
  color: var(--avviso-comando-testo);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.modulo-richiesta .frase-dati { color: var(--testo-tenue); }
/* Il campo trappola: fuori dallo schermo, non visibile e non raggiungibile con la tastiera (tabindex -1), ma presente per i programmi che compilano tutto. */
.trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.errore,
.avviso-modulo {
  max-width: 32rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 2px solid var(--arrivo-bordo);
  border-radius: 0.4rem;
  background: var(--arrivo-sfondo);
  color: var(--arrivo-testo);
  font-weight: 700;
}
.riserva { color: var(--testo-tenue); }