/* ============================================================
   Susie & Esteban Wedding Website
   Shared design system. Same palette/fonts as the save-the-date,
   tuned for accessibility: bigger body text, higher-contrast
   reading colors, olive reserved for short bold accents only.
   ============================================================ */

:root {
  --cream: #f4ede0;
  --paper: #fbf6ec;
  --paper-shadow: #ebe3d0;
  --burgundy: #7a1840;
  --burgundy-deep: #5a1230;
  --olive: #6b7c3a;
  --olive-warm: #7a8c45;
  --olive-deep: #4d5c25;
  --olive-dark: #2f3a18;
  --ink: #2b1a20;          /* primary reading text high contrast on cream */
  --text-muted: #4a3d30;   /* readable secondary text */
  --gold: #b0a060;
  --border: rgba(107, 124, 58, 0.28);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -48px; left: 12px;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; border-radius: 8px;
  font-size: 16px; z-index: 999;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Header / Nav ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 237, 224, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 700px) {
  /* A sticky, always-blurring header sitting over continuously
     animated content underneath (e.g. the Gallery marquee) is a
     known-heavy combo for mobile Safari's compositor. A lighter
     blur costs less to keep re-rasterizing every frame. */
  .site-header { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}

.header-inner {
  position: relative;
  max-width: 1060px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  gap: 12px;
}

.site-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  color: var(--burgundy);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.site-brand .brand-flower {
  width: 22px; height: auto;
  flex-shrink: 0;
  filter: brightness(0.5) saturate(1.3) contrast(1.15);
}

.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.site-nav a {
  padding: 7px 13px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  border-radius: 999px;
  min-height: 34px;
  display: flex; align-items: center;
  white-space: nowrap;
}

.site-nav a:hover { background: rgba(107, 124, 58, 0.12); }
.site-nav a[aria-current="page"] { background: var(--olive-deep); color: var(--cream); }

/* RSVP gets primary-action treatment in the nav */
.site-nav a.nav-cta {
  background: var(--burgundy);
  color: var(--cream);
  margin-left: 6px;
}
.site-nav a.nav-cta:hover { background: var(--burgundy-deep); }
.site-nav a.nav-cta[aria-current="page"] { background: var(--burgundy-deep); }

.lang-toggle {
  display: flex; align-items: center;
  background: var(--paper);
  border: 1.5px solid var(--olive-deep);
  border-radius: 999px;
  padding: 2px; gap: 2px;
  flex-shrink: 0;
}

.lang-toggle button {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  min-height: 32px;
  border: none; border-radius: 999px;
  background: transparent;
  color: var(--olive-deep);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lang-toggle button[aria-pressed="true"] { background: var(--olive-deep); color: var(--cream); }

/* Never rendered on desktop — the nav doesn't scroll there. */
.nav-scroll-arrow { display: none; }

/* Mobile: the header wraps to two rows — brand + language toggle on
   row one, and the nav becomes a horizontally scrollable strip (like
   an app's tab bar) on row two, always visible, no menu button to tap. */
@media (max-width: 900px) {
  .header-inner { flex-wrap: wrap; row-gap: 10px; }

  /* Wraps just the scroll strip so the two arrow buttons below can be
     positioned against its edges without scrolling away with it — the
     wrap itself now carries the "own full-width row" placement that
     .site-nav used to have directly. */
  /* min-width:0 overrides a flex item's default auto min-width, which
     otherwise refuses to let it shrink below its content's own natural
     width (the nav's full unwrapped link list, ~650px+) — without it,
     flex-basis:100% was losing to that and the wrap just grew to fit
     everything, leaving .site-nav nothing to actually overflow/scroll. */
  .site-nav-wrap { order: 3; flex-basis: 100%; min-width: 0; position: relative; }

  .site-nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px solid var(--border);
    /* Fade hint at whichever edge still has more to scroll to. Both
       vars are toggled by JS on scroll (see initNavScrollFade); the
       defaults here (no left fade, right fade shown) match the strip's
       state on load, before any scrolling has happened. */
    --fade-l: 0px;
    --fade-r: 24px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    flex-shrink: 0;
    min-height: 40px;
    font-size: 15px;
    padding: 8px 14px;
  }
  .site-nav a.nav-cta { margin-left: 2px; }

  /* Explicit left/right chevrons, on top of the fade — a soft fade
     alone wasn't a clear enough cue that the strip scrolls. Visibility
     of each is toggled by JS (see initNavScrollFade) to match which
     direction(s) still have more items; tapping one scrolls that way. */
  .nav-scroll-arrow {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; margin-top: 6px; /* nav's own padding-top+border, so this centers on the link row, not the whole strip incl. that padding */
    transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(244, 237, 224, 0.92);
    border: 1px solid var(--border);
    color: var(--olive-deep);
    box-shadow: 0 2px 6px rgba(60, 50, 40, 0.14);
    cursor: pointer; padding: 0; z-index: 2;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  .nav-scroll-arrow.is-visible { opacity: 1; pointer-events: auto; }
  .nav-scroll-arrow-left { left: 0; }
  .nav-scroll-arrow-right { right: 0; }
}

/* ── Photo hero (home) — single darkened photo, text on top ──
   The photo's own rendered width is capped (max-width) and its
   height follows from aspect-ratio, based on that already-capped
   width rather than the raw viewport - that keeps the crop's zoom
   level the same on any wide screen, instead of getting more
   extreme the wider the window gets; on windows past the cap the
   photo sits centered on the cream background either side.
   Title/date and the RSVP button are pinned independently (top % /
   bottom %, not fixed px, since the box's height varies by
   breakpoint) so there's real space between them instead of the
   button crowding right under the date. The button previously broke
   with this pattern because position:absolute + left:50% + no width
   computes shrink-to-fit width from only the space right of that
   50% point - white-space:nowrap forces it to its full text width
   regardless, which is the actual fix (not flowing it back inline). */
.hero-photo {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  aspect-ratio: 2.4 / 1;
  min-height: 460px;
  overflow: hidden;
}

.hero-photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.hero-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(26, 32, 12, 0.60) 0%,
    rgba(26, 32, 12, 0.50) 45%,
    rgba(26, 32, 12, 0.72) 100%);
}

