/* ============================================================
   FORMAT SITI SPOSI — Personal Graphics
   Impianto comune a tutti i siti di matrimonio.
   Tutto quello che cambia da coppia a coppia (colori, font, spazi)
   sta nelle variabili qui sotto: le riscrive il generatore leggendo
   il dati.json di quella coppia. Qui dentro non deve mai finire
   niente che riguardi una coppia in particolare.
   ============================================================ */

:root {
  /* --- colori (dal sito originale) --- */
  --barra:        #b6c2a9;  /* barra del menu e fondo del footer */
  --barra-attiva: #4a5d4e;   /* voce di menu della pagina in cui sei */
  --accento:    #a06e5d;       /* titoli e testi lunghi */
  --hero-fondo:         #1d1e20;    /* fondo dell'hero sotto il video */
  --testo:   #1e2921;         /* colore del testo corrente */
  --campo:         #f1f1f1;        /* fondo dei campi del modulo */
  --bianco:        #ffffff;
  --fondo:         #ffffff;  /* la carta della pagina */
  --hero-velo:        0.5;      /* quanto copre il velo sul video */
  --hero-velo-colore: #000000;  /* nero per testi chiari, bianco per testi scuri */

  /* --- font --- */
  /* I font veri li sceglie ogni coppia nel suo dati.json (voce «tema»).
     Questi sono solo i sostituti di sistema, se qualcuno se li dimentica. */
  --f-nomi:    Georgia, 'Times New Roman', serif;   /* nomi degli sposi   */
  --f-menu:    Georgia, 'Times New Roman', serif;   /* menu e data hero   */
  --f-testo:   Georgia, 'Times New Roman', serif;   /* testi lunghi       */
  --f-titolo:  Georgia, 'Times New Roman', serif;   /* titoli di sezione  */
  --f-titolo2: Georgia, 'Times New Roman', serif;   /* titoli evento      */
  --f-sans:    system-ui, -apple-system, sans-serif;/* moduli e didascalie*/

  /* --- misure --- */
  --h-header: 112px;
  --w-pagina: 1440px;
  --w-testo: 600px;
  --w-modulo: 432px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ============================================================
   BARRA IN ALTO
   ============================================================ */
.testata {
  position: relative;
  z-index: 30;
  height: var(--h-header);
  background: var(--barra);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 59px;              /* rilevato: 59px netti fra una voce e l'altra */
  list-style: none;
  margin: 24px 0 0;       /* le voci non sono centrate: stanno a 61px dal bordo */
  padding: 0;
}

.menu a {
  font-family: var(--f-menu);
  font-size: 16px;
  line-height: 24px;
  color: var(--bianco);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .18s ease;
}
.menu a:hover        { color: var(--barra-attiva); }
.menu a.qui          { color: var(--barra-attiva); }   /* pagina in cui sei */

/* --- selettore lingua --- */
.lingue {
  position: absolute;
  right: 150px;
  top: 60px;
}
.lingue__scelta {
  background: none; border: 0; padding: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.lingue__scelta img { width: 20px; height: 15px; }
.lingue__elenco {
  position: absolute; right: 0; top: 34px;
  min-width: 161px;
  background: var(--barra);
  list-style: none; margin: 0; padding: 8px 0;
  display: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.lingue.aperto .lingue__elenco { display: block; }
.lingue__elenco a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 24px;
  font-family: var(--f-menu); font-size: 16px; line-height: 24px;
  color: var(--bianco); text-decoration: none; white-space: nowrap;
}
.lingue__elenco a:hover { color: var(--barra-attiva); }
.lingue__elenco img { width: 20px; height: 15px; }

/* --- bottone menu per telefono --- */
.apri-menu {
  display: none;
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 6px;
}
.apri-menu span { display: block; height: 2px; background: var(--bianco); border-radius: 2px; }

/* ============================================================
   HERO — video a tutto schermo con velo scuro
   ============================================================ */
.hero {
  position: relative;
  height: 717px;
  background: var(--hero-fondo);
  overflow: hidden;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__velo {
  position: absolute; inset: 0;
  background: var(--hero-velo-colore);
  opacity: var(--hero-velo);
}
.hero__dentro { position: relative; z-index: 2; padding: 0 24px; }
.hero__nomi {
  font-family: var(--f-nomi);
  font-style: var(--nomi-stile, normal);
  font-size: var(--nomi-corpo, 100px);
  line-height: 1.3;
  color: var(--bianco);
  margin: 0;
  font-weight: 400;
}
.hero__data {
  font-family: var(--f-data, var(--f-menu));
  font-size: var(--data-corpo, 48px);
  line-height: 1.3;
  color: var(--bianco);
  margin: 4px 0 0;
  font-weight: 400;
}

/* ============================================================
   SEZIONI E BLOCCHI
   ============================================================ */
.sezione { padding: 78px 24px; }
.sezione--bianca  { background: var(--fondo); }
.sezione--colore { background: var(--barra); }
.sezione--colore .titolo,
.sezione--colore .testo,
.sezione--colore .testo--sans,
.sezione--colore .scheda__nome,
.sezione--colore .scheda__indirizzo,
.sezione--colore .scheda__strada a,
.sezione--colore .tappa,
.sezione--colore .tappa__ora,
.sezione--colore .tappa__nome,
.sezione--colore .titolo-evento { color: var(--bianco); }

.dentro { max-width: var(--w-pagina); margin: 0 auto; }

/* --- titolo di sezione: serif, colore d'accento, centrato --- */
.titolo {
  font-family: var(--f-titolo);
  font-weight: 400;
  font-size: 48px;
  line-height: 62.4px;
  color: var(--accento);
  text-align: center;
  margin: 0 0 46px;
  letter-spacing: 0.01em;
}
.titolo--grande { font-size: 56px; line-height: 70px; }

/* --- titolo di un evento: seconda riga in corsivo --- */
.titolo-evento {
  font-family: var(--f-titolo2);
  font-weight: 400;
  font-size: 56px;
  line-height: 70px;
  color: var(--accento);
  margin: 0 0 26px;
}
.titolo-evento em { font-style: italic; display: block; }

/* --- testi lunghi: serif 22px, centrati --- */
.testo {
  font-family: var(--f-testo);
  font-size: 22px;
  line-height: 28.6px;
  color: var(--accento);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 35px;
}
.testo:last-child { margin-bottom: 0; }
.testo--sans {
  font-family: var(--f-sans);
  font-size: 18px;
  line-height: 28px;
  color: var(--testo);
}
.testo--largo { max-width: 900px; }

/* --- foto --- */
.foto { margin: 0 auto 44px; }
.foto img { margin: 0 auto; object-fit: cover; width: 100%; }
.foto--media img  { max-width: 412px;  height: 239px; }
.foto--grande img { max-width: 1070px; height: 691px; }

/* --- mappa --- */
.mappa {
  width: 100%; max-width: 405px; height: 279px;
  margin: 34px auto 0;
  border: 0; display: block; filter: grayscale(.15);
}
.mappa--piccola { max-width: 300px; height: 200px; }
.mappa--larga   { max-width: 620px; height: 320px; }

/* --- due colonne alternate (apericena / brunch) --- */
.evento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1030px;
  margin: 0 auto 110px;
}
.evento:last-child { margin-bottom: 0; }
.evento--rovescio .evento__testo { order: 2; text-align: right; }
.evento--rovescio .evento__mappa { order: 1; }
.evento--rovescio .titolo-evento { text-align: right; }
.evento__quando {
  font-family: var(--f-sans);
  font-size: 24px; line-height: 31.2px;
  color: var(--testo);
  margin: 0 0 34px;
}
.evento__dove {
  font-family: var(--f-sans);
  font-size: 24px; line-height: 31.2px;
  color: var(--testo);
  margin: 0;
  white-space: pre-line;
}
.evento__disegno { margin: 26px 0 0; z-index: 2; }
.evento__disegno img { max-height: 200px; width: auto; }
.evento { position: relative; }   /* serve al timbro appoggiato a coordinate sue */

/* --- riquadro libero: foto e testi a coordinate precise (viaggio di nozze) --- */
.libero { position: relative; max-width: 1040px; margin: 0 auto; }
.libero__pezzo { position: absolute; }
.libero img.libero__pezzo { object-fit: cover; }

/* --- riquadro IBAN --- */
.iban {
  max-width: 444px; margin: 12px auto 0; text-align: center;
  border: 1px solid rgba(255,255,255,.55);
  padding: 34px 26px;
}
.iban__etichetta {
  font-family: var(--f-sans); font-size: 16px; line-height: 28px;
  color: var(--bianco); margin: 54px 0 0; letter-spacing: .12em; text-align: center;
}
.iban__numero {
  font-family: var(--f-titolo2); font-size: 29px; line-height: 38px;
  color: var(--bianco); margin: 0 0 18px; font-weight: 400;
}
.iban__note {
  font-family: var(--f-sans); font-size: 16px; line-height: 28px;
  color: var(--bianco); margin: 0; white-space: pre-line;
}

/* ============================================================
   MODULO RSVP
   ============================================================ */
.modulo { max-width: var(--w-modulo); margin: 224px auto 0; }
.campo { margin-bottom: 18px; }
.campo > label,
.campo__domanda {
  display: block;
  font-family: var(--f-sans); font-size: 16px; line-height: 28px;
  color: #000; margin-bottom: 4px;
}
.campo input[type=text],
.campo input[type=email],
.campo textarea {
  width: 100%; height: 48px;
  background: var(--campo); border: 0; border-radius: 0;
  padding: 0 14px;
  font-family: var(--f-sans); font-size: 16px; color: #1a1a1a;
}
.campo textarea { height: 110px; padding: 12px 14px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--accento); }
.scelta {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-sans); font-size: 16px; line-height: 28px;
  color: #1a1a1a; margin-top: 4px; cursor: pointer;
}
.scelta input { accent-color: var(--accento); width: 13px; height: 13px; margin: 0; }
.obbligo { color: var(--accento); }

