/* ==========================================================================
   components.css — כל רכיבי הממשק.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;inset-block-start:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-block-end:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
.site-header[data-scrolled]{border-block-end-color:var(--border)}
.site-header .wrap{
  display:flex;align-items:center;gap:var(--s-4);
  padding-block:var(--s-3);
}

.site-logo{
  display:flex;align-items:center;gap:var(--s-3);
  text-decoration:none;color:var(--text);
  font-weight:800;letter-spacing:-.02em;line-height:1.15;
}
.site-logo svg{inline-size:30px;block-size:30px;flex:none}
.site-logo small{
  display:block;font-weight:400;font-size:.75rem;
  color:var(--text-muted);letter-spacing:0;margin-block-start:1px;
}
.logo-orbit{transform-box:fill-box;transform-origin:center;
            transition:transform 700ms var(--ease)}
.site-logo:hover .logo-orbit{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.site-logo:hover .logo-orbit{transform:none}}

/* הניווט צמוד ללוגו; הכלים נדחפים לקצה. כך הסדר נכון גם ב-RTL וגם ב-LTR:
   לוגו ← ניווט … כלים.  (קודם ה-auto ישב על ה-nav ודחף אותו לקצה הלא נכון) */
.site-nav{display:flex;gap:var(--s-1);margin-inline-start:var(--s-4)}
.site-nav a{
  padding:var(--s-2) var(--s-3);border-radius:var(--radius-sm);
  text-decoration:none;color:var(--text-muted);
  font-weight:600;font-size:var(--fs-sm);white-space:nowrap;
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.site-nav a:hover{color:var(--text);background:var(--surface)}
.site-nav a[aria-current="page"]{color:var(--text)}
.site-nav a[aria-current="page"]::after{
  content:'';display:block;block-size:2px;margin-block-start:4px;
  border-radius:2px;background:var(--accent-grad);
}

.header-tools{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s-1)}