.hero-photo .hero-content {
  position: absolute; z-index: 2;
  top: 12%; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px;
  padding: 0 24px;
  text-align: center;
}

.hero-photo .btn-primary {
  position: absolute; z-index: 2;
  bottom: 10%; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  margin-top: 0;
  padding: 11px 30px;
  min-height: 42px;
}
.hero-photo .btn-primary:hover { transform: translateX(-50%) translateY(-1px); }

@media (max-width: 700px) {
  .hero-photo { aspect-ratio: 3 / 4; max-width: none; }
  .hero-photo > img { object-position: center 40%; }
  .hero-photo .hero-content { top: 20%; }
  .hero-photo .btn-primary { bottom: 14%; }
}

.hero-photo .eyebrow {
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}

.hero-photo h1 {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(46px, 10vw, 74px);
  line-height: 1.06;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

.hero-photo .sub {
  font-size: 25px;
  color: #fff;
  margin-bottom: 30px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}

/* ── Icon nav grid — primary way to move around the site ───── */
.icon-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 8px;
}

@media (min-width: 620px) {
  .icon-nav { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  .icon-nav { grid-template-columns: repeat(6, 1fr); }
}

.icon-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none;
  padding: 22px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--paper);
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.icon-nav a:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(60,50,40,0.10); }

.icon-nav .icon-badge {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(77, 92, 37, 0.12);
  color: var(--olive-deep);
}
.icon-nav .icon-badge svg { width: 24px; height: 24px; }

.icon-nav .label {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  text-align: center;
}

