@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@300;400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --cream:    #f5f0e8;
    --warm:     #e8dcc8;
    --bark:     #6b4f35;
    --moss:     #7a8c6e;
    --stone:    #9e8e7a;
    --gold:     #b8935a;
    --charcoal: #2e2620;
    --red:      #c0392b;
    --border:   rgba(107,79,53,0.15);
    --bg:       #faf7f2;
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Jost', sans-serif;
}

html { scroll-behavior: smooth; }

body {
    background: var(--cream);
    color: var(--charcoal);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.7;
    min-height: 100vh;
}

/* ── PUBLIC NAV ── */
.site-nav { position:sticky; top:0; z-index:100; background:rgba(245,240,232,0.97); backdrop-filter:blur(12px); border-bottom:1px solid rgba(184,147,90,0.2); padding:0 2rem; display:flex; align-items:center; justify-content:space-between; }
.site-nav-brand { font-family:var(--font-heading); font-size:1.3rem; font-style:italic; color:var(--bark); text-decoration:none; padding:1rem 0; }
.site-nav-links { display:flex; gap:2rem; overflow-x:auto; scrollbar-width:none; white-space:nowrap; }
.site-nav-links::-webkit-scrollbar { display:none; }
.site-nav-links a { font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); text-decoration:none; padding:1rem 0; transition:color 0.2s; flex-shrink:0; }
.site-nav-links a:hover, .site-nav-links a.active { color:var(--bark); }

/* ── ADMIN NAV ── */
.admin-nav { background:white; border-bottom:1px solid var(--border); padding:0.75rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.admin-nav-brand { font-family:var(--font-heading); font-style:italic; color:var(--bark); font-size:1.1rem; text-decoration:none; }
.admin-nav-right { display:flex; align-items:center; gap:1rem; }
.admin-nav-right a { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); text-decoration:none; }
.admin-nav-right a:hover { color:var(--bark); }

/* ── ADMIN TABS ── */
.tab-bar { background:white; border-bottom:1px solid var(--border); padding:0 1.5rem; display:flex; overflow-x:auto; scrollbar-width:none; }
.tab-bar::-webkit-scrollbar { display:none; }
.tab { padding:0.85rem 1.25rem; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; flex-shrink:0; transition:all 0.2s; font-family:var(--font-body); }
.tab:hover { color:var(--bark); }
.tab.active { color:var(--bark); border-bottom-color:var(--bark); }

/* ── ADMIN PANELS ── */
.panel { display:none; padding:2rem 1.5rem; max-width:1000px; margin:0 auto; }
.panel.active { display:block; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
.section-head h2 { font-family:var(--font-heading); font-size:1.5rem; font-weight:300; color:var(--bark); }

/* ── ADMIN CARDS ── */
.admin-card { background:white; border:1px solid var(--border); border-radius:3px; padding:1.5rem; margin-bottom:1.25rem; }
.admin-card-label { font-size:0.65rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--stone); margin-bottom:1rem; }

/* ── ADMIN MESSAGE ── */
.admin-message { padding:0.85rem 1.25rem; border-radius:2px; margin-bottom:1.5rem; font-size:0.9rem; }
.admin-message.success { background:rgba(122,140,110,0.1); border:1px solid rgba(122,140,110,0.3); color:var(--moss); }
.admin-message.error { background:rgba(192,57,43,0.08); border:1px solid rgba(192,57,43,0.2); color:var(--red); }

