/*
 * The Blessings page (/blessings) and the Thank You card's "Send us a note"
 * button that opens it. Their wording is in site-text.js.
 */

/* Desktop menu: the items centred with an even 80px between them (the
   spacing the original six-item menu had), rather than spread across the
   full 900px row. Still fits if hidden items are brought back. */
@media (min-width: 1024px) {
  .site-nav {
    width: auto;
  }
  .site-nav ul {
    gap: 80px;
  }
}

/* Thank You card: "Send us a note →", styled like the home page "Our Story"
   button (cream-gold pill, soft shadow, flower on its corner), 165 x 38px. */
.thanks-note {
  margin-top: 18px;
}
.thanks-note-button {
  width: 165px;
  height: 38px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.12em;
  padding-left: 0.12em; /* balance the letter spacing after the last letter */
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .thanks-note {
    margin-top: 2vh;
  }
}

/* Blessings page: the "← Back" link at the top left, a small cream pill
   like the phone menu button. On phones it lines up with that button; on
   desktop it sits just below the menu row. */
.blessings-page {
  position: relative;
}
.blessings-back {
  position: absolute;
  z-index: 20;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border: 1px solid rgb(236 211 158);
  border-radius: 9999px;
  background: rgba(255, 248, 232, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #2b3a5c;
  transition: color 0.2s ease;
}
.blessings-back:hover {
  color: #b98a3a;
}
.blessings-back:focus {
  outline: none;
}
.blessings-back:focus-visible {
  outline: 2px solid #b98a3a;
  outline-offset: 3px;
}
@media (min-width: 1024px) {
  .blessings-back {
    top: 84px;
    left: 40px;
    height: 38px;
  }
}