/* ============================================================
   components.css — רכיבי ממשק: ניווט, כפתורים
   ============================================================
   כל סגנון שמשותף למספר מקומות באתר.
   ============================================================ */

/* ============================== ניווט עליון ============================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(21,21,19,0.95);
  backdrop-filter: blur(14px) saturate(140%);
  color: #f1efe8;
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}

/* לוגו ושם החברה */
.brand      { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  background: var(--accent); color: var(--dark);
  font-family: var(--font-display); font-weight: 800;
  padding: 5px 10px; border-radius: 3px; font-size: 16px; letter-spacing: -0.01em;
}
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.005em; }

/* לינקים בניווט */
.nav-links   { display: flex; gap: 28px; font-size: 14px; font-weight: 400; }
.nav-links a { opacity: 0.75; transition: opacity .2s, color .2s; }
.nav-links a:hover { opacity: 1; }

/* ============================== כפתורים ============================== */
/* מחלקת בסיס — כל כפתור מקבל מחלקה נוספת לגרסאות */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 15px;
  border-radius: 4px;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .25s ease;
  white-space: nowrap;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
}

/* כפתור ראשי — צהוב מנוף */
.btn-primary {
  background: var(--accent); color: var(--dark);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 20px -10px rgba(245,184,0,0.6);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(0,0,0,.1), 0 10px 28px -10px rgba(245,184,0,0.7);
}

/* כפתור כהה */
.btn-dark       { background: var(--dark); color: var(--bone); }
.btn-dark:hover { background: #000; }

/* כפתור שקוף עם מסגרת */
.btn-ghost       { background: transparent; color: inherit; border: 1px solid currentColor; opacity: .7; }
.btn-ghost:hover { opacity: 1; background: rgba(255,255,255,.04); }

/* גדלים */
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 16px 26px; font-size: 15px; }

/* חץ מונפש בתוך כפתור */
.btn .arrow { display: inline-block; transform: rotate(180deg); transition: transform .2s; font-size: 1.1em; }
.btn:hover .arrow { transform: rotate(180deg) translateX(3px); }