/* ============================================================
   הזהות החזותית של האתר. כל הצבעים והגופנים יושבים כאן למעלה.
   רוצה להחליף פלטה? תחליף את הערכים ב-:root וזהו. שאר הקובץ לא נוגע בצבע ישירות.

   פלטה: light-violet. --accent (#751FFD) על --bg נותן ניגודיות שעוברת גם
   בטקסט לבן על מילוי מלא (6.23:1), אז --on-accent הוא לבן. --accent-deep
   שווה בכוונה ל---accent - אין צורך בגוון נפרד לטקסט קטן, הבסיס כבר עובר.
   --accent-hover (#6417E0) הוא הכהיה למצבי hover על מילוי accent מלא -
   בפלטה בהירה, hover אמור להכהות ולא להאיר. בלוקי הקוד נשארים כהים
   (--code-bg/--code-text) גם על עמוד בהיר - ראו הערה ב-guides/claude-code-design-stack.css.
   ============================================================ */
:root{
  --bg:#FEFEFE;
  --surface:#FFFFFF;
  --surface-sunk:#F7F6FC;
  --ink:#181A1E;
  --ink-muted:#4A4D5A;
  --accent:#751FFD;
  --accent-deep:#751FFD;
  --accent-hover:#6417E0;
  --accent-rgb:117,31,253;
  --on-accent:#FFFFFF;
  --border:#E8E6F2;
  --border-strong:#D5D2E6;
  --code-bg:#181A1E;
  --code-text:#E8EEF2;
  --code-text-muted:#A8B0BE;
  --danger:#D92020;
  --danger-rgb:217,32,32;
  --success:#0B815A;
  --success-rgb:11,129,90;
  --backdrop:rgba(0,0,0,.6);
  --border-w:1px;
  --rad:14px;
  --maxw:1080px;
}

/* ---------- high contrast (accessibility menu) ---------- */
html.hc{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-sunk:#FFFFFF;
  --ink:#000000;
  --ink-muted:#000000;
  --accent:#4C00C7;
  --accent-deep:#4C00C7;
  --on-accent:#FFFFFF;
  --border:#000000;
  --border-strong:#000000;
  --border-w:2px;
}

/* ---------- text size (accessibility menu) ---------- */
html.text-large{font-size:115%}
html.text-xlarge{font-size:130%}

/* ---------- link emphasis (accessibility menu) ---------- */
html.link-emphasis a{
  text-decoration:underline;text-underline-offset:3px;
  border-bottom:var(--border-w) solid currentColor;padding-bottom:2px;
}

/* ---------- reduce motion (accessibility menu, mirrors prefers-reduced-motion) ---------- */
html.reduce-motion *{transition:none!important;animation:none!important}

/* ---------- metrics-matched local fallbacks (font loading pass) ----------
   Placed second in every stack, right after the real webfont, so a page that
   hasn't finished downloading Rubik/Space Grotesk/JetBrains Mono renders with
   a local font sized and positioned to match - no reflow when the swap
   happens. Values measured directly from each webfont's own OS/2 + head
   tables against the matching local font (Arial for the two proportional
   faces, Courier New for the monospace one), not guessed:
     size-adjust scales the fallback's glyphs/advances to match average
     character width; ascent-override/descent-override/line-gap-override are
     pre-divided by size-adjust, since size-adjust rescales those override
     values too (CSS Fonts Module 5, size-adjust descriptor). No preload
     links here - measured slower first paint, not worth it. */
@font-face{
  font-family:'Rubik Fallback';
  src:local('Arial');
  size-adjust:140.01%;
  ascent-override:66.78%;
  descent-override:17.86%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Space Grotesk Fallback';
  src:local('Arial');
  size-adjust:128.91%;
  ascent-override:76.33%;
  descent-override:22.65%;
  line-gap-override:0%;
}
@font-face{
  font-family:'JetBrains Mono Fallback';
  src:local('Courier New');
  size-adjust:100.32%;
  ascent-override:101.68%;
  descent-override:29.91%;
  line-gap-override:0%;
}

