/* ===== Shared site styles (homepage + event pages) ===== */
/* Top navigation lives in its own file so standalone mini-apps can reuse it. */
@import url("/assets/nav.css");
:root{
  --bg:#0b0a08;
  --gold:#c9a24e;
  --gold-lt:#e6c877;
  --gold-deep:#a8843b;
  --cream:#efe6d3;
  --muted:#b6ab93;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);background:var(--bg);color:var(--cream);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* Top navigation styles now live in /assets/nav.css (imported at the top). */

/* ---- hero (full-screen photo with a gentle dim) ---- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:120px 24px 90px;background-size:cover;background-position:center 62%;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(72% 56% at 50% 54%, rgba(8,7,5,.30), transparent 78%),
  linear-gradient(180deg, rgba(8,7,5,.62) 0%, rgba(8,7,5,.12) 26%, rgba(8,7,5,.14) 60%, rgba(8,7,5,.70) 100%)}
.hero-content{position:relative;z-index:2;max-width:760px}

/* Home hero background slideshow: two layers crossfade under the veil + names.
   home-slideshow.js appends the .hero-slide layers; z-index sits under the veil
   (z1) and text (z2). Photo list is on [data-slideshow] in index.html. */
.hero-slideshow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg)}
.hero-slide{position:absolute;inset:0;background-position:center 45%;background-size:cover;
  background-repeat:no-repeat;opacity:0;transition:opacity 1.6s ease-in-out;will-change:opacity;backface-visibility:hidden}
.hero-slide.is-active{opacity:1}
@media (prefers-reduced-motion: reduce){.hero-slide{transition:none}}

.eyebrow{font-family:var(--sans);font-weight:300;letter-spacing:.4em;text-transform:uppercase;font-size:12px;
  color:var(--gold-lt);margin:0 0 18px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.couple{font-family:var(--serif);font-weight:700;font-size:clamp(42px,11vw,120px);line-height:1;margin:0;
  letter-spacing:.01em;color:var(--gold-lt);overflow-wrap:break-word;
  background:linear-gradient(180deg,#f4e4b6,var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.55))}
.couple span{-webkit-text-fill-color:var(--gold);font-weight:500;padding:0 .12em}
.date{font-family:var(--sans);font-weight:300;letter-spacing:.28em;text-transform:uppercase;font-size:13px;
  color:var(--cream);margin:26px 0 0;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.ornament{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--gold);margin:26px auto 24px;max-width:260px}
.ornament:before,.ornament:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-deep),transparent)}
.hero-cta{display:inline-block;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-lt);text-decoration:none;border:1px solid var(--line-gold,rgba(201,162,78,.5));border-radius:12px;
  padding:14px 30px;background:rgba(10,8,5,.35);backdrop-filter:blur(2px);transition:background .25s ease,color .25s ease}
