/*
  theme.css: the look of the site. A redesign normally only changes this file plus images in assets/.
  Placeholder theme taken from the save-the-date card: ivory paper, forest green, gold, blush.

  Hooks you can style (see index.html):
    #envelope .envelope__back / __front / __flap / __letter / __seal   the intro envelope
    .hero .monogram .names .names__amp .divider .eyebrow               opening screen
    .scratch .scratch__content .scratch__cover                         scratch-to-reveal (cover colour = --scratch-cover)
    .countdown__unit .countdown__num .countdown__label
    .day .day__date .event[data-event="mehndi|sangeet|sehra|anandkaraj|lunch"] .event__icon
    .venue .button .button--primary .button--ghost .button--whatsapp
    .field .choice .thanks .footer .music-toggle
  To use images: put them in assets/ and point a background-image at them, e.g.
    .envelope__front { background-image: url("../assets/envelope-front.png"); }
    .event[data-event="mehndi"] .event__icon { background-image: url("../assets/icon-mehndi.png"); }
*/

:root {
  /* Colours */
  --color-bg: #fbf6ec;
  --color-paper: #fffaf1;
  --color-ink: #2e4630;
  --color-ink-soft: #5d6b58;
  --color-gold: #a8823a;
  --color-gold-soft: #d8c08a;
  --color-blush: #f2d9d2;
  --color-blush-deep: #e4bdb2;
  --color-line: #e3d6bb;
  --color-error: #a3322a;
  --color-whatsapp: #1f7a4d;

  --page-bg: var(--color-bg);
  --envelope-screen-bg: radial-gradient(circle at 50% 40%, #fffaf1 0%, #f3e9d6 100%);
  --scratch-cover: #c9a65a;
  --scratch-cover-text: #fffaf1;

  /* Fonts */
  --font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;
  --text-base: 1.1875rem;

  /* Spacing and sizes */
  --gutter: 16px;
  --content-width: 640px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .875rem;
  --space-4: 1.25rem;
  --space-5: 2rem;
  --space-6: 3.5rem;
  --radius: 10px;
  --event-icon-size: 56px;
  --envelope-ratio: 3 / 4;
  --flap-depth: 52%;
  --seal-size: 76px;
  --scratch-ratio: 4 / 3;
}

body { font-variant-numeric: lining-nums; }

/* ---------- Envelope ---------- */
.envelope { filter: drop-shadow(0 18px 30px rgba(70, 50, 30, .22)); }
.envelope__back { background: var(--color-blush-deep); border-radius: 6px; }
.envelope__front { background: linear-gradient(180deg, var(--color-blush) 0%, #ecccc3 100%); border-radius: 6px; }
.envelope__flap { background: linear-gradient(180deg, #f6e2dc 0%, var(--color-blush) 100%); border-radius: 6px 6px 0 0; }
.envelope__letter {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 4px;
}
.envelope__letter-names { font-family: var(--font-script); font-size: 1.9rem; color: var(--color-ink); }
.envelope__seal {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e6c983 0%, #b88d3c 55%, #8f6a26 100%);
  box-shadow: 0 3px 8px rgba(80, 55, 20, .35), inset 0 0 0 4px rgba(255, 240, 200, .25);
  color: #fff6dc;
  font-family: var(--font-body);
  font-size: 1.5rem;
  letter-spacing: .08em;
  font-weight: 600;
}
.envelope-screen__hint {
  margin: 0;
  font-size: .95rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-gold);
}
@media (prefers-reduced-motion: no-preference) {
  .envelope-screen__hint { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .45; } }
}

/* ---------- Shared text ---------- */
.section__title {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1.2;
  color: var(--color-ink);
}
.eyebrow {
  margin: 0;
  font-size: .85rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.divider {
  width: 160px;
  height: 1px;
  margin: var(--space-3) auto;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}
.section + .section { border-top: 1px solid var(--color-line); }

/* ---------- Hero ---------- */
.monogram {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  outline: 1px solid var(--color-gold-soft);
  outline-offset: 4px;
  font-size: 2.1rem;
  letter-spacing: .06em;
  color: var(--color-gold);
}
.names {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(3.2rem, 15vw, 4.6rem);
  line-height: 1.05;
  color: var(--color-ink);
}
.names__amp { color: var(--color-gold); font-size: .8em; }
.hero__date { margin: 0; font-size: 1.15rem; letter-spacing: .22em; text-transform: uppercase; }
.hero__venue { margin: 0; font-style: italic; color: var(--color-ink-soft); }
.scroll-hint {
  width: 22px; height: 34px;
  border: 1.5px solid var(--color-gold);
  border-radius: 12px;
}
.scroll-hint::after {
  content: "";
  position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px;
  background: var(--color-gold);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint::after { animation: scroll-dot 1.8s ease-in-out infinite; }
  @keyframes scroll-dot { 60% { transform: translateY(10px); opacity: 0; } }
}

/* ---------- Welcome ---------- */
.welcome__body { max-width: 30em; margin: var(--space-3) auto 0; color: var(--color-ink-soft); }

/* ---------- Scratch ---------- */
.scratch {
  border-radius: var(--radius);
  background: var(--color-paper);
  border: 1px solid var(--color-gold-soft);
  box-shadow: 0 8px 24px rgba(80, 60, 30, .08);
}
.scratch__caption { margin: 0; font-family: var(--font-script); font-size: 2rem; color: var(--color-ink); }
.scratch__date { margin: 0; font-size: 1.6rem; letter-spacing: .18em; color: var(--color-gold); font-weight: 600; }

/* ---------- Countdown ---------- */
.countdown__unit {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.countdown__num { font-size: 2rem; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.countdown__label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-ink-soft); }
.countdown__done { font-family: var(--font-script); font-size: 2rem; color: var(--color-gold); }

/* ---------- Events ---------- */
.day__date {
  margin: 0;
  font-size: .95rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.day__date::after { content: ""; display: block; width: 120px; height: 1px; margin: var(--space-2) auto 0; background: var(--color-gold-soft); }
.event__icon {
  border-radius: 50%;
  background: #f4e7cf center / 60% no-repeat;
  border: 1px solid var(--color-gold-soft);
  display: grid;
  place-items: center;
  color: var(--color-gold);
  font-size: 1.5rem;
}
.event__icon::before { content: "❀"; } /* placeholder; set content: none when using an icon image */
.event__name { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.event__time { margin: 0; color: var(--color-ink-soft); letter-spacing: .08em; }

/* ---------- Venue ---------- */
.venue__name { margin: var(--space-3) 0 0; font-size: 1.4rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.venue__address { color: var(--color-ink-soft); }

/* ---------- Buttons ---------- */
.button {
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.button--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.button--primary:disabled { opacity: .7; }
.button--whatsapp { background: var(--color-whatsapp); border-color: var(--color-whatsapp); color: #fff; }
.button:focus-visible, .link-button:focus-visible, .choice:focus-within, .envelope:focus-visible, .scratch__cover:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
.link-button { color: var(--color-ink-soft); }

/* ---------- Form ---------- */
.rsvp__intro { text-align: center; color: var(--color-ink-soft); margin: 0 0 var(--space-5); }
.field label:not(.choice), .field legend { font-weight: 600; letter-spacing: .02em; }
.field :is(input:not([type="checkbox"]):not([type="radio"]), textarea) {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
  color: var(--color-ink);
}
.field :is(input:not([type="checkbox"]):not([type="radio"]), textarea):focus { outline: 2px solid var(--color-gold-soft); border-color: var(--color-gold); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field__error, .form__error { color: var(--color-error); font-size: .95rem; }
.field__hint { font-size: .95rem; color: var(--color-ink-soft); font-style: italic; }
.choice {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-paper);
}
.choice input { accent-color: var(--color-ink); }
.choice:has(input:checked) { border-color: var(--color-gold); background: #f8efdc; }
.thanks:focus { outline: none; }
.thanks__title, .rsvp__already-title { margin: 0; font-family: var(--font-script); font-size: 2.1rem; color: var(--color-ink); }
.thanks__whatsapp-text { color: var(--color-ink-soft); max-width: 26em; }

/* ---------- Footer ---------- */
.footer__line { margin: 0; font-family: var(--font-script); font-size: 1.9rem; }
.footer__names { margin: var(--space-2) 0 0; letter-spacing: .2em; text-transform: uppercase; font-size: .85rem; color: var(--color-ink-soft); }

/* ---------- Music toggle ---------- */
.music-toggle {
  border: 1px solid var(--color-gold-soft);
  background: rgba(255, 250, 241, .9);
  color: var(--color-gold);
}
.music-toggle::before { content: "♪"; font-size: 1.2rem; }
.music-toggle[aria-pressed="false"]::before { content: "♪"; opacity: .4; text-decoration: line-through; }