/* Basic / typography */
body {
  font-family: 'Cormorant Garamond', serif;
  margin: 0;
  padding: 0;
  color: #333;
  background: #f2e7d4;
}

h1 { 
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  color: #000;
  margin: 0;
}
h2 { 
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  margin: 0.4rem 0; 
  color: #000;
}
h3 { 
  color: #000;
  margin: 0.25rem 0 0; 
  font-size: 2rem;
}

h6 { 
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 600;
  margin: 0.4rem 0; 
  color: hsl(37, 30%, 42%);
  text-align: center;
}


/* Header */
.top-banner {
  text-align: center;
  padding: 4rem 1rem;
  background: #f2e7d4;
  color: #000;
  position: relative;
  font-family: 'Cormorant Garamond', serif;
}

.top-banner h1 {
  font-weight: 300;
  font-size: 2.8rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: #4a4a4a;
}

.top-banner h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 3.6rem;
  letter-spacing: 0.15em;
  margin: 0.2rem 0 1.2rem;
  color: #bfa06a; /* muted gold */
  text-transform: uppercase;
}

.top-banner h2 .name-part {
  display: inline; /* Desktop: all on one line */
}

@media (max-width: 768px) {
  .top-banner h2 .name-part {
    display: block; /* Mobile: stack vertically */
  }
  .top-banner h2 {
    text-align: center; /* Keep centered */
  }
}

.top-banner hr.divider {
  width: 75px;
  border: none;
  border-bottom: 2px solid #bfa06a;
  margin: 0 auto 1.2rem;
  opacity: 0.6;
}

.top-banner h3 {
  font-family: 'Dancing Script', cursive; /* elegant script font */
  font-size: 1.9rem;
  color: #555;
  letter-spacing: 0.05em;
  font-weight: normal;
}

.header-decoration {
  font-size: 3rem;
  color: #bfa06a;
  margin-bottom: 1rem;
  opacity: 0.5;
  user-select: none;
}


/* Hero */
.hero { 
  position: relative; 
  height: 100vh; 
  overflow: hidden; 
}
.hero-video { 
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}
.hero::after { 
  content:""; 
  position:absolute; 
  inset:0; 
  background: rgba(0,0,0,0.2); 
}


/* Zigzag layout */
.zigzag-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.zigzag-item img {
  width: 100%;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
.zigzag-item .text { 
  max-width: 600px; 
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.8;
  letter-spacing: 0.5px;
}
.zigzag-item.reverse { 
  flex-direction: column-reverse; 
}


/* Our Story Section */

.our-story .text {
  max-width: 600px;
  margin: 0 auto;
  padding-left: 5rem; /* same as countdown for alignment */
  text-align: left;
}

@media (max-width: 768px) {
  .our-story .text {
    padding-left: 0;
    text-align: center;
  }
}

.our-story .text h4 {
  max-width: 300px;
  margin: 0 auto 2rem auto;
  text-align: center;
}

.our-story .text-box {
  width: 300px;
  margin: 0 auto 5rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f7f7f7;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  color: #000;
  height: 100px;
  box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.412);
}

.our-story .text-box:last-child {
  margin-bottom: 0;
}

.text-box p {
  margin: 0;
  line-height: 2.1;
  font-size: x-large;
  font-family: 'Cormorant Garamond', serif;
}

h4 {
  text-align: center;
  font-size: 2.4rem;
  font-family: 'Cormorant Garamond', serif;
  color: #000;
}

.text h5 {
  text-align: center;
  font-size: 2.4rem;
  font-family: 'Cormorant Garamond', serif;
  color: #000;
  margin: 0.4rem 2.22rem 0.4rem;
}


/* Family/Friends section*/
.justified {
  text-align: justify;
  text-align-last: left; /* keep last line left aligned */
  line-height: 1.8; /* more breathing space between lines */
  font-size: 1.1rem; /* make it slightly larger */
}

.signature p {
  font-family: 'Great Vibes', cursive;
  font-size: 2.5rem;
  color: #bfa06a;
  font-weight: normal;
  letter-spacing: 0.05em;
  margin: 0;
  width: 15ch; /* Adjust to length of your text */
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  /* Remove animation from default */
  animation: none;
  display: inline-block;
}

/* Add typing animation only when .visible class is added */
.signature.visible p {
  animation: typing 1.75s steps(15) forwards;
}

@keyframes typing {
  from { width: 0; }
  to { width: 15ch; }
}

/* Cursor blink effect */
@keyframes blink {
  50% { border-color: transparent; }
  100% { border-color: #bfa06a; }
}


/* Countdown */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.countdown div {
  background: #f7f7f7;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-align: center;
}
.countdown span { 
  display:block; 
  font-size:2rem; 
  font-weight:700; 
  color:#000;
}
.countdown label { 
  font-size:0.85rem; 
  color:#000;
  margin-top:0.35rem; 
  display:block; 
}

.location-box {
  margin-top: 1rem;
  display:inline-block;
  padding:0.8rem 1.2rem;
  border-radius:8px;
  font-weight:600;
  color:#000;
}



/* Footer */
.footer-banner {
  text-align: center;
  padding: 3rem 1rem;
  background: #f2e7d4;
  color: #222; /* soft black */
  font-family: 'Dancing Script', cursive; /* elegant script font */
  position: relative;
}

.signature-note {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  margin: 0 0 1.5rem 0;
  font-style: italic;
}

.footer-decoration {
  font-size: 3rem;
  color: #bfa06a;
  margin-bottom: 1rem;
  opacity: 0.5;
  user-select: none;
}

.footer-divider {
  width: 300px;
  border: none;
  border-top: 1.5px solid #a67c52; /* gold-ish line */
  margin: 0 auto;
  opacity: 0.6;
}


/* Fade-in utility */
.fade-in { 
  opacity: 0; 
  transform: translateY(18px); 
  transition: opacity .6s ease, transform .6s ease; 
}
.fade-in.visible { 
  opacity: 1; 
  transform: none; 
}


/* Desktop layout: true zigzag */
@media (min-width: 769px) {
  .zigzag-item { 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center; 
  }
  .zigzag-item.reverse { 
    flex-direction: row-reverse; 
  }
  .zigzag-item .text { 
    text-align: left;
    font-size: 1.5rem;
  }
  .zigzag-item .text p {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 1rem;
  }
}

/* Center h2 inside zigzag text blocks */
.zigzag-item.fade-in .text > h2 {
  text-align: center;
  width: 100%;
  margin-bottom: 1.5rem;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .hero { height: 50vh; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
  .countdown span { font-size: 1.5rem; }
  .zigzag-item .text { font-size: 1rem; }
}

/* Specific alignment overrides */
.countdown-section .text {
  padding-left: 5rem;
}
@media (max-width: 768px) {
  .countdown-section .text {
    padding-left: 0;
    text-align: center;
  }
}