/* Layout and components. Colors/fonts come from theme.css — change them there. */

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;  /* stops iPhones from enlarging some text on their own */
}

/* ---------- Text styles, used on every page ----------
   Modeled on the invitation text on the home page:
   - Headings: plain serif, CAPITALS, spaced out
   - Text: plain serif, slightly spaced out
   - .text--italics for the soft italic lines, .text--large for emphasis
   Nothing on the site is bold. */
h1 {
  font-family: var(--font-heading);
  font-weight: 400;          /* Pinyon Script only has 400; anything higher is a fake bold */
  line-height: 1.2;
}
h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 400;          /* browsers make headings bold by default; this turns it off */
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.4;
}
/* Page/section titles ("RSVP", "Our Registries"...) */
h2 { font-size: 1.25rem; text-align: center; margin: 0 0 2.5rem; }  /* space below */
/* Smaller titles: cards ("Amazon"), schedule times, the RSVP form */
h3, h4 { font-size: 1rem; margin: 0 0 0.75rem; }

p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.1em;
  margin: 0.5rem 0;
}
.text--italics { font-style: italic; }
.text--large { font-size: 1.1rem; }
strong, b, th { font-weight: 400; }  /* no bold anywhere */

a { color: var(--color-accent); }
img { max-width: 100%; display: block; }

/* ---------- Site title (big names above the nav) ---------- */
.header__top {
  padding: 2.5rem 1rem 1.5rem;
  text-align: center;
  background: var(--color-bg);
}
.site__title h1 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);  /* min, scales with screen width, max */
  letter-spacing: 0;
  color: var(--color-text);
  /* Thins the letters by tracing their edges in the background color.
     Strength is --heading-thinning in theme.css. Only used here, on the big names:
     on smaller titles it shaves off too much. */
  -webkit-text-stroke: var(--heading-thinning, 0) var(--color-bg);
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: center; gap: 2rem;
  padding: 1rem; background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.nav a {
  text-decoration: none; color: var(--color-text);
  text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem;
}
/* Current page: underlined instead of bold */
.nav a[aria-current="page"] { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.4em; }

/* ---------- Hero ---------- */
.date__time {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #030303;
  padding: 7rem 2rem 5rem;  /* top, sides, bottom */
  background-color: var(--color-bg);  /* shows until you add a photo */
  background-size: cover; background-position: center;
}
.date__time h4 { font-size: clamp(1.25rem, 8vw, 1.5rem); margin: 0; text-transform: uppercase; letter-spacing: 0.15em;}
.date__time h3 { font-size: 1rem; margin: 0.5rem 0; }
.date__time p { font-size: 1rem; letter-spacing: 0.1em; margin: 0.5rem 0; }
.date__time .text--large { font-size: 1rem; }  /* the date and venue lines */

/* ---------- Phones: nav and invitation text ---------- */
@media (max-width: 600px) {
  /* Let the 6 links wrap onto two neat rows instead of squishing into one */
  .nav {
    flex-wrap: wrap;
    gap: 0 1.25rem;          /* space between rows, space between links */
    padding: 0.3rem 0.75rem;
  }
  .nav a {
    font-size: 0.75rem; letter-spacing: 0.08em; white-space: nowrap;
    padding: 0.4rem 0;       /* taller tap area so thumbs don't hit the wrong link */
  }

  .date__time { padding: 2.5rem 1rem; }  /* top/bottom, sides */
  .date__time h4 { font-size: min(1.25rem, 4.6vw); margin-bottom: 0.75rem; }  /* shrinks on narrow phones so each name fits on one line */
  .date__time h3 { font-size: .75rem; }
  .date__time p { font-size: 0.75rem; letter-spacing: 0.05em; }
  .date__time .text--large { font-size: 1rem; }

  .site__title h1 { -webkit-text-stroke-width: var(--heading-thinning-phone, 0); }  /* less thinning on the smaller names */
  h2 { font-size: 1.1rem; margin-bottom: 1.75rem; }  /* section titles on phones */
  p { font-size: 0.9rem; letter-spacing: 0.05em; }  /* text on phones */
}

