:root{
  --bg:#fff;
  --accent:#2f6b3f; /* deep green */
  --muted:#6b6b6b;
  --gold:#caa96a;
  --header-height:64px;
}

.mobile-nav-overlay{position:fixed;left:0;top:var(--header-height);right:0;background:rgba(255,255,255,0.98);z-index:1200;transition:max-height 0.25s ease;overflow:hidden}
.mobile-nav-overlay.collapse{max-height:0;padding:0}
.mobile-nav-overlay:not(.collapse){max-height:60vh;padding:16px 12px 24px}
.mobile-nav{display:flex;flex-direction:column;gap:12px}
.mobile-nav .nav-link{font-size:18px;padding:8px 0;color:var(--muted)}

/* Simple hamburger icon styling if needed */
.navbar-toggler{background:transparent;border:0;padding:6px}
.navbar-toggler-icon{display:inline-block;width:26px;height:2px;background:var(--muted);position:relative}
.navbar-toggler-icon::before,.navbar-toggler-icon::after{content:'';display:inline-block;width:26px;height:2px;background:var(--muted);position:absolute;left:0}
.navbar-toggler-icon::before{top:-8px}
.navbar-toggler-icon::after{top:8px}
*{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:20%;
  min-width:80px;
  max-width:280px;
  background-image: url('/images/leaf-left.svg');
  background-repeat:no-repeat;
  background-position:left top;
  background-size:100% auto;
  opacity:0.95;
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  right:0;
  top:80px;
  width:22%;
  min-width:80px;
  max-width:320px;
  height:40%;
  background-image: url('/images/leaf-right.svg');
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:100% auto;
  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;
}

/* Desktop vs Mobile headers */
.mobile-header{display:none}
.desktop-header{display:block}

/* Make header fixed so brand + nav (or hamburger) stays visible while scrolling */
.desktop-header, .mobile-header{
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:var(--header-height);
  z-index:1100;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  display:flex;
  align-items:center;
}

/* Ensure header inner containers fill the header height and items are centered */
.desktop-header .container-fluid, .mobile-header .container-fluid, .top-row .container-fluid{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.desktop-header .container-fluid{ justify-content: space-between !important; }

/* Desktop-specific overrides to ensure visibility when other layout CSS targets .top-row */
.desktop-header.top-row{
  background: white !important;
}
.desktop-header .navbar-brand{
  color: var(--accent) !important;
}
.desktop-header .nav a, .desktop-header .nav-link{
  color: var(--muted) !important;
}

/* Strong overrides to ensure desktop nav is visible and not hidden by component-scoped CSS */
header.desktop-header.top-row,
header.desktop-header.top-row .container-fluid,
.desktop-header.top-row{
  background: white !important;
  z-index:1300 !important;
}
.desktop-header.top-row .navbar-brand{
  background: transparent !important;
  color: var(--accent) !important;
}
.desktop-header.top-row .nav{
  display:flex !important;
  gap:18px !important;
  align-items:center !important;
}
.desktop-header .nav{ display:flex !important; }

/* Even stronger override for component-scoped selectors */
header.desktop-header.top-row ::deep a, header.desktop-header.top-row ::deep .nav-link {
  color: #375a46 !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure desktop nav sits to the right and is not clipped */
.desktop-header .nav{
  margin-left: 0 !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
}

/* Remove any accidental clipping from parent containers */
.desktop-header, .desktop-header *{
  overflow: visible !important;
}
.desktop-header.top-row .nav-link,
.desktop-header.top-row .nav a{
  color: #375a46 !important; /* darker green */
  font-weight:600 !important;
  padding:0 10px !important;
  line-height: var(--header-height) !important;
}

/* Extra strong overrides in case component-scoped CSS hides nav */
.desktop-header.top-row .nav{
  visibility:visible !important;
  opacity:1 !important;
}
.desktop-header.top-row .nav a, .desktop-header.top-row .nav-link{
  display:inline-block !important;
  height:100% !important;
  vertical-align:middle !important;
}
.desktop-header.top-row .nav{ z-index:1400 !important; }

/* Prevent mobile overlay/nav from showing on larger screens */
@media (min-width: 801px) {
  .mobile-header { display: none !important; }
  .mobile-nav-overlay { display: none !important; }
  /* center brand + nav as a group on desktop */
  .desktop-header .container-fluid { justify-content: center !important; align-items: center !important; height: var(--header-height); }
  .desktop-header .navbar-brand { margin-right: 12px; display:flex; align-items:center; height:100%; line-height:var(--header-height); }
  .desktop-header .nav { margin-left: 12px !important; display:flex; align-items:center; height:100%; }
  .desktop-header .nav a, .desktop-header .nav-link { line-height: var(--header-height) !important; }
}

/* Extra strong header z-index to ensure visibility above page content */
.desktop-header, .mobile-header {
  z-index: 9999 !important;
}
.desktop-header .nav {
  z-index: 10000 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure desktop nav links are visible inside the fixed header (no clipping) */
.desktop-header .nav{
  margin-top:0 !important;
  display:flex;
  gap:12px;
  align-items:center;
  height:100%;
}
.desktop-header .navbar-brand, .desktop-header .nav a, .desktop-header .nav-link{
  line-height:var(--header-height) !important;
}
.desktop-header .nav a, .desktop-header .nav-link{
  padding:0 10px;
  display:inline-block;
}

/* Ensure main content doesn't appear under the fixed header */
.content{padding-top:calc(var(--header-height) + 12px)}

/* Hide the duplicated nav inside the hero section — use header nav instead */
.hero > .nav{ display: none !important; }
/* also hide any nested hero nav to be safe */
.hero .nav{ display: none !important; }

@media (max-width:800px){
  .container{padding:12px}
  .hero{padding:40px 0 24px 0}
  .hero::before{left:-6%;top:6%;width:28%;min-width:60px;opacity:0.9}
  .hero::after{right:-6%;top:18%;width:28%;height:36%;min-width:60px;opacity:0.9}
  .desktop-header{display:none !important;}
  .mobile-header{display:block !important;}
  :root{--header-height:56px}
  /* adjust main nav spacing on mobile */
  .nav{margin-top:12px}
}

/* 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;
}