.invia {
  display: block; margin: 34px auto 0;
  min-width: 97px; height: 50px; padding: 0 26px;
  background: var(--accento); color: var(--bianco); border: 0; cursor: pointer;
  font-family: var(--f-sans); font-size: 14px; line-height: 18.2px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: opacity .18s ease;
}
.invia:hover { opacity: .86; }

.esito {
  max-width: var(--w-modulo); margin: 24px auto 0; padding: 14px 18px;
  font-family: var(--f-sans); font-size: 15px; line-height: 24px; text-align: center;
}
.esito--ok    { background: #eef3ea; color: #33502f; }
.esito--guaio { background: #f6e7e3; color: #8a3b28; }

/* ============================================================
   FOOTER
   ============================================================ */
.chiusura {
  background: var(--barra);
  min-height: 130px;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.chiusura img { width: 134px; height: 106px; object-fit: cover; }

/* ============================================================
   TELEFONO E TABLET
   ============================================================ */
@media (max-width: 1100px) {
  /* sotto i 1100 il riquadro libero non ci sta piu': tutto in colonna */
  .libero { min-height: 0 !important; }
  .libero__pezzo { position: static !important; width: 100% !important;
                   max-width: 620px; height: auto !important; margin: 0 auto 22px !important; }
  .evento__disegno { position: static !important; margin: 26px 0 0 !important; }
  .menu { gap: 34px; }
  .menu a { font-size: 15px; }
  .lingue { right: 24px; }
  .hero__nomi { font-size: 68px; line-height: 88px; }
  .hero__data { font-size: 36px; line-height: 48px; }
  .evento { grid-template-columns: 1fr; gap: 34px; }
  .evento--rovescio .evento__testo { order: 0; text-align: left; }
  .evento--rovescio .titolo-evento { text-align: left; }
}

@media (max-width: 760px) {
  .apri-menu { display: flex; }
  .testata { justify-content: flex-start; padding-left: 68px; height: 88px; }
  .menu {
    position: absolute; left: 0; top: 88px; right: 0;
    background: var(--barra);
    flex-direction: column; align-items: flex-start;
    gap: 0; padding: 8px 0 18px 24px;
    display: none;
  }
  .testata.aperto .menu { display: flex; }
  .menu a { display: block; padding: 10px 0; font-size: 16px; }
  .lingue { right: 16px; }
  .hero { height: 78vh; min-height: 460px; }
  .hero__nomi { font-size: 40px; line-height: 50px; }
  .hero__data { font-size: 22px; line-height: 30px; }
  .sezione { padding: 48px 20px; }
  .titolo, .titolo--grande { font-size: 32px; line-height: 42px; margin-bottom: 28px; }
  .titolo-evento { font-size: 34px; line-height: 44px; }
  .testo { font-size: 19px; line-height: 26px; }
  .evento__quando, .evento__dove { font-size: 19px; line-height: 27px; }
  .modulo { margin-top: 34px; }
  .libero { min-height: 0 !important; }
  .libero__pezzo { position: static !important; width: 100% !important;
                   height: auto !important; margin: 0 0 22px !important; }
}


/* ============================================================
   TIMELINE DELLA GIORNATA — icona, orario, nome della tappa
   ============================================================ */
.timeline {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1000px;
  display: grid; grid-template-columns: repeat(var(--quante, 4), 1fr); gap: 24px;
}
.tappa { text-align: center; color: var(--accento); }
.tappa__icona { width: 66px; height: 66px; margin: 0 auto 16px; display: block; }
.tappa__ora {
  display: block;
  font-family: var(--f-sans); font-size: 20px; letter-spacing: .16em;
  color: var(--accento); margin-bottom: 6px;
}
.tappa__ora--da-decidere { opacity: .45; }
.tappa__nome {
  display: block;
  font-family: var(--f-titolo); font-size: 21px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accento);
}

/* ============================================================
   BOTTONE che porta a un'altra pagina
   ============================================================ */
.verso { margin: 46px 0 0; }
.bottone {
  display: inline-block;
  font-family: var(--f-sans); font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  color: var(--bianco); background: var(--accento);
  padding: 16px 34px; border: 1px solid var(--accento);
  transition: background .2s ease, color .2s ease;
}
.bottone:hover { background: transparent; color: var(--accento); }
.sezione--colore .bottone {
  background: transparent; color: var(--bianco); border-color: var(--bianco);
}
.sezione--colore .bottone:hover {
  background: var(--bianco); color: var(--barra);
}

/* ============================================================
   SCHEDA DEL POSTO — nome, indirizzo, indicazioni stradali
   ============================================================ */
.scheda { text-align: center; margin: 0 auto 26px; max-width: 620px; }
.scheda__nome {
  font-family: var(--f-titolo); font-size: 30px; letter-spacing: .08em;
  color: var(--accento); margin: 0 0 10px; text-transform: uppercase;
}
.scheda__indirizzo {
  font-family: var(--f-sans); font-size: 16px; line-height: 26px;
  color: var(--testo); margin: 0 0 12px;
}
.scheda__strada a {
  font-family: var(--f-sans); font-size: 14px; letter-spacing: .1em;
  color: var(--accento); text-transform: uppercase;
  border-bottom: 1px solid currentColor; text-decoration: none; padding-bottom: 2px;
}
.scheda__strada a:hover { opacity: .7; }

/* monogramma scritto, quando non c'e' un logo disegnato */
.monogramma {
  font-family: var(--f-nomi); font-size: 42px; letter-spacing: .18em;
  color: var(--bianco);
}

@media (max-width: 760px) {
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 34px 18px; }
  .tappa__icona { width: 54px; height: 54px; }
  .tappa__nome { font-size: 18px; }
  .scheda__nome { font-size: 24px; }
}

.hero__sotto {
  font-family: var(--f-sans); font-size: 18px; letter-spacing: .22em;
  text-transform: uppercase; color: inherit; margin: 14px 0 0;
}
.hero__dentro { color: var(--hero-testo, #ffffff); }
.hero__nomi, .hero__data { color: inherit; }

/* menu a tendina e caselle multiple del modulo */
.campo select {
  width: 100%; height: 48px;
  background: var(--campo); border: 0; border-radius: 0; padding: 0 14px;
  font-family: var(--f-sans); font-size: 16px; color: #1a1a1a;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.campo select:focus { outline: 2px solid var(--accento); }
.campo__aiuto {
  display: block; font-style: normal; font-size: 13px;
  letter-spacing: .02em; opacity: .6; margin-top: 2px;
}
.scelta input[type=checkbox] { accent-color: var(--accento); width: 15px; height: 15px; }

/* ============================================================
   TAVOLOZZA DEL DRESS CODE — i colori si vedono, non si spiegano
   ============================================================ */
.colori__titolo {
  font-family: var(--f-sans); font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accento);
  text-align: center; margin: 0 0 22px;
}
.colori {
  list-style: none; margin: 0 auto 20px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px;
  max-width: 720px;
}
.colore { text-align: center; width: 96px; }
.colore__macchia {
  display: block; width: 68px; height: 68px; margin: 0 auto 10px;
  border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.colore__nome {
  font-family: var(--f-sans); font-size: 13px; line-height: 18px;
  color: var(--testo); letter-spacing: .04em;
}
.sezione--colore .colore__nome,
.sezione--colore .colori__titolo { color: var(--bianco); }
.sezione--colore .colore__macchia { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }

/* ============================================================
   VOCI INFORMATIVE — un titolino e due righe
   ============================================================ */
.voci {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 760px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 34px 44px;
}
.voce { text-align: left; }
.voce__titolo {
  font-family: var(--f-titolo); font-size: 22px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accento); margin: 0 0 8px;
}
.voce__testo {
  font-family: var(--f-sans); font-size: 15px; line-height: 26px;
  color: var(--testo); margin: 0;
}
.sezione--colore .voce__titolo, .sezione--colore .voce__testo { color: var(--bianco); }

@media (max-width: 760px) {
  .colori { gap: 18px; }
  .colore { width: 78px; }
  .colore__macchia { width: 54px; height: 54px; }
  .voci { grid-template-columns: 1fr; gap: 26px; }
}

/* ============================================================
   MONOGRAMMA — in cima nella barra e in fondo nel footer
   ============================================================ */
.testata--con-marchio { flex-direction: column; height: auto; padding: 22px 24px 16px; }
.testata--con-marchio .menu { margin: 14px 0 0; }
.marchio { display: block; line-height: 0; }
.marchio img { height: 62px; width: auto; }
.monogramma-img { height: 96px; width: auto; }

@media (max-width: 760px) {
  .testata--con-marchio { flex-direction: row; padding-left: 68px; }
  .testata--con-marchio .menu { margin: 0; }
  .marchio img { height: 44px; }
  .monogramma-img { height: 68px; }
}

/* i nomi disegnati col font della coppia: un'immagine, non un testo */
.hero__nomi--disegno { line-height: 0; }
.hero__nomi--disegno img {
  width: var(--nomi-larghezza, 760px); max-width: 88vw; height: auto; margin: 0 auto;
}
.hero__nomi--disegno + .hero__data { margin-top: 18px; }
@media (max-width: 760px) { .hero__nomi--disegno img { max-width: 84vw; } }