/* =====================================================================
   Kidush Club — מערכת העיצוב "אור נרות"
   ---------------------------------------------------------------------
   הרעיון: העמוד לא "שחור עם זהב". הוא חלל חשוך שמואר ממקור אור חם אחד
   מלמעלה — כמו שולחן קידוש מואר בנרות. כל המשטחים מקבלים את החום הזה,
   והפליז הוא ההשתקפות של האור, לא צבע מדבקה.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. טוקנים
   --------------------------------------------------------------------- */
:root {
  /* --- רקעים: לילה חם, לא שחור נייטרלי --- */
  --night-0: #0d0908;   /* עומק */
  --night-1: #140e0c;   /* רקע הדף */
  --night-2: #1b1311;   /* משטח מוגבה */
  --night-3: #241a16;   /* משטח מוגבה יותר */
  --wine:    #3a1420;   /* יין עמוק — לגוונים חמים */
  --wine-lit:#5c2033;

  /* --- פליז / זהב --- */
  --brass:      #c8913a;
  --brass-lit:  #e0b45c;
  --brass-glow: #f5d79a;
  --brass-ink:  #1a1106;   /* טקסט על גבי פליז — ניגודיות ~11:1 */

  /* --- טקסט --- */
  --cream:   #f6efe3;
  --cream-2: #cdc3b4;   /* משני — 8.9:1 על night-1 */
  --cream-3: #96897a;   /* עמום — 4.6:1, לא לטקסט קטן קריטי */

  /* --- קווים --- */
  --hair:       rgba(246, 239, 227, .09);
  --hair-brass: rgba(224, 180, 92, .26);

  /* --- מצבים --- */
  --ok:     #4fa46b;
  --warn:   #d9a441;
  --danger: #cf6a55;

  /* --- מרווחים (בסיס 4) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 28px; --s7: 40px; --s8: 56px; --s9: 80px; --s10: 120px;

  /* --- רדיוסים --- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px;
  --r-full: 999px;

  /* --- צללים ואור --- */
  --lift-1: 0 2px 8px rgba(0,0,0,.4);
  --lift-2: 0 12px 34px rgba(0,0,0,.45);
  --lift-3: 0 28px 70px rgba(0,0,0,.55);
  --halo:   0 0 60px rgba(224,180,92,.14);
  --halo-strong: 0 0 90px rgba(224,180,92,.24);

  /* --- תנועה --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-1: 160ms var(--ease);
  --t-2: 280ms var(--ease);
  --t-3: 520ms var(--ease-out);

  /* --- טיפוגרפיה --- */
  --font-display: "Frank Ruhl Libre", "Noto Serif Hebrew", Georgia, serif;
  --font-body: "Heebo", "Noto Sans Hebrew", Arial, sans-serif;

  /* --- שכבות --- */
  --z-glow: 0; --z-content: 1; --z-header: 50; --z-modal: 100; --z-toast: 200;

  /* מיקום מקור האור — מתעדכן מ-motion.js לפי הסמן */
  --lx: 50%;
  --ly: 0%;
}

/* ---------------------------------------------------------------------
   2. איפוס ובסיס
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--night-1);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- שכבת האור: הילה חמה שנעה עם הסמן --- */
.glow-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-glow);
  pointer-events: none;
  background:
    radial-gradient(760px 560px at var(--lx) var(--ly),
      rgba(224, 180, 92, .13) 0%,
      rgba(140, 60, 50, .07) 34%,
      transparent 68%),
    radial-gradient(1200px 900px at 50% -10%,
      rgba(224, 180, 92, .10) 0%, transparent 60%);
  transition: background 600ms linear;
}

/* --- גרעין עדין: נותן למשטחים מרקם במקום שטיחות דיגיטלית --- */
.grain-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-glow);
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: var(--z-content); }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--brass); color: var(--brass-ink); }

/* ---------------------------------------------------------------------
   3. טיפוגרפיה
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

/* 72px ולא 88 — ב-88 הכותרת נשברה ל-3 שורות בעמודת ה-Hero */
h1 { font-size: clamp(40px, 5.6vw, 72px); font-weight: 400; }
h2 { font-size: clamp(30px, 4.4vw, 54px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); }

p { margin: 0; text-wrap: pretty; }

/* כותרת-על: קו פליז + טקסט מרווח */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--brass-lit);
  text-transform: none;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass));
}

/* מספרים בטבלאות ומחירים — רוחב אחיד כדי שלא יקפצו */
.tnum { font-variant-numeric: tabular-nums; }

.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--cream-2); line-height: 1.75; }

/* ---------------------------------------------------------------------
   4. פריסה
   --------------------------------------------------------------------- */
.container { width: min(1240px, 90vw); margin-inline: auto; }
.container--narrow { width: min(880px, 90vw); }

.section { padding: var(--s10) 0; position: relative; }
.section--tight { padding: var(--s9) 0; }

.section-head {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s9);
  max-width: 720px;
}
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* קו מפריד מעוטר */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--hair-brass), transparent);
}

/* ---------------------------------------------------------------------
   5. נגישות
   --------------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brass-lit);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 300;
  background: var(--brass);
  color: var(--brass-ink);
  padding: 14px 22px;
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.skip-link:focus { inset-inline-start: 20px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   6. כפתורים
   --------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  --btn-bd: var(--hair-brass);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: transform var(--t-1), box-shadow var(--t-2),
              border-color var(--t-1), background var(--t-1);
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }

.btn--primary {
  --btn-bg: linear-gradient(135deg, var(--brass) 0%, var(--brass-lit) 52%, var(--brass-glow) 100%);
  --btn-fg: var(--brass-ink);
  --btn-bd: transparent;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(200,145,58,.24);
}
.btn--primary:hover:not(:disabled) {
  box-shadow: 0 16px 44px rgba(200,145,58,.34);
  transform: translateY(-1px);
}

/* ניצוץ שעובר על הכפתור בריחוף — רמז ל"אור" של המותג */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}
.btn--primary:hover:not(:disabled)::after { transform: translateX(120%); }

