:root{
  --navy:#0f2745; /* Color of the nav */
  --navy-700:#0b1a30;
  --rose:#e7c2c0;
  --rose-200:#e7edf6; /* Color when hovering the top */
  --ink:#121417; /* Color of the title header per section b links*/
  --muted:#5b677a; /* Color of the subtitle header per sectionblinks #e8ecf2*/
  --line:#e8ecf2; /* Color of the border line #fff;*/
  --card:#fff; /* Color background for scheule of events cards, captured moments, attires and colors and wedding rsvp box #fff;*/
  --bg-a:#f7f9fc; /* Color background for scheule, entourage, FAQ */
  --bg-b:#eef3f9;/* Overall background*/
   --bg-c:#F9F8F6;/* Overall background*/
  --radius:18px;
  --shadow:0 12px 34px rgba(10,20,44,.08);
  --max:1100px;
}
.readonly{ pointer-events: auto;background:#f3f6fa; color:#46556b }
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg-a),var(--bg-b))}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
/* ===== FIX ENTOURAGE SECTION BACKGROUND & SPACING ===== */
#entourage {
  background: var(--bg-c);   /* your light brown or light gray tone */
  margin-top: 0;             /* remove any gap showing body background */
  padding-top: 24px;         /* space for the title inside the section */
  padding-bottom: 60px;      /* keep nice breathing space below */
  position: relative;
  z-index: 1;
}


.container{width:min(var(--max),92vw);margin-inline:auto}
.section{padding:64px 0}
.section.alt {
  background: var(--card);
  position: relative;  /* required for z-index to work */
  z-index: 1;          /* set the stacking order */
}

.center{text-align:center}
.subtle{color:var(--muted)}
.subtitle {
  color: var(--muted);
  font-size: 0.6rem;
  font-style: italic;
}

.pill{display:inline-block;border:1px solid var(--line);padding:.35rem .75rem;border-radius:999px;font-size:.9rem;color:var(--navy);background:#fff}
.h-giant{text-align:center;font-family: 'La Lexus Serif', serif;;font-weight:400;line-height:1;letter-spacing:.5px}
.h-giant span{display:inline-block}
.h1{font-family:'Great Vibes',cursive;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.1;
  margin:0 0 .25rem;
  font-weight: normal;
  -webkit-font-smoothing: antialiased; /* makes the curves cleaner */
  -moz-osx-font-smoothing: grayscale;
}
.h2{font-family:'Great Vibes',cursive;
  font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.2;margin:0 0 1rem;
  font-weight: normal;
  -webkit-font-smoothing: antialiased; /* makes the curves cleaner */
  -moz-osx-font-smoothing: grayscale;

}
.h3{font-weight:600;margin:.25rem 0 .5rem}
.lede{ font-family: 'La Lexus Serif', serif;;font-size:clamp(1rem,1.25vw,1.1rem);color:var(--muted)}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* NAV */
header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.8);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy)}
.brand .monogram{
  font-family:'Great Vibes',cursive;font-size:28px;line-height:1;background:linear-gradient(90deg,var(--navy),#5670a3);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.brand img {
  height: 50px;          /* reduce or increase this value as needed */
  width: auto;           /* maintain aspect ratio */
  display: block;
  object-fit: contain;
  mix-blend-mode: multiply;
  background: transparent;
}
.links{display:flex;gap:18px;align-items:center}

.links a{padding:8px 10px;border-radius:10px;font-weight:500;color:var(--navy)}
.links a:hover{background:var(--rose-200)}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px}
@media (max-width:900px){
  .links{position:fixed;inset:56px 12px auto 12px;background:#fff;border:1px solid var(--line);
    border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start;padding:14px;display:none;z-index: 70;}
  .links.show{display:flex}
  .nav-toggle{display:inline-flex}
}

