/*
 * Styling for the two pieces of the invitation page this app owns: the wishes list that
 * replaced the theme's cross-origin comment widget, and the RSVP form's status messages.
 *
 * Everything here inherits colour and typography from the surrounding Elementor section
 * rather than declaring its own, so it keeps matching if the theme's palette is edited.
 * Tones are drawn from the theme's own globals (#8D6E44 accent, #ECDFCC warm neutral).
 */

#realtime-comments {
  --wdp-accent: #8d6e44;
  --wdp-line: rgba(141, 110, 68, 0.22);
  --wdp-card: rgba(255, 255, 255, 0.55);
  text-align: left;
  max-width: 560px;
  margin: 0 auto;
}

.wdp-wish-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wdp-wish {
  background: var(--wdp-card);
  border: 1px solid var(--wdp-line);
  border-radius: 12px;
  padding: 14px 16px;
  animation: wdp-wish-in 0.35s ease both;
}

@keyframes wdp-wish-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wdp-wish { animation: none; }
}

.wdp-wish-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.wdp-wish-name {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.wdp-wish-badge {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--wdp-line);
  opacity: 0.75;
}

.wdp-wish-badge.is-attending {
  border-color: var(--wdp-accent);
  color: var(--wdp-accent);
  opacity: 1;
}

.wdp-wish-time {
  font-size: 0.78em;
  opacity: 0.6;
  margin-left: auto;
  white-space: nowrap;
}

.wdp-wish-message {
  margin: 0;
  line-height: 1.6;
  /* Guest text is arbitrary: never let a long word push the layout sideways. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.wdp-wish-status {
  text-align: center;
  opacity: 0.7;
  margin: 14px 0 0;
  font-size: 0.9em;
}

.wdp-wish-status:empty {
  display: none;
}

.wdp-wish-more {
  display: block;
  margin: 16px auto 0;
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid var(--wdp-line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.86em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.wdp-wish-more:hover:not(:disabled) {
  background: var(--wdp-card);
}

.wdp-wish-more:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* --- RSVP form status ------------------------------------------------------ */

.wdp-form-message {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(141, 110, 68, 0.22);
  background: rgba(255, 255, 255, 0.55);
  font-size: 0.88em;
  line-height: 1.5;
  text-align: center;
}

.wdp-form-message.is-error {
  border-color: rgba(164, 69, 58, 0.4);
  color: #a4453a;
  background: rgba(255, 255, 255, 0.75);
}

/* --- guest photo sharing -----------------------------------------------------
 *
 * Styles the widget public/js/photo-wall.js builds — the same markup mounts in three
 * different places (the invitation page's normal position, its top-of-body "hero"
 * promotion, and the standalone /moments page), so it carries its own scoped custom
 * properties rather than depending on ambient page variables that don't exist on
 * /moments.
 */

.wdp-photo-wall {
  --wdp-accent: #8d6e44;
  --wdp-line: rgba(141, 110, 68, 0.22);
  --wdp-card: rgba(255, 255, 255, 0.55);
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px;
  text-align: center;
}

.wdp-photo-heading {
  font-size: 1.4em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.wdp-photo-banner { margin: 0 0 16px; opacity: 0.85; }

.wdp-photo-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.wdp-photo-form input[type='text'] {
  flex: 1 1 180px;
  padding: 10px 12px;
  border: 1px solid var(--wdp-line);
  border-radius: 8px;
  font: inherit;
}

.wdp-photo-form input[type='file'] { flex: 1 1 100%; }

.wdp-photo-submit {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: var(--wdp-accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.wdp-photo-submit:disabled { opacity: 0.6; cursor: default; }

.wdp-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}

.wdp-photo-tile {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--wdp-card);
}
.wdp-photo-tile a { display: block; width: 100%; height: 100%; }
.wdp-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wdp-photo-status { margin: 14px 0 0; opacity: 0.75; font-size: 0.9em; }

.wdp-photo-more {
  margin-top: 14px;
  padding: 8px 18px;
  border: 1px solid var(--wdp-line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.wdp-photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  cursor: zoom-out;
}
.wdp-photo-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* The lightbox and the two mount points below all set their own `display`, which (as
   author-origin rules) would otherwise beat the UA stylesheet's `[hidden]` default —
   Elementor's own container CSS does the same to #share-moment-slot, since it reuses
   that container's `.elementor-element-43162dd2` class. These make `hidden` win. */
.wdp-photo-lightbox[hidden] { display: none !important; }

#share-moment-hero {
  background: #faf3e7;
  border-bottom: 1px solid rgba(141, 110, 68, 0.22);
}
#share-moment-hero[hidden],
#share-moment-slot[hidden] { display: none !important; }

/* In its in-page position the widget sits over the section's dark cover photo, where
   the theme's copy is white — but the hero promotion (#faf3e7) and the standalone
   /moments page (#faf7f2) are both light, so the white text is scoped to the slot
   only. The upload form never renders here (it only appears while sharing is open,
   and that state promotes the widget to the hero), so the slot just needs the
   heading, banner, status line and "show more" button legible. */
#share-moment-slot .wdp-photo-heading,
#share-moment-slot .wdp-photo-banner,
#share-moment-slot .wdp-photo-status {
  color: #fff;
}

#share-moment-slot .wdp-photo-heading {
  color: #fff !important;
  opacity: 1 !important;
}

