@import url("../mika-nico/theme.css");

:root {
  --paper:#fff1ef;
  --white:#fcfaf5;
  --ink:#482a35;
  --muted:#482a35;
  --green:#f3dce1;
  --dark-green:#723e52;
  --red:#913a57;
  --rule:color-mix(in srgb, var(--ink) 25%, transparent);
}
.intro { --envelope-background:#723e52; }
.guest-nav { background:var(--paper); color:var(--ink); }
.guest-nav.is-compact { background:var(--paper); }
.wedding-hero {
  position:relative;
  display:grid;
  place-items:center;
  padding:0;
  background:#1e302b;
  scroll-margin-top:0;
}
.hero-heading { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hero-invitation { position:relative; display:block; width:100%; height:100vh; height:100dvh; object-fit:fill; }
.primary { background:#913a57; color:#fff; border-color:#913a57; }
#open span,.wedding-footer,#countdown,#gifts,#rsvp,.photo-gallery,#music-toggle { color:#fffdf7; }
#countdown .countdown div,.entourage-content { color:#263329; }
.rsvp-page :is(input,select,textarea) { color:var(--ink); }

/* Keep the lettering in proportion on wider screens. */
@media (min-aspect-ratio: 1240/1748) {
  .wedding-hero {
    background: #1e302b url("./assets/hero-invitation.png") center / cover no-repeat;
  }
  .hero-invitation {
    object-fit:contain;
    background:#1e302b;
    width:auto;
    max-width:100%;
  }
  .wedding-hero::before {
    content:"";
    position:absolute;
    inset:0;
    background:inherit;
    filter:blur(32px) brightness(.55);
  }
}

.guest-nav {
  position:fixed;
  inset:max(8px, env(safe-area-inset-top)) 0 auto;
  z-index:5;
  width:max-content;
  max-width:calc(100% - 16px);
  margin:0 auto;
  padding-inline:clamp(.75rem, 4vw, 2rem);
  border-radius:999px;
}
.floating-rsvp {
  position:fixed;
  z-index:5;
  left:max(16px, env(safe-area-inset-left));
  bottom:max(16px, env(safe-area-inset-bottom));
  box-shadow:0 4px 18px #0004;
}