.toggle{
  display:inline-grid;place-items:center;
  inline-size:38px;block-size:38px;border-radius:var(--radius-sm);
  color:var(--text-muted);border:1px solid transparent;
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.toggle:hover{color:var(--text);background:var(--surface);border-color:var(--border)}
.toggle-lang{inline-size:auto;padding-inline:var(--s-3);font-weight:700;font-size:var(--fs-sm)}

:root[data-theme="dark"]  .toggle-theme .i-sun {display:block}
:root[data-theme="dark"]  .toggle-theme .i-moon{display:none}
:root[data-theme="light"] .toggle-theme .i-sun {display:none}
:root[data-theme="light"] .toggle-theme .i-moon{display:block}

.nav-toggle{display:none}
@media (max-width:900px){
  .site-nav{
    position:fixed;inset-block-start:62px;inset-inline:0;
    flex-direction:column;gap:0;padding:var(--s-2) var(--s-4) var(--s-4);
    background:var(--bg-elevated);border-block-end:1px solid var(--border);
    margin-inline-start:0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  }
  .site-nav[data-open]{transform:none;opacity:1;pointer-events:auto}
  .site-nav a{padding-block:var(--s-3);font-size:1rem}
  .site-nav a[aria-current="page"]::after{inline-size:32px}
  .nav-toggle{display:inline-grid;margin-inline-start:auto}
  .site-logo small{display:none}
}

/* ==========================================================================
   Hero + חיפוש
   ========================================================================== */
/* גובה ה-hero נקבע במכוון כך שהכרטיסים יציצו מלמטה כבר בטעינה —
   בלי זה המשתמש רואה כותרת ענקית ולא יודע שיש מתחתיה משהו. */
.hero{padding-block:var(--s-12) var(--s-6);text-align:center}
@media (max-width:599px){.hero{padding-block:var(--s-8) var(--s-4)}}

.hero h1{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.hero h1 em{
  font-style:normal;font-weight:800;color:transparent;
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;
}
.hero .lede{max-inline-size:52ch;margin:var(--s-3) auto 0}

.search-hero{position:relative;max-inline-size:520px;margin:var(--s-6) auto 0}
.search-hero input{
  inline-size:100%;
  padding-block:var(--s-3);
  padding-inline:2.9rem 2.9rem;   /* מקום לאייקון החיפוש ולקיצור המקלדת */
  font-size:1rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.search-hero input::placeholder{color:var(--text-faint)}
.search-hero input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.search-hero>.icon{
  position:absolute;inset-inline-start:var(--s-4);inset-block-start:50%;
  transform:translateY(-50%);color:var(--text-faint);pointer-events:none;
}
.search-hero kbd{
  position:absolute;inset-inline-end:var(--s-3);inset-block-start:50%;
  transform:translateY(-50%);pointer-events:none;
  font-family:var(--font-mono);font-size:.7rem;
  padding:3px 7px;border-radius:6px;color:var(--text-faint);
  background:var(--surface-hover);border:1px solid var(--border);
}
@media (max-width:599px){.search-hero kbd{display:none}}

/* ==========================================================================
   כרטיסי מרכז
   ========================================================================== */
.hub-grid{display:grid;gap:var(--s-3);grid-template-columns:1fr}
@media (min-width:600px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.hub-grid{grid-template-columns:repeat(3,1fr)}}

.hub-card{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-5);border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
  text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
/* בכוונה בלי מסגרת זוהרת: ארבעה כרטיסים שכולם "צועקים" גורמים לעין
   לא לדעת לאן ללכת. הרמה עדינה ומסגרת בהירה יותר מספיקות. */
.hub-card:hover{transform:translateY(-2px);border-color:var(--border-strong);
                background:var(--surface-hover)}

.icon-wrap{
  position:relative;overflow:hidden;
  inline-size:42px;block-size:42px;display:grid;place-items:center;
  border-radius:12px;background:var(--surface);border:1px solid var(--border);
}
.icon-wrap::before{
  content:'';position:absolute;inset:0;opacity:.10;background:var(--accent-grad);
  transition:opacity var(--dur) var(--ease);
}
.icon-wrap .icon{inline-size:21px;block-size:21px;stroke:var(--accent);position:relative}
.hub-card:hover .icon-wrap::before{opacity:.2}

.hub-card h2{font-size:1.0625rem;line-height:1.3}
.hub-card p{color:var(--text-muted);font-size:var(--fs-xs);line-height:1.55}
.hub-card .tags{
  display:flex;flex-wrap:wrap;gap:var(--s-2);
  margin-block-start:auto;padding-block-start:var(--s-2);
}
.hub-card .tags li{
  font-size:var(--fs-xs);color:var(--text-faint);
}
.hub-card .tags li+li::before{content:'·';margin-inline-end:var(--s-2);opacity:.5}

/* ==========================================================================
   צ'יפים / קישורים מהירים
   ========================================================================== */
.quick-links{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);border-radius:99px;
  text-decoration:none;font-size:var(--fs-sm);font-weight:600;
  color:var(--text-muted);background:var(--surface);border:1px solid var(--border);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.chip:hover{color:var(--text);border-color:var(--border-strong);
            background:var(--surface-hover);transform:translateY(-1px)}
.chip .icon{color:var(--text-faint)}
.chip .ext{font-size:.8em;color:var(--text-faint)}

/* ==========================================================================
   כרטיס מדריך
   ========================================================================== */
.guide-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin-block-start:var(--s-8)}
@media (min-width:700px){.guide-grid{grid-template-columns:repeat(2,1fr)}}

.guide-card{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:var(--s-5);border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);
  text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.guide-card:hover{transform:translateY(-2px);border-color:var(--border-strong);
                  background:var(--surface-hover)}
.guide-card h3{display:flex;align-items:center;gap:var(--s-3)}
.guide-card h3 .icon{color:var(--accent)}
.guide-card p{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.6}
.guide-card .meta{margin-block-start:auto;padding-block-start:var(--s-2)}

.meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  font-size:var(--fs-xs);color:var(--text-faint);font-variant-numeric:tabular-nums;
}
.meta li,.meta span{display:inline-flex;align-items:center;gap:5px}
.meta .icon{inline-size:1em;block-size:1em}

/* ==========================================================================
   שלבים
   ========================================================================== */
.steps{counter-reset:step;display:grid;gap:var(--s-8);margin-block-start:var(--s-8)}
.steps>li{counter-increment:step;position:relative;padding-inline-start:var(--s-12)}
.steps>li::before{
  content:counter(step);
  position:absolute;inset-inline-start:0;inset-block-start:-2px;
  inline-size:34px;block-size:34px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-sm);
  color:var(--on-accent);background:var(--accent-grad);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent);
}
.steps>li::after{
  content:'';position:absolute;inset-inline-start:17px;inset-block-start:38px;
  inline-size:1px;block-size:calc(100% - 30px);
  background:linear-gradient(var(--border),transparent);
}
.steps>li:last-child::after{display:none}
.steps>li:target::before{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 28%,transparent)}