/* ── ADMIN TABLE ── */
.rsvp-table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.rsvp-table th { background:var(--warm); padding:0.65rem 1rem; text-align:left; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); font-weight:400; }
.rsvp-table td { padding:0.65rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.rsvp-table tr:last-child td { border-bottom:none; }
.rsvp-table tr:hover td { background:rgba(184,147,90,0.04); }

/* ── BADGES ── */
.badge { display:inline-block; padding:0.2rem 0.55rem; border-radius:2px; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; }
.badge-yes { background:rgba(122,140,110,0.12); color:var(--moss); }
.badge-no  { background:rgba(107,79,53,0.08); color:var(--stone); }

/* ── ADMIN PHOTO GRID ── */
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:0.75rem; }
.photo-card { background:white; border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.photo-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.photo-actions { padding:0.5rem; display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.photo-name { font-size:0.65rem; color:var(--stone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }

/* ── COLOR PICKER ── */
.color-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
.color-item label { display:block; font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); margin-bottom:0.4rem; }
.color-item input[type=color] { width:100%; height:44px; padding:2px; border:1px solid var(--border); border-radius:2px; cursor:pointer; }

/* ── ADMIN LOGIN ── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card { width:min(380px,90vw); background:white; border:1px solid var(--border); border-radius:4px; padding:2.5rem; text-align:center; }
.login-card h1 { font-family:var(--font-heading); font-size:2rem; font-weight:300; font-style:italic; color:var(--bark); margin-bottom:0.25rem; }
.login-card p { font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--stone); margin-bottom:2rem; }
.login-error { color:var(--red); font-size:0.85rem; margin-bottom:1rem; }

/* ── SECTION LABELS & TITLES ── */
.section-label { font-family:var(--font-body); font-size:0.7rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--moss); margin-bottom:0.75rem; }
.section-title { font-family:var(--font-heading); font-size:clamp(2.5rem,6vw,4rem); font-weight:300; line-height:1.1; color:var(--bark); }
.section-title em { font-style:italic; }

/* ── DIVIDER ── */
.divider { display:flex; align-items:center; gap:1rem; margin:1.5rem 0; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:rgba(184,147,90,0.3); }
.divider span { color:var(--gold); font-size:0.7rem; }

/* ── CARD ── */
.card { background:white; border:1px solid rgba(184,147,90,0.15); border-radius:4px; padding:clamp(1.5rem,4vw,2.5rem); margin-bottom:1.5rem; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; padding:0.6rem 1.25rem; border-radius:2px; font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; text-decoration:none; transition:all 0.2s; font-weight:400; border:none; white-space:nowrap; }
.btn-primary { background:var(--bark); color:white; }
.btn-primary:hover { background:#5a3f28; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--bark); }
.btn-outline:hover { background:rgba(107,79,53,0.06); }
.btn-danger { background:transparent; border:1px solid rgba(192,57,43,0.3); color:var(--red); }
.btn-danger:hover { background:rgba(192,57,43,0.08); }
.btn-moss { background:var(--moss); color:white; }
.btn-moss:hover { opacity:0.9; }
.btn-full { width:100%; justify-content:center; }
.btn-sm { padding:0.4rem 0.85rem; font-size:0.65rem; }

/* ── FORMS ── */
.form-group { margin-bottom:1.25rem; }
.form-group label { display:block; margin-bottom:0.4rem; font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--moss); }
.form-group input, .form-group select, .form-group textarea,
input.field, select.field, textarea.field {
    width:100%; padding:0.75rem 1rem;
    border:1px solid rgba(107,79,53,0.2); border-radius:2px;
    font-family:var(--font-body); font-size:0.95rem; font-weight:300;
    color:var(--charcoal); background:white; outline:none; transition:border-color 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
input.field:focus, select.field:focus, textarea.field:focus { border-color:var(--gold); }
.form-group textarea, textarea.field { min-height:120px; resize:vertical; }
.form-hint { font-size:0.75rem; color:var(--stone); margin-top:0.35rem; font-style:italic; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:600px) { .form-row { grid-template-columns:1fr; } }
::placeholder { color:rgba(107,79,53,0.35); }

/* ── GALLERY MOSAIC ── */
.gallery-mosaic { columns:3; column-gap:1rem; }
@media(max-width:700px) { .gallery-mosaic { columns:2; } }
@media(max-width:400px) { .gallery-mosaic { columns:1; } }
.gallery-item { break-inside:avoid; margin-bottom:1rem; border-radius:2px; overflow:hidden; cursor:pointer; transition:transform 0.3s, opacity 0.3s; }
.gallery-item:hover { transform:scale(1.01); opacity:0.9; }
.gallery-item img { width:100%; display:block; }
.gallery-placeholder { aspect-ratio:1; background:var(--warm); display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--stone); gap:0.5rem; font-size:0.8rem; letter-spacing:0.2em; text-transform:uppercase; }

/* ── LIGHTBOX ── */
.lightbox { display:none; position:fixed; inset:0; background:rgba(26,18,10,0.97); z-index:999; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:92vw; max-height:92vh; object-fit:contain; border-radius:2px; }
.lightbox-close { position:absolute; top:1.5rem; right:2rem; font-size:1.5rem; color:rgba(245,240,232,0.6); cursor:pointer; background:none; border:none; transition:color 0.2s; }
.lightbox-close:hover { color:#f5f0e8; }

/* ── PAYMENT BUTTONS ── */
.pay-btns { display:flex; flex-wrap:wrap; gap:0.75rem; }
.pay-btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.75rem 1.5rem; border-radius:2px; font-size:0.8rem; letter-spacing:0.1em; text-decoration:none; transition:opacity 0.2s; font-weight:400; }
.pay-btn:hover { opacity:0.85; }
.pay-venmo   { background:#008CFF; color:white; }
.pay-paypal  { background:#003087; color:white; }
.pay-amazon  { background:#FF9900; color:#111; }
.pay-cashapp { background:#00D632; color:white; }

/* ── FOOTER ── */
.site-footer { text-align:center; padding:2.5rem; border-top:1px solid rgba(184,147,90,0.15); font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); }
.site-footer a { color:var(--bark); text-decoration:none; }

/* ── WRAP ── */
.wrap { max-width:1100px; margin:0 auto; padding:0 clamp(1.5rem,5vw,4rem); }
.wrap-narrow { max-width:680px; margin:0 auto; padding:0 clamp(1.5rem,5vw,3rem); }

/* ── RSVP TOGGLE ── */
.rsvp-toggle { display:flex; margin-bottom:1.25rem; border:1px solid rgba(107,79,53,0.2); border-radius:2px; overflow:hidden; }
.rsvp-toggle input[type="radio"] { display:none; }
.rsvp-toggle label { flex:1; text-align:center; padding:0.85rem; font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; transition:all 0.2s; color:var(--stone); border:none; margin:0; }
.rsvp-toggle input:checked + label { background:var(--bark); color:var(--cream); }
.rsvp-toggle label:hover { color:var(--bark); }

/* ── ALERTS ── */
.alert-success { background:rgba(122,140,110,0.1); border:1px solid rgba(122,140,110,0.3); border-radius:2px; padding:1rem 1.25rem; margin-bottom:1.5rem; color:var(--moss); font-family:var(--font-heading); font-style:italic; text-align:center; }
.alert-error   { background:rgba(180,50,50,0.08); border:1px solid rgba(180,50,50,0.2); border-radius:2px; padding:1rem 1.25rem; margin-bottom:1.5rem; color:var(--red); }

/* ── CALENDAR LINKS ── */
.cal-btns { display:flex; flex-wrap:wrap; gap:0.75rem; }
.cal-btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.6rem 1.25rem; border:1px solid rgba(184,147,90,0.4); border-radius:2px; color:var(--bark); text-decoration:none; font-size:0.8rem; letter-spacing:0.1em; transition:background 0.2s; }
.cal-btn:hover { background:rgba(184,147,90,0.1); }

/* ── VENUE MAP ── */
.venue-map { height:220px; border-radius:2px; margin-top:1rem; }

/* ── PAGE HEADER ── */
.page-hero { padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem) clamp(3rem,5vw,5rem); background:linear-gradient(to bottom, var(--warm), var(--cream)); text-align:center; }

/* ── RESPONSIVE ── */
@media(max-width:600px) {
    .site-nav { padding:0 1rem; }
    .site-nav-links { gap:1.25rem; }
    .admin-nav { padding:0.75rem 1rem; }
    .panel { padding:1.5rem 1rem; }
}