/* angelolisi.it — foglio di stile unico.
   Idea: il mondo della misura e del preventivo. Fondo carta, testo grafite, giallo "metro da cantiere"
   solo per fondi e pulsanti, acciaio per link e focus. Barlow per il testo, Barlow Condensed per i titoli. */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); }

:root {
  --carta: #F6F7F5;
  --bianco: #FFFFFF;
  --grafite: #1F2529;
  --ardesia: #5A6570;
  --filo: #D6DCDA;
  --metro: #F2C300;
  --acciaio: #2B5C7E;
  --errore: #A3261B;

  --testo: "Barlow", system-ui, sans-serif;
  --titoli: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  /* scala tipografica 1,25 */
  --t-piccolo: 0.875rem;
  --t-base: 1.0625rem;
  --t-medio: 1.375rem;
  --t-grande: 1.75rem;
  --t-titolo: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);

  /* spaziature su base 8 */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s6: 3rem; --s8: 4rem; --s12: 6rem;

  --larghezza: 72rem;
  --colonna: 42rem;
  --raggio: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--grafite);
  font-family: var(--testo);
  font-size: var(--t-base);
  line-height: 1.6;
  font-kerning: normal;
}
@media (min-width: 60rem) { body { font-size: 1.125rem; } }

img { max-width: 100%; height: auto; }
a { color: var(--acciaio); text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--acciaio); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--titoli); line-height: 1.1; margin: 0 0 var(--s2); }
h1 { font-size: var(--t-titolo); font-weight: 700; letter-spacing: -0.005em; max-width: 20ch; }
h2 { font-size: var(--t-grande); font-weight: 700; }
h3 { font-size: var(--t-medio); font-weight: 600; }
p, ul, ol { margin: 0 0 var(--s2); }
p, li { max-width: var(--colonna); }