.steps h2{font-size:1.15rem;font-weight:700;margin-block-end:var(--s-2)}
.steps>li>:where(p,ul,ol){max-inline-size:68ch}
.steps ul:not([class]){margin-block-start:var(--s-2)}
.steps ul:not([class])>li{position:relative;padding-inline-start:var(--s-5)}
.steps ul:not([class])>li::before{
  content:'';position:absolute;inset-inline-start:6px;inset-block-start:.72em;
  inline-size:5px;block-size:5px;border-radius:50%;background:var(--text-faint);
}
.steps ol:not([class]){list-style:decimal;padding-inline-start:var(--s-5);margin-block-start:var(--s-2)}

.anchor{
  opacity:0;margin-inline-start:var(--s-2);color:var(--text-faint);
  text-decoration:none;font-size:.8em;
  transition:opacity var(--dur-fast) var(--ease);
}
.steps>li:hover .anchor,.anchor:focus-visible{opacity:1}

/* ==========================================================================
   Callouts
   ========================================================================== */
.callout{
  display:flex;gap:var(--s-3);align-items:flex-start;
  padding:var(--s-4) var(--s-5);border-radius:var(--radius);
  margin-block:var(--s-6);line-height:1.65;
  border:1px solid var(--border);
  border-inline-start:3px solid var(--c);
  background:color-mix(in srgb,var(--c) 7%,transparent);
}
.callout>.icon{color:var(--c);margin-block-start:.15em}
.callout strong{color:var(--c);font-weight:700}
.callout p+p{margin-block-start:var(--s-2)}
.callout.info  {--c:var(--accent)}
.callout.tip   {--c:var(--ok)}
.callout.warn  {--c:var(--warn)}
.callout.danger{--c:var(--err)}

/* ==========================================================================
   בלוק קוד
   ========================================================================== */