.hero-cta:hover{background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#171009;border-color:transparent}

/* ---- event pages (title + details) ---- */
.event-title{font-family:var(--serif);font-weight:700;font-size:clamp(46px,11vw,92px);line-height:1;margin:0;
  color:var(--gold-lt);background:linear-gradient(180deg,#f4e4b6,var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.55))}
.event-note{font-family:var(--serif);font-style:italic;font-size:clamp(18px,4vw,24px);color:var(--cream);
  margin:20px 0 0;text-shadow:0 1px 8px rgba(0,0,0,.7)}

.event-tagline{font-family:var(--serif);font-style:italic;font-size:clamp(17px,3.6vw,23px);color:var(--cream);
  margin:18px auto 2px;max-width:38ch;line-height:1.5;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.event-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 58px;margin:2px 0 0;padding:0;list-style:none}
.meta-item{margin:0;text-align:center}
.meta-item dt{font-family:var(--sans);font-weight:300;letter-spacing:.34em;text-transform:uppercase;font-size:11px;
  color:var(--gold-lt);margin:0 0 9px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.meta-item dd{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(19px,3.6vw,26px);color:var(--cream);
  line-height:1.3;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.meta-item dd span{display:block;font-family:var(--sans);font-weight:300;font-size:13.5px;letter-spacing:.06em;
  color:var(--muted);margin-top:5px}
.event-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:38px 0 0}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:500;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);text-decoration:none;
  border:1px solid rgba(201,162,78,.5);border-radius:12px;padding:13px 26px;background:rgba(10,8,5,.4);
  backdrop-filter:blur(2px);cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.btn:hover,.btn:focus-visible{background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#171009;border-color:transparent;outline:none}
.btn-primary{background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#171009;border-color:transparent}
.btn-primary:hover,.btn-primary:focus-visible{filter:brightness(1.07)}
.btn svg{width:16px;height:16px;flex:none}

/* ---- video hero (e.g. Garba): autoplay background, darkened for legibility ---- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  background:var(--bg);pointer-events:none}
/* Poster cover over the video until it's truly playing. When muted autoplay is
   blocked (iOS Low Power Mode) iOS paints its own play button that CSS can't
   hide, so hero-video.js inserts this cover before the src is set and fades it
   out on the first `playing` event. Same z-index as the video but later in DOM. */
.hero-poster{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transition:opacity .5s ease}
.hero-poster.is-hidden{opacity:0}
/* stronger veil than the base hero so the moving footage stays behind the text.
   Tune these alpha values to taste (higher = darker). */
.hero--video::before{background:
  linear-gradient(180deg,
    rgba(8,7,5,.66) 0%, rgba(8,7,5,.38) 34%, rgba(8,7,5,.38) 62%, rgba(8,7,5,.76) 100%)}
/* dimmed photo hero (e.g. Vidhi): darker veil so a bright photo sits behind the
   text. Raise the middle alpha (.63) for darker, lower it for lighter. */
.hero--dim::before{background:
  linear-gradient(180deg,
    rgba(8,7,5,.68) 0%, rgba(8,7,5,.42) 28%, rgba(8,7,5,.42) 66%, rgba(8,7,5,.76) 100%)}
/* ---- split hero (e.g. Wedding): photo on the left half, details on a white
   panel on the right (text re-tuned for the light panel). Stacks on narrow. */
.hero--split{background:#fff;padding:0;display:flex;align-items:stretch;text-align:left;overflow:hidden}
.hero--split::before{display:none}                 /* no dark veil over the white panel */
.hero--split .hero-photo{flex:0 0 50%;background-size:cover;background-position:center 28%;background-repeat:no-repeat}
.hero--split .hero-content{flex:1 1 50%;max-width:none;display:flex;flex-direction:column;
  justify-content:center;padding:96px clamp(30px,5vw,80px)}
/* left-align every centred element and re-colour for the light panel */
.hero--split .eyebrow{color:var(--gold-deep);text-shadow:none}
.hero--split .event-title{background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;filter:none}
.hero--split .event-tagline{color:#4a4034;text-shadow:none;margin-left:0;max-width:42ch}
.hero--split .ornament{margin:26px 0 24px}
.hero--split .event-meta{justify-content:flex-start;gap:24px 48px}
.hero--split .meta-item{text-align:left}
.hero--split .meta-item dt{color:var(--gold-deep);text-shadow:none}
.hero--split .meta-item dd{color:#2a2620;text-shadow:none}
.hero--split .meta-item dd span{color:#8a7f6c}
.hero--split .event-actions{justify-content:flex-start}
.hero--split .btn{color:var(--gold-deep);background:transparent;border-color:var(--gold-deep);backdrop-filter:none}
.hero--split .btn:hover,.hero--split .btn:focus-visible{background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  color:#171009;border-color:transparent}
/* keep the primary CTA (e.g. Reception's "Find your seat") gold-filled on the light panel */
.hero--split .btn-primary{background:linear-gradient(180deg,var(--gold-lt),var(--gold));color:#171009;border-color:transparent}
.hero--split .btn-primary:hover,.hero--split .btn-primary:focus-visible{filter:brightness(1.07)}
@media (max-width:820px){
  .hero--split{flex-direction:column}
  .hero--split .hero-photo{flex:0 0 44vh;min-height:280px}
  .hero--split .hero-content{padding:56px 28px 72px}
}

/* Respect reduced-motion: hide the video, fall back to the poster (set as the
   section's background-image). hero-video.js also skips loading it entirely. */
@media (prefers-reduced-motion: reduce){.hero-video{display:none}}