/* ==========================================================================
   Badatz Wedding — shared stylesheet
   Built from badatzwedding-design-reference.md
   Sibling to jewishverification.com · ceremonial · dignified · warm
   ========================================================================== */

:root{
  /* Evergreen — primary */
  --green-50:#EAF2EF; --green-100:#D6E7E1; --green-200:#B0D0C7; --green-300:#7FB3A6;
  --green-400:#4A8E7E; --green-500:#1C5A4E; --green-600:#164A40; --green-700:#123F37;
  --green-800:#0E312B; --green-900:#0A231F;

  /* Champagne gold — accent (the JV thread) */
  --gold-100:#F5EEDD; --gold-200:#EFE3C8; --gold-300:#E3D0A6; --gold-400:#CDB27B;
  --gold-500:#B8975A; --gold-600:#A07E45; --gold-700:#8E6F38; --gold-800:#6E5528;

  /* Neutrals */
  --bg:#F6F1E6; --bg-alt:#EDF2EF; --surface:#FFFFFF; --fill-subtle:#EFE9DB;
  --border:#E1D8C4;
  --ink:#22312D; --text:#4B554F; --muted:#8C8577;

  /* Semantic */
  --received:#8E6F38; --received-border:#B8975A; --received-bg:#F5EEDD;
  --warning:#8A5A16;  --warning-border:#D9A441;  --warning-bg:#FBF2DF;
  --error:#9E3B34;    --error-border:#C56A61;    --error-bg:#F7EAE8;
  --info:#123F37;     --info-border:#1C5A4E;     --info-bg:#EAF2EF;

  /* Gradients (large surfaces only) */
  --grad-deep: linear-gradient(160deg,#1C5A4E 0%,#123F37 100%);
  --grad-gold: linear-gradient(90deg,#CDB27B 0%,#B8975A 100%);
  --grad-hero: linear-gradient(160deg,#F6F1E6 0%,#EFE9DB 100%);

  /* Type */
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-hebrew-serif:'Frank Ruhl Libre','David Libre',serif;
  --font-hebrew-sans:'Assistant','Heebo',sans-serif;
  --font-mono:ui-monospace,'SF Mono',monospace;

  /* Radius & shadow */
  --radius-sm:7px; --radius-md:10px; --radius-arch:130px; --radius-pill:999px;
  --shadow-card:0 1px 3px rgba(30,50,45,.05);
  --shadow-hover:0 6px 20px rgba(18,63,55,.10);
  --shadow-arch:0 10px 30px rgba(18,63,55,.18);

  /* Motion */
  --transition:all .15s ease;
}

/* ---------- Reset & base ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-sans); color:var(--text); background:var(--bg);
  background-image:var(--grad-hero);
  background-attachment:fixed;
  min-height:100vh; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{ color:var(--ink); }
.display{ font-family:var(--font-serif); font-weight:600; font-size:40px; line-height:1.08; letter-spacing:.005em; }
h1{ font-family:var(--font-serif); font-weight:600; font-size:34px; line-height:1.08; }
h2{ font-family:var(--font-serif); font-weight:600; font-size:26px; line-height:1.15; }
h3{ font-family:var(--font-sans); font-weight:500; font-size:19px; line-height:1.3; }
h4{ font-family:var(--font-sans); font-weight:500; font-size:16px; }
p{ font-size:16px; }
.serif-accent{ font-family:var(--font-serif); font-style:italic; color:var(--green-500); }
.small,.caption{ font-size:13px; color:var(--muted); }

/* Eyebrow rule + uppercase label — the JV heirloom */
.eyebrow{
  display:inline-flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-sans); font-weight:500; font-size:10.5px;
  text-transform:uppercase; letter-spacing:3px; color:var(--gold-700);
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--gold-500);
}
.eyebrow--start{ align-items:flex-start; }

/* ---------- Layout ---------- */
.wrap{
  position:relative; z-index:2; margin:0 auto; padding:64px 28px 72px;
  max-width:860px;
}
.wrap--wide{ max-width:1140px; }
.wrap--narrow{ max-width:720px; }
.centered{ text-align:center; }

/* Warm paper grain overlay */
.grain{
  position:fixed; inset:0; pointer-events:none; opacity:.5; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---------- The chuppah arch (signature) ---------- */
.arch{
  background:var(--grad-deep);
  color:#FBF5E6;
  border-radius:var(--radius-arch) var(--radius-arch) 4px 4px;
  padding:56px 34px 40px;
  position:relative;
  text-align:center;
  box-shadow:var(--shadow-arch);
}
.arch::before{
  content:""; position:absolute; inset:10px;
  border:1px solid rgba(184,151,90,.42);
  border-radius:122px 122px 3px 3px; pointer-events:none;
}
.arch h1,.arch h2,.arch .display{ color:#FBF5E6; }
.arch .arch-sub{ color:rgba(251,245,230,.82); font-weight:300; }
.arch .eyebrow{ color:var(--gold-400); }
.arch .eyebrow::before{ background:var(--gold-400); }

/* ---------- Cards & surfaces ---------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:26px 24px;
  box-shadow:var(--shadow-card); transition:var(--transition);
}
.card--link{ text-decoration:none; color:inherit; display:block; }
.card--link:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:var(--gold-400); }
.card--accent-green{ border-left:3px solid var(--green-500); }
.card--accent-gold{ border-left:3px solid var(--gold-500); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--font-sans); font-weight:500;
  font-size:15px; letter-spacing:.01em; text-decoration:none; cursor:pointer;
  border:none; border-radius:var(--radius-sm); padding:13px 24px;
  background:var(--green-500); color:#FBF5E6;
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{ background:var(--green-700); transform:translateY(-2px); }
.btn--outline{
  background:var(--surface); color:var(--green-700);
  border:1.5px solid var(--green-500); padding:11.5px 22.5px;
}
.btn--outline:hover{ background:var(--green-500); color:#FBF5E6; }
.btn--gold{ background:var(--gold-500); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-600); }
.btn--ghost{
  background:transparent; color:var(--green-700); padding:13px 10px;
}
.btn--ghost:hover{ background:transparent; transform:none; text-decoration:underline; }
.btn:disabled,.btn[disabled]{
  background:var(--green-100); color:var(--muted); box-shadow:none;
  cursor:not-allowed; transform:none;
}

/* ---------- Badges (no seal) ---------- */
.badge{
  display:inline-block; border-radius:var(--radius-pill);
  padding:4px 12px; font-size:11.5px; font-weight:500; font-family:var(--font-sans);
}
.badge--category{ background:var(--green-50); color:var(--green-700); }
.badge--received{ background:var(--gold-100); color:var(--gold-700); }

/* ---------- Forms ---------- */
label,.q{
  display:block; font-family:var(--font-sans); font-weight:500;
  font-size:12.5px; color:var(--ink); margin-bottom:7px;
}
input[type=text],input[type=date],input[type=email],input[type=tel],
select,textarea{
  width:100%; font-family:var(--font-sans); font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px 13px; transition:var(--transition);
}
input:focus,select:focus,textarea:focus{
  outline:none; background:var(--surface); border-color:var(--green-500);
  box-shadow:0 0 0 3px rgba(28,90,78,.15);
}
input[dir=rtl]{ font-family:var(--font-hebrew-sans); }
.helper{ font-size:12px; color:var(--muted); margin-top:6px; }
.field{ margin-bottom:22px; }
.field--error input{ border-color:var(--error-border); }
.field--error .helper{ color:var(--error); }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* Radio / checkbox option rows */
.opts{ display:grid; gap:8px; }
.opt{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:12px 16px; transition:var(--transition);
}
.opt:hover{ border-color:var(--gold-400); }
.opt input{ accent-color:var(--green-500); width:17px; height:17px; flex:none; }
.opt span{ font-size:15px; color:var(--ink); }
.opt.checked{ border-color:var(--green-500); background:var(--green-50); }

/* ---------- Panels ---------- */
.panel{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:22px 24px;
}
.note-panel{
  background:var(--info-bg); border:1px solid var(--green-200);
  border-radius:var(--radius-md); padding:18px 20px;
}
.note-panel p{ font-size:15px; color:var(--ink); }
.note-panel strong{ color:var(--green-700); }

/* Numbered steps */
.steps{ list-style:none; counter-reset:s; display:grid; gap:10px; }
.steps li{
  display:flex; gap:12px; align-items:flex-start; font-size:15px;
  color:var(--text); counter-increment:s;
}
.steps li::before{
  content:counter(s); flex:none; width:24px; height:24px; border-radius:var(--radius-pill);
  background:var(--green-50); color:var(--green-700);
  font-size:12px; font-weight:600; font-family:var(--font-sans);
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Links ---------- */
a{ color:var(--green-700); }
.link-underline{
  color:var(--text); text-decoration:none;
  border-bottom:1px solid var(--gold-400); padding-bottom:2px; transition:var(--transition);
}
.link-underline:hover{ color:var(--green-700); }
.back{
  display:inline-block; font-size:13px; letter-spacing:.02em;
  color:var(--muted); text-decoration:none; transition:var(--transition);
}
.back:hover{ color:var(--green-700); }

/* ---------- Header / footer ---------- */
.site-header{
  position:relative; z-index:2; display:flex; align-items:center;
  justify-content:space-between; padding:20px 28px; max-width:1140px; margin:0 auto;
}
.brand{ font-family:var(--font-serif); font-weight:600; font-size:20px; color:var(--ink); text-decoration:none; }
.site-header nav a{ font-size:14px; color:var(--muted); text-decoration:none; margin-left:22px; transition:var(--transition); }
.site-header nav a:hover{ color:var(--green-700); }

footer{
  position:relative; z-index:2; text-align:center; padding:0 28px 48px;
  font-size:13px; letter-spacing:.02em; color:var(--muted);
}
footer a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--border); }
footer a:hover{ color:var(--green-700); }

/* ---------- Ornament ---------- */
.ornament{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--gold-400); margin:0 auto;
}
.ornament .rule{ width:48px; height:1px; background:var(--gold-400); }
.ornament .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-500); display:inline-block; }

/* ---------- Motion (page-load rise) ---------- */
@keyframes rise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }
.rise{ opacity:0; animation:rise .8s ease forwards; }
.rise-1{ animation-delay:.10s; } .rise-2{ animation-delay:.22s; }
.rise-3{ animation-delay:.34s; } .rise-4{ animation-delay:.46s; }
.rise-5{ animation-delay:.58s; } .rise-6{ animation-delay:.70s; }

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .wrap{ padding:40px 20px 56px; }
  .display{ font-size:30px; } h1{ font-size:26px; } h2{ font-size:22px; } h3{ font-size:17px; }
  p{ font-size:15px; }
  .card{ padding:18px 20px; border-radius:8px; }
  .arch{ padding:44px 24px 34px; }
}
@media (max-width:560px){
  .pair{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; animation:none; }
  *{ scroll-behavior:auto; }
  .card--link:hover,.btn:hover{ transform:none; }
}