/* ==========================================================
   heritage.css — section layouts for the "heritage-blush"
   invitation template (Ganesh blessing hero, scratch-to-reveal
   date, polaroid story, illustrated festivity cards, extended
   RSVP, maroon sign-off footer).

   Colors/fonts come from the [data-theme="heritage-blush"]
   tokens in themes.css; this file is layout + component shape
   only, same split as base.css/themes.css.
   ========================================================== */

/* .invitation-stage is the single wrapper around all page content.
   It has no styling of its own elsewhere now that envelope.css is
   unlinked, so it needs to explicitly contain the page horizontally —
   without this, any decorative element with a translate/negative-margin
   offset can widen the page's scrollable area and make mobile browsers
   zoom the whole layout out to fit it. */
.invitation-stage {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

/* ---- continuous falling petals across the whole page ---- */
.petal-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.petal-field__piece {
  position: absolute;
  top: -5%;
  border-radius: 0 100% 0 100%;
  background: var(--color-accent-soft);
  opacity: 0.85;
  will-change: transform;
}

/* ---- decorative corner brackets, fixed to the viewport ---- */
.corner-mark {
  position: fixed;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-accent);
  opacity: 0.6;
  z-index: 4;
  pointer-events: none;
}

.corner-mark--tl { top: 22px; left: 22px; border-right: none; border-bottom: none; }
.corner-mark--tr { top: 22px; right: 22px; border-left: none; border-bottom: none; }

/* ---- hero ---- */
.hero-heritage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5) var(--space-3);
}

.hero-heritage__ganesh {
  width: 90px;
  height: auto;
  margin: 0 auto var(--space-2);
  display: block;
}

.hero-heritage__shloka {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--heritage-rose, var(--color-accent));
  max-width: 560px;
  margin: 0 auto var(--space-2);
}

.hero-heritage__blessing {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-ink-muted);
  max-width: 480px;
  margin: 0 auto var(--space-3);
  line-height: 1.6;
}

.hero-heritage__names {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  align-items: center;
}

.hero-heritage__name {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11vw, 4.6rem);
  font-weight: 600;
  color: var(--heritage-rose, var(--color-accent));
  line-height: 1;
}

.hero-heritage__amp {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--color-accent);
  position: relative;
  padding: 0 0.6em;
}

.hero-heritage__amp::before,
.hero-heritage__amp::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 1px;
  background: var(--color-line);
}

.hero-heritage__amp::before { right: 100%; }
.hero-heritage__amp::after { left: 100%; }

.hero-heritage__parents {
  margin-top: var(--space-3);
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-ink-muted);
}

.hero-heritage__scroll {
  margin-top: var(--space-4);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--heritage-rose, var(--color-accent));
  opacity: 0.8;
}

.hero-heritage__scroll-arrow {
  display: block;
  margin: 0.4rem auto 0;
  animation: heritageBounce 1.8s ease-in-out infinite;
}

@keyframes heritageBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---- Save the Date: scratch-to-reveal cards ---- */
.scratch-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.scratch-card {
  position: relative;
  width: 96px;
  height: 130px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(74, 51, 39, 0.15);
}

.scratch-card__label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: 0.6rem;
  display: block;
  text-align: center;
}

.scratch-card__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--heritage-rose, var(--color-accent));
}

.scratch-card canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.scratch-card.is-revealed canvas {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* ---- The Wedding countdown card ---- */
.countdown-card {
  max-width: 420px;
  margin: var(--space-4) auto 0;
  text-align: center;
  padding: var(--space-4) var(--space-2);
}

.countdown-card__eyebrow {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-ink-muted);
  display: block;
  margin-bottom: 0.5rem;
}

.countdown-card__date {
  margin: var(--space-2) 0 var(--space-3);
  letter-spacing: 0.2em;
  color: var(--color-ink-muted);
  font-size: 0.85rem;
}

/* ---- Our Story: polaroid stack ----
   Photos are staggered and gently rotated, like tossed-down polaroids,
   but never fully overlap — each one stays completely visible. */
.polaroid-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 340px;
  margin: var(--space-4) auto 0;
  padding-bottom: var(--space-2);
}

.polaroid {
  background: #fff;
  padding: 10px 10px 26px;
  box-shadow: 0 14px 30px rgba(74, 51, 39, 0.18);
  border-radius: 2px;
  width: 82%;
}

