/* ============================================================
   הפלאגינים של קלוד קוד, עיצוב מדריך זה בלבד.
   כל סלקטור כאן מתחיל ב-.guide-claude-code-plugins כדי שהעיצוב
   לא ידלוף לשאר האתר. אל תשתמשו בקובץ הזה מחוץ לדף הזה.

   הקובץ שוכפל מ-guides/organize-folder-with-claude-code.css - אותה
   פלטה, אותה שיטת עבודה, ואף ערך צבע, גופן, רדיוס או צל חדש לא נוסף.

   הבדל אחד מהמקור: הווריאנט rtl-prompt של code-block הוסר. במדריך
   הזה 43 מקטעי קוד, וכולם פקודות טרמינל, JSON או YAML באנגלית. אין
   כאן אף פרומפט בעברית, ולכן אין לכלל הזה צרכן. כלל שאין לו צרכן
   הוא כלל שמישהו יעתיק בטעות למדריך הבא.

   הווריאנט rtl-inline לא הועתק גם הוא, כי כל 17 צ׳יפי הקוד בשורה
   בדף הזה הם באנגלית. */

.guide-claude-code-plugins{
  /* No palette here. Every colour token comes from :root in ../styles.css
     and inherits down to this element.

     A full copy of the palette used to live in blocks like this one. Because
     the block sits on <main>, that copy won for everything inside the page by
     proximity in the custom-property inheritance chain - not by load order
     and not by specificity - so a token edited in :root silently never
     reached guide pages. Only values genuinely local to this guide are
     declared below. */
  --accent-dim:rgba(117,31,253,0.14);
  --code-surface:#23262D;
  --code-border:rgba(232,238,242,0.16);

  --font-en:'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  --font-he:'Rubik', 'Rubik Fallback', 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  --font-mono:'JetBrains Mono', 'JetBrains Mono Fallback', monospace;

  --radius:14px;
  --radius-sm:8px;
  --max-w:980px;

  display:block;
  position:relative;
  direction:rtl;
  color:var(--ink);
  font-family:var(--font-he);
  font-weight:400;
  line-height:1.65;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  max-width:100%;
  overflow-x:clip;
}


.guide-claude-code-plugins h1,
.guide-claude-code-plugins h2,
.guide-claude-code-plugins h3,
.guide-claude-code-plugins h4,
.guide-claude-code-plugins p,
.guide-claude-code-plugins ul,
.guide-claude-code-plugins ol,
.guide-claude-code-plugins figure{ margin:0; }
.guide-claude-code-plugins ul,
.guide-claude-code-plugins ol{ padding:0; list-style:none; }
.guide-claude-code-plugins p,
.guide-claude-code-plugins li,
.guide-claude-code-plugins h1,
.guide-claude-code-plugins h2,
.guide-claude-code-plugins h3,
.guide-claude-code-plugins h4{ overflow-wrap:anywhere; }
.guide-claude-code-plugins img,
.guide-claude-code-plugins svg,
.guide-claude-code-plugins video,
.guide-claude-code-plugins canvas{ display:block; max-width:100%; height:auto; }
.guide-claude-code-plugins button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.guide-claude-code-plugins a{ color:inherit; }

/* ---------- Focus ---------- */
.guide-claude-code-plugins a:focus-visible,
.guide-claude-code-plugins button:focus-visible,
.guide-claude-code-plugins [tabindex]:focus-visible,
.guide-claude-code-plugins input:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Latin / numerals / labels ---------- */
.guide-claude-code-plugins .en,
.guide-claude-code-plugins .num,
.guide-claude-code-plugins .section-label,
.guide-claude-code-plugins .logo-en{
  font-family:var(--font-en);
}

/* ---------- Layout helpers ---------- */
.guide-claude-code-plugins .wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding-inline:20px;
}
.guide-claude-code-plugins{ z-index:1; }
.guide-claude-code-plugins section{
  position:relative;
  z-index:1;
  padding-block:72px;
}

.guide-claude-code-plugins .section-label{
  display:inline-block;
  font-size:0.8125rem;
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--accent-deep);
  text-transform:uppercase;
  margin-bottom:12px;
}

.guide-claude-code-plugins h2{
  font-family:var(--font-he);
  font-weight:700;
  font-size:clamp(1.5rem, 4vw, 2.125rem);
  margin-bottom:12px;
  letter-spacing:0;
  color:var(--ink);
}

.guide-claude-code-plugins h3{
  font-weight:700;
  font-size:1.1875rem;
  margin-bottom:8px;
  letter-spacing:0;
  color:var(--ink);
}

.guide-claude-code-plugins .section-intro{
  color:var(--ink-muted);
  max-width:620px;
  margin-bottom:32px;
  font-size:1rem;
}

/* ---------- Progress bar ---------- */
.guide-claude-code-plugins .gds-progress-bar{
  position:fixed;
  top:0;
  inset-inline-start:0;
  inset-inline-end:0;
  height:3px;
  width:0%;
  background:var(--accent);
  transition:width 0.1s linear;
  z-index:150;
}
@media (prefers-reduced-motion: reduce){
  .guide-claude-code-plugins .gds-progress-bar{ transition:none; }
}