/* ---------- Sections ---------- */
.section { max-width: var(--max-width); margin: 0 auto; padding: 4rem 1rem; }
.section + .section { border-top: 1px solid var(--color-border); }
@media (max-width: 600px) {
  .section { padding: 2.5rem 1rem; }  /* phones: less empty space above/below each section */
}

/* Short explanation under a section title, before the cards */
.section__intro { text-align: center; margin: 0 0 2rem; }  /* last number = space below it */

.grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card p { font-size: 0.9rem;}

/* ---------- Kansas City page: a list under each heading, text left, photo right ---------- */
.place-list {
  display: flex; flex-direction: column;
  gap: 2.5rem;                       /* space between places */
}
.place {
  display: flex;
  align-items: center;               /* text sits level with the middle of the photo */
  gap: 2rem;                         /* space between the text and the photo */
}
.place__text { flex: 1; }            /* text takes whatever width the photo leaves */
.place__text h3 { margin-bottom: 0.25rem; }
.place__photo {
  flex: 0 0 280px;                   /* photo width; change this to make photos bigger or smaller */
  width: 280px;
  aspect-ratio: 4 / 3;               /* every photo the same shape (width / height) */
  object-fit: cover;                 /* fills the shape without stretching; trims edges of tall/wide photos */
  border-radius: var(--radius);
}
.place__address {
  font-size: 0.85rem;
  opacity: 0.75;                     /* a little lighter than the description */
  margin-bottom: 1rem;               /* space before the Visit button */
}
@media (max-width: 600px) {
  .place { gap: 1rem; align-items: flex-start; }
  .place__photo { flex-basis: 40%; width: 40%; }  /* photo stays on the right, just smaller */
  .place__text h3 { font-size: 0.9rem; letter-spacing: 0.08em; }
  .place__details { display: none; }  /* the longer descriptions ("During the Day") are hidden on phones */
}