.polaroid:nth-child(odd) { transform: rotate(-4deg) translateX(-6%); }
.polaroid:nth-child(even) { transform: rotate(3deg) translateX(6%); }

.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---- "The Venue" / "Festivities" headings ----
   Unlike every other section heading in this template, these two sit
   directly on --color-bg instead of inside a white .card, so they need
   their own always-legible color instead of --color-ink (which is tuned
   for text on the light card surfaces and is invisible against this
   theme's dark page background). !important guards against any stray
   higher-specificity color rule (e.g. from body) leaking through. */
.heading-lg--onbg {
  color: var(--heritage-heading-onbg, #f6ece0) !important;
}

/* ---- Venue card ---- */
.venue-card {
  max-width: 420px;
  margin: var(--space-3) auto 0;
  text-align: center;
  overflow: hidden;
  padding: var(--space-2);
}

.venue-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.venue-card__spark {
  color: var(--color-accent);
  margin: var(--space-2) 0 0.4rem;
}

.venue-card__name {
  font-family: var(--font-display);
  color: var(--heritage-rose, var(--color-accent));
  font-size: 1.35rem;
  margin-bottom: 0.4rem;
}

.venue-card__address {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-ink-muted);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

.venue-card__quote {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-ink);
  margin: var(--space-3) 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

/* Dress code sits directly under the quote, inside the same venue card,
   with its own bottom margin so the "View on Maps" button below still
   has breathing room. */
[data-venue-section] [data-dress-code-section] {
  margin-bottom: var(--space-3);
}

/* ---- Festivities ---- */
.festivity-card {
  position: relative;
  max-width: 360px;
  margin: var(--space-3) auto 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  box-shadow: 0 14px 30px rgba(74, 51, 39, 0.2);
}

.festivity-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
}

.festivity-card__body {
  position: relative;
  z-index: 1;
  padding: var(--space-2);
}

.festivity-card__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: #fff;
}

.festivity-card__meta {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.festivity-card__dress-code {
  margin-top: 0.5rem;
  font-family: var(--font-script);
  font-style: italic;
  font-size: 0.85rem;
  color: #f6e9d8;
}

.festivity-card__swatches {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.festivity-card__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.festivity-card__directions {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem;
  text-decoration: none;
}

.festivity-note {
  max-width: 420px;
  margin: var(--space-3) auto 0;
  text-align: center;
  padding: var(--space-4) var(--space-3);
}

.festivity-note__quote {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}

.dress-code__label {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
  display: block;
}

.dress-code__swatches {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.dress-code__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.dress-code__names {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-ink-muted);
}

.dress-code__style {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: 0.3rem;
}

.festivity-note__venue {
  margin: var(--space-3) 0 var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-muted);
}

/* ---- RSVP extras: checkboxes, party size, extra fields ---- */
.rsvp-events {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.rsvp-event-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-accent);
  border-radius: 14px;
  background: var(--color-accent-soft);
  cursor: pointer;
}

.rsvp-event-check__text {
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

.rsvp-event-check__title {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--color-ink);
  display: block;
}

.rsvp-event-check__meta {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.rsvp-event-check input[type="checkbox"] {
  flex: 0 0 auto;
  margin-left: auto;
  width: 22px;
  height: 22px;
  accent-color: var(--heritage-maroon, var(--color-accent));
}

/* ---- Footer sign-off ---- */
.footer-heritage {
  background: var(--heritage-maroon, var(--color-accent));
  color: #f6e9d8;
  text-align: center;
  padding: var(--space-5) var(--space-3);
}

.footer-heritage__quote {
  font-family: var(--font-script);
  font-style: italic;
  max-width: 480px;
  margin: 0 auto var(--space-2);
  line-height: 1.7;
}

.footer-heritage__signoff {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: var(--space-3);
}

.footer-heritage__parents {
  font-family: var(--font-script);
  font-style: italic;
  margin-top: 0.4rem;
}

.footer-heritage__names {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  color: var(--color-accent);
  margin-top: var(--space-3);
}

.footer-heritage__credit {
  margin-top: var(--space-4);
  font-size: 0.75rem;
  opacity: 0.75;
}

@media (min-width: 700px) {
  .scratch-card { width: 120px; height: 160px; }
  .festivity-card { max-width: 420px; }
}