/* ==============================================
   הפריסה של מסמך Markdown — במקום אחד, לתצוגת המסמך ולתצוגה החיה

   הקובץ הזה הוא הפריסה של מה ש-markdown-it מייצר בתוך ``#md-content``: בלוק קוד והמסגרת שלו (פס הכותרת
   עם שם השפה וכפתור ההעתקה, שנבנים ב-``webapp/static/js/md-code-blocks.js``), קוד בשורה, טבלאות, כותרות,
   רשימות, ציטוטים, תמונות, ריווח ושבירת שורות. הצבעים של אותם אלמנטים — ב-``md-content-colors.css``.
   שני המקומות שטוענים את שני הקבצים:

   - תצוגת המסמך — ``md_preview.html``, בראש הבלוק ``extra_css``, אחרי קובץ הצבעים.
   - התצוגה החיה בעמודי העריכה וההעלאה — ``_live_preview_styles.html``. שם ה-canvas מקבל במצב Markdown
     את ``id="md-content"`` (``setMarkdownContext`` ב-``live-preview.js``), ולכן אותם כללים חלים עליו.

   **למה קובץ משותף.** עד שהקובץ הזה נוצר, הכללים ישבו בתוך ה-``<style>`` של ``md_preview.html``, והתצוגה
   החיה החזיקה עותק משלה ב-``split-view.css``. העותק נסחף: קוד בשורה קיבל שם ``word-break: break-word``,
   ובטבלה עמודה עם קוד נשברה כל כמה אותיות, בזמן שבתצוגת המסמך אותו קוד נשאר בשורה אחת והטבלה נגללה;
   ובלוק קוד נראה שם כמו בדפדפן הריפו ולא כמו במסמך.

   **מה לא כאן, ונשאר ב-``md_preview.html``:** הכרטיס של ``#md-content`` (פינות, ריווח, מעבר צבע),
   אנימציית הכניסה של האלמנטים (``renderPreview`` ב-``live-preview.js`` מחליף את כל התוכן בכל רינדור,
   והאנימציה הייתה רצה שוב על כל המסמך אחרי כל עדכון), ורכיבים שרק תצוגת המסמך
   בונה: תוכן העניינים, קיפול סעיפי H3 (``md-section-collapse``), הדגשת החיפוש, סימון צבעים בקוד
   (``md-color-token``), עוגנים מפורשים ובורר הרקע (``bg-sepia`` ודומיו). בלוק ``::: details`` מעוצב
   ב-``markdown-enhanced.css``, שנטען בכל עמוד.
   ============================================== */

#md-content img {
  max-width: 100%;
  height: auto;
}

/* טבלאות בסגנון GitHub */
#md-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: auto;
  display: block;
}
#md-content table th, #md-content table td {
  padding: 0.5rem 0.75rem;
}
/* קוד (fenced) */
#md-content pre code,
#md-content pre > code,
#md-content code.hljs {
  display: block;
  padding: 0;
  border-radius: 0;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#md-content pre {
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  margin: 1rem 0;
  border-radius: 12px;
  padding: 1.25rem clamp(1.5rem, 6vw, 2.25rem) 1.5rem;
  box-sizing: border-box;
}
#md-content .code-block {
  margin: 1.5rem 0;
  border: 1px solid var(--md-code-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--md-code-shell-bg, var(--md-code-bg));
  box-shadow: var(--md-code-shadow);
  position: relative;
  direction: ltr;
  text-align: left;
}
/* בלוקי קוד עם תוכן בעברית – יישור לימין */
#md-content pre.rtl-code {
  direction: rtl;
  text-align: right;
}
#md-content .code-block pre {
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 0;
  box-shadow: none;
}
#md-content .hljs { overflow-x: auto; display: block; }
#md-content .md-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 1.25rem;
  background: var(--md-code-header-bg);
  color: var(--md-code-header-text);
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--md-code-border);
}
#md-content .md-code-lang {
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--md-code-lang-text, var(--md-code-header-text));
  background: var(--md-code-lang-bg, color-mix(in srgb, var(--md-code-header-text) 12%, transparent));
  padding: 0.15rem 0.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  text-shadow: none;
}
#md-content .md-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--md-code-copy-border, transparent);
  background: var(--md-code-copy-bg);
  color: var(--md-code-copy-color);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  box-shadow: var(--md-code-copy-shadow, none);
  opacity: 0.9;
}
#md-content .md-copy-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}
#md-content .md-copy-btn .icon-check {
  display: none;
}
#md-content .md-copy-btn:hover,
#md-content .md-copy-btn:focus-visible {
  background: var(--md-code-copy-hover-bg);
  color: var(--md-code-copy-color);
  transform: translateY(-1px);
  outline: 2px solid var(--primary, #8b5cf6);
  outline-offset: 2px;
  opacity: 1;
}
#md-content .md-copy-btn.copied {
  color: var(--md-code-copy-success-color);
  background: color-mix(in srgb, var(--md-code-copy-success-color) 18%, transparent);
  border-color: transparent;
}
#md-content .md-copy-btn.copied .icon-copy {
  display: none;
}
#md-content .md-copy-btn.copied .icon-check {
  display: inline-block;
}
#md-content .md-copy-btn.copy-error {
  color: var(--md-code-copy-error-color);
  background: color-mix(in srgb, var(--md-code-copy-error-color) 20%, transparent);
  border-color: transparent;
}

