@import url("invito-font.css");
@import url("scena.css");

:root {
  --lastra: #30373c;
  --lastra-fondo: #23282c;
  --lastra-luce: #4a545b;
  --fuso: #ff7a1a;
  --fuso-testo: #b4500a;
  --fuso-chiaro: #ffb266;
  --carta: #f5f6f6;
  --nebbia: #e1e5e7;
  --inchiostro: #20262a;
  --inchiostro-tenue: #525c63;
  --vino: #a11d2e;
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Il taglio per testi piccoli mantiene leggibili le aste sottili del 4 di 4EMME. */
* { font-optical-sizing: none !important; }
body { margin: 0; background: var(--lastra-fondo); color: var(--inchiostro); font: 400 1.0625rem/1.6 var(--sans); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--fuso); outline-offset: 3px; border-radius: 2px; }
.foglio :focus-visible { outline-color: var(--lastra-luce); }
[hidden] { display: none !important; }

/* Copertina */
.saluto { max-width: 38rem; margin: 0 auto; }
.saluto-nome { margin: 0; font: italic 400 clamp(1.5rem, 3.4vw, 2.1rem)/1.2 var(--serif); color: var(--fuso-chiaro); }
.saluto h1 {
  margin: .25em 0 .4em;
  font: 400 clamp(2.5rem, 7vw, 4.75rem)/1.04 var(--serif);
  font-variation-settings: "opsz" 13;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.saluto-testo { margin: 0 auto 1.5rem; max-width: 33rem; font-size: clamp(1.0625rem, 2vw, 1.2rem); color: #d7dde0; text-wrap: pretty; }
.saluto-scadenza { margin: 1rem 0 0; font-size: .95rem; color: #b9c2c7; }

.bottone-fuso { display: inline-block; padding: .95rem 2.4rem; border-radius: 3rem; background: var(--fuso); color: #1b1f22; font: 500 1.2rem/1.2 var(--serif); text-decoration: none; text-shadow: none; transition: background-color .2s; }
.bottone-fuso:hover { background: var(--fuso-chiaro); }

/* Dettagli */
.dettagli {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem clamp(2.5rem, 6vw, 5.5rem);
  padding: clamp(2.5rem, 6vh, 4rem) 1.25rem clamp(9rem, 16vh, 11rem);
  background: var(--lastra-fondo);
  color: #d7dde0;
  text-align: center;
}
.dettaglio { flex: 1 1 15rem; max-width: 22rem; }
.dettaglio h2 { margin: 0 0 .6rem; font: italic 400 1.2rem/1.2 var(--serif); color: var(--fuso); }
.dettaglio p { margin: 0 0 .3rem; }
.dettaglio-grande { font: 400 1.6rem/1.2 var(--serif); color: var(--carta); margin-bottom: .55rem !important; text-wrap: balance; }
.dettaglio a { color: var(--fuso-chiaro); text-underline-offset: .2em; }
.programma { list-style: none; margin: 0; padding: 0; }
.programma li { padding: .12rem 0; }
.dettaglio-nota { flex-basis: 100%; margin: 0; font: italic 400 1.1rem/1.4 var(--serif); color: var(--fuso-chiaro); }

/* Foglio di risposta */
.foglio {
  position: relative;
  max-width: 50rem;
  margin: -6.5rem auto 0;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--carta);
  border-radius: 4px;
  outline: none;
  scroll-margin-top: 1rem;
  box-shadow: 0 0 0 1px rgba(255, 122, 26, .55), 0 0 0 7px var(--carta), 0 0 0 8px rgba(143, 154, 161, .8), 0 30px 70px -20px rgba(0, 0, 0, .6);
}
.modulo > h2, .ricevuta h2 { margin: 0 0 1.5rem; font: 400 clamp(2rem, 5vw, 3rem)/1.1 var(--serif); font-variation-settings: "opsz" 16; color: var(--lastra); text-align: center; }

.presenza { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.presenza-scelta { position: relative; cursor: pointer; }
.presenza-scelta input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.presenza-scelta span {
  display: flex; align-items: center; justify-content: center; min-height: 5.25rem; height: 100%;
  padding: .75rem 1rem; text-align: center;
  border: 1px solid var(--lastra); border-radius: 4px;
  font: 400 1.3rem/1.2 var(--serif); color: var(--lastra);
  transition: background-color .2s, color .2s;
}
.presenza-scelta:hover span { background: var(--nebbia); }
.presenza-scelta input:checked + span { background: var(--lastra); color: var(--fuso-chiaro); }
.presenza-scelta input:focus-visible + span { outline: 3px solid var(--lastra-luce); outline-offset: 3px; }

/* I campi dedicati a chi partecipa compaiono solo dopo il sì. */
.modulo:has(input[name="attending"][value="0"]:checked) .se-si,
.modulo:not(:has(input[name="attending"]:checked)) .se-si,
.modulo:not(:has(input[name="attending"]:checked)) .sezione-chiusura { display: none; }

.sezione { margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--fuso); }
.sezione h3 { margin: 0 0 .2rem; font: 400 1.75rem/1.2 var(--serif); color: var(--lastra); }
.sezione-nota { margin: 0 0 1.25rem; color: var(--inchiostro-tenue); }

.persona { position: relative; margin: 0; padding: 1.25rem 0 1.5rem; border: 0; border-bottom: 1px solid var(--nebbia); min-width: 0; }
.persona-testa { float: left; width: 100%; padding: 0; margin-bottom: .75rem; font: italic 400 1.2rem/1.3 var(--serif); color: var(--lastra-luce); }
.persona-testa + * { clear: both; }
.persona-togli { position: absolute; top: 1.2rem; right: 0; padding: .1rem .2rem; border: 0; background: none; color: var(--inchiostro-tenue); font: inherit; font-size: .95rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.persona-togli:hover { color: var(--vino); }
.persona > .campi-due { clear: both; }

.campi-due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.campo { margin-bottom: 1rem; min-width: 0; }
.campo label { display: block; margin-bottom: .3rem; font-weight: 500; font-size: .98rem; }
.campo em, .gruppo-titolo em { font-style: normal; font-weight: 400; color: var(--inchiostro-tenue); }
input:not([type=radio], [type=checkbox]), textarea {
  width: 100%; padding: .7rem .8rem;
  border: 1px solid #9fb0a8; border-radius: 3px;
  background: #fff; color: var(--inchiostro);
  font: inherit;
}
input:not([type=radio], [type=checkbox]):focus, textarea:focus { outline: 2px solid var(--lastra-luce); outline-offset: 0; border-color: var(--lastra-luce); }
[aria-invalid="true"]:not([type=checkbox]) { border-color: var(--vino) !important; }

.gruppo { margin-top: .4rem; margin-bottom: 1rem; }
.gruppo-titolo { display: block; margin-bottom: .45rem; font-weight: 500; font-size: .98rem; }
.scelte { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }
.scelta { position: relative; cursor: pointer; }
.scelta input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.scelta span { display: block; padding: .45rem .9rem; border: 1px solid #9fb0a8; border-radius: 2rem; background: #fff; font-size: .98rem; line-height: 1.3; transition: background-color .15s, color .15s, border-color .15s; }
.scelta:hover span { border-color: var(--lastra); }
.scelta input:checked + span { background: var(--lastra); border-color: var(--lastra); color: var(--carta); }
.scelta input:focus-visible + span { outline: 3px solid var(--lastra-luce); outline-offset: 2px; }

.campo-aperto { display: none; }
.persona:has([data-apre="allergie"]:checked) [data-campo="allergie"],
.persona:has([data-apre="altro"]:checked) [data-campo="altro"] { display: block; }

.bottone-aggiungi { margin-top: 1.25rem; padding: .6rem 1.3rem; border: 1px dashed var(--lastra); border-radius: 2rem; background: transparent; color: var(--lastra); font: 500 1rem/1.3 var(--sans); cursor: pointer; }
.bottone-aggiungi:hover { background: var(--nebbia); border-style: solid; }
.conteggio { margin: .9rem 0 0; font: italic 400 1.1rem/1.4 var(--serif); color: var(--lastra-luce); }

.consenso { display: grid; grid-template-columns: auto 1fr; gap: .7rem; margin-top: 1.25rem; font-size: .95rem; line-height: 1.5; cursor: pointer; }
.consenso input { width: 1.25rem; height: 1.25rem; margin: .12rem 0 0; accent-color: var(--lastra); }
.consenso input[aria-invalid="true"] { outline: 2px solid var(--vino); }

.bottone-verde { display: inline-block; padding: 1rem 2.6rem; border: 0; border-radius: 3rem; background: var(--lastra); color: var(--fuso-chiaro); font: 500 1.25rem/1.2 var(--serif); text-decoration: none; cursor: pointer; transition: background-color .2s; }
.bottone-verde:hover { background: var(--lastra-luce); }
.bottone-invia { display: block; width: 100%; max-width: 22rem; margin: 2rem auto 0; }

.errori { margin-bottom: 1.25rem; padding: .75rem 1rem; border-left: 3px solid var(--vino); background: #f8e9e7; color: var(--vino); }
.errori p { margin: 0; }
.errore-campo { margin: .35rem 0 0; color: var(--vino); font-size: .93rem; font-weight: 500; }

/* Ricevuta */
.ricevuta { text-align: center; }
.ricevuta h2 { margin-bottom: .5rem; }
.ricevuta-sotto { margin: 0 auto 1.75rem; max-width: 30rem; color: var(--inchiostro-tenue); }
.ricevuta-persone { list-style: none; margin: 0 auto 1.5rem; padding: 0; max-width: 32rem; border-top: 1px solid var(--fuso); }
.ricevuta-persone li { padding: .8rem 0; border-bottom: 1px solid var(--nebbia); }
.ricevuta-persone strong { display: block; font: 400 1.3rem/1.3 var(--serif); color: var(--lastra); }
.ricevuta-persone span { display: block; font-size: .96rem; color: var(--inchiostro-tenue); }
.ricevuta-persone .ricevuta-esigenze { color: var(--inchiostro); }
.ricevuta-azione { margin: 1.75rem 0 .75rem; }
.nota { margin: 0; font-size: .95rem; color: var(--inchiostro-tenue); }

/* Piede */
.piede { padding: 3.5rem 1rem 3rem; text-align: center; color: #b9c2c7; font-size: .95rem; }
.piede p { margin: 0 0 .4rem; }
.piede a { color: var(--fuso-chiaro); text-underline-offset: .2em; margin: 0 .25rem; }

/* Pagine brevi */
.pagina-breve { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; background: linear-gradient(135deg, #3b4348, #2f363b 45%, #262c30); color: var(--carta); text-align: center; }
.breve { max-width: 34rem; }
.breve .scena-numero { position: static; transform: none; display: block !important; width: min(70vw, 340px); height: auto; margin: 0 auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.breve h1 { margin: 1.5rem 0 .5rem; font: 400 clamp(2rem, 6vw, 3rem)/1.1 var(--serif); }
.breve p { color: #d7dde0; }
.breve a { color: var(--fuso-chiaro); }

.pagina-testo { padding: 2rem 1rem; }
.foglio-testo { margin-top: 1rem; max-width: 42rem; }
.foglio-testo h1 { margin: 0 0 1.5rem; font: 400 clamp(2rem, 5vw, 2.75rem)/1.1 var(--serif); color: var(--lastra); }

@media (max-width: 560px) {
  .presenza, .campi-due { grid-template-columns: 1fr; }
  .presenza-scelta span { min-height: 4rem; }
  .foglio { margin-left: .75rem; margin-right: .75rem; box-shadow: 0 0 0 1px rgba(255, 122, 26, .55), 0 0 0 5px var(--carta), 0 0 0 6px rgba(143, 154, 161, .8); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}