.salta { position: absolute; left: -999px; top: 0; background: var(--grafite); color: var(--bianco); padding: var(--s1) var(--s2); z-index: 10; }
.salta:focus { left: var(--s2); }
.visivamente-nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- testata ---------- */
.testata { background: var(--carta); border-bottom: 1px solid var(--filo); }
.testata__interno { max-width: var(--larghezza); margin: 0 auto; padding: var(--s2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.marchio { display: flex; flex-direction: column; text-decoration: none; color: var(--grafite); margin-right: auto; line-height: 1.1; }
/* su schermi larghi il menu sta su una seconda riga, sotto il nome: è voluto, le voci sono molte */
@media (min-width: 70rem) { .navigazione { width: 100%; } }
.marchio__nome { font-family: var(--titoli); font-weight: 700; font-size: 1.5rem; }
.marchio__ruolo { font-size: var(--t-piccolo); color: var(--ardesia); }
.testata__menu { display: none; }
.navigazione ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.navigazione a { color: var(--grafite); text-decoration: none; font-weight: 500; }
.navigazione a:hover, .navigazione a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--metro); text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.navigazione .pulsante { color: var(--grafite); }

/* schermi stretti: menu chiuso fin dal primo disegno (nessuno spostamento al caricamento).
   Si apre con JavaScript (classe .aperta) e anche senza, tramite il link #navigazione (:target). */
@media (max-width: 69.99rem) {
  .testata__menu { display: inline-flex; font: inherit; font-weight: 600; text-decoration: none; background: none; border: 2px solid var(--grafite); border-radius: var(--raggio); padding: 0.25rem var(--s2); color: var(--grafite); cursor: pointer; }
  .navigazione { display: none; width: 100%; }
  .navigazione.aperta, .navigazione:target { display: block; }
  .navigazione ul { flex-direction: column; align-items: flex-start; padding: var(--s1) 0; }
}

/* ---------- briciole ---------- */
.briciole { max-width: var(--larghezza); margin: 0 auto; padding: var(--s2) var(--s2) 0; font-size: var(--t-piccolo); color: var(--ardesia); }
.briciole ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.briciole li + li::before { content: "/"; margin: 0 var(--s1); color: var(--filo); }
.briciole a { color: var(--ardesia); }

/* ---------- impaginazione ---------- */
main { display: block; }
.sezione { max-width: var(--larghezza); margin: 0 auto; padding: var(--s8) var(--s2) 0; }
.sezione > h2 { margin-bottom: var(--s3); }
.introduzione { max-width: var(--larghezza); margin: 0 auto; padding: var(--s6) var(--s2) 0; }
.introduzione p.attacco { font-size: var(--t-medio); line-height: 1.45; color: var(--grafite); }
.azioni { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* ---------- pulsanti ---------- */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; line-height: 1.2;
  padding: 0.8rem 1.25rem; border-radius: var(--raggio);
  background: var(--metro); color: var(--grafite); border: 2px solid var(--metro);
  text-decoration: none; cursor: pointer;
}
.pulsante:hover { background: #E0B400; border-color: #E0B400; text-decoration: none; }
.pulsante--secondario { background: transparent; border-color: var(--grafite); }
.pulsante--secondario:hover { background: var(--grafite); color: var(--bianco); border-color: var(--grafite); }
.pulsante--chiaro { background: transparent; color: var(--bianco); border-color: var(--bianco); }
.pulsante--chiaro:hover { background: var(--bianco); color: var(--grafite); border-color: var(--bianco); }
.pulsante--piccolo { padding: 0.4rem 0.9rem; }
.link { font: inherit; color: var(--acciaio); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* ---------- apertura della home ---------- */
.apertura { max-width: var(--larghezza); margin: 0 auto; padding: var(--s6) var(--s2) var(--s8); display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 60rem) { .apertura { grid-template-columns: 1.05fr 0.95fr; padding-top: var(--s6); } }
/* le colonne della griglia possono restringersi sotto la larghezza del contenuto (evita lo scorrimento orizzontale su telefono) */
.apertura > *, .colonne > *, .righe > li > * { min-width: 0; }
.apertura h1 { max-width: 16ch; }
.apertura .attacco { font-size: var(--t-medio); line-height: 1.45; max-width: 34rem; }
.apertura__dove { color: var(--ardesia); }

/* il metro da cantiere: l'unico elemento decorativo forte del sito */
.metro {
  height: 2.25rem;
  background-color: var(--metro);
  background-image:
    repeating-linear-gradient(90deg, var(--grafite) 0 2px, transparent 2px 50px),
    repeating-linear-gradient(90deg, var(--grafite) 0 1px, transparent 1px 10px);
  background-size: 100% 60%, 100% 30%;
  background-repeat: repeat-x;
  background-position: 0 0, 0 0;
  border-top: 1px solid var(--grafite);
  border-bottom: 1px solid var(--grafite);
}

/* ---------- il foglio di preventivo (demo) ---------- */
.foglio { background: var(--bianco); border: 1px solid var(--grafite); border-radius: var(--raggio); box-shadow: 6px 6px 0 var(--grafite); }
.foglio__testa { background: var(--grafite); color: var(--bianco); padding: var(--s2) var(--s3); }
@media (max-width: 30rem) { .foglio__campi, .foglio__conto { padding: var(--s2); } .foglio__testa { padding: var(--s2); } .foglio { box-shadow: 4px 4px 0 var(--grafite); margin-right: 4px; } }
.foglio__titolo { font-family: var(--titoli); font-weight: 700; font-size: var(--t-medio); margin: 0; }
.foglio__sotto { margin: 0; font-size: var(--t-piccolo); color: #C9D0D4; }
.foglio__campi { padding: var(--s3); display: grid; gap: var(--s2); border-bottom: 1px dashed var(--filo); }
.campo-misura { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 4rem; align-items: center; gap: var(--s1); }
.campo-misura label { font-weight: 600; }
.campo-misura input[type="range"] { width: 100%; accent-color: var(--grafite); }
.campo-misura output { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.scelte { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.scelte legend { font-weight: 600; padding: 0; margin-bottom: 0.25rem; width: 100%; }
.scelte label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.scelte input { accent-color: var(--grafite); width: 1.05rem; height: 1.05rem; }
.foglio__conto { padding: var(--s3); }
.foglio__conto table { width: 100%; border-collapse: collapse; font-size: var(--t-piccolo); }
.foglio__conto th { text-align: left; font-weight: 400; padding: 0.3rem 0; }
.foglio__conto td { text-align: right; padding: 0.3rem 0 0.3rem var(--s1); font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: top; }
.foglio__totale { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--grafite); margin: var(--s2) 0 var(--s1); padding-top: var(--s1); max-width: none; }
.foglio__totale strong { font-family: var(--titoli); font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.foglio__nota { font-size: var(--t-piccolo); color: var(--ardesia); margin: 0; }
.foglio__totale strong.aggiornato { animation: lampo 0.6s ease-out; }
@keyframes lampo { from { background: var(--metro); } to { background: transparent; } }

/* ---------- elenchi a righe (servizi, casi) ---------- */
.righe { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--grafite); }
.righe > li { max-width: none; border-bottom: 1px solid var(--filo); padding: var(--s3) 0; display: grid; gap: var(--s1) var(--s4); }
@media (min-width: 50rem) { .righe > li { grid-template-columns: 16rem 1fr; } }
.righe h3 { margin: 0; }
.righe h3 a { color: var(--grafite); text-decoration: none; }
.righe h3 a:hover { text-decoration: underline; text-decoration-color: var(--metro); text-decoration-thickness: 3px; }
.righe p { margin: 0 0 var(--s1); }
.righe .esempio { color: var(--ardesia); font-size: var(--t-piccolo); }

/* ---------- passi (sequenza vera: numerati) ---------- */
.passi { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid; gap: var(--s3); }
@media (min-width: 60rem) { .passi { grid-template-columns: repeat(4, 1fr); } }
.passi li { counter-increment: passo; border-top: 4px solid var(--grafite); padding-top: var(--s2); }
.passi li::before { content: counter(passo); display: inline-block; font-family: var(--titoli); font-weight: 700; font-size: var(--t-medio); background: var(--metro); padding: 0 0.55rem; margin-bottom: var(--s1); }
.passi h3 { font-size: 1.25rem; }
.passi p { font-size: var(--t-base); }

/* ---------- testo lungo delle pagine interne ---------- */
.testo { max-width: var(--larghezza); margin: 0 auto; padding: var(--s6) var(--s2) 0; }
.testo h2 { margin-top: var(--s6); }
.testo > h2:first-child { margin-top: 0; }
.introduzione + .testo { padding-top: var(--s4); }
.testo ul { padding-left: 1.2rem; }
.testo li { margin-bottom: 0.35rem; }
.colonne { display: grid; gap: var(--s4); }
@media (min-width: 60rem) { .colonne { grid-template-columns: 1fr 1fr; } }
.scheda-caso { border-left: 4px solid var(--metro); padding-left: var(--s3); }
.scheda-caso dt { font-weight: 600; }
.scheda-caso dd { margin: 0 0 var(--s2); max-width: var(--colonna); }
.da-completare { background: #FFF6CC; outline: 1px dashed #B48F00; padding: 0 0.2rem; }

/* ---------- prezzo ---------- */
.prezzo { font-size: var(--t-medio); margin-top: var(--s3); }
.prezzo__valore { font-family: var(--titoli); font-weight: 700; background: var(--metro); padding: 0 0.4rem; }
.prezzo__nota { font-size: var(--t-piccolo); color: var(--ardesia); }

/* ---------- domande frequenti ---------- */
.domande { border-top: 1px solid var(--grafite); max-width: 52rem; }
.domande details { border-bottom: 1px solid var(--filo); }
.domande summary { cursor: pointer; padding: var(--s2) 0; font-weight: 600; list-style-position: outside; }
.domande details p { margin: 0 0 var(--s2); }

/* ---------- invito al contatto ---------- */
.invito { background: var(--grafite); color: var(--bianco); margin-top: var(--s12); }
.invito__interno { max-width: var(--larghezza); margin: 0 auto; padding: var(--s8) var(--s2); }
.invito h2 { color: var(--bianco); }
.invito p { color: #DCE1E3; }

/* ---------- modulo ---------- */
.modulo { display: grid; gap: var(--s3); max-width: 40rem; }
.modulo label, .modulo legend { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.modulo .facoltativo { font-weight: 400; color: var(--ardesia); }
.modulo input[type="text"], .modulo input[type="email"], .modulo input[type="tel"], .modulo select, .modulo textarea {
  width: 100%; font: inherit; color: var(--grafite); background: var(--bianco);
  border: 1px solid var(--ardesia); border-radius: var(--raggio); padding: 0.65rem 0.75rem;
}
.modulo textarea { min-height: 9rem; resize: vertical; }
.modulo [aria-invalid="true"] { border-color: var(--errore); border-width: 2px; }
.modulo .errore { color: var(--errore); font-weight: 500; margin: 0.3rem 0 0; }
.modulo .aiuto { color: var(--ardesia); font-size: var(--t-piccolo); margin: 0.3rem 0 0; }
.modulo .consenso-dati label { display: flex; gap: var(--s1); align-items: flex-start; font-weight: 400; }
.modulo .consenso-dati input { margin-top: 0.35rem; accent-color: var(--grafite); }
.trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.avviso { border-left: 4px solid var(--errore); background: var(--bianco); padding: var(--s2); }

/* ---------- piè di pagina ---------- */
.piede { border-top: 1px solid var(--filo); margin-top: var(--s12); font-size: var(--t-piccolo); color: var(--ardesia); }
.invito + .piede, main:has(> .invito:last-child) + .piede { margin-top: 0; }
.piede__interno { max-width: var(--larghezza); margin: 0 auto; padding: var(--s6) var(--s2); display: grid; gap: var(--s4); }
@media (min-width: 50rem) { .piede__interno { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.piede ul { list-style: none; padding: 0; margin: 0; }
.piede li { margin-bottom: 0.35rem; }
.piede__nome { font-family: var(--titoli); font-weight: 700; font-size: var(--t-medio); color: var(--grafite); margin-bottom: var(--s1); }
.piede__titolo { font-weight: 600; color: var(--grafite); margin-bottom: var(--s1); }
.piede__contatti { margin-top: var(--s1); }

/* ---------- consenso statistiche ---------- */
.consenso { position: fixed; left: var(--s2); right: var(--s2); bottom: var(--s2); max-width: 34rem; background: var(--bianco); border: 2px solid var(--grafite); border-radius: var(--raggio); padding: var(--s3); z-index: 20; box-shadow: 6px 6px 0 var(--grafite); }
.consenso[hidden] { display: none; }
.consenso__titolo { font-family: var(--titoli); font-weight: 700; font-size: var(--t-medio); margin-bottom: var(--s1); }
.consenso p { font-size: var(--t-piccolo); }
.consenso__azioni { display: flex; flex-wrap: wrap; gap: var(--s1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}