/* RSVP gets the emphasized treatment even among the icon cards */
.icon-nav a.nav-cta-card {
  background: var(--burgundy);
  border-color: var(--burgundy);
}
.icon-nav a.nav-cta-card .icon-badge { background: rgba(255,255,255,0.16); color: #fff; }
.icon-nav a.nav-cta-card .label { color: #fff; }
.icon-nav a.nav-cta-card:hover { background: var(--burgundy-deep); }

/* ── Photo marquee (gallery) ──────────────────────────────── */
/* A continuous, edge-to-edge filmstrip: every photo is scaled to the
   same fixed height (they share one) with its natural width, so
   portrait and landscape shots sit flush against each other with no
   gap and no cropping, and the strip scrolls in an endless loop. */
.photo-marquee {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 620px;
  overflow: hidden;
  background: var(--cream);
  cursor: pointer;
}

.marquee-track {
  display: flex;
  height: 100%;
  width: max-content;
  animation: marquee-scroll 90s linear infinite;
}
.marquee-track.paused { animation-play-state: paused; }

.marquee-track img {
  height: 100%;
  width: auto;
  display: block;
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 700px) {
  /* Dropped on mobile entirely: a continuously-animating strip of
     large composited images was crashing the page on phones (a few
     seconds in, the tab would go white and reload) even after
     repeated attempts to shrink it. Desktop keeps the full marquee
     unchanged; mobile goes straight to the grid below, which already
     covers the same photos and opens full-size on tap. */
  .photo-marquee { display: none; }
}

/* Hero text block, below the carousel */
.hero-text {
  text-align: center;
  padding: 54px 24px 12px;
}

.hero-text .eyebrow {
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 16px;
}

.hero-text h1 {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(42px, 8vw, 64px);
  line-height: 1.08;
  color: var(--burgundy);
  margin-bottom: 14px;
}

.hero-text .sub {
  font-size: 20px;
  color: var(--text-muted);
  margin-bottom: 30px;
}

/* ── Text page header (subpages — no photo) ───────────────── */
.page-header {
  text-align: center;
  padding: 56px 24px 40px;
  border-bottom: 1px solid var(--border);
}

.page-header .eyebrow {
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 14px;
}

.page-header h1 {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: clamp(34px, 6vw, 48px);
  color: var(--burgundy);
}

.page-header p {
  margin-top: 14px;
  font-size: 19px;
  color: var(--text-muted);
  max-width: 52ch;
  margin-left: auto; margin-right: auto;
}

/* ── Photo strip ───────────────────────────────────────────── */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.photo-strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

@media (max-width: 620px) {
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
}

.photo-feature {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 26px;
}
.photo-feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* ── Layout ────────────────────────────────────────────────── */
.wrap { max-width: 760px; margin: 0 auto; padding: 56px 24px; }
.wrap.narrow { max-width: 620px; }
.wrap.tight { padding-top: 40px; }

section + section { margin-top: 52px; }

h2 {
  font-family: var(--serif);
  font-style: italic; font-weight: 500;
  font-size: 30px;
  color: var(--burgundy);
  margin-bottom: 16px;
}

h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 21px;
  color: var(--ink);
  margin-bottom: 10px;
}

p { margin-bottom: 16px; color: var(--ink); }
p:last-child { margin-bottom: 0; }

.lede { font-size: 21px; line-height: 1.6; }

.center { text-align: center; }

/* Travel page asides: marked with a leading asterisk and italics,
   no block/border treatment, just plain flowing copy. */
.note-star {
  font-style: italic;
}

.flourish {
  display: block; text-align: center;
  color: var(--olive);
  font-size: 22px; letter-spacing: 10px;
  margin: 0 auto 24px;
  opacity: 0.75;
}

/* ── Icon rows (Travel page): a circular icon badge paired with a
   heading and copy, used to break text-heavy logistics (flight,
   hotel, airport transfer options) into scannable, intuitive chunks
   instead of dense paragraphs and bullet lists. ── */
.info-row { display: flex; gap: 16px; align-items: flex-start; }
.info-row + .info-row { margin-top: 24px; }
.info-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(107, 124, 58, 0.12);
  color: var(--olive-deep);
  flex-shrink: 0;
}
.info-icon svg { width: 16px; height: 16px; }
.info-row h3 { margin-bottom: 6px; }
.info-row p:last-child { margin-bottom: 0; }