/* ---------- Hero ---------- */
.guide-claude-code-plugins .hero{
  padding-block:76px 60px;
  text-align:center;
}
.guide-claude-code-plugins .hero h1{
  font-family:var(--font-he);
  font-weight:700;
  font-size:clamp(1.75rem, 5.5vw, 2.875rem);
  line-height:1.25;
  max-width:780px;
  margin:0 auto 20px;
  letter-spacing:0;
  color:var(--ink);
}

.guide-claude-code-plugins .hero-sub{
  color:var(--ink-muted);
  font-size:clamp(1rem, 2.2vw, 1.1875rem);
  max-width:620px;
  margin:0 auto 32px;
}

.guide-claude-code-plugins .hero-actions{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.guide-claude-code-plugins .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:0.9375rem;
  text-decoration:none;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border:1px solid transparent;
}
.guide-claude-code-plugins .btn:hover{ transform:translateY(-1px); }
html.link-emphasis .guide-claude-code-plugins .btn{
  text-decoration:underline;text-underline-offset:3px;
}
@media (prefers-reduced-motion: reduce){ .guide-claude-code-plugins .btn{ transition:none; } .guide-claude-code-plugins .btn:hover{ transform:none; } }

.guide-claude-code-plugins .btn-primary{
  background:var(--accent);
  color:var(--on-accent);
}
.guide-claude-code-plugins .btn-primary:hover{
  background:var(--accent-hover);
  box-shadow:0 6px 24px rgba(var(--accent-rgb), 0.28);
}

.guide-claude-code-plugins .btn-secondary{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink-muted);
}
.guide-claude-code-plugins .btn-secondary:hover{
  border-color:var(--accent-hover);
  color:var(--accent-hover);
}

.guide-claude-code-plugins .hero-note{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  max-width:100%;
  font-size:0.84375rem;
  color:var(--ink-muted);
  background:var(--surface);
  border:1px solid var(--border);
  padding:8px 16px;
  border-radius:999px;
}
.guide-claude-code-plugins .hero-note .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.guide-claude-code-plugins .hero-note-text{
  min-width:0;
  overflow-wrap:anywhere;
}

.guide-claude-code-plugins .subsection{ margin-top:28px; }

.guide-claude-code-plugins p.body-text{
  color:var(--ink-muted);
  font-size:0.9375rem;
  max-width:68ch;
  margin-bottom:14px;
}

/* ---------- Code blocks (stay dark on purpose - see DESIGN.md) ---------- */
.guide-claude-code-plugins .code-block{
  position:relative;
  max-width:100%;
  background:var(--code-bg);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);
  margin-block:12px;
  overflow:hidden;
}
.guide-claude-code-plugins .code-block pre{
  direction:ltr;
  text-align:start;
  font-family:var(--font-mono);
  font-size:0.84375rem;
  color:var(--code-text);
  margin:0;
  padding:60px 16px 16px 16px;
  max-width:100%;
  overflow-x:auto;
  white-space:pre;
  line-height:1.6;
}
.guide-claude-code-plugins .code-block code{
  display:inline-block;
  min-width:max-content;
}
.guide-claude-code-plugins .code-block::after{
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:60px;
  bottom:0;
  width:20px;
  background:linear-gradient(to left, var(--code-bg), transparent);
  pointer-events:none;
}

.guide-claude-code-plugins .copy-btn{
  position:absolute;
  top:8px;
  inset-inline-start:8px;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:44px;
  min-height:44px;
  padding:6px 14px;
  background:var(--code-surface);
  border:1px solid var(--code-border);
  border-radius:999px;
  font-family:var(--font-en);
  font-size:0.75rem;
  font-weight:600;
  color:var(--code-text);
  direction:ltr;
  transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.guide-claude-code-plugins .copy-btn:hover{ border-color:var(--accent); }
.guide-claude-code-plugins .copy-btn.is-copied{
  background:var(--accent);
  color:var(--on-accent);
  border-color:var(--accent);
}
.guide-claude-code-plugins .copy-btn svg{ width:14px; height:14px; flex-shrink:0; }
@media (prefers-reduced-motion: reduce){ .guide-claude-code-plugins .copy-btn{ transition:none; } }

.guide-claude-code-plugins .inline-code{
  font-family:var(--font-mono);
  font-size:0.88em;
  background:var(--surface-sunk);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 6px;
  direction:ltr;
  unicode-bidi:embed;
  display:inline-block;
  color:var(--ink);
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ---------- Small closing note (page-bottom update note) ---------- */
.guide-claude-code-plugins .page-note{
  color:var(--ink-muted);
  font-size:0.84375rem;
  max-width:68ch;
  margin-top:8px;
  padding-top:20px;
  border-top:var(--border-w) solid var(--border);
}

/* ---------- Reveal on scroll ---------- */
.guide-claude-code-plugins .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.guide-claude-code-plugins .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .guide-claude-code-plugins .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- aria-live copy status ---------- */
.guide-claude-code-plugins .visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}