body {
  font-family: 'Inter', sans-serif;
}

.font-display {
  font-family: 'Playfair Display', serif;
}

#site-nav-bar {
  transition: color 300ms ease;
}

#site-nav-bar[data-theme='dark'] {
  color: #ffffff;
}

#site-nav-bar[data-theme='light'] {
  color: #1c1917;
}

main > section[id] {
  scroll-margin-top: 5rem;
}

/* Browsers center an open <dialog> via inset:0 + margin:auto, which can
   momentarily miscalculate against content still reflowing and cause the
   page to jump-scroll on open. Centering explicitly with a transform avoids
   that calculation entirely. */
dialog[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.corner-icon {
  transform-origin: bottom center;
  animation: icon-jump 3.6s ease-in-out infinite;
}

.corner-icon.is-stopped {
  animation: none;
}

.corner-icon--wiggle {
  transform-origin: center;
  animation: icon-wiggle 3.6s ease-in-out infinite;
}

@keyframes icon-wiggle {
  0%, 55%, 100% {
    transform: rotate(0deg);
  }
  6% {
    transform: rotate(-14deg);
  }
  12% {
    transform: rotate(12deg);
  }
  18% {
    transform: rotate(-10deg);
  }
  24% {
    transform: rotate(8deg);
  }
  30% {
    transform: rotate(-6deg);
  }
  36% {
    transform: rotate(4deg);
  }
  42% {
    transform: rotate(-2deg);
  }
}

@keyframes icon-jump {
  0%, 55%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  8% {
    transform: translateY(6px) scale(1.06, 0.94);
  }
  22% {
    transform: translateY(-40px) scale(1.05, 0.95);
  }
  35% {
    transform: translateY(0) scale(0.93, 1.09);
  }
  45% {
    transform: translateY(-18px) scale(1.03, 0.97);
  }
}

/* Google Maps InfoWindow (Accommodations map pins) always reserves a 48px
   header row for the close button, even with no title set via setContent —
   that's the actual source of the empty gap above short popups, not padding.
   Collapse the header row and hide the close button entirely — clicking
   anywhere else on the map closes the popup instead (see accommodations.js). */
.gm-style-iw-c {
  padding: 12px !important;
}

.gm-style-iw-chr {
  display: none !important;
}

.gm-style-iw-d {
  overflow: hidden !important;
}

.gm-style-iw-d > div {
  padding-top: 0 !important;
}

/* Momentary highlight on the Accommodations sidebar row matching a clicked
   map pin, tinted via --flash-color to match that pin's own color (see
   flashListItem in accommodations.js). */
.flash-highlight {
  animation: flash-highlight 2.2s ease-in-out;
}

@keyframes flash-highlight {
  0%, 100% {
    background-color: transparent;
  }
  20%, 60% {
    background-color: var(--flash-color, #fef08a);
  }
}

/* "Moments" gallery: a 3-row-tall collage, packed into columns
   (grid-auto-flow: column). gallery.js explicitly composes each column
   group as either one full-height photo, or a tall+small pair (tall on
   top or on bottom) — see GALLERY_PATTERNS there — each group's row-spans
   always sum to exactly 3, so plain column flow (no "dense" reordering
   needed) places them correctly. Scrolls itself continuously via JS-driven
   transform (see gallery.js — a plain CSS animation can't have its speed
   changed on the fly for the arrow buttons), with the photo list rendered
   twice back-to-back so the loop has no seam. */
.gallery-scroll-track {
  overflow: hidden;
}

.gallery-scroll-row {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 90px);
  grid-auto-columns: 90px;
  gap: 0.75rem;
  width: max-content;
  will-change: transform;
}

.gallery-scroll-row img {
  width: 100%;
  height: 100%;
}

@media (min-width: 640px) {
  .gallery-scroll-row {
    grid-template-rows: repeat(3, 130px);
    grid-auto-columns: 130px;
    gap: 1rem;
  }
}

.corner-icon--sway {
  transform-origin: top center;
  animation: icon-sway 2.2s ease-in-out infinite;
}

@keyframes icon-sway {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(18deg);
  }
  75% {
    transform: rotate(-18deg);
  }
}

/* Both QR PNGs are pure black pixels, but Venmo's generator renders rounded
   dot-matrix modules while Zelle's uses solid squares, which makes Venmo
   read visually lighter/less bold at a glance — boost contrast to compensate.
   Approximate fix per couple's request; won't perfectly match Zelle's blocky
   look. */
#registry-venmo-qr {
  filter: contrast(2.2);
}

/* iOS/Android show a text-selection callout on a press-and-hold even when
   there's no selectable text nearby — Tailwind's select-none alone doesn't
   suppress it on iOS Safari, so this needs the WebKit-specific property too. */
#gallery-speed {
  -webkit-touch-callout: none;
}