/*
 * Design Deal - בסיס.
 * איפוס, טיפוגרפיה, פריסה ונגישות. אין כאן צבע קשיח - הכל מ-tokens.css.
 *
 * האתר RTL, ולכן משתמשים בתכונות לוגיות בלבד (inline-start / inline-end)
 * ולא ב-left/right. זה מה שיאפשר להוסיף אנגלית בעתיד בלי לכתוב CSS מחדש.
 */

/* ── איפוס ──────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--dd-font);
  font-size: var(--dd-fs-body);
  font-weight: var(--dd-fw-regular);
  line-height: var(--dd-lh-body);
  color: var(--dd-ink);
  background: var(--dd-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* הדף לעולם לא נגלל לרוחב. אם משהו גולש - זו תקלה, לא פיצ'ר. */
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; padding: 0; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { list-style: none; padding: 0; }

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

/* ── טיפוגרפיה ──────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  line-height: var(--dd-lh-tight);
  font-weight: var(--dd-fw-bold);
  color: var(--dd-ink);
  letter-spacing: -.01em;
}

/* המדריך מקצה 800 לכותרות ראשיות ולכותרות מקטע, 700 לכותרות משנה. */
h1 { font-size: var(--dd-fs-hero); font-weight: var(--dd-fw-xbold); letter-spacing: -.02em; }
h2 { font-size: var(--dd-fs-h2);   font-weight: var(--dd-fw-xbold); }
h3 { font-size: var(--dd-fs-h3);   font-weight: var(--dd-fw-bold); }

.dd-muted { color: var(--dd-muted); }
.dd-sm    { font-size: var(--dd-fs-sm); }
.dd-xs    { font-size: var(--dd-fs-xs); }

/* מספרים ומחירים תמיד LTR, גם באמצע משפט עברי, אחרת הפסיק קופץ. */
.dd-num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* ── פריסה ──────────────────────────────────────────────────────────── */

.dd-container {
  width: 100%;
  max-width: var(--dd-container);
  margin-inline: auto;
  padding-inline: var(--dd-gutter);
}

.dd-section { padding-block: var(--dd-section-y); }

.dd-section--tight { padding-block: calc(var(--dd-section-y) * .6); }

.dd-section--surface { background: var(--dd-surface); }

/*
 * "dark" הוא שם היסטורי מהמיתוג הקודם. מאז 2026 אין באתר משטח כהה,
 * והמקטע הזה מסומן בשמנת עמוקה יותר במקום בהיפוך ניגודיות. השם נשמר
 * כדי לא לשבור תבניות שכבר קוראות לו.
 */
.dd-section--dark {
  background: var(--dd-cream-section);
  color: var(--dd-body);
}

.dd-section--dark h2,
.dd-section--dark h3 { color: var(--dd-ink); }

/*
 * כותרות הסקשנים ממורכזות יחד עם תת-הכותרת שמתחתן.
 * הסקשן עצמו ממורכז בדף, ולכן כותרת שנצמדת לימין נראית תלושה ממנו.
 * שורת טקסט ארוכה נשארת חסומה ל-62ch - מעבר לזה העין מאבדת את השורה.
 */
.dd-section__head {
  margin-block-end: var(--dd-s-8);
  margin-inline: auto;
  max-width: 62ch;
  text-align: center;
}

.dd-section__title { margin-block-end: var(--dd-s-3); }

.dd-section__sub {
  color: var(--dd-muted);
  font-size: var(--dd-fs-sm);
  margin-inline: auto;
}

/* סקשנים שהתוכן שלהם קריא רק ביישור לימין מבטלים את המרכוז נקודתית. */
.dd-section__head--start {
  margin-inline: 0;
  text-align: start;
}

.dd-grid { display: grid; gap: var(--dd-s-6); }

.dd-stack { display: flex; flex-direction: column; gap: var(--dd-s-4); }

.dd-row {
  display: flex;
  align-items: center;
  gap: var(--dd-s-3);
  flex-wrap: wrap;
}

/* ── תוכן גולש נגלל בתוך עצמו, לא מרחיב את הדף ──────────────────────── */

.dd-scroll-x {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.dd-scroll-x > * { scroll-snap-align: start; }

/* ── נגישות ─────────────────────────────────────────────────────────── */

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

/* דילוג לתוכן - מופיע רק כשמנווטים במקלדת. */
.dd-skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--dd-s-4);
  z-index: calc(var(--dd-z-modal) + 1);
  background: var(--dd-ink);
  color: var(--dd-white);
  padding: var(--dd-s-3) var(--dd-s-5);
  border-radius: 0 0 var(--dd-r-sm) var(--dd-r-sm);
  transition: inset-block-start var(--dd-t-fast) var(--dd-ease);
}

.dd-skip:focus { inset-block-start: 0; }

/* טבעת פוקוס אחידה - לעולם לא מסירים אותה, רק מעצבים. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--dd-ink);
  outline-offset: 3px;
  border-radius: var(--dd-r-sm);
}

/* ── שירותים ────────────────────────────────────────────────────────── */

.dd-hairline { border-block-end: 1px solid var(--dd-hairline); }

[hidden] { display: none !important; }

.dd-lock-scroll { overflow: hidden; }