.codeblock{position:relative;margin-block:var(--s-4)}
.codeblock pre{
  overflow-x:auto;padding:var(--s-4) var(--s-5);
  border-radius:var(--radius);background:var(--bg-elevated);
  border:1px solid var(--border);
  font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.6;
  direction:ltr;text-align:left;
}
.codeblock .copy{
  position:absolute;inset-block-start:var(--s-2);inset-inline-end:var(--s-2);
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:8px;font-size:var(--fs-xs);
  color:var(--text-muted);background:var(--surface);border:1px solid var(--border);
  opacity:0;transition:opacity var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.codeblock:hover .copy,.codeblock .copy:focus-visible{opacity:1}
.codeblock .copy[data-copied]{color:var(--ok);border-color:var(--ok);opacity:1}
@media (hover:none){.codeblock .copy{opacity:1}}

/* ==========================================================================
   צילומי מסך
   ========================================================================== */
.shot{
  inline-size:100%;block-size:auto;
  margin-block:var(--s-4);border-radius:var(--radius);
  border:1px solid var(--border);background:var(--bg-elevated);
  box-shadow:var(--shadow-card);cursor:zoom-in;
  transition:border-color var(--dur) var(--ease);
}
.shot:hover{border-color:var(--border-strong)}
figure figcaption{
  margin-block-start:var(--s-2);font-size:var(--fs-xs);
  color:var(--text-faint);text-align:center;
}

dialog.lightbox{
  max-inline-size:94vw;max-block-size:94vh;padding:0;
  border:1px solid var(--border-strong);border-radius:var(--radius);
  background:var(--bg-elevated);
  animation:pop var(--dur-slow) var(--ease);
}
dialog.lightbox::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
dialog.lightbox img{max-inline-size:94vw;max-block-size:94vh;inline-size:auto;block-size:auto}
dialog.lightbox .close{
  position:absolute;inset-block-start:var(--s-2);inset-inline-end:var(--s-2);
  display:grid;place-items:center;inline-size:36px;block-size:36px;
  border-radius:50%;color:#fff;background:rgba(0,0,0,.55);
}
@keyframes pop{from{opacity:0;transform:scale(.94)}}

/* ==========================================================================
   קבצים להורדה
   ========================================================================== */
.file-chip{
  display:inline-flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-radius:var(--radius);
  text-decoration:none;color:var(--text);
  background:var(--surface);border:1px solid var(--border);
  transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.file-chip:hover{border-color:var(--border-strong);background:var(--surface-hover);
                 transform:translateY(-1px)}
.file-chip>.icon{color:var(--accent)}
.file-chip b{display:block;font-weight:600;line-height:1.35}
.file-chip span{display:block;font-size:var(--fs-xs);color:var(--text-faint);
                font-weight:400;font-variant-numeric:tabular-nums}
.file-list{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* ==========================================================================
   כפתורים
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:var(--s-3) var(--s-6);border-radius:12px;
  font-weight:700;font-size:1rem;text-decoration:none;
  border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.btn:active{transform:scale(.985)}
.btn-primary{color:var(--on-accent);background:var(--accent-grad)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-ghost{color:var(--text);background:var(--surface);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.btn-block{inline-size:100%}
.btn-lg{padding:var(--s-4) var(--s-8);font-size:1.0625rem}

/* ==========================================================================
   Breadcrumb, pager, ToC
   ========================================================================== */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  font-size:var(--fs-xs);color:var(--text-faint);margin-block-end:var(--s-4);
}
.breadcrumb a{text-decoration:none;color:var(--text-faint)}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb .sep{opacity:.5}

.pager{
  display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:space-between;
  margin-block-start:var(--s-12);padding-block-start:var(--s-6);
  border-block-start:1px solid var(--border);
}
.pager a{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--s-3) var(--s-4);border-radius:var(--radius);
  text-decoration:none;border:1px solid var(--border);background:var(--surface);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
  max-inline-size:48%;
}
.pager a:hover{border-color:var(--border-strong);background:var(--surface-hover)}
.pager small{color:var(--text-faint)}
.pager b{font-weight:600;font-size:var(--fs-sm)}
.pager .next{margin-inline-start:auto;text-align:end}

.guide-layout{display:block}
.toc{display:none}
@media (min-width:900px){
  .guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;
                gap:var(--s-12);align-items:start}
  .toc{
    display:block;position:sticky;inset-block-start:88px;
    max-block-size:calc(100vh - 120px);overflow-y:auto;
    padding-inline-start:var(--s-4);
    border-inline-start:1px solid var(--border);
  }
  .toc strong{display:block;font-size:var(--fs-xs);color:var(--text-faint);
              text-transform:uppercase;letter-spacing:.06em;margin-block-end:var(--s-2)}
  .toc a{display:block;padding-block:var(--s-2);font-size:var(--fs-xs);
         color:var(--text-faint);text-decoration:none;line-height:1.4;
         transition:color var(--dur-fast) var(--ease)}
  .toc a:hover{color:var(--text)}
  .toc a[data-active]{color:var(--accent);font-weight:600}
}
.toc-mobile{margin-block:var(--s-6)}
.toc-mobile summary{
  cursor:pointer;padding:var(--s-3) var(--s-4);border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);
  font-weight:600;font-size:var(--fs-sm);
}
.toc-mobile ol{padding:var(--s-3) var(--s-5) 0;list-style:decimal}
.toc-mobile a{color:var(--text-muted);text-decoration:none;line-height:2}
@media (min-width:900px){.toc-mobile{display:none}}

/* ==========================================================================
   פאנל חיפוש (Ctrl+K)
   ========================================================================== */
dialog.cmdk{
  inline-size:min(92vw,620px);margin-block-start:12vh;padding:0;
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  background:var(--bg-elevated);color:var(--text);
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  animation:cmdk-in var(--dur-slow) var(--ease);
}
dialog.cmdk::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
@keyframes cmdk-in{from{opacity:0;transform:scale(.97) translateY(-6px)}}

.cmdk-field{display:flex;align-items:center;gap:var(--s-3);
            padding-inline:var(--s-5);border-block-end:1px solid var(--border)}
.cmdk-field .icon{color:var(--text-faint)}
.cmdk input{
  flex:1;padding-block:var(--s-5);font-size:1.0625rem;
  color:var(--text);background:none;border:none;
}
.cmdk input:focus{outline:none}
.cmdk ul{max-block-size:56vh;overflow-y:auto;padding:var(--s-2)}
.cmdk li a{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-radius:var(--radius-sm);
  text-decoration:none;color:var(--text);
}
.cmdk li[aria-selected="true"] a{background:var(--surface-hover)}
.cmdk li a .icon{color:var(--text-faint)}
.cmdk li a mark{background:none;color:var(--accent);font-weight:700}
.cmdk li a small{margin-inline-start:auto;color:var(--text-faint);white-space:nowrap}
.cmdk .empty{padding:var(--s-8) var(--s-6);text-align:center;color:var(--text-faint)}
.cmdk-foot{
  display:flex;gap:var(--s-4);padding:var(--s-3) var(--s-5);
  border-block-start:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--text-faint);
}
.cmdk-foot kbd{
  font-family:var(--font-mono);padding:2px 6px;border-radius:5px;
  background:var(--surface-hover);border:1px solid var(--border);
}
@media (max-width:599px){.cmdk-foot{display:none}}