/* מניעת גלישה אופקית של טקסט מחוץ לקוד/inline-code */
#md-content p, #md-content li, #md-content blockquote {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* מרווח נעים בין פסקאות */
#md-content p { margin: 0.75rem 0; }
/* ריווח ברור סביב כותרות משנה כדי למנוע הדבקה לטקסט שלפניהן/אחריהן */
#md-content h2, #md-content h3, #md-content h4 {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}
/* ברשימות ממוספרות/תבליטים ב-RTL המספר/סמל יישב בתוך הבלוק, לא מחוצה לו */
#md-content ol, #md-content ul {
  /* הצגת התבליט/מספור מחוץ לבלוק כדי ליצור הזחה טבעית */
  list-style-position: outside;
  /* ריווח תחתון כדי שלא יידבקו לכותרת/פסקה הבאה */
  margin-block: 0 1rem;
  /* הזחה בצד ההתחלה (RTL: ימין) */
  padding-inline-start: 1.25rem;
}
/* רווח עדין בין פריטי רשימה */
#md-content li { margin: 0.25rem 0; }
/* רשימות מקוננות – מעט רווח מעל/מתחת */
#md-content li > ul, #md-content li > ol { margin-block: 0.25rem 0.5rem; }
#md-content code:not(pre code) {
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  font-family: 'Fira Code', 'Consolas', monospace;
}

/* ציטוטים */
#md-content blockquote {
  margin: 0.75rem 0;
  padding: 0.5rem 0.75rem;
}

/* קו הפרדה (``---``): קו דק עם מרווח מעליו ומתחתיו. ``border: 0`` מבטל את הקו ה"בולט" של הדפדפן, והקו עצמו
   הוא הרקע של האלמנט — הצבע שלו ב-``md-content-colors.css``. */
#md-content hr {
  height: 1px;
  border: 0;
  margin: 1.25em 0;
}

/* האלמנט הראשון במסמך בלי margin עליון: המרווח העליון של כותרת (הכלל של ``h1`` למטה) נועד
   להפריד אותה ממה שלפניה, ובראש המסמך אין לפניה כלום, אלא רק הריפוד של המכל. חל על תצוגת המסמך ועל התצוגה
   החיה יחד, כמו כל הקובץ. */
#md-content > :first-child {
  margin-top: 0;
}

/* הצ'קבוקס של פריט משימה (``class="task-list-item-checkbox"`` מ-markdown-it-task-lists). עד אוקטובר 2026 העיצוב
   ישב ב-``md_preview.html`` על מחלקה שרק תצוגת המסמך הוסיפה, ובתצוגה החיה הצ'קבוקס יצא בלי רווח ובגודל אחר. */
#md-content .task-list-item-checkbox {
  margin-inline-end: .5rem;
  transform: scale(1.1);
}

/* כותרות. בלי קו תחתון: עד אוקטובר 2026 ל-``h1`` ול-``h2`` היה קו בסגנון GitHub (3px ו-2px), בצבע אפור-בהיר קבוע
   שלא עקב אחרי הערכה, ועל נייר כהה הוא בלט כמו קו הפרדה. הוא הוסר בשתי התצוגות, לבקשת המשתמש. */
#md-content h1 {
  font-size: 2.2em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 700;
}

#md-content h2 {
  font-size: 1.8em;
  font-weight: 600;
}

#md-content h3 {
  font-size: 1.4em;
  font-weight: 600;
}

#md-content h4 {
  font-size: 1.2em;
  font-weight: 500;
}

/* שבירת שורות לכותרות ארוכות בתצוגת Markdown */
#md-content h1,
#md-content h2,
#md-content h3,
#md-content h4,
#md-content h5,
#md-content h6 {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* קישורי עוגן (permalink) */
#md-content .header-anchor {
  opacity: 0;
  transition: opacity 0.2s;
  margin-left: 0.5em;
}

#md-content h1:hover .header-anchor,
#md-content h2:hover .header-anchor,
#md-content h3:hover .header-anchor {
  opacity: 1;
}