/*
  Calendar + envelope styles.

  The August 2026 calendar now lives inside the #join section beneath the
  button. The "Save the Date" script text is rendered as a watermark behind
  the calendar via CSS mask on .join__watermark, tinted in cream-warm.

  The #save-the-date section is now just the envelope illustration sitting
  at the very end of the invitation.
*/

#save-the-date {
  position: relative;
  background: var(--color-cream);
  padding: 0 1rem 0;
  text-align: center;
  overflow: hidden;
}

.save-date__envelope {
  position: relative;
  width: calc(100% + 2rem);
  max-width: none;
  aspect-ratio: 2470 / 2808;
  margin: 0 -1rem;
  background: url('/assets/envelope.png') center/contain no-repeat;
  z-index: 1;
}

/* Hydrangea + rose flowers tucked behind the lower half of the envelope,
   spanning the full card width edge-to-edge. */
.save-date__flowers {
  width: calc(100% + 2rem);
  max-width: none;
  aspect-ratio: 1235 / 516;
  margin: -12rem -1rem 0;
  background: url('/assets/flowers-bottom.png') center bottom / contain no-repeat;
  position: relative;
  z-index: 2;
}

/* Calendar widget — borderless, centered on cream with watermark behind. */
.calendar {
  position: relative;
  max-width: clamp(22rem, 70cqw, 30rem);
  margin: 0 auto;
  padding: 0;
  z-index: 1;
}

.calendar__month {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2rem, 7cqw, 2.8rem);
  color: var(--color-navy);
  margin-bottom: 1.25rem;
}

.calendar__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(0.3rem, 1cqw, 0.6rem);
  padding: 0;
  margin: 0;
}

.calendar__grid li {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 3cqw, 1.5rem);
  color: var(--color-text);
  position: relative;
}
.calendar__grid li.is-empty { color: transparent; }
.calendar__grid li[data-day="23"] {
  color: var(--color-cream);
  font-weight: 600;
  z-index: 1;
}
.calendar__grid li[data-day="23"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-navy);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7-4.5-7-11a4 4 0 0 1 7-2.6 4 4 0 0 1 7 2.6c0 6.5-7 11-7 11z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7-4.5-7-11a4 4 0 0 1 7-2.6 4 4 0 0 1 7 2.6c0 6.5-7 11-7 11z'/></svg>") center/contain no-repeat;
  z-index: -1;
}

.save-date__closing {
  margin-top: 2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text);
  position: relative;
  z-index: 1;
}