/* =========================================================
   APULIA VESPA DAY 2026 — sottosito evento (trends.srl/apuliavespaday2026)
   Identità propria (rosso/blu/nero su base pietra chiara), non lo
   stile scuro di trends.srl: è un brand a sé per il singolo evento.
   ========================================================= */

:root{
  --blue: #1b2d7a;
  --red: #d21f2c;
  --ink: #15161a;
  --cream: #f7f4ee;
  --cream-dim: #eae5da;
  --fg-dim: #4a4a4a;
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --sans: 'Barlow', -apple-system, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
p{margin:0 0 1em;}
img{max-width:100%;display:block;}

.wrap{max-width:1200px;margin:0 auto;padding:0 6vw;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--ink);
  padding:.9rem 6vw;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
}
.site-header .logo-img{height:52px;width:auto;}
.main-nav{display:flex;gap:2rem;flex-wrap:wrap;}
.main-nav a{
  color:#fff;font-family:var(--sans);font-weight:600;font-size:.92rem;
  letter-spacing:.02em;
  border-bottom:2px solid transparent;
  padding-bottom:.2rem;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.main-nav a:hover{border-color:var(--red);color:var(--red);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:7rem 6vw 2.2rem;
  overflow-x:hidden;
  text-align:center;
}
.hero-bg{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center 28%;
  z-index:0;
}
.hero-bg-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,12,20,.1) 0%, rgba(10,12,20,.02) 35%, rgba(10,12,20,.5) 100%);
  z-index:2;
  pointer-events:none;
}

.hero-badges-left,.hero-badges-right{
  position:absolute;top:2rem;z-index:3;
  display:flex;flex-direction:column;gap:1rem;
}
.hero-badges-left{left:5vw;align-items:flex-start;}
.hero-badges-right{right:5vw;align-items:flex-end;}
.hero-badges-left img{width:min(290px,29vw);}
.hero-badges-right img{width:min(150px,15vw);}

.hero-content{position:relative;z-index:3;max-width:1100px;}
/* logo_completo.png include già arco+colonna: leggermente più "quadrato"
   del vecchio logo solo-testo, per questo larghezza ridotta rispetto a prima */
.hero-logo-img{width:min(820px,82vw);margin:60px auto 0;display:block;}
.hero-script{
  font-family:'Caveat',cursive;font-weight:700;color:#f4c93e;
  font-size:clamp(1.6rem,3.6vw,2.6rem);
  margin:.2rem 0 0;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.hero-80badge{
  position:relative;z-index:3;
  width:min(96px,11vw);
  margin:1.4rem auto 0;
}
.hero-official{
  position:relative;z-index:3;
  color:#fff;font-family:var(--sans);font-weight:600;letter-spacing:.05em;
  font-size:.92rem;margin:.8rem 0 0;
}
.scroll-cue{
  position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);
  color:#fff;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  z-index:3;opacity:.7;
}
.event-banner.blue{background:var(--blue);}

/* ---------- banner sections (cosa ti aspetta / perchè iscriversi / intro video) ---------- */
.event-section{position:relative;}
.event-banner{
  padding:1.1rem 6vw;text-align:center;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2rem);color:#fff;letter-spacing:.03em;
}
.event-banner.red{background:var(--red);}
.event-banner.black{background:var(--ink);}
.event-photo-wrap{position:relative;min-height:70vh;display:flex;align-items:center;}
.event-photo-wrap .event-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
/* sezione intro: stesso trattamento "video + finestrella semi-trasparente"
   delle sezioni successive, ma senza banner colorato sopra */
.intro-video-section .event-photo-wrap{min-height:60vh;}
.event-photo-wrap::before{
  content:"";position:absolute;inset:0;background:rgba(10,10,10,.18);z-index:0;
}
.event-card{
  position:relative;z-index:1;
  background:rgba(247,244,238,.94);
  padding:2.4rem 2.2rem;
  max-width:520px;
  margin:3rem 6vw;
  border-radius:2px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.event-card.align-right{margin-left:auto;}
.event-card ul{display:flex;flex-direction:column;gap:.85rem;}
.event-card li{
  font-size:1.02rem;font-weight:600;color:var(--ink);
  padding-left:1.4em;position:relative;
}
.event-card li::before{
  content:"•";color:var(--red);position:absolute;left:0;font-size:1.3em;line-height:.8;
}
.event-card .why-item{margin-bottom:1.1rem;}
.event-card .why-item:last-child{margin-bottom:0;}
.event-card .why-title{
  display:flex;gap:.6em;align-items:flex-start;
  font-weight:700;color:var(--ink);font-size:1rem;margin-bottom:.3em;
}
.event-card .why-title .check{color:var(--red);flex-shrink:0;}
.event-card .why-text{color:var(--fg-dim);font-size:.92rem;line-height:1.55;margin-left:1.5em;}

/* ---------- iscrizioni / form ---------- */
.iscrizioni{padding:5rem 0 6rem;background:var(--cream-dim);}
.iscrizioni .eyebrow{
  display:block;text-align:center;color:var(--red);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;margin-bottom:.8rem;
}
.iscrizioni h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.8rem,4vw,2.8rem);color:var(--blue);text-align:center;
  margin:0 0 .6rem;
}
.iscrizioni .sub{text-align:center;color:var(--fg-dim);max-width:38em;margin:0 auto 3rem;}

