/* =============================================================
   styles.css — the look of your website (colors, fonts, spacing)

   You do NOT need to edit this file to change your content.
   If you'd like to tweak colors later, the main ones are grouped
   together just below.
   ============================================================= */

:root {
  --color-bg: #faf7f2;        /* page background (soft cream) */
  --color-ink: #2e2a26;       /* main text color */
  --color-muted: #7a7169;     /* softer secondary text */
  --color-accent: #9a7b4f;    /* buttons and highlights (warm gold) */
  --color-accent-dark: #7d6340;
  --color-line: #e4ddd2;      /* thin divider lines */
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---------- HERO / HOMEPAGE ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  border-bottom: 1px solid var(--color-line);
}

.hero-inner {
  max-width: 700px;
}

.hero-ampersand-label {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin: 0 0 1.5rem;
}

.names {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.names .amp {
  display: block;
  color: var(--color-accent);
  font-size: 0.6em;
  margin: 0.2em 0;
}

.date {
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}

.location {
  color: var(--color-muted);
  margin: 0 0 2.5rem;
}

/* ---------- RSVP BUTTON ---------- */
.rsvp-button {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 2.75rem;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.rsvp-button:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
}

/* ---------- SHARED SECTIONS ---------- */
.section {
  max-width: 700px;
  margin: 0 auto;
  padding: 4.5rem 2rem;
  border-bottom: 1px solid var(--color-line);
}

.section h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2rem;
  text-align: center;
  margin: 0 0 2rem;
}

/* ---------- OUR STORY ---------- */
.story-body p {
  margin: 0 0 1.25rem;
  font-size: 1.1rem;
}

/* ---------- SCHEDULE ---------- */
.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-line);
}

.schedule-item:last-child {
  border-bottom: 1px solid var(--color-line);
}

.schedule-time {
  flex: 0 0 6rem;
  font-weight: 600;
  color: var(--color-accent-dark);
}

.schedule-details {
  display: flex;
  flex-direction: column;
}

.schedule-title {
  font-size: 1.15rem;
  font-weight: 600;
}

.schedule-location {
  color: var(--color-muted);
}

/* ---------- SECONDARY RSVP ---------- */
.rsvp-section {
  text-align: center;
}

/* ---------- FOOTER ---------- */
.footer {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--color-muted);
  font-style: italic;
}

/* ---------- SMALL SCREENS ---------- */
@media (max-width: 480px) {
  .schedule-item {
    flex-direction: column;
    gap: 0.25rem;
  }
  .schedule-time {
    flex-basis: auto;
  }
}