:root{
  --bg:#fffdf9;
  --muted:#6b6b6b;
   --accent: rgb(151, 190, 245);
  --accent-dark: rgb(151, 190, 245);
  --container:1100px;
  --radius:10px;
  --shadow: 0 6px 18px rgba(10,10,10,0.08);
  --gap:1rem;
  font-size:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  background:var(--bg);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.container{max-width:var(--container);margin:0 auto;padding:0 0.75rem}

/* Header */
.site-header{background:linear-gradient(90deg, rgba(255,255,255,0.75), rgba(255,255,255,0.9));position:sticky;top:0;z-index:30;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
.logo{font-weight:700;color:var(--accent);text-decoration:none;font-size:1rem}
.site-nav{display:none;position:absolute;top:100%;right:0;margin-top:0.5rem;background:#fff;border-radius:10px;padding:0.5rem;box-shadow:0 8px 24px rgba(10,20,30,0.08);z-index:9999}
.site-nav.open{display:block}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:0;align-items:center;flex-direction:column}
.site-nav a{color:var(--muted);text-decoration:none;padding:0.75rem 1rem;display:block;white-space:nowrap}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:0.45rem 0.75rem;border-radius:6px}
.btn{background:var(--accent);border:none;color:white;padding:0.6rem 1rem;border-radius:8px}
.nav-toggle{background:transparent;border:0;padding:0.35rem;display:inline-flex;align-items:center}
.hamburger{width:22px;height:2px;display:block;position:relative;border-radius:2px;background:linear-gradient(135deg,var(--accent) 0%, var(--accent-dark) 100%)}
.hamburger::after,.hamburger::before{content:"";position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:linear-gradient(135deg,var(--accent) 0%, var(--accent-dark) 100%)}
.hamburger::before{top:-7px}
.hamburger::after{top:7px}

/* Hero */
.hero{padding:3.25rem 0;background:linear-gradient(180deg,#fff 0%, #fffcfa 100%);text-align:center}
.hero-inner h1{font-size:2rem;margin:0;color:var(--accent-dark)}
.hero-name{font-family:'Playfair Display', serif;display:inline-block;font-style:italic;font-weight:400;color:var(--accent-dark);font-size:clamp(2rem,6vw,4rem);line-height:1;letter-spacing:0.005em;will-change:transform;animation:hero-bounce 3.6s cubic-bezier(.22,.9,.37,1) infinite}
.date{color:var(--muted);margin:0.5rem 0}
.lead{margin:1rem 0 1.25rem;color:var(--muted)}
.hero-actions{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}

/* Bigger hero RSVP button */
#rsvp-open-hero{font-size:1.15rem;padding:0.9rem 1.25rem;font-weight:600;border-radius:10px}

@media(max-width:420px){
  #rsvp-open-hero{font-size:1.05rem;padding:0.75rem 1rem}
}

/* Sections */
.section{padding:2rem 0}
.pale{background:#fffefc}
.two-col{display:grid;grid-template-columns:1fr;gap:1rem}
.timeline{padding:0;margin:0;list-style:none;color:var(--muted)}

.venue-grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:start}

/* Cards grid for whereandwhen */
.cards-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.card{background:#fff;padding:1.1rem;border-radius:12px;box-shadow:0 8px 20px rgba(15,30,45,0.08);border:1px solid rgba(16,24,32,0.04);color:#0b1720;text-align:center;transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s ease;transform-origin:center center}
.card h3{margin:0 0 0.75rem 0;font-size:1.05rem;text-align:center;line-height:1.25}
.card p{margin:0.35rem 0;color:#24333d;text-align:center;line-height:2.65}

/* IBAN section inside cards */
.iban-section{margin-top:0.6rem;text-align:left}
.iban-section h4{margin:0 0 0.5rem 0;font-size:1rem;color:var(--accent-dark)}
.iban-row{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0.35rem 0;border-top:1px dashed rgba(16,24,32,0.04)}
.iban-label{color:var(--muted);font-size:0.95rem;flex:1}
.iban-value{font-weight:600;flex:2;color:#0b1720}
.copy-btn{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:0.25rem 0.5rem;border-radius:6px;cursor:pointer}
.copy-btn.copied{background:var(--accent);color:#fff;border-color:var(--accent-dark)}

@media(max-width:420px){
  .iban-row{flex-direction:column;align-items:flex-start}
  .copy-btn{align-self:flex-end}
}

/* center icon + date inline */
.card .meta{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;margin:0 auto;padding:0}
.card .meta svg{width:20px;height:20px;flex:0 0 20px;display:block}
.card p{display:block}
.card .address{display:block;margin-top:0.4rem;color:inherit}

@media(min-width:700px){
  .cards-grid{grid-template-columns:1fr 1fr}
}

/* Hover / focus effect: slight scale and lift */
.card:hover,
.card:focus-within{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 14px 32px rgba(15,30,45,0.12);
}

@media (prefers-reduced-motion: reduce){
  .card{transition:none}
  .card:hover,.card:focus-within{transform:none}
}

/* Card icons */
.card-icon{display:block;margin:0 auto 0.75rem auto;width:64px;height:64px;object-fit:contain;border-radius:10px}

/* Footer */
.site-footer{padding:1.25rem 0;text-align:center;color:var(--muted);font-size:0.95rem}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);padding:1rem;visibility:hidden;opacity:0;pointer-events:none;z-index:99999}
.modal[aria-hidden="false"]{visibility:visible;opacity:1;pointer-events:auto}
.modal-content{background:white;padding:1rem;border-radius:12px;max-width:520px;width:100%;box-shadow:var(--shadow);max-height:90vh;overflow:auto}
.modal-close{float:right;border:0;background:transparent;font-size:1.2rem}
.modal-content h3{margin-top:0}
.modal-content label{display:block;margin:0.5rem 0;font-size:0.95rem}
.modal-content input,.modal-content select,.modal-content textarea{width:100%;padding:0.5rem;border:1px solid #e6e6e6;border-radius:8px}
.form-actions{display:flex;gap:0.5rem;justify-content:flex-end;margin-top:0.75rem}
.hidden{display:none}

@media(max-width:420px){
  .modal{padding:0.5rem}
  .modal-content{padding:0.8rem;border-radius:10px;max-height:calc(100vh - 1rem)}
  .modal-content h3{font-size:1.1rem;margin-bottom:0.75rem}
  .modal-content label{font-size:0.9rem;margin:0.4rem 0}
  .modal-content input,.modal-content select,.modal-content textarea{padding:0.45rem;font-size:16px}
  .modal-close{font-size:1.5rem;padding:0}
  .form-actions{gap:0.4rem;margin-top:0.6rem}
  .form-actions .btn{padding:0.5rem 0.8rem;font-size:0.95rem}
}

/* Utilities */
.grid{display:grid}

/* Responsive */
@media(min-width:700px){
  .two-col{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .venue-grid{grid-template-columns:1fr 1fr}
  .site-nav{display:block;position:static;background:transparent;padding:0;box-shadow:none}
  .site-nav ul{flex-direction:row}
  .site-nav a{padding:0.5rem}
  .nav-toggle{display:none}
  .hero-inner h1{font-size:2.5rem}
  .hero-name{font-size:3.25rem}
}

  @keyframes hero-bounce{
    0%{transform:translateY(0)}
    10%{transform:translateY(-6px)}
    25%{transform:translateY(0)}
    60%{transform:translateY(-3px)}
    100%{transform:translateY(0)}
  }

  @media (prefers-reduced-motion: reduce){
    .hero-name{animation:none}
  }

@media(min-width:1100px){
  .hero{padding:4.5rem 0}
}

/* Small-screen tweaks for better smartphone layout */
@media(max-width:420px){
  .header-inner{height: 50px;}
  .hero{padding:2.2rem 0}
  .hero-name{font-size:clamp(1.6rem,9vw,2.4rem)}
  .lead{font-size:0.95rem}
  .btn, .btn-outline{width:100%;display:block}
  .hero-actions{flex-direction:column;gap:0.6rem}
  .card-icon{width:56px;height:56px}
  .container{padding:0 0.5rem}
}


/* Center card in lista nozze section and match width to other cards */
#listanozze .cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  justify-items: center;
}

@media (min-width: 700px) {
  /* same two-column layout as other sections */
  #listanozze .cards-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }

  /* keep the card visually centered: span both columns but limit width to one column */
  #listanozze .card {
    grid-column: 1 / -1;
    width: calc((100% - var(--gap)) / 2);
    max-width: calc((var(--container) - (2 * 0.75rem) - var(--gap)) / 2);
    box-sizing: border-box;
    justify-self: center;
  }
}

/* Dynamic section styles */
.section--accent{position:relative;overflow:hidden;color:#fff;padding:3rem 0;background:linear-gradient(180deg, rgba(132, 173, 231, 0.798) 0%, rgba(100,150,200,0.55) 60%, rgba(164,194,236,0.7) 100%)}
.section--accent a{color:rgba(255,255,255,0.95)}
.section--accent .container{color:inherit;position:relative;z-index:2}

/* small tweak for contrast on accent sections */
.section--accent .timeline li{color:rgba(255,255,255,0.95)}

/* Subsection titles: larger, centered and underlined */
.section h2{
  text-align:center;
  font-size:clamp(1.25rem,2.8vw,2.25rem);
  margin:0 0 1.25rem 0;
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:0.35rem;
  color:inherit;
}

.section h5{
  text-align:center;
  font-size: 20px;
  margin-left: 10%;
  margin-right: 10%;
  font-weight:100;
  text-decoration-thickness:2px;
  color:inherit;
}


@media(min-width:700px){
  .section h2{font-size:clamp(1.5rem,2.4vw,2.75rem)}
}