.reg-form{
  max-width:760px;margin:0 auto;
  background:#fff;border-radius:4px;
  padding:2.6rem 2.4rem;
  box-shadow:0 20px 60px rgba(21,22,26,.08);
}
.form-step{display:none;}
.form-step.is-active{display:block;animation:fadeIn .35s var(--ease);}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.step-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  color:var(--blue);font-size:1.3rem;margin:0 0 1.6rem;
  border-bottom:3px solid var(--red);padding-bottom:.6rem;
}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.4rem;}
.field-grid .full{grid-column:1 / -1;}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-size:.82rem;font-weight:600;color:var(--ink);}
.field label .req{color:var(--red);}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:.95rem;
  padding:.7em .8em;border:1px solid #d8d3c8;border-radius:3px;
  background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);
}
.field-dob{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;}
.checkbox-row{display:flex;align-items:flex-start;gap:.6em;font-size:.92rem;color:var(--fg-dim);}
.checkbox-row input{margin-top:.25em;}
.extra-list{display:flex;flex-direction:column;gap:.6rem;}
.extra-list label{
  display:flex;align-items:flex-start;gap:.6em;font-size:.92rem;
  font-weight:400;color:var(--ink);
}

.form-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2.2rem;gap:1rem;}
.btn{
  font-family:var(--sans);font-weight:700;font-size:.9rem;letter-spacing:.02em;
  padding:.9em 1.8em;border-radius:3px;border:2px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.btn-primary{background:var(--red);color:#fff;}
.btn-primary:hover{background:#a91821;transform:translateY(-1px);}
.btn-ghost{background:transparent;border-color:#c9c3b6;color:var(--ink);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.step-indicator{font-size:.8rem;color:var(--fg-dim);letter-spacing:.05em;}

.form-msg{
  max-width:760px;margin:0 auto 1.6rem;padding:1rem 1.4rem;
  border-radius:3px;font-size:.92rem;display:none;
}
.form-msg.is-visible{display:block;}
.form-msg.success{background:#e4f3e6;color:#1f6b2c;border:1px solid #b7ddbb;}
.form-msg.error{background:#fdeaea;color:#a11c1c;border:1px solid #f2b8b8;}

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink);color:rgba(255,255,255,.7);
  padding:3.2rem 6vw 1.8rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:2.6rem;
}
.footer-logo{width:min(280px,26vw);display:block;}
.footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;}
.footer-social{
  width:34px;height:34px;flex-shrink:0;
  border:2px solid #fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease);
}
.footer-social svg{width:16px;height:16px;fill:#fff;}
.footer-social:hover{background:#fff;}
.footer-social:hover svg{fill:var(--ink);}
.footer-links{font-size:.92rem;margin:0;color:#fff;}
.footer-links a{text-decoration:underline;text-underline-offset:2px;}
.footer-links a:hover{color:var(--red);}
.footer-links .sep{margin:0 .5em;opacity:.5;}
.footer-tag{margin:0;font-size:.88rem;font-weight:600;color:rgba(255,255,255,.85);}
.footer-tag.accent{color:#f4c93e;}
.footer-badge img{width:min(78px,9vw);}
.footer-map{width:min(220px,24vw);height:130px;border-radius:4px;overflow:hidden;background:#fff;}
.footer-map iframe{width:100%;height:100%;border:0;display:block;}
.footer-copy{
  margin:2.4rem 0 0;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.12);
  text-align:center;font-size:.78rem;color:rgba(255,255,255,.5);
}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .field-grid{grid-template-columns:1fr;}
  .field-dob{grid-template-columns:1fr 1fr 1fr;}
  .event-card{margin:2rem 5vw;max-width:none;}
  .hero-badges-left img{width:29vw;}
  .hero-badges-right img{width:15vw;}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:2rem;}
  .footer-map{grid-column:1 / -1;width:100%;height:160px;justify-self:center;max-width:340px;}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;text-align:center;}
  .footer-contact{align-items:center;}
  .footer-badge{justify-self:center;}
}
@media(max-width:640px){
  .main-nav{display:none;}
  .hero-badges-left,.hero-badges-right{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:1.4rem;}
  .hero-badges-left img{width:19vw;}
  .hero-badges-right img{width:13vw;}
  .hero{padding-top:1.4rem;}
  .hero-logo-img{margin-top:30px;}
  .form-nav{flex-wrap:wrap;}
  .reg-form{padding:1.8rem 1.4rem;}
}