site-nav, site-footer, edit-dialog, a11y-menu{display:contents}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  position:relative;
  background:var(--bg);
  color:var(--ink);
  font-family:'Rubik','Rubik Fallback','Assistant',system-ui,sans-serif;
  font-weight:400;
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- atmosphere: background wash ----------
   One purely decorative layer behind all content, never affecting
   layout: a soft diagonal tint across the full viewport (::before,
   z -2, near-white at the top fading to a faint violet-white at the
   bottom). position:fixed (stays put as the page scrolls) and
   pointer-events:none. Switches off entirely under html.hc, since
   high-contrast mode calls for a flat, unambiguous background. Never
   transitions or animates. No grain layer on a light page - it read
   as dirt, so it's gone rather than recolored. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:linear-gradient(170deg, #FEFEFE 0%, #F4F3FF 100%);
}
html.hc body::before{
  display:none;
}

bdi{unicode-bidi:isolate}
a{color:inherit}
img{max-width:100%;display:block}
.mono{font-family:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px, 7.273vw - 7.273px, 24px)}

/* left-to-right text gradient for one emphasised phrase; the plain
   color below is the fallback for browsers without background-clip:text,
   so unsupported browsers never render invisible text */
.gradient-text{color:#6A83E6}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .gradient-text{
    background:linear-gradient(90deg,#6A83E6,#3AA9F6,#90E0FF);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- skip link ---------- */
.skip-link{
  position:fixed;top:-60px;right:18px;z-index:100;
  background:var(--accent);color:var(--on-accent);
  padding:12px 16px;border-radius:8px;font-weight:600;
  text-decoration:none;font-size:0.9375rem;
  min-height:44px;display:inline-flex;align-items:center;
  transition:top .16s ease;
}
.skip-link:focus{top:8px}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none}}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--surface);
  border-bottom:var(--border-w) solid var(--border);
}
.nav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:18px;min-height:58px;padding-block:8px}
.brand{
  text-decoration:none;color:var(--ink);
  display:inline-flex;align-items:center;min-height:44px;
}
.brand svg{height:34px;width:auto;display:block;flex-shrink:0}
.brand .en{color:var(--ink-muted);font-weight:400;font-size:0.8125rem}
.nav nav{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:4px}
.nav nav a{
  text-decoration:none;color:var(--ink-muted);font-size:0.9375rem;
  padding:6px 11px;border-radius:8px;
  min-height:44px;display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;
}
.nav nav a:hover{color:var(--ink);background:var(--surface-sunk)}
.nav nav a[aria-current="page"]{color:var(--accent-deep);font-weight:600;border-bottom-color:var(--accent)}

/* >=700px: three-column header - logo stays at the true right edge, nav
   sits centered on the viewport (not just in the space left of the logo),
   left column stays empty. Two equal 1fr tracks flanking the auto-sized
   nav column keep it centered regardless of how wide the logo renders.
   Below 700px, none of this applies - back to the plain flex row. */
@media (min-width:700px){
  .nav .wrap{display:grid;grid-template-columns:1fr auto 1fr}
  .brand{grid-column:1;justify-self:start}
  .nav nav{margin-inline-start:0;grid-column:2;justify-self:center}
}

