/* site.css — additions layered on top of the ported invite.css for the standalone
   engagement site. Two jobs: (1) supply the font-family CSS variables that the
   Function app injected via next/font, and (2) style the net-new "claim a gift"
   registry UI, staying on the garden palette (serif, gold/rose accent, hairlines). */

.invite{
  --font-outfit:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-anton:"Anton",Impact,sans-serif;
  --font-cormorant:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-greatvibes:"Great Vibes","Segoe Script",cursive;
  /* The engagement hero title is the flowing script. */
  --font-title:var(--font-greatvibes);
}

/* Description card body (the Function app styled this in its builder CSS). */
.invite .inv-desc-text{font-size:16px;line-height:1.55;color:var(--cream);margin:0;white-space:pre-line}

/* ---- Registry: "claim a gift" controls ---- */
.invite .reg-actions{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.invite .reg-claim{
  font-family:var(--font-cormorant),serif;font-weight:600;font-size:14px;letter-spacing:.02em;
  color:var(--cream);background:rgba(255,252,245,.6);border:1px solid var(--line2);
  border-radius:999px;padding:8px 15px;cursor:pointer;transition:background .15s,border-color .15s;
}
.invite .reg-claim:hover{background:#fff;border-color:var(--red)}
.invite .reg-claim:disabled{opacity:.5;cursor:default}
.invite .reg-claimed{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#5f7d57;
}
.invite .reg-claimform{display:none;gap:8px;margin-top:10px;width:100%}
.invite .reg-claimform.open{display:flex}
.invite .reg-claimform .ri{flex:1;min-width:0;padding:9px 12px;font-size:14px}
.invite .reg-claim-confirm{
  flex:0 0 auto;font-family:var(--font-cormorant),serif;font-weight:700;font-size:14px;
  background:var(--red);color:var(--cta-ink,#2a2205);border:none;border-radius:10px;padding:0 15px;cursor:pointer;
}
.invite .reg-claim-confirm:disabled{opacity:.5;cursor:default}
.invite .reg-claim-err{color:#b4576a;font-size:12.5px;font-weight:600;margin:8px 0 0;width:100%}
/* A claimed gift dims and desaturates its image, but stays visible + linkable. */
.invite .reg-item.is-claimed{opacity:.74}
.invite .reg-item.is-claimed .reg-img{filter:saturate(.65)}

/* Loading shimmer while the registry state (claimed ids) is fetched. */
.invite .reg-grid.is-loading{opacity:.6}

/* The Venmo / Cash App chips are tappable links on this site (pay handles). */
.invite a.pay{text-decoration:none}
/* Zelle chip (Zelle is done in the guest's banking app, so this one is not a link). */
.invite .pay.zelle{background:rgba(109,30,212,.12);color:#8a5cf0;border-color:rgba(109,30,212,.4)}

/* Cash-fund banner photo (e.g. the family-vehicle fund). */
.invite .fund-photo{width:100%;aspect-ratio:16/10;border-radius:12px;margin:0 0 14px;background-size:cover;background-position:center;border:1px solid var(--line2)}
/* Gift tile when there's no product photo: a soft cream tile + a big emoji, so it
   stays on-theme instead of clashing with a scraped retailer image. */
.invite .reg-emoji{aspect-ratio:1;display:grid;place-items:center;font-size:54px;line-height:1;background:rgba(255,252,245,.7);border-bottom:1px solid var(--line2)}
/* Small elegant section label (e.g. between the funds and the gift grid). */
.invite .reg-sectlabel{text-align:center;font-family:var(--font-cormorant),serif;font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:15px;color:var(--cream);margin:30px 16px 2px}
.invite .reg-sectlabel::after{content:"";display:block;width:54px;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* Swap the garden theme's floral ground for the soft blue cherry-blossom painting
   (matches the couple portrait in the hero). Overrides invite.css, which loads first. */
.invite.is-wedding[data-theme="garden"]::before{
  background:#cfdeec url('/bg-blossom.jpg') top center / cover no-repeat;
}

/* Hero portrait is a transparent cutout of the couple, so they stand directly on the
   page's blossom background (no frame). A soft fade at the very bottom keeps the
   cropped hem from ending in a hard edge. */
.invite.is-wedding .wed-shot{
  border:0; box-shadow:none; border-radius:0; overflow:visible; background:none;
  width:min(430px,96%); margin:0 auto -4px;
  -webkit-mask-image:linear-gradient(180deg,#000 89%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 89%,transparent 100%);
}
/* The garden theme's soft white glow behind the hero would halo the feathered photo;
   drop it so the edges blend into the blossoms, not into a white patch. */
.invite.is-wedding[data-theme="garden"] .wed-frame{background:none}