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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; direction: rtl; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* מספרים, אימיילים וטלפונים — בידוד מהיפוך דו־כיווני */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ── סרגל הדמו ──
   מופיע בכל דף דוגמה. חשוב: העסקים בדוגמאות בדויים,
   וההמלצות והמספרים אינם אמיתיים. */
.demo-bar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 999;
  background: #111114; color: #fff; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 16px; font-family: system-ui, sans-serif;
}
.demo-bar b { font-weight: 700; }
.demo-bar span { opacity: .62; font-weight: 400; }
.demo-bar a {
  text-decoration: none; border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; white-space: nowrap; font-weight: 600;
  transition: background .15s ease;
  /* יעד מגע: הגובה מגיע מ-min-height ולא מ-padding, כדי שהכפתור
     יישאר 44px גם כשגודל הגופן יורד בשאילתת המובייל. */
  display: inline-flex; align-items: center;
  padding-inline: 12px; min-height: 44px;
}
.demo-bar a:hover { background: rgba(255,255,255,.14); }

/* גובה הסרגל יושב במשתנה אחד, ו-body מרפד לפיו.
   קודם היה כאן 34px קשיח מול סרגל שגדל: במסך צר הטקסט נשבר לשתי
   שורות, הסרגל יצא 39.5px, וההירו של כל דף נכנס תחתיו. */
:root { --demo-bar-h: 62px; }
body { padding-block-start: var(--demo-bar-h); }

@media (max-width: 560px) {
  .demo-bar { font-size: 11.5px; padding: 8px 12px; align-items: flex-start; }
  .demo-bar .hide-sm { display: none; }
}