/* ---------- page head ---------- */
.phead{padding-block:52px 30px;border-bottom:var(--border-w) solid var(--border)}
.eyebrow{
  font-family:'Space Grotesk','Space Grotesk Fallback','Rubik','Rubik Fallback','JetBrains Mono',monospace;font-size:0.75rem;letter-spacing:.14em;
  color:var(--accent-deep);text-transform:uppercase;margin:0 0 14px;font-weight:600;
}
h1{
  font-family:'Rubik','Rubik Fallback',sans-serif;font-weight:700;
  font-size:clamp(1.8125rem,7.5vw,3.125rem);line-height:1.08;
  margin:0 0 14px;letter-spacing:-.01em;color:var(--ink);
}
h1 .thin{
  display:block;font-weight:400;color:var(--ink-muted);
  font-size:.5em;letter-spacing:0;margin-top:12px;line-height:1.45;
}
.lede{color:var(--ink-muted);max-width:58ch;margin:0 0 20px;font-size:1.03125rem}
.stamp{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:0.75rem;color:var(--ink-muted);
}
.stamp b{color:var(--ink);font-weight:600}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;
  background:var(--accent);color:var(--on-accent);border:var(--border-w) solid var(--accent);
  border-radius:10px;padding:11px 18px;font:inherit;font-weight:600;font-size:0.9375rem;
  text-decoration:none;cursor:pointer;
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink-muted)}
.btn.ghost:hover{border-color:var(--accent-hover);color:var(--accent-hover)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ---------- footer ---------- */
footer.site{border-top:var(--border-w) solid var(--border);margin-top:56px;padding:36px 0 44px;color:var(--ink-muted);font-size:0.875rem}
footer.site .name{color:var(--ink);font-family:'Rubik','Rubik Fallback',sans-serif;font-weight:600;font-size:1rem;margin:0 0 8px}
footer.site p{margin:0 0 8px;max-width:62ch}
footer.site .copy{color:var(--ink-muted)}
footer.site a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px}
footer.site a:hover{color:var(--ink)}

.social{display:flex;justify-content:center;align-items:center;gap:8px;margin:12px 0}
footer.site .social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--ink-muted);text-decoration:none;
}
.social-link svg{width:20px;height:20px}
footer.site .social-link:hover{color:var(--accent-hover)}
footer.site .social-link:focus-visible{color:var(--accent-hover)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- accessibility menu ---------- */
.a11y-fab{
  position:fixed;bottom:20px;right:18px;z-index:50;
  width:48px;height:48px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 10px rgba(var(--accent-rgb),0.28);
}
.a11y-fab:hover{background:var(--accent-hover)}
.a11y-fab svg{width:24px;height:24px}
body.editable .a11y-fab{bottom:78px}

.a11y-panel{
  background:var(--surface);color:var(--ink);border:var(--border-w) solid var(--border);
  border-radius:16px;padding:0;max-width:340px;width:calc(100% - 28px);
}
.a11y-panel::backdrop{background:var(--backdrop)}
.a11y-in{padding:20px}
.a11y-in h2{font-family:'Rubik','Rubik Fallback',sans-serif;font-weight:700;letter-spacing:0;font-size:1.25rem;margin:0 0 16px;color:var(--ink)}
.a11y-group{margin-bottom:14px}
.a11y-group .lbl{display:block;font-size:0.8125rem;color:var(--ink-muted);margin-bottom:8px}
.a11y-row{display:flex;gap:8px}
.a11y-row button{
  flex:1;min-width:0;min-height:44px;border-radius:9px;padding:9px 6px;font:inherit;font-size:0.8125rem;
  cursor:pointer;border:var(--border-w) solid var(--ink-muted);background:var(--surface-sunk);color:var(--ink);
}
.a11y-row button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.a11y-toggle{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;
  border-radius:9px;padding:11px 14px;font:inherit;font-size:0.9375rem;
  cursor:pointer;border:var(--border-w) solid var(--ink-muted);background:var(--surface-sunk);color:var(--ink);
  margin-bottom:10px;text-align:right;
}
.a11y-toggle[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-deep);font-weight:600}
.a11y-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.a11y-actions button{
  min-height:44px;
  border-radius:9px;padding:9px 15px;font:inherit;font-size:0.875rem;cursor:pointer;
  border:var(--border-w) solid var(--ink-muted);background:transparent;color:var(--ink-muted);
}
.a11y-actions button:hover{color:var(--ink);border-color:var(--ink)}
.a11y-actions .primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.a11y-actions .primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

@media print{ a11y-menu, .skip-link{display:none} }