/* /css/invite-theme.css — matches inline styles from index */
:root{
  --card-red:#1e3d8f;            /* deep blue accent */
  --ink:#8a0010;                 /* (unused, kept for compatibility) */
  --paper:#f7f4ef;               /* (unused, kept for compatibility) */
  --invite-bg: url("../assets/invite-bg.jpg");
  --invite-paper: rgb(230, 233, 232); /* invite background colour */
}

html,body{ height:100%; }
body{
  margin:0;
  color:#600;
  background: var(--invite-bg) center/cover no-repeat fixed;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  line-height:1.4;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Card frame */
.card{
  max-width:900px;
  margin:min(6vh,5rem) auto;
  padding:clamp(60px, 8vw, 100px) clamp(20px, 4vw, 60px);
  background:transparent;
  background-color: var(--invite-paper);
  border-radius:20px;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Playing-card corner marks */
.corner{
  position:absolute;
  font-weight:600;
  color: var(--card-red);
  text-align:center;
  letter-spacing:.02em;
  line-height:1.05;
}
.corner small{ display:block; margin-top:.15rem; font-size:1.1rem; }
.corner.tl{ top:18px; left:18px; }
.corner.br{ bottom:18px; right:18px; transform: rotate(180deg); }

/* Cupid line art (if present) */
.cupid{
  position:absolute;
  right: clamp(-10px, -2vw, -20px);
  top: clamp(40px, 10vw, 90px);
  width: clamp(120px, 22vw, 240px);
  opacity:.12;
  fill:none;
  stroke: var(--card-red);
  stroke-width:3;
}

/* Headings in script */
.script{
  font-family: "Cinzel", "Playfair Display", Georgia, serif;
  color: var(--card-red);
  font-weight:600;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-size: clamp(40px, 8.5vw, 88px);
  margin: .2em 0 .2em;
  text-align:center;
}
.subscript{ display:none; }

/* Small uppercase lines */
.smallcaps{
  text-align:center;
  font-variant-caps: all-small-caps;
  letter-spacing:.14em;
  color:#2a3f76;
  margin:.6em 0 .2em;
  font-size: clamp(12px, 2.2vw, 16px);
}

/* Details line */
.details{
  text-align:center;
  color:#6b2020;
  font-size: clamp(16px, 3.2vw, 22px);
  letter-spacing:.12em;
  margin:.6em 0 1.2em;
}

/* Divider */
.divider{
  width:min(220px, 40%);
  height:2px;
  background: linear-gradient(90deg, transparent, var(--card-red), transparent);
  margin: 1.2rem auto 1.2rem;
  opacity:.6;
}

/* Copy blocks */
.lead{
  text-align:center;
  font-size: clamp(18px, 3.4vw, 22px);
  color:#5b1515;
  max-width: 42ch;
  margin: 0 auto 1.2rem;
}
.copy{
  text-align:center;
  font-size: clamp(16px, 3vw, 18px);
  color:#5b1515;
  max-width: 60ch;
  margin: 0 auto 1.4rem;
}

/* Buttons (links) */
.actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:1.4rem; }
.btn{
  border:2px solid var(--card-red);
  color: var(--card-red);
  background: #fffdf8;
  padding:.7rem 1.1rem;
  border-radius: 999px;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.05em;
  transition: transform .06s ease, box-shadow .2s ease, background .2s;
  box-shadow: 0 2px 0 rgba(193,0,22,.15);
}
.btn:hover{ transform: translateY(-2px); background:#fff7f7; }

/* Footer RSVP line */
.rsvp{ text-align:center; margin-top:2rem; font-style: italic; color:#7a1a1a; }
.rsvp a{ color: var(--card-red); text-decoration: none; border-bottom: 1px dotted rgba(193,0,22,.5); }

/* Fine print */
.fine{ text-align:center; font-size: 12px; color:#9b6a6a; margin-top: 1rem; }

/* Desktop: force card to fill viewport without scrolling */
@media (min-width: 900px) {
  .card { height: 100vh; overflow: hidden; justify-content: center; }
}

/* Mobile: allow normal scrolling for readability */
@media (max-width: 899px) {
  .card { min-height: auto; height: auto; padding: 40px 20px; }
}
/* Force scroll behaviour on pages that use .scroll-page */
.scroll-page {
  align-items: flex-start; /* align content to top */
}

.scroll-page .card {
  min-height: auto;
  height: auto;
  justify-content: flex-start;
}

/* Schedule labels for times and places */
.label-time {
  font-weight: 700;
  font-size: 1.1em;
  color: var(--card-red); /* deep blue for time */
  display: block;
  margin-bottom: 0.2em;
}

.label-place {
  font-weight: 600;
  color: #5b1515; /* strong dark red for venue */
  display: block;
  margin-bottom: 0.4em;
  font-size: 1.05em;
}

/* Day headings */
.day h2 {
  font-size: clamp(22px, 4vw, 28px);
  color: var(--card-red);
  margin: 1.2em 0 0.6em;
  text-align: left;
  border-bottom: 2px solid rgba(30,61,143,0.2);
  padding-bottom: 0.3em;
}