/* 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);
}

/* Darken the theme's "muted" secondary text: the ported #95897a is too faint on the
   warm-white cards and the blossom background (Music times, registry sub-line, footer,
   and other labels/notes were barely legible). */
.invite.is-wedding{ --muted:#64594b; }

/* 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;
}
/* "N left" note on multi-claim gifts (gift cards several people can chip in on). */
.invite .reg-left{font-size:12.5px;font-weight:600;color:var(--muted);align-self:center;white-space:nowrap}
.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 standing on the blossom
   background (no frame); the names lay across its vertical middle, so the couple's top
   half reads above the heading and the bottom half below it. */
.invite.is-wedding .wed-shot{
  position:relative;
  border:0; box-shadow:none; border-radius:0; overflow:visible; background:none;
  width:min(440px,96%); margin:0 auto 2px;
}
.invite.is-wedding .wed-img{
  display:block; width:100%; height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 90%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 90%,transparent 100%);
}
/* Names overlay, vertically centered on the couple. A soft ivory halo (text-shadow)
   lifts the script off the illustration so it stays legible without hiding the couple. */
.invite.is-wedding .wed-names{
  position:absolute; left:0; right:0; top:70%; transform:translateY(-50%);
  text-align:center; padding:0 6px; pointer-events:none;
}
/* "You're Invited" kicker sits in the sky above the couple's heads. */
.invite.is-wedding .wed-kicker{
  position:absolute; left:0; right:0; top:12.5%;
  text-align:center; padding:0 6px; pointer-events:none;
}
.invite.is-wedding .wed-kicker .eyebrow{
  margin-bottom:0;
  font-size:clamp(20px, 6vw, 26px); letter-spacing:.13em; font-weight:800; color:var(--red);
  text-shadow:0 0 3px rgba(255,252,247,.96), 0 0 11px rgba(255,252,247,.9), 0 0 24px rgba(255,252,247,.82), 0 1px 2px rgba(255,252,247,.92);
}
.invite.is-wedding .wed-names h1{
  font-size:clamp(44px,13.5vw,78px); line-height:1.05; margin:4px 0 0;
  text-shadow:0 1px 2px rgba(247,241,230,.85), 0 0 16px rgba(247,241,230,.95), 0 0 34px rgba(247,241,230,.85);
}
.invite.is-wedding .wed-names h1::after{
  content:""; display:block; width:66px; height:1px; margin:12px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
/* Two-line hero title: the couple's names sit big on top, "Engagement Party" as a
   smaller script line beneath. Both inherit the Great Vibes font, cream color and
   ivory halo from .wed-names h1; nowrap keeps each phrase on its own line (the vw
   term in the clamp shrinks them to fit on narrow phones). */
.invite.is-wedding .wed-names h1 .wn-1{ display:block; white-space:nowrap; }
.invite.is-wedding .wed-names h1 .wn-2{
  display:block; white-space:nowrap; margin-top:1px;
  font-size:clamp(26px, 8vw, 44px); line-height:1.02;
}
/* 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}

/* ---- Private guest-list (host) page ---- */
.invite .gl-gate{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.invite .gl-gate .ri{flex:1;min-width:170px}
.invite .gl-gate .cta{width:auto;flex:0 0 auto;padding:13px 22px}
.invite .gl-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.invite .gl-count{background:rgba(255,252,245,.55);border:1px solid var(--line2);border-radius:14px;padding:14px 8px;text-align:center}
.invite .gl-count .n{font-family:var(--font-cormorant),serif;font-weight:600;font-size:30px;line-height:1;color:var(--cream)}
.invite .gl-count .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.invite .gl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.invite .gl-actions .btn{flex:1 1 auto}
.invite .gl-rows{display:grid;gap:10px}
.invite .gl-row{background:rgba(255,252,245,.5);border:1px solid var(--line2);border-radius:12px;padding:12px 14px}
.invite .gl-main{display:flex;align-items:center;justify-content:space-between;gap:10px}
.invite .gl-name{font-weight:600;font-size:16px;color:var(--cream)}
.invite .gl-sub{color:var(--muted);font-size:13.5px;margin-top:3px}
.invite .gl-note{font-style:italic;font-size:14px;color:var(--cream);margin-top:4px}
.invite .gl-date{color:var(--muted);font-size:12px;margin-top:5px}
.invite .gl-pill{font-weight:700;font-size:12px;letter-spacing:.04em;padding:4px 11px;border-radius:999px;border:1px solid var(--line2);white-space:nowrap}
.invite .gl-yes{color:#5f7d57;background:rgba(95,125,87,.13)}
.invite .gl-maybe{color:#9a7b1f;background:rgba(154,123,31,.13)}
.invite .gl-no{color:#b4576a;background:rgba(180,87,106,.13)}

/* Private ship-to note on the registry, revealed only after a guest claims a gift. */
.invite .reg-ship{margin:16px 16px 0;padding:16px 18px;border-radius:16px;background:rgba(255,253,248,.82);border:1px solid var(--line2);text-align:center;box-shadow:0 12px 34px rgba(90,70,40,.10)}
.invite .reg-ship-title{font-family:var(--font-cormorant),serif;font-weight:600;font-size:17px;color:var(--cream)}
.invite .reg-ship-body{margin-top:6px;font-size:15px;color:var(--cream);line-height:1.55}
.invite .reg-ship-cards{margin-top:8px;font-size:13.5px;color:var(--muted)}
.invite .reg-ship-cards a{color:var(--red);text-decoration:none;font-weight:600}