:root{
  --bg:#fff;
  --accent:#2f6b3f; /* deep green */
  --muted:#6b6b6b;
  --gold:#caa96a;
}
*{box-sizing:border-box}
.container{max-width:1000px;margin:0 auto;padding:24px}
.hero{
  background: linear-gradient(180deg, rgba(250,247,245,1), rgba(250,247,245,0));
  padding:72px 0 40px 0;
  text-align:center;
  position:relative;
  overflow:visible;
}

.hero::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:220px;
  background-image: url('/images/leaf-left.svg');
  background-repeat:no-repeat;
  background-position:left top;
  background-size:contain;
  opacity:0.95;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  right:0;
  top:80px;
  width:260px;
  height:320px;
  background-image: url('/images/leaf-right.svg');
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
  opacity:0.95;
  pointer-events:none;
}

.hero h1{font-size:64px;margin:0;color:var(--accent);font-family: 'Great Vibes', cursive;letter-spacing:1px}
.lead{font-size:18px;color:#6b6b6b;font-family: 'Montserrat', sans-serif}
.date{color:var(--muted);font-family: 'Playfair Display', serif}
.nav{margin-top:16px}
.nav a{margin:0 8px;color:var(--muted);text-decoration:none}
.cta{display:inline-block;margin-top:18px;background:var(--accent);color:white;padding:10px 18px;border-radius:6px;text-decoration:none}
.card{background:white;padding:18px;border-radius:8px;margin:24px 0;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.gallery .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.footer{padding:18px;text-align:center;color:#aaa}
.map{display:inline-block;margin-top:8px;color:var(--accent);text-decoration:none}
@media (max-width:600px){.hero h1{font-size:32px}}

/* Invitation specific */
.invite-intro{font-family:'Playfair Display',serif;color:var(--muted);font-size:20px;margin-bottom:16px}
.invite-date{font-family:'Montserrat',sans-serif;color:#375a46;letter-spacing:0.6px;font-weight:600}
.invite-location{font-family:'Playfair Display',serif;color:#375a46;font-size:22px;margin-top:6px}

/* simple card look for sections */
.card h2{font-family:'Playfair Display',serif;color:#3b593e}
.card p, .card li{font-family:'Montserrat',sans-serif;color:var(--muted)}

.story h3{font-family:'Playfair Display',serif;color:var(--gold);font-size:20px;margin-top:6px}
.story h4{font-family:'Montserrat',sans-serif;color:#375a46;margin-top:10px}
.story p{line-height:1.6;margin:0.75rem 0}
.story .lead-in{font-style:italic;color:var(--muted)}

/* Program timeline events */
.event{
  border-left: 3px solid var(--gold);
  padding: 0.5rem 0 0.5rem 1.2rem;
  margin: 1.2rem 0;
}
.event h4{
  font-family:'Playfair Display',serif;
  color:#375a46;
  font-size:18px;
  margin:0 0 0.3rem 0;
  font-weight:700;
}
.event-venue{
  font-family:'Montserrat',sans-serif;
  font-style:italic;
  color:var(--muted);
  margin:0;
  font-size:14px;
}
.event-address{
  font-family:'Montserrat',sans-serif;
  font-style:italic;
  color:var(--muted);
  margin:0 0 0.4rem 0;
  font-size:14px;
}

/* Hide default Blazor error UI (keeps UX clean while the app loads) */
#blazor-error-ui {
  display: none !important;
}

/* Loading indicator styling */
.loading-progress{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 18vh;
  width: 6rem;
  height: 6rem;
  z-index: 1000;
}
.loading-progress circle{
  fill: none;
  stroke: #eef0ee;
  stroke-width: 10;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.loading-progress circle:last-child{
  stroke: var(--accent);
  stroke-dasharray: 0 500;
  transition: stroke-dasharray 0.2s linear;
}
.loading-progress-text{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(18vh + 3.5rem);
  font-weight: 600;
  color: var(--muted);
  font-family: 'Montserrat', sans-serif;
}