/* The wedding engine's parts, styled: the timeline, venues, gallery, and the RSVP. A template sets
   the variables (and anything else it likes); these are the defaults. */

:root {
  --wed-bg: #faf6f0;
  --wed-ink: #2b2420;
  --wed-muted: #7a6d62;
  --wed-accent: #8a6a45;
  --wed-accent-ink: #fff;
  --wed-surface: #fff;
  --wed-line: rgba(43, 36, 32, 0.14);
  --wed-font: Georgia, serif;
  --wed-font-display: Georgia, serif;
  --wed-radius: 14px;
}

[hidden] { display: none !important; }

/* Names and headings never break inside a word. */
[data-wedding='names'], [data-wedding='partner1'], [data-wedding='partner2'], [data-wedding='greeting'], .wedding-venue-place, .wedding-member-name { hyphens: manual; }

[data-wedding='story'], [data-wedding='accommodation'], [data-wedding='gifts'], [data-wedding='notes'] { white-space: pre-line; }

/* ——— Nav ———
   A jump to a section stops below the nav when it stays on screen (the engine measures it), and on a
   phone the nav is one row to swipe, centred while it fits, the section in view marked (and the
   link cut at the edge shows there is more; .is-scrolling-x is there for a template's own hint). */

[data-wedding-section][id] { scroll-margin-top: calc(var(--wed-nav-h, 48px) + 8px); }

@media (max-width: 640px) {
  nav[data-wedding='nav'] { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  nav[data-wedding='nav']::-webkit-scrollbar { display: none; }
  nav[data-wedding='nav'] > * { flex: none; white-space: nowrap; }
  nav[data-wedding='nav'] > :first-child { margin-inline-start: auto; }
  nav[data-wedding='nav'] > :last-child { margin-inline-end: auto; }
}

.wedding-nav-link[aria-current='true'] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; }

/* ——— Program ——— */

[data-wedding='program'] { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.wedding-step { display: grid; grid-template-columns: 4.2em 1fr; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--wed-line); }
.wedding-step:last-child { border-bottom: 0; }
.wedding-step-time { font-family: var(--wed-font-display); font-weight: 600; color: var(--wed-accent); font-variant-numeric: tabular-nums; }

/* ——— Venues ——— */

.wedding-venue-label { margin: 0; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wed-muted); }
.wedding-venue-place { margin: 4px 0 2px; font-family: var(--wed-font-display); font-size: 1.35rem; line-height: 1.2; }
.wedding-venue-time, .wedding-venue-address { margin: 0; color: var(--wed-muted); }
.wedding-venue-map { display: inline-block; margin-top: 8px; color: var(--wed-accent); font-weight: 600; text-decoration: none; }

/* ——— Gallery ——— */

[data-wedding='gallery'] { display: flex; flex-wrap: wrap; gap: 8px; }
.wedding-photo { flex: 1 1 calc(var(--ratio, 1) * 180px); max-width: 100%; height: auto; min-width: 0; aspect-ratio: var(--ratio, 1); object-fit: cover; border-radius: 8px; max-height: 320px; }

/* ——— The guests' photos ——— */

[data-wedding='photos'] { display: grid; gap: 14px; justify-items: center; text-align: center; }
.wedding-photos-strip { display: grid; grid-template-columns: repeat(var(--columns, 4), 1fr); gap: 6px; width: 100%; max-width: calc(var(--columns, 4) * 180px); }
.wedding-photos-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--wed-line); }
.wedding-photos-lead { margin: 0; color: var(--wed-muted); }
.wedding-photos-button { text-decoration: none; }

/* ——— RSVP ——— */

.wedding-rsvp { display: grid; gap: 14px; text-align: left; max-width: 560px; margin: 0 auto; }
.wedding-rsvp-lead { margin: 0; }
.wedding-rsvp-note { margin: 0; color: var(--wed-muted); font-size: 0.95rem; }
.wedding-rsvp-error { margin: 0; color: #a33a2f; font-weight: 600; }
.wedding-input { font: inherit; font-size: 16px; width: 100%; border: 1.5px solid var(--wed-line); border-radius: var(--wed-radius); padding: 11px 13px; background: var(--wed-surface); color: var(--wed-ink); box-sizing: border-box; hyphens: manual; }
.wedding-input:focus { outline: none; border-color: var(--wed-accent); }
textarea.wedding-input { resize: vertical; }
.wedding-member { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--wed-line); border-radius: var(--wed-radius); background: var(--wed-surface); }
.wedding-member-name { margin: 0; font-weight: 700; }
.wedding-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wedding-choice { font: inherit; font-size: 0.95rem; padding: 10px 8px; border-radius: 999px; border: 1.5px solid var(--wed-line); background: transparent; color: var(--wed-ink); cursor: pointer; }
.wedding-choice.is-on { background: var(--wed-accent); border-color: var(--wed-accent); color: var(--wed-accent-ink); }
.wedding-member[data-attending='false'] .wedding-choice.is-on { background: var(--wed-ink); border-color: var(--wed-ink); }
.wedding-check { display: flex; align-items: center; gap: 8px; }
.wedding-check input { width: 18px; height: 18px; accent-color: var(--wed-accent); }
.wedding-more { display: grid; gap: 10px; }
.wedding-btn { font: inherit; font-weight: 700; border: 1.5px solid var(--wed-accent); background: transparent; color: var(--wed-accent); border-radius: 999px; padding: 12px 22px; cursor: pointer; justify-self: center; }
.wedding-btn.primary { background: var(--wed-accent); color: var(--wed-accent-ink); }
.wedding-btn:disabled { opacity: 0.6; cursor: default; }
.wedding-choose { display: grid; gap: 10px; justify-items: center; }
.wedding-answered { text-align: center; justify-items: center; }
.wedding-answered-title { margin: 0; font-family: var(--wed-font-display); font-size: 1.6rem; }
.wedding-answered-text { margin: 0; color: var(--wed-muted); }
.wedding-answered-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.wedding-answered-actions .wedding-btn { justify-self: auto; }

/* The menus to choose from: not once the answer is in or answering is over. */
html:is(.rsvp-answered, .rsvp-closed) :is([data-wedding='menus'], .rsvp-menus) { display: none !important; }

@media print {
  [data-wedding='rsvp'], [data-wedding='envelope'] { display: none !important; }
}