/* guides.css — הסגנון המשותף של מרכז המידע.
 *
 * ⚠️ אותם משתנים, צבעים ופונטים של landing.html. אין כאן מערכת
 *    עיצוב שנייה — רק ההרחבות שדף נחיתה לא צריך: טיפוגרפיה של
 *    מאמר, ניווט, ורכיבי ההמחשה.
 *
 * ⚠️ שם קבוע ולא hash. הקובץ מוגש ב-immutable ל-שנה, ולכן שינוי
 *    תוכן שלו לא יגיע לדפדפנים קיימים. זו ההחלטה: ההגשה של
 *    Vercel אינה מייצרת hash לקבצים סטטיים ב-public/, ושם עם
 *    hash היה מחייב לערוך ידנית כל מאמר בכל שינוי CSS — טעות
 *    שקטה שמחכה לקרות. במקום זה, שינוי עתידי יעלה כ-guides.v2.css
 *    ויעודכן במאמרים בבת אחת. מתועד גם ב-vercel.json.
 */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&family=Secular+One&display=swap');

:root{
  --bg:#07070F; --bg2:#0E0E1A; --bg3:#151524;
  --border:#1E1E32; --border2:#2A2A42;
  --accent:#6366F1; --accent2:#4338CA; --accentL:#818CF8;
  --green:#10B981; --gold:#F59E0B; --red:#EF4444;
  --text:#F1F5F9; --text2:#94A3B8; --text3:#475569;
  --glow:rgba(99,102,241,0.18);
  --wa:#25D366; --wa-bg:#0b141a; --wa-out:#005c4b; --wa-in:#1f2c34;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'Heebo',sans-serif;direction:rtl}
.secular{font-family:'Secular One',sans-serif}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── סרגל עליון ────────────────────────────────────────────── */
/* אותם ערכים בדיוק של nav ב-landing.html — גובה, ריפוד, גדלים
   וצבעים. שני הבדלים מכוונים:
   ⚠️ לא position:fixed. סרגל צף גוזל גובה במובייל ומפריע לקריאה
      ארוכה, וזה בדיוק מה שקורה כאן — מאמר ולא דף שיווקי.
   ⚠️ הריפוד מצטמצם ב-480px, כי אין כאן קישורי עוגן להסתיר. */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 40px;height:64px;
  background:var(--bg2);border-bottom:1px solid var(--border);
}
.topbar-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--text);text-decoration:none}
.topbar-logo-icon{width:34px;height:34px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:16px;flex:none}
.topbar-mid{font-size:13px;color:var(--text2);text-decoration:none;transition:color .15s}
.topbar-mid:hover{color:var(--text)}
.topbar-cta{background:var(--accent);border:none;color:#fff;border-radius:9px;padding:8px 18px;font-size:13px;font-weight:700;text-decoration:none;font-family:inherit;transition:background .15s;flex:none}
.topbar-cta:hover{background:var(--accent2)}
@media(max-width:480px){
  .topbar{padding:0 16px;gap:8px}
  .topbar-logo{font-size:15px}
  .topbar-logo-icon{width:28px;height:28px;font-size:14px}
}

/* ── פריסה ─────────────────────────────────────────────────── */
/* ⚠️ overflow-wrap מונע מלכתחילה את מה שקרה עם כתובות
   developers.facebook.com: מחרוזת ארוכה בלי רווחים (URL, מזהה,
   טוקן) דחפה את הפריסה לרוחב ושברה את היישור.
   break-word ולא anywhere — anywhere משפיע גם על חישוב min-content
   ומכווץ פריטי flex/grid בלי סיבה. */
.wrap{max-width:720px;margin:0 auto;padding:22px 16px 70px;animation:fadeUp .3s ease forwards;overflow-wrap:break-word}
.wrap.wide{max-width:960px}

/* ── פירורי לחם ────────────────────────────────────────────── */
.crumbs{font-size:12.5px;color:var(--text2);margin:0 0 14px;line-height:1.9}
.crumbs a{color:var(--text2);text-decoration:none}
.crumbs a:hover{color:var(--accentL)}
.crumbs span{color:var(--text3);margin:0 6px}

/* ── טיפוגרפיה ─────────────────────────────────────────────── */
h1{font-family:'Secular One',sans-serif;font-size:27px;margin:0 0 10px;line-height:1.35}
h2{font-family:'Secular One',sans-serif;font-size:19px;margin:38px 0 10px;padding-top:18px;border-top:1px solid var(--border);scroll-margin-top:16px}
h3{font-size:15.5px;font-weight:800;margin:22px 0 8px;color:var(--text)}
p{font-size:15px;line-height:1.85;color:var(--text);margin:0 0 12px}
a{color:var(--accentL)}
.lede{color:var(--text2);font-size:15.5px;line-height:1.8;margin:0 0 8px}
.meta{font-size:12px;color:var(--text3);margin:0 0 6px}
ul,ol{padding-inline-start:20px;margin:0 0 12px}
li{font-size:15px;line-height:1.85;margin-bottom:5px}

/* ── תוכן עניינים ──────────────────────────────────────────── */
/* ⚠️ נבנה בסקריפט מה-H2 שכבר בעמוד. הכותרות עצמן הן HTML אמיתי
   ולא נוצרות כאן — הסקריפט רק מקהה אותן לרשימה. */
.toc{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin:18px 0 24px}
.toc-title{font-size:12px;font-weight:800;color:var(--text2);margin-bottom:8px;letter-spacing:.3px}
.toc ol{list-style:none;counter-reset:t;padding:0;margin:0}
.toc li{counter-increment:t;position:relative;padding:5px 24px 5px 0;font-size:14px;line-height:1.7;margin:0}
.toc li::before{content:counter(t);position:absolute;right:0;top:6px;width:17px;height:17px;border-radius:99px;background:var(--bg3);color:var(--accentL);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.toc a{color:var(--text);text-decoration:none}
.toc a:hover{color:var(--accentL)}

/* ── קופסאות תוכן ──────────────────────────────────────────── */
.card{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:16px 18px;margin-top:14px}
ul.checks{list-style:none;padding:0;margin:0}
ul.checks li{position:relative;padding:9px 26px 9px 0;font-size:14.5px;line-height:1.8;color:var(--text);border-bottom:1px solid var(--border);margin:0}
ul.checks li:last-child{border-bottom:none}
ul.checks li::before{content:"✓";position:absolute;right:0;top:9px;color:var(--green);font-weight:700}
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0}
ol.steps li{counter-increment:s;position:relative;padding:12px 40px 12px 0;font-size:14.5px;line-height:1.8;border-bottom:1px solid var(--border);margin:0}
ol.steps li:last-child{border-bottom:none}
ol.steps li::before{content:counter(s);position:absolute;right:0;top:11px;width:26px;height:26px;border-radius:99px;background:var(--bg3);border:1px solid var(--border2);color:var(--accentL);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* ⚠️ קישור בתוך צעד הוא טקסט עברי משובץ במשפט, לא כתובת מודפסת.
   הכלל הקודם היה display:block + direction:ltr + word-break:break-all
   — כי שם הודפסה הכתובת המלאה. כתובת גולמית לא מודפסת יותר. */
ol.steps a{font-weight:600}
.note{border-radius:12px;padding:13px 15px;font-size:14px;line-height:1.8;margin:14px 0}
.note b{display:block;margin-bottom:3px}
.note.tip{background:var(--glow);border:1px solid rgba(99,102,241,.42);color:var(--text)}
.note.warn{background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.42);color:#FCD9A0}
.note.danger{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.45);color:#FCA5A5}

/* ═══ רכיבי המחשה ═══════════════════════════════════════════
 * ⚠️ HTML ו-CSS בלבד — אין תמונות ואין JS. הטקסט בתוכם הוא טקסט
 *    אמיתי בעמוד: גוגל קוראת אותו והוא נטען מיד, בלי בקשה נוספת.
 * ⚠️ כל רכיב הוא מעטפת שהתוכן שלה מוזן פר-מאמר. אורכי טקסט
 *    שונים אינם שוברים פריסה — אין רוחב קבוע ואין nowrap על תוכן.
 */
.demo{margin:20px 0}
.demo-cap{font-size:11.5px;color:var(--text3);text-align:center;margin-top:8px;line-height:1.7}

/* 1 · שיחת וואטסאפ — .wa > .wa-msg.in / .wa-msg.out (+ .wa-time) */
.wa{background:var(--wa-bg);border:1px solid var(--border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.wa-msg{max-width:82%;padding:8px 11px;border-radius:12px;font-size:13.5px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.wa-msg.in{background:var(--wa-in);color:#e9edef;align-self:flex-start;border-top-left-radius:4px}
.wa-msg.out{background:var(--wa-out);color:#e9edef;align-self:flex-end;border-top-right-radius:4px}
.wa-time{display:block;font-size:10px;opacity:.6;margin-top:3px}
.wa-note{align-self:center;background:rgba(255,255,255,.06);color:var(--text2);font-size:11px;padding:4px 10px;border-radius:8px}

/* 2 · כרטיס ליד — .lead > .lead-head + .lead-rows > .lead-row */
.lead{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.lead-head{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.lead-avatar{width:34px;height:34px;border-radius:99px;background:var(--bg3);color:var(--accentL);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.lead-name{font-size:14px;font-weight:800;flex:1;min-width:90px}
.lead-rows{padding:4px 15px 12px}
.lead-row{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;line-height:1.7}
.lead-row:last-child{border-bottom:none}
.lead-row .k{color:var(--text2);flex:none;min-width:74px}
.lead-row .v{color:var(--text);word-break:break-word}
.pill{display:inline-block;font-size:10.5px;font-weight:800;border-radius:99px;padding:3px 9px;white-space:nowrap;flex:none}
.pill.new{background:rgba(99,102,241,.14);color:var(--accentL)}
.pill.hot{background:rgba(245,158,11,.14);color:var(--gold)}
.pill.won{background:rgba(16,185,129,.14);color:var(--green)}
.pill.lost{background:rgba(239,68,68,.14);color:#FCA5A5}
.pill.mute{background:rgba(148,163,184,.12);color:var(--text2)}

/* 3 · זרימת שלבים — .flow > .flow-step (חץ נוצר ב-CSS) */
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.flow-step{flex:1 1 130px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:11px 13px;position:relative;min-width:0}
.flow-step .n{font-size:10px;font-weight:800;color:var(--accentL);margin-bottom:4px}
.flow-step .t{font-size:13px;font-weight:700;line-height:1.5;word-break:break-word}
.flow-step .d{font-size:11.5px;color:var(--text2);line-height:1.65;margin-top:4px;word-break:break-word}
.flow-step+.flow-step::before{content:"←";position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:13px;line-height:1}
@media(max-width:560px){ .flow{flex-direction:column} .flow-step+.flow-step::before{content:"↑";right:50%;top:-11px;transform:translateX(50%)} }

/* 4 · לוח יומן — .cal > .cal-head + .cal-grid > .cal-day */
.cal{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:13px 15px}
.cal-head{font-size:13px;font-weight:800;margin-bottom:10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{font-size:10px;color:var(--text3);text-align:center;padding-bottom:4px}
.cal-day{aspect-ratio:1;border-radius:8px;background:var(--bg3);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11.5px;color:var(--text2);gap:2px;min-height:34px}
.cal-day.busy{background:rgba(99,102,241,.16);color:var(--accentL);font-weight:700}
.cal-day.free{background:rgba(16,185,129,.13);color:var(--green);font-weight:700}
.cal-day.off{opacity:.35}
.cal-day .dot{width:4px;height:4px;border-radius:99px;background:currentColor}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--text2)}
.cal-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-left:5px;vertical-align:-1px}

/* 5 · השוואה זו-מול-זו — .vs > .vs-col.bad / .vs-col.good */
.vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.vs-col{border-radius:14px;padding:14px 16px;border:1px solid var(--border);background:var(--bg2);min-width:0}
.vs-col.bad{border-color:rgba(239,68,68,.32)}
.vs-col.good{border-color:rgba(16,185,129,.32)}
.vs-title{font-size:13px;font-weight:800;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.vs-col.bad .vs-title{color:#FCA5A5}
.vs-col.good .vs-title{color:var(--green)}
.vs-col ul{list-style:none;padding:0;margin:0}
.vs-col li{font-size:13px;line-height:1.75;padding:6px 18px 6px 0;position:relative;color:var(--text2);word-break:break-word}
.vs-col.bad li::before{content:"×";position:absolute;right:0;top:6px;color:#FCA5A5;font-weight:700}
.vs-col.good li::before{content:"✓";position:absolute;right:0;top:6px;color:var(--green);font-weight:700}

/* 6 · טבלת נתונים — .dtable > table */
.dtable{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow-x:auto}
.dtable table{width:100%;border-collapse:collapse;min-width:340px}
.dtable th,.dtable td{text-align:right;padding:11px 14px;font-size:13.5px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.7}
.dtable th{color:var(--text2);font-size:12px;font-weight:700;background:var(--bg3);white-space:nowrap}
.dtable td:first-child{font-weight:700}
.dtable tr:last-child td{border-bottom:none}
.dtable .num{direction:ltr;text-align:left;font-variant-numeric:tabular-nums}

/* 7 · ציר זמן — .tl > .tl-item (+ .now) */
.tl{list-style:none;padding:0;margin:0;position:relative}
.tl::before{content:"";position:absolute;right:7px;top:6px;bottom:6px;width:1px;background:var(--border)}
.tl-item{position:relative;padding:0 28px 16px 0;margin:0}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;right:3px;top:6px;width:9px;height:9px;border-radius:99px;background:var(--bg3);border:1px solid var(--border2)}
.tl-item.now::before{background:var(--accent);border-color:var(--accent)}
.tl-when{font-size:11px;color:var(--text3);margin-bottom:2px}
.tl-what{font-size:13.5px;line-height:1.75;color:var(--text);word-break:break-word}

/* 8 · תיבת הדגשה — .callout.mistake / .callout.attention
      מבנה: .callout > .callout-label + תוכן חופשי.
      ⚠️ שונה מ-.note: ל-.note אין תווית והוא משפט אחד בשורת הטקסט;
         ה-callout נושא כותרת מסוג ("טעות נפוצה") ומיועד לבלוק. */
.callout{border-radius:14px;padding:14px 16px;margin:18px 0;border:1px solid var(--border2);background:var(--bg2)}
.callout-label{font-size:11px;font-weight:800;letter-spacing:.3px;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.callout p{font-size:14px;line-height:1.85;margin:0 0 8px;color:var(--text2)}
.callout p:last-child{margin-bottom:0}
.callout.mistake{border-color:rgba(239,68,68,.32);background:rgba(239,68,68,.06)}
.callout.mistake .callout-label{color:#FCA5A5}
.callout.attention{border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.06)}
.callout.attention .callout-label{color:var(--gold)}

/* 9 · טבלת השוואה — .ctable > table, עמודה לכל אפשרות
      ⚠️ שונה מ-.dtable: שם שורה = קריטריון, ותאי ✓/× מסומנים
         במחלקות .y / .n כדי שהתשובה תיקרא בסריקה מהירה. */
.ctable{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow-x:auto}
.ctable table{width:100%;border-collapse:collapse;min-width:360px}
.ctable th,.ctable td{padding:11px 13px;font-size:13.5px;border-bottom:1px solid var(--border);line-height:1.7;text-align:right;vertical-align:top}
.ctable thead th{background:var(--bg3);color:var(--text2);font-size:12px;font-weight:700}
.ctable tbody th{font-weight:700;color:var(--text);width:auto}
.ctable td{color:var(--text2);word-break:break-word}
.ctable tr:last-child th,.ctable tr:last-child td{border-bottom:none}
.ctable .y,.ctable .n{white-space:nowrap;font-weight:700}
.ctable .y{color:var(--green)}
.ctable .n{color:#FCA5A5}
.ctable .y::before{content:"✓ "}
.ctable .n::before{content:"× "}

/* ── שאלות ותשובות ─────────────────────────────────────────── */
/* ⚠️ טקסט אמיתי ב-HTML, לא נטען בסקריפט. details שומר את התשובה
   ב-DOM גם כשהיא סגורה — וזו הסיבה שזה אקורדיון ולא JS. */
.faq{margin-top:34px}
.faq h2{margin-top:0}
.faq-item{background:var(--bg2);border:1px solid var(--border);border-radius:14px;margin-bottom:9px;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:14px 16px;font-size:14.5px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--accent);font-size:18px;font-weight:700;flex:none;transition:transform .18s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--accentL)}
.faq-answer{padding:0 16px 14px;font-size:14px;line-height:1.9;color:var(--text2)}

/* ── מאמרים קשורים ─────────────────────────────────────────── */
.related{margin-top:40px;padding-top:22px;border-top:1px solid var(--border)}
.related h2{border:none;padding:0;margin:0 0 12px;font-size:17px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.rel-card{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px;text-decoration:none;transition:border-color .2s,transform .2s}
.rel-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.rel-cluster{font-size:10.5px;font-weight:800;color:var(--accentL);margin-bottom:5px}
.rel-title{font-size:14px;font-weight:800;color:var(--text);line-height:1.5;margin-bottom:5px}
.rel-desc{font-size:12px;color:var(--text2);line-height:1.65}
.rel-time{font-size:11px;color:var(--text3);margin-top:8px}

/* ── CTA ───────────────────────────────────────────────────── */
/* ⚠️ בסוף המאמר בלבד. CTA באמצע קוטע קריאה ומוריד את הערך של
   התוכן — הוא הופך מדריך לפרסומת. */
.cta{margin-top:34px;background:var(--bg2);border:1px solid rgba(99,102,241,.3);border-radius:16px;padding:22px;text-align:center}
.cta p{font-size:14.5px;line-height:1.85;color:var(--text2);margin:0 0 14px}
.cta a{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-size:14px;font-weight:700;border-radius:11px;padding:11px 24px;transition:background .15s}
.cta a:hover{background:var(--accent2)}

.foot{text-align:center;color:var(--text3);font-size:11.5px;line-height:1.9;margin-top:38px;padding-top:18px;border-top:1px solid var(--border)}

/* ── ארכיון ────────────────────────────────────────────────── */
.hub-head{text-align:center;margin-bottom:34px}
.hub-head h1{margin-bottom:8px}
.cluster{margin-bottom:34px}
.cluster-title{font-size:16px;font-weight:800;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.cluster-sub{font-size:12.5px;color:var(--text2);margin:0 0 12px;line-height:1.7}
.cluster-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}

@media(max-width:480px){
  h1{font-size:22px}
  h2{font-size:17px}
  .wa-msg{max-width:92%}
  .cal-day{min-height:30px;font-size:10.5px}
}