/* Typography & Theme */
:root{
  --bg: #ffffff;
  --ink: #1f1f1f;
  --muted: #555;
  /* Wedding palette */
  --brand: #587B92;          /* steel blue */
  --brand-2: #B79ACF;        /* refined lilac */
  --brand-3: #7FA2B8;        /* dusty cornflower */
  --brand-4: #8B648B;        /* mauve plum */
  --navy: #1F2A44;           /* deep navy */
  --surface: #f7f5f3;        /* soft warm gray */
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

html{scroll-behavior:smooth; scrollbar-gutter: stable both-edges;}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6; font-size:16px;
}
h1,h2,h3,.logo{ line-height:1.2; margin:0 0 .5rem; }
h1.display, .section-title{ font-family: 'Sacramento', cursive; }
.rsvp-text{ font-family: 'Great Vibes', cursive !important; }
.subtitle{ font-family: 'Josefin Sans', ui-sans-serif; letter-spacing:.5px }
h3{ font-family: 'Alegreya', Georgia, serif; }
p, li, label, input, textarea, select, small{ font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

/* Layout helpers */
.container{ width:min(1100px, 92%); margin-inline:auto; }
.section{ padding: 80px 0; }
.section-alt{ background: var(--surface); }
.section-title{ font-size: clamp(26px, 3vw, 36px); text-align:center; margin-bottom: 28px; }
.grid{ display:grid; gap:28px; }
.grid.two{ grid-template-columns:1fr; }
.grid.two.v-center{ align-items:center; }
@media(min-width: 860px){ .grid.two{ grid-template-columns: 1fr 1fr; } }
.center{ text-align:center; }
.center-span{ grid-column: 1 / -1; justify-self: center; width: min(520px, 100%); }

/* Header */
.site-header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.85); backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid #eee; }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.logo{ color:var(--ink); text-decoration:none; font-weight:600; letter-spacing:.5px; font-family:'Sacramento', cursive; font-size:24px; }
.logo .heart{ color: var(--brand-2); margin-left:6px; font-size:1.05em; }
.menu-button{ background:#111; color:#fff; border:0; padding:8px 14px; border-radius:999px; font-weight:600; }
.menu-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:end; z-index:70; }
.menu-overlay[hidden]{ display:none !important; }
.menu-panel{ width:min(420px, 90%); height:100%; background:#fff; box-shadow:var(--shadow); padding:24px; position:relative; animation: slideIn .25s ease both; }
.menu-close{ position:absolute; right:10px; top:10px; background:none; border:0; font-size:28px; }
.menu-links{ display:flex; flex-direction:column; gap:12px; margin-top:32px; }
.menu-links a{ text-decoration:none; color:var(--ink); font-weight:600; font-family:'Alegreya', Georgia, serif; padding:10px 12px; border-radius:10px; }
.menu-links a:hover{ background:var(--surface); }
.menu-links .menu-rsvp{ background:var(--brand); color:#fff; border-radius:999px; text-align:center; }
@keyframes slideIn{ from{ transform: translateX(16px); opacity:0 } to{ transform:none; opacity:1 } }

/* Hero */
.hero{ position:relative; min-height: min(86vh, 900px); display:grid; }
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: 50% 28%; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.15)); }
.hero-content{ position:relative; z-index:1; display:grid; place-items:center; text-align:center; padding: 120px 16px 80px; color:#fff; }
.display{ font-size: clamp(40px, 6vw, 76px); font-weight:700; letter-spacing:.5px; }
.subtitle{ font-size: clamp(16px, 2.2vw, 22px); opacity:.95; }
.cta{ display:flex; gap:12px; justify-content:center; margin-top:16px; }
.btn{ display:inline-block; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:600; border:2px solid transparent; }
.btn.primary{ background:var(--navy); color:#fff; }
.btn.ghost{ border-color:#fff; color:#fff; }
.btn.ghost:hover{ background:#fff; color:#111; }
.scroll-down{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); color:#fff; text-decoration:none; font-size:26px; opacity:.85 }

/* Split View */
.split{ display:grid; grid-template-columns: 1fr; }
@media(min-width: 980px){ .split{ grid-template-columns: 1fr 1.2fr; min-height: 120vh; } }
.split-left{ display:none; position:relative; }
@media(min-width: 980px){ .split-left{ display:block; } }
.split-images{ position: sticky; top:72px; height: calc(100vh - 84px); border-right:1px solid #eee; overflow:hidden; }
.split-images img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform: scale(1.05); transition: opacity .8s ease, transform 1.2s ease; filter:saturate(.98) contrast(1.02); }
.split-images img.active{ opacity:1; transform: scale(1.0); }
.split-right{ background:#fff; }

/* Cards, lists */
.card{ background:#fff; padding:22px; border-radius:14px; box-shadow:var(--shadow); }
.note{ text-align:center; color:var(--muted) }
.checklist{ margin:10px 0 0; padding:0 0 0 20px; }

/* Timeline */
.timeline{ display:grid; gap:10px; max-width:680px; margin: 0 auto; }
.tl-item{ background:#fff; border-radius:12px; padding:12px 16px; box-shadow:var(--shadow); }
.tl-item span{ font-weight:600; margin-right:10px; color:var(--brand) }

/* Media and gallery */
.media img{ width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow); }
.gallery-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
@media(min-width:860px){ .gallery-grid{ grid-template-columns: repeat(4, 1fr) } }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 1/1; border-radius:12px; }
.is-hidden{ display:none !important; }

/* Wedding party */
.party-grid{ display:grid; gap:14px; grid-template-columns: repeat(1, 1fr); }
@media(min-width:680px){ .party-grid{ grid-template-columns: repeat(2, 1fr) } }
@media(min-width:980px){ .party-grid{ grid-template-columns: repeat(3, 1fr) } }
.party-grid .member img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:12px; box-shadow:var(--shadow); margin-bottom:8px; }
.party-grid .member h3{ font-family:'Alegreya', Georgia, serif; font-weight:700; font-size:20px; margin:6px 0 2px; color:var(--ink); }
.party-grid .member .role{ position:relative; font-weight:700; color:var(--brand-2); margin:8px 0 2px; letter-spacing:.2px; }
.party-grid .member .role::before{ content:""; display:block; width:28px; height:2px; border-radius:2px; background: var(--brand-3); margin:6px 0 6px; }
.party-grid .member .note{ color:var(--muted); margin:2px 0 0; }

/* Footer */
.site-footer{ padding:26px 0; border-top:1px solid #eee; background:#fff; text-align:center; color:var(--muted) }

/* Scroll reveal animations */
.reveal-up, .reveal-left, .reveal-right{ opacity:0; transform:translateY(14px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0s);}
.reveal-left{ transform:translateX(-22px); }
.reveal-right{ transform:translateX(22px); }
.in-view{ opacity:1 !important; transform:translate(0,0) !important; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:grid; place-items:center; z-index:100; }
.lightbox[hidden]{ display:none !important; }
.lightbox-inner{ position:relative; width: min(92vw, 1100px); display:grid; place-items:center; }
.lightbox img{ max-width:100%; max-height:80vh; border-radius:12px; box-shadow: var(--shadow); }
.lb-close{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,.6); color:#fff; border:0; width:40px; height:40px; border-radius:50%; font-size:20px; }
.lb-prev,.lb-next{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.6); color:#fff; border:0; width:44px; height:44px; border-radius:50%; font-size:20px; }
.lb-prev{ left:10px; } .lb-next{ right:10px; }

/* Map embed */
.map-embed{ position:relative; width:100%; padding-top:56.25%; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); background:#ddd; }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Access gate */
.gate{ position:fixed; inset:0; z-index:999; display:grid; place-items:center; background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,245,243,.96)); backdrop-filter: blur(6px); }
.gate[hidden]{ display:none !important; }
.gate-card{ width:min(520px,92%); background:#fff; border:1px solid #eee; border-radius:16px; box-shadow:var(--shadow); padding:24px; text-align:center; }
.gate-inline{ position:static; inset:auto; display:block; background:transparent; backdrop-filter:none; padding:36px 0; }
.gate-inline .gate-card{ margin: 0 auto; }
.gate-title{ font-family:'Sacramento', cursive; font-size:36px; color:var(--navy); margin:0 0 6px; }
.gate-sub{ color:var(--muted); margin:0 0 14px; }
.gate-row{ display:flex; gap:8px; justify-content:center; }
.gate-row input{ width:60%; min-width:220px; padding:12px; border-radius:10px; border:1px solid #ddd; font:inherit; }
.gate-error{ color:#9a1b1b; background:#fff3f3; border:1px solid #ffd6d6; padding:8px; border-radius:8px; margin-top:10px; }

/* RSVP page */
.rsvp-hero{ padding:70px 0 20px; background:var(--surface); text-align:center; }
.steps{ display:flex; justify-content:center; gap:8px; margin:12px 0 26px; }
.step-dot{ width:9px; height:9px; border-radius:50%; background:#d0d0d0; }
.step-dot.active{ background:var(--brand); }
.form-card{ background:#fff; padding:22px; border-radius:14px; box-shadow:var(--shadow); max-width:720px; margin: 0 auto; }
.form-row{ display:grid; gap:12px; margin-bottom:14px; }
@media(min-width:680px){ .form-row.two{ grid-template-columns:1fr 1fr } }
label{ font-weight:600; }
input[type="text"], input[type="email"], input[type="number"], textarea, select{
  width:100%; padding:12px 12px; border-radius:10px; border:1px solid #ddd; font: inherit;
}
textarea{ min-height:120px }
.form-actions{ display:flex; gap:10px; justify-content:space-between; margin-top:6px; }
.btn.secondary{ background:#f0f0f0; color:#111; }
.success{ background:#ecfbf4; border:1px solid #b6f0d3; color:#106a42; padding:14px; border-radius:10px; }
.error{ background:#fff3f3; border:1px solid #ffd6d6; color:#9a1b1b; padding:10px; border-radius:10px; }

/* Accessibility tweaks */
a:focus, button:focus, input:focus, select:focus, textarea:focus{ outline: 3px solid rgba(43,93,94,.25); outline-offset:3px; }

/* Ensure Remove guest stays hidden until extras exist */
#guestSection .form-actions #removeGuest{ display:none; }
#guestSection.has-extra .form-actions #removeGuest{ display:inline-flex; }
.hidden{ display:none !important; }
#protectedContent[hidden]{ display:none !important; }
#rsvpBtn[hidden], #rsvpMenuLink[hidden]{ display:none !important; }