/* Small icon + label used to give a plain-text subsection (like the
   hotel/recommendation lists under Extending Your Stay) a bit of
   visual structure without turning every list item into its own
   icon row. */
.section-label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
  margin-top: 18px; margin-bottom: 8px;
  color: var(--ink);
}
.section-label svg { flex-shrink: 0; color: var(--olive-deep); }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px;
}
.card + .card { margin-top: 20px; }

.card-grid { display: grid; gap: 18px; }

@media (min-width: 640px) {
  .card-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

a.card { text-decoration: none; display: block; transition: transform 0.12s ease, box-shadow 0.15s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(60,50,40,0.10); }

/* ── Schedule / day cards ──────────────────────────────────── */
.day-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0;
  margin-bottom: 22px;
  overflow: hidden;
}

/* Header row: a botanical line-icon badge (same family as the flower
   motif on the save the date) paired with the date, in place of the
   old full-width colored gradient band. */
.day-head {
  display: flex; align-items: center; gap: 16px;
  padding: 26px 26px 0;
}
.day-icon-badge {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(107, 124, 58, 0.12);
  color: var(--olive-deep);
  flex-shrink: 0;
}
.day-icon-badge svg { width: 28px; height: 28px; }
.day-icon-badge .day-icon-flower {
  width: 26px; height: auto;
  /* The flower art is a light olive line drawing, easy to lose against
     the badge's own pale olive-tint circle; darken and add a touch of
     contrast so the linework actually reads at this size. */
  filter: brightness(0.5) saturate(1.3) contrast(1.15);
}

.day-card .day-body { padding: 16px 26px 28px; }

.day-card .day-eyebrow {
  font-family: var(--serif);
  font-size: 23px; font-weight: 700; font-style: italic;
  color: var(--burgundy);
  margin-bottom: 0;
}
/* The date now lives at the top of .day-body (event name moved up
   next to the icon), so it needs the breathing room below it that
   used to belong to h3. */
.day-body > .day-eyebrow { margin-bottom: 14px; }

.day-card h3 {
  font-family: var(--serif);
  font-style: italic; font-size: 28px; font-weight: 700;
  color: var(--burgundy);
  margin-bottom: 14px;
}
/* The event name now lives in .day-head next to the icon badge; no
   trailing margin needed there since it's the last thing in its
   flex row, not a heading sitting above other stacked content. */
.day-head h3 { margin-bottom: 0; }

/* "(Optional)" now trails the event name instead of leading it, set off
   in italic-but-not-bold so it reads as a quiet aside rather than part
   of the title itself. */
.optional-tag { font-weight: 400; font-size: 19px; }

.day-meta {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  margin-bottom: 14px;
  font-size: 16px;
  color: var(--olive-deep);
  font-weight: 700;
}
.day-meta .item { display: flex; align-items: center; gap: 8px; }

/* Per-event sub-schedule (ceremony / cocktail hour / dinner, each with
   its own room), used on the wedding card to break down where things
   happen without cluttering the pill row above with five-plus items. */
.day-schedule {
  display: flex; flex-direction: column; gap: 9px;
  margin: 2px 0 16px;
  padding: 14px 18px;
  background: rgba(107, 124, 58, 0.07);
  border-radius: 14px;
}
.day-schedule .item {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700;
  color: var(--olive-deep);
}
.day-schedule .item svg { flex-shrink: 0; }

/* "Add to calendar" lives as an action item inside .day-meta, styled
   like its time/location siblings, with a trailing chevron marking
   it as tappable. Keeps the card's bottom row down to one action
   (dress code), so nothing wraps awkwardly on mobile. */