/* HERO */
/* FAlling leaves */
/* Global layer behind everything */
#leaf-layer{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Ensure your page content sits above the leaves */
.hero, .section, footer {
  position: relative;
  z-index: 2;
}
/* Reduce bottom spacing of hero section */
.hero, 
.hero.with-bg, 
.hero .container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Make sure the RSVP button doesn't add extra space */
.hero button,
.hero .cta,
.hero .rsvp-btn {
  margin-bottom: 0 !important;
}

/* Optional: balance section spacing globally */
section {
  margin-top: 40px;
  margin-bottom: 40px;
}


/* Leaves: behind + smoother animation */
img.leaf {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
  opacity: 0.9;
  user-select: none;
  z-index: 0;
  will-change: transform;
}
/* =========================
   HEADER (Sticky / Fixed)
========================= */
:root {
  --nav-h: 88px; /* default header height for desktop */
}

@media (max-width: 768px) {
  :root {
    --nav-h: 64px; /* header height for mobile */
  }
}

/* If the navbar is fixed with background */
header.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);  /* slight transparency looks cleaner */
  backdrop-filter: blur(8px);            /* subtle glass effect */
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #e6ebf2;
}
/* =========================
   HERO SECTION
========================= */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: clamp(12px, 3vw, 32px);
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* Blurred background (contain) */
.hero-bg-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/images/resized/frontpage4.jpg'); /* blurred version */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: blur(10px);
  z-index: 0;
}

/* Foreground background (cover) */
.hero-bg-cover {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/images/resized/frontpage4.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center 40%;
  z-index: 1;
  

  /* Smooth edges */
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: radial-gradient(circle, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Content layer */
.hero-content {
  position: relative;
  z-index: 2;
}

.img-zoom {
  transition: transform 0.3s ease;
}

.img-zoom:hover {
  transform: scale(1.05);
}

/* =========================
   RESPONSIVE ADJUSTMENTS
========================= */
@media (max-width: 1440px) and (min-width: 769px) {

  .hero{
    min-height: 0 !important;
  }
  
  .hero.with-bg {
    background-position: 50% 35%;
    background-size: contain;
    background-position-y: 0px;
    min-height: calc(90dvh - var(--nav-h));
  }
}

/* =========================
   📱 Tablet Optimized
========================= */
@media (max-width: 768px) and (min-width: 601px) {
  .hero{
    min-height: 0 !important;
  }
  .hero.with-bg {
    background-position: 55% 35%;
    background-size: contain;
    min-height: calc(85dvh - var(--nav-h));
    padding-bottom: 12vh;
  }

  .hero-wrap {
    gap: 20px;
    max-width: 88vw;
  }

  .names {
    font-size: clamp(38px, 7vw, 52px);
    line-height: 1.1;
  }

  .hero-wrap p.lede {
    font-size: clamp(14px, 3.2vw, 16px);
  }

 .date-pill {
  position: relative;
}

.date-pill .btn {
  position: absolute;
  bottom: 10px;   /* adjust spacing */
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 16px;
  font-size: 15px;
  border-radius: 13px;
}


  /* Tablet-specific grid adjustments */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

/* ===== ORDER OF EVENTS ===== */
/* ===== ORDER OF EVENTS ===== */
/* ========== ORDER OF EVENTS SECTION ========== */
#timeofevents {
  padding: 40px 0 32px;
  text-align: center;
  background: #f7faff;
}

/* Title Styling */
#timeofevents .h2 {
  width: 600px;
  max-width: 90%;
  margin-bottom: 20px;         /* space between title and image */
  text-align: center;
  font-family: 'Great Vibes', cursive;
  font-size: 40px;
  color: #0f2745;
}

/* Image container (the white frame) */
.order-container {
  width: 600px;
  max-width: 90%;
  margin-top: 50px;
  background: #fff;
  border-radius: 24px;           /* 👈 rounded edges */
  overflow: hidden;              /* 👈 ensures image follows the curve */
  box-shadow: 0 6px 20px rgba(15, 39, 69, 0.08);
  border: 1px solid #e3e8ef;
  position: relative;            /* helps when .img-zoom uses transforms */
}

/* Image itself */
.order-container img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: inherit;        /* 👈 make image follow same curve */
  transition: transform 0.4s ease;
}