/* ---------- Forms & buttons ---------- */
input, select, textarea {
  width: 100%; padding: 0.75rem; font: inherit;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 16px; /* 16px stops iPhones from zooming in on focus */
}
label, .field-label { display: block; margin: 1rem 0 0.25rem; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.05em; }
#attendee-list label.checkbox { margin: 0.5rem 0; }
label.checkbox { display: flex; align-items: center; gap: 0.6rem; font-weight: 400; font-size: 1rem; cursor: pointer; }
label.checkbox input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-accent); }
.form-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.btn {
  display: inline-block; padding: 0.75rem 1.5rem; margin-top: 1rem;
  background: var(--color-accent); color: #fff; border: none;
  border-radius: var(--radius); font: inherit; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.15em;
  text-decoration: none; cursor: pointer;
}
@media (hover: hover) {      /* only on computers with a mouse; on phones a tap leaves hover stuck on */
  .btn:hover { background: var(--color-accent-dark); }
  .btn--outline:hover { background: var(--color-accent); color: #fff; }
  .guest-results li:hover { border-color: var(--color-accent); }
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--outline { background: transparent; color: var(--color-accent); border: 2px solid var(--color-accent); }

/* ---------- RSVP lookup ---------- */
.rsvp { max-width: 600px; margin: 0 auto; }
.guest-results { list-style: none; padding: 0; margin: 1rem 0; }
.guest-results li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem; margin-bottom: 0.5rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  cursor: pointer;
}
.guest-results li[data-index]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.other-guests { color: var(--color-muted); font-size: 0.85rem; }
.rsvp form .other-guests { margin-top: -0.5rem; }
/* When a guest is picked, the page scrolls to the form. This leaves room for the
   sticky nav (two rows on phones) so it doesn't cover the form's title. */
#rsvp-form { scroll-margin-top: 6rem; }

.badge {
  flex-shrink: 0; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.badge--attending { background: #e3efdc; color: #3f6b2a; }
.badge--declined { background: #f3e1e1; color: #8a3b3b; }
.badge--pending { background: #eee; color: #666; }

.message { padding: 1rem; border-radius: var(--radius); margin-top: 1rem; }
.message--success { background: #e3efdc; }
.message--error { background: #f3e1e1; }
.hidden { display: none !important; }

/* ---------- Registry ---------- */
.item-card img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; }
.item-card .price { color: var(--color-muted); }
.item-card.purchased { opacity: 0.55; }
.item-card.purchased h3 { font-size: 1rem; text-decoration: line-through; }

/* ---------- Popup ("I bought this") ---------- */
.dialog {
  width: calc(100% - 2rem); max-width: 440px;
  padding: 2rem;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text);
  text-align: center;
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.45); }  /* darkens the page behind it */
.dialog label { text-align: left; }
.dialog__buttons { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; }

/* ---------- Schedule ---------- */
.schedule { text-align: center; }
/* The frame sets the photo's size and shape; anything outside it is hidden */
.schedule__frame {
  max-width: 720px;          /* how wide the photo can get */
  aspect-ratio: 3 / 2;       /* shape: width / height. Try 4 / 3 (squarer) or 16 / 9 (wider) */
  overflow: hidden;          /* hides the part of the photo that sticks out */
  margin: 0 auto 2.5rem;     /* centered, space below */
}
.schedule__photo {
  width: 110%;               /* wider than the frame: the extra 10% is trimmed off the right.
                                100% = trim nothing, 120% = trim more */
  max-width: none;
  height: 100%;
  object-fit: cover;         /* fills the frame by trimming top/bottom, never stretching */
  object-position: center;   /* which part to keep vertically, e.g. "center 30%" keeps more of the top */
}
/* "Saturday, June 19 2027" */
.schedule__title {
  font-size: clamp(1.25rem, 8vw, 1.5rem);
  margin: 0 0 4rem;          /* last number = space under it */
}
.schedule__event { margin: 0 0 2.5rem; }  /* space between events */
.schedule__event h3 { margin: 0 0 0.5rem; }  /* space between the time and its two lines */
.schedule__event p { margin: 0.2rem 0; }  /* space between the two italic lines */

/* ---------- Gallery ----------
   4 columns x 6 rows. Each small tile is portrait (2 wide : 3 tall), so a 3x3 or
   2x2 block of tiles is the same shape as a single photo. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 equal columns */
  gap: 1rem;                 /* space between photos */
}
.gallery__tile {
  position: relative;        /* the photo fills this box exactly */
  aspect-ratio: 2 / 3;       /* shape of a single tile (width / height) */
}
.gallery__tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;         /* fills the tile, trimming edges instead of stretching */
  border-radius: var(--radius);  /* rounded corners; size is --radius in theme.css (0 = square) */
}
/* Big photos: "grid-column: 1 / 4" = from column line 1 to 4, i.e. columns 1-3 */
.gallery__tile--proposal { grid-column: 1 / 4; grid-row: 1 / 4; aspect-ratio: auto; }  /* top-left 3x3 */
.gallery__tile--walk     { grid-column: 3 / 5; grid-row: 4 / 6; aspect-ratio: auto; }  /* columns 3-4, rows 4-5 */
/* Phones: the 4-column layout makes photos thumbnail-sized, so switch to
   2 columns with the two big photos full width */
@media (max-width: 600px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .gallery__tile--proposal,
  .gallery__tile--walk { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 2 / 3; }  /* full width */
  .gallery__tile:empty { display: none; }  /* hide the empty placeholder spot */
}

/* ---------- FAQ ---------- */
.faq { max-width: 700px; text-align: center; }  /* narrower column so lines stay easy to read */
.faq__item { margin: 0 0 2.5rem; }              /* space between questions */
/* Questions: same size and spacing as the answers (like the "p" rule), but italic */
.faq__item h3 {
  font-size: 1rem;
  text-transform: none;      /* normal capitals, not ALL CAPS like other headings */
  letter-spacing: 0.1em;
  font-style: italic;
  margin: 0 0 0.5rem;        /* space between a question and its answer */
}
@media (max-width: 600px) {
  .faq__item h3 { font-size: 0.9rem; letter-spacing: 0.05em; }  /* matches answers on phones */
}

footer { text-align: center; padding: 2rem 1rem; color: var(--color-muted); font-size: 0.85rem; }

/* ---------- Short decorative line between text ---------- */
.divider {
  width: 60px;                           /* length of the line */
  border: 0;                             /* remove the browser's default line style */
  border-top: 1px solid var(--color-border);  /* thickness and color */
  margin: 1.5rem auto;                   /* space above/below; "auto" centers it */
}