.day-meta .item-action {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.day-meta .item-action .chev { flex-shrink: 0; transition: transform 0.15s ease; }
.day-meta .item-action:hover .chev { transform: translateX(2px); }

/* Add to calendar: sits inline with the dress-code trigger in the
   card's bottom action row, styled the same understated way (opens
   the shared Apple/Google/Outlook sheet defined below) */
.cal-trigger svg { flex-shrink: 0; }

.cal-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(40, 30, 20, 0.45);
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.cal-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.cal-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 480px; margin: 0 auto;
  background: var(--paper);
  border-radius: 28px 28px 0 0;
  padding: 14px 22px 34px;
  transform: translateY(105%);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.3);
  border: 0.5px solid var(--border);
  z-index: 301;
}
.cal-sheet.open { transform: translateY(0); }
.cal-sheet-handle { width: 42px; height: 4px; background: rgba(107, 124, 58, 0.3); border-radius: 2px; margin: 0 auto 16px; }
.cal-sheet-title { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--olive-deep); text-align: center; }
.cal-sheet-sub { font-size: 13px; color: var(--text-muted); text-align: center; margin: 6px 0 18px; }
.cal-sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.cal-sheet-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
  font: inherit; font-size: 16px; color: var(--ink);
  text-decoration: none; cursor: pointer; text-align: left; width: 100%;
  transition: background 0.15s ease;
}
.cal-sheet-btn:hover { background: #efe6d4; }
.cal-sheet-btn svg { flex-shrink: 0; }
.cal-sheet-cancel {
  margin-top: 14px; width: 100%; padding: 12px;
  background: none; border: none;
  font: inherit; font-style: italic; font-size: 15px;
  color: var(--text-muted); cursor: pointer;
}

/* Bottom action row: "Add to calendar" and "Dress code" sit side by
   side here, both styled the same understated way (icon + text, no
   fill or border) so neither competes with the card for attention. */
.card-actions-row {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.card-action {
  border: 1px solid var(--border);
  background: rgba(107, 124, 58, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--olive-deep);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.15s ease;
}
.card-action:hover { background: rgba(107, 124, 58, 0.16); color: var(--olive-dark); }
.card-action .dc-icon { flex-shrink: 0; }
.card-action .chev { flex-shrink: 0; transition: transform 0.15s ease; }
.card-action:hover .chev { transform: translateX(2px); }

/* "Add All to Calendar" (Itinerary page header): a real filled pill,
   unlike the understated .card-action links inside each day-card, so
   it reads as a page-level action and doesn't get missed. */
.btn-add-all {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--cream);
  background: var(--olive-deep);
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.btn-add-all:hover { background: var(--olive-dark); transform: translateY(-1px); }

/* Header action row: "Add All to Calendar" plus a lighter-green RSVP
   pill sitting right beside it, same shape, one shade lighter so it
   reads as the secondary action. */
.header-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
}
.header-actions .btn-add-all { margin-top: 0; text-decoration: none; }
.btn-rsvp-light {
  background: rgba(107, 124, 58, 0.08);
  border: 1px solid var(--border);
  color: var(--olive-deep);
}
.btn-rsvp-light:hover { background: rgba(107, 124, 58, 0.16); color: var(--olive-dark); }

/* Dress-code popup: native <dialog>, styled to match the site and
   paired with a watercolor-style illustration for outfit inspiration */
.dresscode-dialog {
  /* The site's global `* { margin: 0 }` reset (an author-origin rule)
     overrides the UA stylesheet's default `margin: auto` centering
     for dialog:modal, since author styles always beat UA defaults.
     Restore it explicitly or the dialog pins to the top-left. */
  margin: auto;
  border: none;
  border-radius: 20px;
  padding: 0;
  max-width: 480px;
  width: calc(100% - 40px);
  max-height: calc(100% - 60px);
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(43, 26, 32, 0.28);
}
.dresscode-dialog::backdrop {
  background: rgba(26, 32, 12, 0.55);
}
.dc-scroll { max-height: calc(100vh - 60px); overflow-y: auto; }
.dresscode-dialog .dc-header { position: relative; background: var(--cream); }
.dresscode-dialog .dc-illustration { width: 100%; height: auto; display: block; }
.dc-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(251, 246, 236, 0.92);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink); padding: 0;
}
.dresscode-dialog .dc-body { padding: 22px 26px 28px; }
.dresscode-dialog .dc-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--olive-deep); margin-bottom: 6px;
}
.dresscode-dialog .dc-title {
  font-family: var(--serif); font-style: italic; font-size: 26px; font-weight: 500;
  color: var(--burgundy); margin-bottom: 10px;
}
.dresscode-dialog .dc-vibe { font-style: italic; color: var(--text-muted); margin-bottom: 14px; }
.dresscode-dialog ul { margin: 0 0 0 20px; }
.dresscode-dialog li { margin-bottom: 8px; color: var(--ink); }