#share-moment-slot .wdp-photo-wall {
  position: relative;
  z-index: 1;
}

#share-moment-slot .wdp-photo-more {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* Give the quote and media in Our Moment enough breathing room to read as
   separate pieces rather than one continuous block. */
#gallery .elementor-element-1d74dd5f {
  margin-bottom: 40px;
}

#gallery .elementor-element-7fa4c314 {
  margin-bottom: 40px;
}

/* --- Desktop split ---------------------------------------------------------
 *
 * The theme pins the invitation column to a flat 550px from 768px up, so on a wide
 * monitor the cover photo beside it keeps growing while the column stays a sliver.
 * From 1100px — the width at which half the viewport first exceeds the column's 550px
 * design width — the column and the cover photo each take half, a 1:1 split. Below
 * that nothing here applies, so tablet and mobile are untouched, and the two regimes
 * meet at exactly 550px with no jump.
 *
 * The selectors are the theme's own (same specificity, later stylesheet), one per
 * element it hardcodes to 550px in post-322220.css.
 */
@media (min-width: 1100px) {
  :root {
    --wdp-invite-col: 50vw;
  }

  .elementor-322220 .elementor-element.elementor-element-7282e71b,
  .elementor-322220 .elementor-element.elementor-element-40c3fc37,
  .elementor-322220 .elementor-element.elementor-element-77d918de,
  .elementor-322220 .elementor-element.elementor-element-7ac1ca49,
  .elementor-322220 .elementor-element.elementor-element-6a2fdcf9,
  .elementor-322220 .elementor-element.elementor-element-c998463,
  .elementor-322220 .elementor-element.elementor-element-5d20321a,
  .elementor-322220 .elementor-element.elementor-element-79606961,
  .elementor-322220 .elementor-element.elementor-element-1a6e32e2,
  .elementor-322220 .elementor-element.elementor-element-638865fe,
  .elementor-322220 .elementor-element.elementor-element-2203765a,
  .elementor-322220 .elementor-element.elementor-element-4dec5001,
  .elementor-322220 .elementor-element.elementor-element-6594871e,
  .elementor-322220 .elementor-element.elementor-element-68007dd1,
  .elementor-322220 .elementor-element.elementor-element-43162dd2,
  .elementor-322220 .elementor-element.elementor-element-4cf1e44c,
  .elementor-322220 .elementor-element.elementor-element-15b3ff51,
  .elementor-322220 .elementor-element.elementor-element-6cb0f61c,
  .elementor-322220 .elementor-element.elementor-element-7ca475e6,
  .elementor-322220 .elementor-element.elementor-element-684df4fe,
  .elementor-322220 .elementor-element.elementor-element-3e130cdb,
  .elementor-322220 .elementor-element.elementor-element-29686a42,
  .elementor-322220 .elementor-element.elementor-element-3d93e06e {
    --width: var(--wdp-invite-col);
  }

  /* The cover photo panel beside the column takes whatever is left. */
  .elementor-322220 .elementor-element.elementor-element-7dd5dbbd {
    --width: calc(100% - var(--wdp-invite-col));
  }

  /* The dimming bands between sections are spacer widgets carrying their own
     overlay, locked to 550px by width/max-width rather than --width. Left behind,
     they stop short of the widened column and expose an undimmed strip of photo. */
  .elementor-322220 .elementor-element.elementor-element-5e925421,
  .elementor-322220 .elementor-element.elementor-element-13527cb0,
  .elementor-322220 .elementor-element.elementor-element-144ac138,
  .elementor-322220 .elementor-element.elementor-element-3de20c85 {
    --container-widget-width: var(--wdp-invite-col);
    max-width: var(--wdp-invite-col);
  }
}