.btn--ghost { --btn-bg: rgba(246,239,227,.03); }
.btn--ghost:hover:not(:disabled) {
  --btn-bd: var(--brass);
  --btn-bg: rgba(224,180,92,.09);
}

.btn--quiet {
  --btn-bd: transparent;
  --btn-fg: var(--cream-2);
  min-height: 44px;
  padding: 10px 16px;
}
.btn--quiet:hover:not(:disabled) { --btn-fg: var(--brass-lit); }

.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 14px; } /* 44 = מינימום מטרת מגע */
.btn--danger { --btn-fg: var(--danger); --btn-bd: rgba(207,106,85,.4); }
.btn--danger:hover:not(:disabled) { --btn-bg: rgba(207,106,85,.12); }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------------
   7. שדות קלט
   --------------------------------------------------------------------- */
.field { display: grid; gap: var(--s2); }

.label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cream-2);
  letter-spacing: .02em;
}
.label[data-required]::after { content: " *"; color: var(--brass-lit); }

.input, .textarea, .select {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: rgba(13, 9, 8, .72);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  color: var(--cream);
  font: inherit;
  font-size: 16px; /* מונע זום אוטומטי ב-iOS */
  transition: border-color var(--t-1), box-shadow var(--t-1), background var(--t-1);
}
.textarea { min-height: 116px; resize: vertical; line-height: 1.6; }
.select { appearance: none; cursor: pointer; }

.input::placeholder, .textarea::placeholder { color: #6f6558; }

.input:hover, .textarea:hover, .select:hover { border-color: rgba(246,239,227,.18); }

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brass);
  background: rgba(13, 9, 8, .92);
  box-shadow: 0 0 0 3px rgba(224,180,92,.14);
}

.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(207,106,85,.14);
}

.field-error {
  min-height: 18px;
  font-size: 13px;
  color: var(--danger);
}

.switch { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--brass); cursor: pointer; }

/* ---------------------------------------------------------------------
   8. משטחים ותגיות
   --------------------------------------------------------------------- */
.panel {
  background: linear-gradient(155deg, var(--night-2), var(--night-0));
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: var(--s7);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--hair);
  border-radius: var(--r-full);
  background: rgba(246,239,227,.03);
  color: var(--cream-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--r-full);
  border: 1px solid;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.badge--pending   { color: var(--warn);   border-color: rgba(217,164,65,.4);  background: rgba(217,164,65,.1); }
.badge--confirmed { color: var(--ok);     border-color: rgba(79,164,107,.4);  background: rgba(79,164,107,.1); }
.badge--done      { color: #9fb6cd;       border-color: rgba(159,182,205,.35); background: rgba(159,182,205,.08); }
.badge--cancelled { color: var(--danger); border-color: rgba(207,106,85,.4);  background: rgba(207,106,85,.1); }
.badge--brass     { color: var(--brass-ink); border-color: transparent;
                    background: linear-gradient(135deg, var(--brass), var(--brass-glow)); }

/* ---------------------------------------------------------------------
   9. תנועה — חשיפה בגלילה
   --------------------------------------------------------------------- */
/* עיקרון: התוכן גלוי כברירת מחדל.
   ההסתרה מופעלת רק אחרי ש-motion.js נטען בהצלחה והוסיף את .has-reveal.
   כך בלי JS, או אם המודול נכשל — האתר נראה במלואו במקום להישאר ריק. */
.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.has-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes kc-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes kc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* שלד טעינה */
.skeleton {
  background: linear-gradient(90deg, rgba(246,239,227,.04) 25%, rgba(246,239,227,.09) 50%, rgba(246,239,227,.04) 75%);
  background-size: 200% 100%;
  animation: kc-shimmer 1.6s linear infinite;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------------
   10. הודעות צפות
   --------------------------------------------------------------------- */
.toasts {
  position: fixed;
  inset-block-end: 24px;
  inset-inline: 0;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  pointer-events: none;
  padding-inline: 16px;
}

.toast {
  max-width: min(440px, 100%);
  padding: 14px 22px;
  background: var(--night-3);
  border: 1px solid var(--hair-brass);
  border-radius: var(--r-md);
  box-shadow: var(--lift-3);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  animation: kc-fade-up 260ms var(--ease-out);
}
.toast--success { border-color: rgba(79,164,107,.55); }
.toast--error   { border-color: rgba(207,106,85,.55); }
.toast.is-out   { opacity: 0; transition: opacity 280ms; }

/* ---------------------------------------------------------------------
   11. מצבי ריק / טעינה
   --------------------------------------------------------------------- */
.empty {
  text-align: center;
  padding: var(--s9) var(--s5);
  border: 1px dashed var(--hair-brass);
  border-radius: var(--r-lg);
  color: var(--cream-2);
}
.empty h3 { margin-bottom: var(--s2); color: var(--cream); }
.empty p { margin-bottom: var(--s5); }

/* ---------------------------------------------------------------------
   12. העדפת תנועה מופחתת — מכבד הגדרת מערכת
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .glow-layer { transition: none; }
}

/* ---------------------------------------------------------------------
   13. הדפסה — שיהיה אפשר להדפיס הזמנה
   --------------------------------------------------------------------- */
@media print {
  .glow-layer, .grain-layer, .topbar, .toasts, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { border-color: #ccc; background: #fff; }
}