/* Optional hover zoom */
.order-container img.img-zoom:hover {
  transform: scale(1.03);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #timeofevents h2 {
    font-size: 32px;
    margin-bottom: 36px;
  }

  .order-container {
    width: 90%;
    border-radius: 18px;
  }
}

/* ===== ORDER OF EVENTS SECTION ===== */

  .story-text {
    flex: none;
    min-width: auto;
    margin-bottom: 20px;
  }

  .story-image {
    flex: none;
    min-width: auto;
    width: 1600px;
    margin-bottom: 1px;
    height: 1500px;
  }

  .story-image img {
    max-width: 80%;
  }

 /* ===== GALLERY SECTION ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 18px;
}

/* Prevent image cropping */
.gallery img {
  width: 100%;
  height: auto;                /* keeps natural proportions */
  object-fit: contain;         /* show full image */
  object-position: center center;
  border-radius: 12px;
  display: block;
  background: #fff;            /* fill background if needed */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover zoom (optional subtle effect) */
.gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* ===== Tablet layout (3 columns) ===== */
@media (max-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Mobile layout (2 columns) ===== */
@media (max-width: 640px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

  /* Schedule grid tablet adjustments */
  .schedule-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }

  /* Venue cards tablet adjustments */
  .venue-image {
    height: 200px;
  }

  /* Swatches tablet adjustments */
  .swatches {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Entourage tablet adjustments */
  .ent-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }


  .ent-grid > * {
    grid-column: 1 / -1 !important;
    max-width: 600px;
    margin: 0 auto;
  }

  .cols-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================
   📱 Mobile Optimized`
========================= */
@media (max-width: 600px) {
  .hero{
    min-height: 0 !important;
  }
  .hero.with-bg {
    background-position: 60% 30%;
    background-size: contain;
    min-height: calc(80dvh - var(--nav-h));
    padding-bottom: 50vh;
  }

  .hero-wrap {
    gap: 14px;
    max-width: 92vw;
     margin-top: 10vh; 
  }

  .names {
    font-size: clamp(30px, 8.5vw, 44px);
    line-height: 1.08;
    padding-top: 2vh;
  }

  .hero-wrap p.lede {
    font-size: clamp(13px, 3.6vw, 15px);
      padding-bottom: 2vh;
  }

  .date-pill .btn {
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 12px;
        padding-bottom: 2vh;
  }
}

/* =========================
   HERO TEXT & OVERLAY
========================= */
.hero.with-bg::before {
  content: none;
}

.hero-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 28px;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-wrap h1,
.hero-wrap p {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.hero-wrap p.lede {
  color: #f5f5f5;
}

.names {
  font-size: clamp(44px, 8vw, 78px);
  
}

.names .amp {
  font-size: 0.75em;
  opacity: 0.8;
  margin-inline: 0.15em;
}

.date-pill {
  margin-top: 10px;
  font-family: 'La Lexus Serif', serif;
}


/* =========================
   🧽 Clean Overlay & Text
========================= */
.hero.with-bg::before {
  content: none; /* no dark overlay */
}

.hero-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 28px;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-wrap h1,
.hero-wrap p {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.hero-wrap p.lede {
  color: #f5f5f5;
}

.names {
  font-size: clamp(44px, 8vw, 78px);
}

.names .amp {
  font-size: 0.75em;
  opacity: 0.8;
  margin-inline: 0.15em;
}

.date-pill {
  margin-top: 10px;
}

.section:first-of-type {
  margin-top: 0;
}


.hero-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}

.btn {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--navy);
  color: #fff;
  background: var(--navy);
  font-weight: 600;
}

.btn:hover {
  background: var(--navy-700);
}

.btn.alt {
  background: #fff;
  color: var(--navy);
  border-color: var(--line);
}

.slide-down,
.slide-down .card {
  transform: translateY(-80px);
  opacity: 0;
}

.slide-down.animate,
.slide-down .card.animate {
  animation: slideDown 1s ease-out forwards;
}

@keyframes slideDown {
  from {
    transform: translateY(-80px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* Story */
/* Container layout */
.story-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;                        /* space between text and image */
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;                  /* stack on mobile */
  padding: 40px 20px;
}

/* Text section */
.story-text {
  flex: 1 1 50%;
  min-width: 300px;
}

.story-text h2 {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  margin-bottom: 15px;
  font-style: italic;
}

.story-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  text-align: justify;
}

/* Image section */
.story-image {
  flex: 1 1 45%;
  min-width: 300px;
  display: flex;
  justify-content: center;
}

.story-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .story-container {
    flex-direction: column;
    text-align: center;
  }
  .story-text p {
    text-align: center;
  }
  .story-image img {
    max-width: 90%;
    margin-top: 20px;
  }
}
/* Reduce spacing before the Schedule & Venues heading */
#schedule, 
.schedule-section, 
.section h2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Also reduce any bottom margin of the image above */
.gallery img:last-child,
.previous-section {
  margin-bottom: 8px !important; /* adjust to your liking */
}

/* Optional: ensure consistent spacing */
.section {
  padding-block: 40px; /* reduces both top and bottom */
}

/* CARDS */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px
}
.time{font-family:'Playfair Display',serif;font-weight:700;color:var(--navy)}
.addr{color:var(--muted);font-size:.98rem}
.stack-6 > * + *{margin-top:6px}
.stack-10 > * + *{margin-top:10px}

/* Schedule Section */
.schedule-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:2rem;
  align-items:stretch;
}

/* Card Layout */
.venue-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid #e4e9f0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition:transform .2s ease, box-shadow .2s ease;
  margin-top: 50px;
}

.venue-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

/* ✅ Fixed visible image (no hover anymore) */
.venue-image{
  width:100%;
  height:220px;
  line-height:0;
  overflow:hidden;
}

.venue-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:0;
}

/* Venue details */
.venue-details{
  flex:1;
  padding:1.25rem 1.5rem;
  text-align:center;
}

.venue-title{
  font-weight:700;
  color:#1c84c4;
  margin-bottom:.25rem;
}

.venue-time{
  font-size:.95rem;
  font-weight:600;
  margin-bottom:.5rem;
}

.venue-name{
  font-size:1rem;
  font-weight:600;
  margin-bottom:.25rem;
}

.venue-addr{
  font-size:.9rem;
  color:#555;
  margin-bottom:1rem;
}

/* Buttons */
.venue-buttons{
  display:flex;
  justify-content:center;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.5rem;
}

.btn.alt{
  background:transparent;
  border:1px solid #1c6ac4;
  color:#0f2745;
  padding:.45rem .9rem;
  border-radius:999px;
  text-decoration:none;
  transition:all .2s ease;
}
.btn.alt:hover{
  background:#1c6ac4;
  color:#fff;
}

/* Responsive */
@media (max-width:600px){
  .venue-image{ height:180px; }
}

/* 🔥 Remove old hover image */
.venue-hover-image{
  display:none !important;
}


/* QUOTE */
.quote{
  background:linear-gradient(180deg,#fff,#f9fbff);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:26px
}
blockquote{margin:0;font-family:'Playfair Display',serif;font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--navy)}
cite{display:block;margin-top:10px;color:var(--muted);font-style:normal}

/* GALLERY */
.gallery{display:grid;gap:10px;grid-template-columns:repeat(6,1fr)}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:12px}
@media (max-width:1100px){.gallery{grid-template-columns:repeat(4,1fr)}}
@media (max-width:720px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- Entourage Layout ---------- */
.ent-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);   /* 12-col desktop grid */
gap: clamp(6px, 1.2vw, 16px) clamp(16px, 3vw, 40px);
  max-width: min(1100px, 92vw);
  margin: 0 auto;                           /* CENTER whole block */
  align-items:start;
}

/* Cards */
.ent-grid .card{
  background: transparent;
  border: none;
  border-radius: 14px;
  box-shadow: none;
  padding: 18px 22px;
  text-align: center;
}

/* Headings + lists */
.script{ font-family: 'La Lexus Serif', serif; }
.h-sub{font-family: 'La Lexus Serif', serif; font-size: clamp(1.3rem, 2.8vw, 2rem); margin: 0 0 .35rem; font-weight: normal; }
.no-bullets{ list-style:none; margin:0; padding:0; color:#5670a3}
.no-bullets.tight li{margin:.22rem 0; color:#5670a3}
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap: 8px 28px; }
#entourage p {
  color: #5670a3;
  
}

/* ---------- Desktop placement (>= 900px) ---------- */
/* Center the top block perfectly */
.principal{ grid-column: 2 / span 10; max-width: 760px; margin: 0 auto; }

/* Row of parents */
.parents-groom { grid-column: 2 / span 5; }
.parents-bride { grid-column: 7 / span 5; }

/* Row of best man / maid of honor */
.bestman     { grid-column: 2 / span 5; }
.maidofhonor { grid-column: 7 / span 5; }

/* Row of three: groomsmen / bridesmaids / veil */
.groomsmen   { grid-column: 1 / span 4; 
               justify-self: center;       /* centers the card horizontally */
               text-align: center;         /* centers the text inside */ }
.bridesmaids { grid-column: 5 / span 4;
              justify-self: center;       /* centers the card horizontally */
               text-align: center;         /* centers the text inside */ }

.veil {
  grid-column: 4 / span 6;    /* shifts it to the middle columns */
  justify-self: center;       /* centers the card horizontally */
  text-align: center;         /* centers the text inside */
}

/* Row of two: cord / candle */
.cord   { grid-column: 1 / span 6; }
.candle { grid-column: 7 / span 6; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .ent-grid{
    grid-template-columns: 1fr;  /* stack */
    gap: 14px;
  }
  .ent-grid > *{
    grid-column: 1 / -1 !important;
    max-width: 680px;
    margin: 0 auto;
  }
  .cols-2{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .cols-2{ grid-template-columns: 1fr; } /* single column lists on small phones */
}


/* Make sure the section above (Gallery) ends flush */
#gallery {
  background: #fff;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-top: 18px;
}

/* DRESS CODE */
.swatches{display:grid;gap:10px;grid-template-columns:repeat(8,1fr)}
.swatch{
  border-radius:12px;aspect-ratio:1/1;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 8px rgba(0,0,0,.04)
}
@media (max-width:900px){.swatches{grid-template-columns:repeat(6,1fr)}}
@media (max-width:640px){.swatches{grid-template-columns:repeat(4,1fr)}}
.palette-container {
  display: flex;
  justify-content: center;   /* centers the group */
  gap: 20px;                 /* space between palettes */
  margin-top: 18px;
  flex-wrap: wrap;           /* allows stacking on mobile */
}
/* FAQS */
/* ✅ Main FAQ dropdown */
details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  margin-top: 30px;
}
details + details {
  margin-top: 10px;
}
summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
}
details[open] {
  box-shadow: var(--shadow);
}

/* ✨ Nested dropdown styling */
.details2 {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f9fbff;  /* light background to distinguish */
  padding: 10px 12px;
  margin-top: 8px;
}
.summary2 {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
}
.details2[open] {
  box-shadow: var(--shadow);
}

/* Remove default arrows */
summary::-webkit-details-marker,
.summary2::-webkit-details-marker {
  display: none;
}

/* Add custom arrow icons */
summary::after,
.summary2::after {
  content: "▾";
  float: right;
  transition: transform 0.2s ease;
}
details[open] > summary::after,
.details2[open] > .summary2::after {
  transform: rotate(180deg);
}
  .subtle a {
    color: #0078d7; /* Default link color */
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
  }

  .subtle a:hover {
    color: #0056a3; /* Darker on hover */
    text-decoration: underline;
  }
.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;   /* stack items vertically */
  gap: 6px;                 /* space between lines */
}

.info-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.info-list .icon {
  min-width: 1.4em;         /* fixed width so icons align */
  text-align: center;
}

.info-list a {
  text-decoration: underline;
  color: #1a73e8;           /* or match your theme */
  word-break: break-word;   /* prevents overflow on small screens */
}

.info-list a:hover {
  text-decoration: none;
}

/* RSVP */
.form{display:grid;gap:12px}
.field{display:grid;gap:6px}
.field input,.field select,.field textarea{
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit
}
.notice{font-size:.95rem;color:var(--muted)}
.success{
  display:none;margin-top:12px;padding:12px 14px;border:1px solid #cbe7d6;background:#effaf3;border-radius:12px;color:#196c3d
}
.success.show{display:block}

/* FOOTER */
footer{padding:40px 0;color:var(--muted);text-align:center}


/* ==== RSVP Enhancements (non-breaking) ==== */

/* A11y helper for screen-reader only text */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Button loading spinner */
.btn.is-loading{opacity:.85; pointer-events:none; position:relative;}
.btn.is-loading::after{
  content:""; display:inline-block; vertical-align:middle;
  width:1em; height:1em; margin-left:.5em;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation: spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(1turn)}}

/* Soft fade + lift when enabling buttons */
.btn-activated { animation: btnEnable .28s ease-out; }
@keyframes btnEnable {
  from { opacity: .4; transform: translateY(4px) scale(.98); filter: saturate(60%); }
  to   { opacity: 1;  transform: translateY(0) scale(1);    filter: saturate(100%); }
}
/* When the button is disabled — show the red circle with slash */
#checkBtn:disabled {
  cursor: not-allowed;   /* red circle with slash */
  opacity: 0.5;          /* make it look inactive */
}
#checkBtn {
  cursor: pointer;       /* finger hand */
}
/* ================================
   ✨ RSVP "Name Not Found" Styling
================================= */
/* ================================
   ✨ Contact Host Button Styling
================================= */
.not-found {
  background: #edf4f5;                 /* keep or adjust this to your preferred red shade */
  border: 1px solid #e6e9ec;           /* darker red border */
  padding: 14px 16px;
  margin-top: 12px;
  border-radius: 12px;
  color: #020202;                     /* ✨ TEXT COLOR TO WHITE */
  font-size: 0.95rem;
  animation: fadeIn 0.4s ease;
  text-align: center;
}

.contact-btn {
  margin-bottom: 14px;
  margin-top: 14px;
  padding: 8px 16px; /* Fixed typo */
  border: none;
  border-radius: 999px;
  background: linear-gradient(to right, #6997b0, #0091ff);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(30, 131, 247, 0.3);
  transition: background 0.3s ease, transform 0.15s ease;
}

.contact-btn:hover {
  background: linear-gradient(to right, #1e7ff6, #00b7ff);
  transform: translateY(-2px);
}

.contact-btn:active {
  transform: translateY(0);
}

.contact-icon {
  width: 20px;  /* Controls SVG size */
  height: 20px;
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* === RSVP Confirmation Styles === */
.rsvp-confirmation {
  background: linear-gradient(180deg, #f8fbff, #eef3f8);
  border: 1px solid #d8e2ec;
  box-shadow: 0 10px 30px rgba(15, 39, 69, 0.08);
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  margin: 28px auto;
  max-width: 520px;
  animation: fadeInUp 0.6s ease;
}

/* === Confirmation Icon === */
.confirmation-icon {
  font-size: 36px;
  color: #2d72d9;
  background: #e0f2fe;
  border-radius: 50%;
  padding: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px rgba(45, 114, 217, 0.15);
}

/* === Confirmation Titles === */
.confirmation-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: #0f2745;
  margin-bottom: 10px;
}

.confirmation-text {
  font-size: 18px;
  color: #1e3a5f;
  margin-bottom: 6px;
}

.confirmation-subtext {
  color: #4b5a6b;
  font-size: 15px;
  margin-bottom: 28px;
}

/* === Response Box === */
.confirmation-box {
  background: linear-gradient(180deg, #ffffff, #f6f9fc);
  border: 1px solid #d0d7e1;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 28px;
  box-shadow: inset 0 0 0 1px rgba(15, 39, 69, 0.05);
}

.confirmation-label {
  color: #334155;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 15px;
}

/* === RSVP Status === */
.confirmation-status.accepted {
  background: #e0f2fe;
  color: #0369a1;
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(3, 105, 161, 0.1);
}

.confirmation-status.declined {
  background: #f1f5f9;
  color: #64748b;
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 1px 2px rgba(100, 116, 139, 0.1);
}

/* === Button Styling === */
.confirmation-btn {
  background: linear-gradient(to right, #0f2745, #14355f);
  color: #ffffff;
  font-size: 16px;
  border: none;
  border-radius: 999px;
  padding: 12px 30px;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  box-shadow: 0 6px 20px rgba(15, 39, 69, 0.15);
  transition: all 0.25s ease;
}

.confirmation-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 39, 69, 0.22);
  background: linear-gradient(to right, #14355f, #1d4e89);
}

/* === Guest List Styling === */
.confirmation-guests-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 20px;
  color: #14355f;
  font-size: 16px;
}

.confirmation-guests-list li {
  background: #f1f5fb;
  margin: 4px auto;
  padding: 8px 12px;
  border-radius: 8px;
  width: 80%;
  box-shadow: inset 0 0 0 1px #d6e2f3;
}

/* === Hidden State === */
.hidden {
  display: none !important;
}

/* === Animations === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Not-Found Box ---------- */
.not-found {
  background: #f8fcfe;
  border-radius: 14px;
  padding: 16px 20px;
  text-align: center;
  line-height: 1.5;
  max-width: 700px;
  margin: 20px auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* Equal-size buttons */
.not-found .contact-btn,
.not-found .confirmation-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;    /* 👈 same width */
  height: 44px;        /* 👈 same height */
  font-size: 15px;
  font-weight: 600;
  border-radius: 25px;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 10px 6px;
}

/* Button colors */
.not-found .contact-btn {
  background: linear-gradient(135deg, #2196f3, #1976d2);
}
.not-found .confirmation-btn {
  background: linear-gradient(135deg, #0f2745, #14355f);
}

/* Optional hover effect */
.not-found button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}



/* copyright text */
.footer-container p {
  margin: 0;
  font-size: clamp(0.9rem, 2vw, 1rem);
}

/* "Go to Homepage" button */
.footer-container .pill {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 22px;
  background: white;
  color: #2f3e66;
  border: 1px solid #cbd6e2;
  border-radius: 9999px;
  text-decoration: none;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-family: 'La Lexus Serif', serif;
  transition: all 0.3s ease;
}

.footer-container .pill:hover {
  background: #eaf1f9;
  border-color: #a8c2e0;
}

/* Optional: Reduce spacing for smaller devices */
@media (max-width: 480px) {
  .footer-container {
    padding: 24px 12px;
  }
  .footer-container .pill {
    padding: 8px 18px;
  }
}

/* kill global gaps; we’ll control per section */
section {
  margin-top: 0;
  margin-bottom: 0;
}