/* במזרח — base.css: reset, טיפוגרפיה, פריסה, נגישות. ערכים רק מ-tokens.css (נאכף: tests/css-lint.js). */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
}
html.nav-open { overflow: hidden; }
body { overflow-x: clip; }

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: var(--underline-offset); }
:focus-visible { outline: var(--hairline) solid var(--color-focus); outline-offset: var(--focus-offset); border-radius: var(--r-xs); }
::selection { background: var(--color-selection-bg); }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: var(--lh-snug); font-weight: var(--weight-bold); text-wrap: balance; }
h1 { font-size: var(--fs-display); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: var(--weight-medium); }
p { max-width: var(--measure-prose); }
strong, b { font-weight: var(--weight-semibold); }
small { font-size: var(--fs-xs); }
img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-radius: var(--r-card); }
ul, ol { padding-inline-start: var(--list-indent); }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: var(--border); margin: var(--space-11) 0; }

/* ---- מכולות (docs/design-system.md §3) ---- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-11); }
@media (max-width: 640px) { .wrap { padding: 0 var(--space-9); } }
/* תמונה מקצה לקצה (רוחב המסך המלא), בלי גלילה אופקית בזכות overflow-x:clip על body */
.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.bleed img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.wrap-narrow { max-width: var(--wrap-narrow); }
.sr, .screen-reader-text { position: absolute; width: var(--line-w); height: var(--line-w); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: var(--space-4); top: -100vh; background: var(--jade); color: var(--color-action-contrast); padding: var(--pad-control); border-radius: var(--r-control); z-index: var(--z-toast); }
.skip:focus { top: var(--space-4); }
.muted { color: var(--text-muted); }
.tbd { border-bottom: var(--line-w) dashed var(--text-muted); color: var(--text-muted); font-family: var(--font-head); font-size: var(--fs-xs); }

.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; display: inline-block; }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

/* תוכן ערוך (העורך של WP) */
.prose { max-width: var(--wrap-narrow); }
.prose > * + * { margin-top: var(--space-6); }
.prose > :first-child { margin-top: 0; } /* הריווח מהתמונה הראשית נקבע ב-.hero-bleed בלבד, לא ב-h2 הראשון */
.prose h2 { margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-9); }
.prose ul, .prose ol { padding-inline-start: var(--list-indent-prose); }
.prose li + li { margin-top: var(--space-2); }
.prose blockquote { border-inline-start: var(--hairline) solid var(--jade-mid); padding-inline-start: var(--space-6); color: var(--text-muted); }
.prose figure { margin: var(--space-9) 0; }
.prose figcaption { font-family: var(--font-head); font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-3); }
.prose table { font-size: var(--fs-base); }
.prose th, .prose td { text-align: start; padding: var(--space-4) var(--space-3); border-bottom: var(--border); vertical-align: top; }
.prose th { font-family: var(--font-head); font-weight: var(--weight-medium); font-size: var(--fs-xs); color: var(--text-muted); border-bottom-color: var(--text); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 0 var(--space-1); border-radius: var(--r-xs); }
.prose a { text-decoration: underline; text-underline-offset: var(--underline-offset); }

/* טבלת נתונים (מודולים). design-system §5: טבלת מפתח/ערך (2 עמודות) נשברת ולא גוללת;
   רק טבלה רחבה (.data--wide: אקלים, טיסות, השוואת ויזות) גוללת בתוך .scroll, ו-nav.js מציב אותה בקצה הימני (תחילת ה-RTL). */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; direction: ltr; }
.scroll > * { direction: rtl; }
table.data { font-size: var(--fs-base); min-width: 0; table-layout: fixed; }
table.data--wide { min-width: var(--table-min); table-layout: auto; }
table.data td, table.data th { overflow-wrap: anywhere; }
table.data:not(.data--wide) td:first-child { width: var(--kv-key-w); }
table.data caption { text-align: start; font-family: var(--font-head); font-size: var(--fs-xs); color: var(--text-muted); padding-bottom: var(--space-3); }
table.data th { font-family: var(--font-head); font-weight: var(--weight-medium); font-size: var(--fs-xs); color: var(--text-muted); text-align: start; padding: var(--space-4) var(--space-3); border-bottom: var(--line-w) solid var(--text); }
table.data td { padding: var(--space-5) var(--space-3); border-bottom: var(--border); vertical-align: top; }
table.data td:first-child { font-family: var(--font-head); font-weight: var(--weight-medium); }
table.data tfoot td { font-size: var(--fs-xs); color: var(--text-muted); border-bottom: 0; }
.mark { display: inline-grid; place-items: center; width: var(--icon-md); height: var(--icon-md); border-radius: var(--r-xs); margin-inline-end: var(--space-2); vertical-align: middle; }
.m3, .l3 { background: var(--jade); color: var(--color-action-contrast); }
.m2, .l2 { background: var(--jade-mid); color: var(--jade-strong); }
.m1, .l1 { background: var(--surface); box-shadow: inset 0 0 0 var(--line-w) var(--line); color: var(--text-muted); }