/* ================================================================
   SHARED STYLES — emily & delaney wedding site
   ================================================================ */

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

/* ── TOKENS ── */
:root {
  --black:    #0D0B08;
  --dark:     #141109;
  --card-bg:  #111009;
  --cream:    #F5EFE4;
  --sand:     #E8D9C0;
  --mushroom: #8B7355;
  --gold:     #C4903A;
  --terra:    #B85C3A;
  --terra-l:  #D4795A;
  --sage:     #4A5E4A;
  --sage-l:   #7A9B7A;
  --blood:    #8B1A1A;
  --blood-l:  #C0392B;

  --font-display: 'Playfair Display', serif;
  --font-type:    'Special Elite', cursive;
  --font-body:    'Cormorant Garamond', serif;
  --font-sans:    'Jost', sans-serif;

  --max-w: 1100px;
  --section-pad: 6rem 2rem;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--cream);
  overflow-x: hidden;
}

/* ── SCANLINES ── */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:999;
  background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.018) 3px,rgba(0,0,0,0.018) 4px);
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 3rem;
  background:rgba(13,11,8,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(139,26,26,0.25);
}
.nav-logo {
  font-family:var(--font-display);
  font-size:1.05rem; font-weight:400; font-style:italic;
  color:var(--sand); text-decoration:none;
}
.nav-links { list-style:none; display:flex; gap:2rem; }
.nav-links a {
  font-family:var(--font-type);
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mushroom); text-decoration:none; transition:color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--gold); }

/* ── SECTION WRAPPERS ── */
.section { padding:var(--section-pad); max-width:var(--max-w); margin:0 auto; }
.section-full { padding:var(--section-pad); }
.section-inner { max-width:var(--max-w); margin:0 auto; }

/* ── SECTION LABELS ── */
.eyebrow {
  font-family:var(--font-type);
  font-size:0.55rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--gold); margin-bottom:0.9rem;
  display:flex; align-items:center; gap:0.75rem;
}
.eyebrow::after { content:''; max-width:60px; flex:1; height:1px; background:rgba(196,144,58,0.3); }

.section-title {
  font-family:var(--font-display);
  font-size:clamp(2.6rem,5vw,4.2rem);
  font-weight:400; line-height:1; color:var(--cream); margin-bottom:1.5rem;
}
.section-title em { font-style:italic; color:var(--sand); }

/* ── VHS BADGE ── */
.vhs-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-type);
  font-size:0.52rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--blood-l); border:1px solid var(--blood);
  padding:0.28rem 0.8rem; margin-bottom:1.25rem;
}
.vhs-dot { width:6px; height:6px; border-radius:50%; background:var(--blood-l); animation:blink 1.3s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ── BUTTONS ── */
.btn {
  display:inline-block;
  font-family:var(--font-type);
  font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase;
  padding:0.85rem 1.9rem; text-decoration:none;
  border:none; cursor:pointer; transition:background 0.18s;
}
.btn-primary   { background:var(--blood);  color:var(--cream); }
.btn-primary:hover  { background:var(--blood-l); }
.btn-secondary { background:transparent; color:var(--terra-l); border:1px solid var(--terra); }
.btn-secondary:hover { background:rgba(184,92,58,0.1); }

/* ── RULE ── */
.rule {
  width:80px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:1.75rem auto;
}

/* ── STRIP ── */
.strip-bg { background:var(--dark); border-top:1px solid rgba(139,26,26,0.12); }
.strip-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2rem; text-align:center;
  padding:3.5rem 2rem; max-width:var(--max-w); margin:0 auto;
}
.strip-label {
  font-family:var(--font-type);
  font-size:0.5rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--mushroom); margin-bottom:0.5rem;
}
.strip-val {
  font-family:var(--font-display);
  font-size:1.1rem; font-weight:400; font-style:italic; color:var(--cream);
}

/* ── FOOTER ── */
footer {
  padding:3rem 2rem; text-align:center;
  border-top:1px solid rgba(196,144,58,0.1);
}
.footer-names {
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:400; font-style:italic;
  color:var(--mushroom); margin-bottom:0.4rem;
}
.footer-date {
  font-family:var(--font-type);
  font-size:0.52rem; letter-spacing:0.28em; text-transform:uppercase;
  color:rgba(139,115,85,0.32);
}
.footer-contact {
  font-family:var(--font-type);
  font-size:0.55rem; letter-spacing:0.12em;
  color:rgba(139,115,85,0.28); margin-top:0.6rem;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp 0.8s both; }
.delay-1 { animation-delay:0.15s; }
.delay-2 { animation-delay:0.3s; }
.delay-3 { animation-delay:0.5s; }
.delay-4 { animation-delay:0.7s; }
.delay-5 { animation-delay:0.9s; }

/* ── FORM ELEMENTS (shared across pages) ── */
.field-label {
  font-family:var(--font-type);
  font-size:0.52rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--mushroom); margin-bottom:0.4rem; display:block;
}
.field-input, .field-select, .field-textarea {
  width:100%;
  background:rgba(20,17,9,0.95); border:1px solid rgba(196,144,58,0.2);
  color:var(--cream); padding:0.75rem 0.9rem; outline:none;
  font-family:var(--font-sans); font-size:0.82rem; letter-spacing:0.02em;
  transition:border-color 0.15s;
}
.field-input:focus, .field-select:focus, .field-textarea:focus { border-color:var(--gold); }
.field-input::placeholder, .field-textarea::placeholder { color:rgba(139,115,85,0.38); }
.field-select { cursor:pointer; appearance:none; }
.field-select option { background:var(--dark); }
.field-textarea { resize:vertical; min-height:90px; }

/* ── CARDS ── */
.card {
  background:var(--card-bg); border:1px solid rgba(196,144,58,0.12);
  padding:2rem; position:relative; overflow:hidden;
}
.card-accent-terra::before { content:''; position:absolute; top:0;left:0;right:0;height:2px;background:var(--terra); }
.card-accent-blood::before { content:''; position:absolute; top:0;left:0;right:0;height:2px;background:var(--blood); }
.card-accent-gold::before  { content:''; position:absolute; top:0;left:0;right:0;height:2px;background:var(--gold); }
.card-accent-sage::before  { content:''; position:absolute; top:0;left:0;right:0;height:2px;background:var(--sage-l); }

/* ── NOTIFICATION TOAST ── */
.toast {
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%);
  background:var(--dark); border:1px solid rgba(196,144,58,0.3);
  border-left:3px solid var(--gold);
  padding:0.9rem 1.5rem;
  font-family:var(--font-type); font-size:0.65rem; letter-spacing:0.12em;
  color:var(--sand);
  z-index:500; opacity:0; pointer-events:none;
  transition:opacity 0.3s; white-space:nowrap;
}
.toast.show { opacity:1; }