/* Minimal, elegant style */
:root{
  /* base background shifted more toward bordeaux (warmer, richer) */
  --bg: #ffeef2;
  --fg: #1f1f1f;
  --muted: #6b7280;
  --brand: #800020; /* bordeaux */
  --brand-2: #b00020; /* amber */
  --card: #ffffff;
  --ring: rgba(128,0,32,.45);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg); /* base color, image moved to pseudo for parallax */
  line-height: 1.6;
  --parallax-offset: 0px; /* will be updated via JS */
}

/* Parallax background layer */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(255,253,249,0.07), rgba(255,253,249,0.07)),
    url('sfondoRSVP_background.png') center top / cover no-repeat;
  transform: translate3d(0,var(--parallax-offset),0);
  will-change: transform;
  /* subtle overlay to keep text readable */
  /* linear-gradient(rgba(255,253,249,0.6), rgba(255,253,249,0.75)) can be added if needed */
}

/* Mobile optimization: reduce motion & disable parallax heavy work on very small screens */
@media (max-width: 680px){
  body::before{
    background-position: center top;
    background-size: cover; /* keep cover but we can tweak if cropping is bad */
    transform: none !important; /* static background */
  }
}

/* Respect user preference to reduce motion */
@media (prefers-reduced-motion: reduce){
  body::before{ transform:none !important; }
}

h1,h2,h3{
  font-family: "Playfair Display", Georgia, serif;
  margin: 0 0 .5rem 0;
  line-height: 1.2;
}
h1{ font-size: clamp(2.2rem, 3vw + 1rem, 4rem); }
h2{ font-size: clamp(1.6rem, 1vw + 1rem, 2.2rem); margin-top:2rem; }
h3{ font-size: 1.125rem; }

p{ margin: .5rem 0 1rem; }

.container{
  width:min(960px, calc(100% - 2rem));
  margin: 2rem auto;
}

.hero{
  position: relative;
  min-height: 65vh; /* slightly taller base */
  display:grid;
  place-items:center;
  text-align:center;
  /* softer bordeaux-tinged accents */
  /*background:
    radial-gradient(1200px 600px at 20% 20%, rgba(128,0,32,.5), transparent 60%),
    radial-gradient(1200px 600px at 80% 10%, rgba(176,24,48,.5), transparent 60%),
    linear-gradient(180deg, #fff0f2 0%, #ffffff 100%);*/
  overflow:visible; /* allow calligraphic swashes not to be cut */
}

/* Wider inner box for large calligraphic names */
.hero-inner{ max-width: 1180px; padding: 3rem 3rem 3.25rem; }
.hero-inner h1#names{ display:inline-block; padding: .25rem 1rem; }

@media (min-width: 900px){
  .hero{ min-height: 75vh; }
  .hero-inner{ padding: 4rem 3.5rem 4rem; }
  .hero-inner h1#names{ font-size: clamp(3rem, 6.5vw + 1rem, 6rem); height: 118px; }
}
.hero-inner h1#names{ display:inline-block; padding: .50rem 1rem; }

.hero .overlay{
  position:absolute; inset:0;
  background-image: url('pattern.svg');
  opacity:.05; pointer-events:none;
}

.hero .monogram{
  font-size: 3rem;
  margin-bottom: .5rem;
}
.hero .monogram img{ display:block; width:90px; height:auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.18)); margin:0 auto; }

.hero-inner .date{
  color: #800020;
  margin-bottom: 1rem;
}

.cta{ display:flex; gap:.75rem; justify-content:center; }
.btn, .btn-outline{
  display:inline-block;
  padding: .75rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--brand);
  text-decoration:none;
  font-weight: 600;
}
.btn{ background: var(--brand); color: white; }
.btn:focus, .btn-outline:focus, input:focus, select:focus, textarea:focus{
  outline: none; box-shadow: 0 0 0 .25rem var(--ring);
}
.btn-outline{ color: var(--brand); background: transparent; }

.countdown{
  margin-top: 1.25rem;
  font-weight: 600;
}

.info-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}
.card{
  background: var(--card);
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.04);
}

.timeline{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.5rem;
}
.timeline li{
  display:flex; gap:.75rem; align-items:center;
}
.timeline li span{
  font-weight:600;
  color: var(--brand);
}
.timeline li span:first-child{
  font-variant-numeric: tabular-nums;
  width:90px; /* enlarged time column */
  flex-shrink:0;
}

#rsvpForm .grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}
label{ display:grid; gap:.4rem; font-weight:600; }
label input, label select, label textarea{
  padding: .7rem .85rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background:white;
  font: inherit;
}
label.full{ grid-column: 1 / -1; }
label.consent{ align-items:center; grid-auto-flow:column; justify-content:start; gap:.5rem; font-weight:500; }
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.msg{ margin-top:.75rem; min-height: 1.25rem; font-weight:600; }
.msg.success{ color: #0a7d32; }
.msg.error{ color: #b00020; }
.msg.warn{ color: #b26a00; }

.footer{
  margin-top:3rem;
  text-align:center;
  padding:2rem 1rem 3rem;
  color: var(--muted);
  border-top:1px solid #f2f2f2;
}

/* small decoration */
#names, #footerNames{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: 'Great Vibes', 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw + 1rem, 5rem);
  letter-spacing: .5px;
  line-height: 1.05;
}

.lang-switch{
  position: fixed; top: 12px; right: 12px; z-index: 50;
  display: flex; gap: 6px;
}
.lang-switch a{
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  text-decoration: none;
  font-weight: 600;
}
.lang-switch a.active{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem var(--ring);
}

/* Gift / Honeymoon list */
#gift{margin-top:2rem;}
.gift-box{background:var(--card);border:1px solid #eee;border-radius:16px;padding:1rem 1.2rem;box-shadow:0 6px 14px rgba(0,0,0,.04)}
.link-btn{background:none;border:none;padding:0;color:var(--brand);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;}
.gift-box dl{display:grid;grid-template-columns:120px 1fr;gap:.4rem .75rem;margin:1rem 0;}
.gift-box dt{font-weight:600;}
.gift-box dd{margin:0;}
.gift-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem;}
.btn-small{background:var(--brand);color:#fff;border:1px solid var(--brand);border-radius:10px;padding:.5rem .75rem;font:inherit;font-weight:600;cursor:pointer;}
.btn-small:focus{outline:none;box-shadow:0 0 0 .25rem var(--ring);}
.qr{margin-top:.75rem;text-align:center;}
.qr img{max-width:220px;width:100%;height:auto;border:1px solid #eee;border-radius:12px;background:#fff;padding:.5rem;}
.micro{font-size:.75rem;color:var(--muted);margin-top:.5rem;}
.muted{color:var(--muted);}

/* Mobile readability enhancement for "Con affetto," */
@media (max-width: 680px){
  #i_with_love{
    color: var(--fg);
    font-weight:600;
    position:relative;
    z-index:0;
  }
  #i_with_love::before{
    content:"";
    position:absolute; inset:-2px -6px;
    background: rgba(255,253,249,0.65);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius:8px;
    z-index:-1;
  }
}