/* ==========================================================================
   כרטיס איש קשר, hero של עמוד פנימי
   ========================================================================== */
.page-head{display:flex;align-items:flex-start;gap:var(--s-4);margin-block-end:var(--s-6)}
.page-head .icon-wrap{flex:none}
.page-head .lede{margin-block-start:var(--s-2)}

.panel{
  padding:var(--s-6);border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border);
  backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));
}
.panel-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}
@media (min-width:700px){.panel-grid{grid-template-columns:repeat(2,1fr)}}
.panel h2{margin-block-end:var(--s-2)}
.panel p{color:var(--text-muted);font-size:var(--fs-sm)}
.panel .file-list{margin-block-start:var(--s-4)}

.contact-card{text-align:center;max-inline-size:520px;margin-inline:auto}
.contact-card svg.mark{inline-size:56px;block-size:56px;margin-inline:auto}
.contact-card h2{margin-block-start:var(--s-4)}
.contact-card .role{color:var(--text-muted);font-size:var(--fs-sm)}
.contact-card .actions{display:flex;flex-wrap:wrap;gap:var(--s-3);
                       justify-content:center;margin-block-start:var(--s-6)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  margin-block-start:var(--s-24);padding-block:var(--s-12);
  border-block-start:1px solid var(--border);
  color:var(--text-muted);font-size:var(--fs-sm);
}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s-8);
                   justify-content:space-between;align-items:flex-start}
.site-footer a{color:var(--text-muted);text-decoration:none}
.site-footer a:hover{color:var(--text);text-decoration:underline}
.site-footer nav{display:flex;flex-direction:column;gap:var(--s-2)}
.site-footer .updated{color:var(--text-faint);font-size:var(--fs-xs)}

/* ==========================================================================
   404
   ========================================================================== */
.err-page{text-align:center;padding-block:var(--s-24)}
.err-page .mark{inline-size:72px;block-size:72px;margin-inline:auto;opacity:.5}
.err-code{font-size:clamp(3rem,10vw,6rem);font-weight:800;letter-spacing:-.04em;
          background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
          color:transparent;line-height:1;margin-block:var(--s-4)}
.err-page .actions{display:flex;flex-wrap:wrap;gap:var(--s-3);
                   justify-content:center;margin-block-start:var(--s-8)}

/* ==========================================================================
   Toast
   ========================================================================== */