/* ── TBD placeholder marker ────────────────────────────────── */
.tbd {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(122, 24, 64, 0.09);
  border: 1.5px dashed var(--burgundy);
  color: var(--burgundy-deep);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 999px;
}

/* Solid-border pill for a real, actionable requirement (e.g. an RSVP
   deadline), visually distinct from the dashed .tbd placeholder */
.action-note {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(122, 24, 64, 0.09);
  border: 1.5px solid var(--burgundy);
  color: var(--burgundy-deep);
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--serif);
  font-weight: 700; font-size: 18px;
  padding: 15px 32px;
  min-height: 54px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--burgundy); color: var(--cream); }
.btn-primary:hover { background: var(--burgundy-deep); }

.btn-olive { background: var(--olive-deep); color: var(--cream); }
.btn-olive:hover { background: var(--olive-dark); }

.btn-outline-light {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.85);
  color: #fff;
  backdrop-filter: blur(4px);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.22); }

.btn-outline { background: transparent; border-color: var(--olive-deep); color: var(--olive-deep); }
.btn-outline:hover { background: rgba(77, 92, 37, 0.08); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Divider ───────────────────────────────────────────────── */
.divider {
  width: 70px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--burgundy), transparent);
  margin: 30px auto;
  opacity: 0.55;
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 46px 24px 62px;
  color: var(--text-muted);
  font-size: 15px;
  border-top: 1px solid var(--border);
}
.site-footer .footer-flower {
  width: 36px; height: auto;
  margin: 0 auto 12px;
  filter: brightness(0.5) saturate(1.3) contrast(1.15);
}
.site-footer .names {
  font-family: var(--serif);
  font-style: italic; font-size: 22px;
  color: var(--burgundy);
  margin-bottom: 10px;
}

/* ── Bilingual content toggling ───────────────────────────── */
[data-lang] { display: none; }
html[data-active-lang="en"] [data-lang="en"],
html[data-active-lang="es"] [data-lang="es"] { display: block; }
html[data-active-lang="en"] span[data-lang="en"],
html[data-active-lang="es"] span[data-lang="es"] { display: inline; }

/* Before JS runs, default to English so content is never blank */
html:not([data-active-lang]) [data-lang="en"] { display: block; }
html:not([data-active-lang]) span[data-lang="en"] { display: inline; }

/* ── Photo gallery grid + lightbox ────────────────────────────
   Shared by the Gallery page and any other page's own mini-gallery
   (e.g. Stay's resort photos). Tap any grid photo to see it full
   size, then swipe or use the arrow buttons/keys to browse. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 620px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}
.gallery-grid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.gallery-grid img:hover { transform: scale(1.03); }

.lightbox-backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 20, 14, 0.92);
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.lightbox-backdrop.open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.lightbox-close {
  position: fixed; top: 18px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(251, 246, 236, 0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(251, 246, 236, 0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.lightbox-nav:hover { background: rgba(251, 246, 236, 0.28); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
@media (max-width: 620px) {
  .lightbox-nav { width: 38px; height: 38px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}