.toast{
  position:fixed;inset-block-end:var(--s-6);inset-inline-start:50%;
  transform:translateX(-50%) translateY(12px);
  padding:var(--s-3) var(--s-5);border-radius:99px;
  background:var(--bg-elevated);border:1px solid var(--border-strong);
  color:var(--text);font-size:var(--fs-sm);font-weight:600;
  box-shadow:var(--shadow-card);
  opacity:0;pointer-events:none;z-index:80;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.toast[data-show]{opacity:1;transform:translateX(-50%)}


/* ==========================================================================
   נפילה־לאחור לכפתורי מייל
   mailto לא עושה כלום בדפדפן בלי תוכנת דואר מוגדרת. הכתובת תמיד גלויה.
   ========================================================================== */
.mail-fallback{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s-2);margin-block-start:var(--s-4);
  font-size:var(--fs-xs);color:var(--text-faint);
}
.mail-fallback code{
  font-family:var(--font-mono);font-size:.875rem;direction:ltr;
  color:var(--text);padding:.2em .5em;border-radius:6px;
  background:var(--surface-hover);border:1px solid var(--border);
  user-select:all;
}
.mail-copy{
  display:inline-flex;align-items:center;gap:5px;
  padding:.3em .7em;border-radius:6px;font-size:var(--fs-xs);font-weight:600;
  color:var(--text-muted);background:var(--surface);border:1px solid var(--border);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.mail-copy:hover{color:var(--text);border-color:var(--border-strong)}
.callout .mail-fallback{justify-content:flex-start;margin-block-start:var(--s-3)}

/* ==========================================================================
   טבלת השוואה
   ========================================================================== */
.table-wrap{overflow-x:auto;margin-block:var(--s-6);
            border:1px solid var(--border);border-radius:var(--radius)}
table.cmp{inline-size:100%;border-collapse:collapse;font-size:var(--fs-sm);min-inline-size:520px}
table.cmp th,table.cmp td{
  padding:var(--s-3) var(--s-4);text-align:start;vertical-align:top;
  border-block-end:1px solid var(--border);
}
table.cmp thead th{
  font-weight:700;color:var(--text);background:var(--surface);
  border-block-end:1px solid var(--border-strong);white-space:nowrap;
}
table.cmp thead th:first-child{inline-size:1%}
table.cmp tbody th{font-weight:600;color:var(--text-muted);white-space:nowrap}
table.cmp tbody tr:last-child th,
table.cmp tbody tr:last-child td{border-block-end:none}
table.cmp tbody tr:hover{background:var(--surface)}

/* ==========================================================================
   שאלות נפוצות
   היררכיה: כותרת קבוצה (קטנה, אפורה) ← שאלה (בולטת, לחיצה) ← תשובה (מוזחת).
   הכל סגור כברירת מחדל.
   ========================================================================== */
.faq-hint{
  font-size:var(--fs-xs);color:var(--text-faint);
  margin-block-start:var(--s-3);
}

.faq-group{margin-block-start:var(--s-12)}
.faq-group-title{
  display:flex;align-items:center;gap:var(--s-3);
  font-size:1.0625rem;font-weight:700;color:var(--text);
  letter-spacing:-.01em;margin-block-end:var(--s-3);
}
.faq-group-title::before{
  content:'';inline-size:3px;block-size:1.1em;border-radius:2px;
  background:var(--accent-grad);flex:none;
}
.faq-group-title small{
  font-size:var(--fs-xs);font-weight:600;color:var(--text-faint);
  padding:2px 8px;border-radius:99px;
  background:var(--surface);border:1px solid var(--border);
}

.faq-list{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
}
.faq-item+.faq-item{border-block-start:1px solid var(--border)}

.faq-item summary{
  display:flex;align-items:center;gap:var(--s-3);cursor:pointer;
  padding:var(--s-4) var(--s-5);list-style:none;
  transition:background var(--dur-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--surface-hover)}
.faq-q{
  font-weight:600;font-size:1rem;line-height:1.5;color:var(--text);
  flex:1;
}
.faq-item summary .icon{
  flex:none;color:var(--text-faint);
  transition:transform var(--dur) var(--ease),color var(--dur-fast) var(--ease);
}
.faq-item summary:hover .icon{color:var(--accent)}
.faq-item[open] summary .icon{transform:rotate(180deg);color:var(--accent)}
.faq-item[open] summary{background:var(--surface-hover)}
.faq-item[open] .faq-q{color:var(--accent)}
.faq-item:target summary{background:var(--surface-hover)}

.faq-a{
  padding:0 var(--s-5) var(--s-5);
  margin-inline-start:calc(var(--s-3) + 1.25em);   /* יישור מתחת לטקסט השאלה */
  color:var(--text-muted);font-size:var(--fs-sm);
}
.faq-a>*+*{margin-block-start:var(--s-3)}
.faq-a p,.faq-a li{color:var(--text-muted);line-height:1.7}
.faq-a b{color:var(--text);font-weight:600}
.faq-a ul:not([class])>li,.faq-a ol:not([class])>li{
  position:relative;padding-inline-start:var(--s-5);margin-block:var(--s-2);
}
.faq-a ul:not([class])>li::before{
  content:'';position:absolute;inset-inline-start:6px;inset-block-start:.72em;
  inline-size:5px;block-size:5px;border-radius:50%;background:var(--text-faint);
}
.faq-a ol:not([class]){counter-reset:fa}
.faq-a ol:not([class])>li{counter-increment:fa}
.faq-a ol:not([class])>li::before{
  content:counter(fa) '.';position:absolute;inset-inline-start:0;
  color:var(--accent);font-weight:700;
}
.faq-a .callout{margin-block:var(--s-4) 0;font-size:var(--fs-sm)}

/* ==========================================================================
   עמוד החלטה — כרטיסי מסלול
   ========================================================================== */
.route-grid{display:grid;gap:var(--s-4);grid-template-columns:1fr;margin-block:var(--s-6)}
@media (min-width:760px){.route-grid{grid-template-columns:repeat(2,1fr)}}

.route-card{
  position:relative;display:flex;flex-direction:column;gap:var(--s-3);
  padding:var(--s-6);border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border);
  text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.route-card:hover{transform:translateY(-2px);border-color:var(--accent);
                  background:var(--surface-hover)}
.route-when{
  display:inline-flex;align-self:flex-start;align-items:center;
  padding:4px 12px;border-radius:99px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
  color:var(--on-accent);background:var(--accent-grad);
}
.route-card strong{font-size:1.25rem;font-weight:700}
.route-card p{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.6}
.route-card .tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-block-start:auto;
                  padding-block-start:var(--s-2)}
.route-card .tags li{
  font-size:var(--fs-xs);color:var(--text-faint);
  padding:3px 9px;border-radius:99px;
  background:var(--bg-elevated);border:1px solid var(--border);
}
.route-go{
  position:absolute;inset-block-start:var(--s-6);inset-inline-end:var(--s-6);
  color:var(--text-faint);transition:color var(--dur) var(--ease),
                                     transform var(--dur) var(--ease);
}
.route-card:hover .route-go{color:var(--accent);transform:translateX(-3px)}
[dir="ltr"] .route-card:hover .route-go{transform:translateX(3px)}

/* ==========================================================================
   בורר מערכת הפעלה + מקטעים בתוך מדריך
   ========================================================================== */
.os-picker{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  padding:var(--s-3) var(--s-4);margin-block:var(--s-6);
  border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);
}
.os-picker>span{font-size:var(--fs-xs);color:var(--text-faint);font-weight:600;
                margin-inline-end:var(--s-2)}
.os-picker a{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:99px;text-decoration:none;
  font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);
  background:var(--bg-elevated);border:1px solid var(--border);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.os-picker a:hover{color:var(--text);border-color:var(--accent)}

.guide-sec{margin-block-start:var(--s-16);scroll-margin-block-start:88px}
.guide-sec:first-of-type{margin-block-start:var(--s-8)}
.guide-sec>h2{
  display:flex;align-items:center;gap:var(--s-3);
  padding-block-end:var(--s-3);margin-block-end:var(--s-3);
  border-block-end:1px solid var(--border);
}
.guide-sec>h2 .icon{color:var(--accent);flex:none}
.guide-sec .sec-intro{color:var(--text-muted);font-size:var(--fs-sm);max-inline-size:68ch}
.guide-sec .steps{margin-block-start:var(--s-6);gap:var(--s-6)}
.guide-sec .steps h3{font-size:1.05rem;font-weight:700;margin-block-end:var(--s-2)}
.guide-sec:target>h2{color:var(--accent)}

/* ==========================================================================
   בורר שפה
   ארבע שפות כבר לא נכנסות למתג דו-מצבי — תפריט קטן במקום.
   ========================================================================== */
.lang-menu{position:relative}
.lang-menu .toggle-lang{
  inline-size:auto;gap:6px;padding-inline:var(--s-3);
  font-weight:700;font-size:var(--fs-sm);
}
.lang-menu .toggle-lang>span{line-height:1}
.lang-menu>ul{
  position:absolute;inset-block-start:calc(100% + 6px);inset-inline-end:0;
  min-inline-size:190px;padding:var(--s-2);z-index:60;
  border-radius:var(--radius);background:var(--bg-elevated);
  border:1px solid var(--border-strong);box-shadow:0 16px 48px rgba(0,0,0,.4);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.lang-menu[data-open]>ul{opacity:1;transform:none;pointer-events:auto}
.lang-menu a{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-3);border-radius:var(--radius-sm);
  text-decoration:none;color:var(--text);font-size:var(--fs-sm);font-weight:600;
  transition:background var(--dur-fast) var(--ease);
}
.lang-menu a:hover{background:var(--surface-hover)}
.lang-menu a small{
  margin-inline-start:auto;color:var(--text-faint);font-weight:400;
  font-size:var(--fs-xs);
}
.lang-menu a[aria-current="true"]{color:var(--accent)}
.lang-menu a[aria-current="true"]::before{
  content:'';inline-size:3px;block-size:1.1em;border-radius:2px;
  background:var(--accent-grad);margin-inline-start:-6px;
}