/* ═══════════════════════════════════════════════════════════════════════
   דף הרמאות להורים מטיילים — גיליון הסגנון
   ───────────────────────────────────────────────────────────────────────
   נשען על /guides.css למשתני הפלטה, לבאנר ולפוטר.
   משותף לכל מהדורות דף הרמאות הבאות. אין כאן שום דבר ספציפי לטבע.

   שלושה מצבים, לפי CS-003 §3:
     • ברירת מחדל  — בלוק לכל יעד, רשת 2×4. זו גרסת המובייל, והיא הראשית.
     • ‎≥1100px     — טבלה אמיתית.
     • הדפסה        — טבלה אמיתית, A4 לרוחב, שני עמודים, בטוח בגווני אפור.

   שאילתות המסך מסומנות במפורש screen, כדי שההדפסה תקבל תמיד את הטבלה
   ולא את פריסת הבלוקים — גם כשמדפיסים מטלפון.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ תנאי מקדים לכותרת הדביקה ═══
   guides.css מגדיר html,body{overflow-x:hidden}. overflow:hidden על body
   הופך אותו לתיבת גלילה, ואז thead דביק נצמד לתיבה שאינה נגללת בפועל —
   כלומר לא נדבק כלל. overflow:clip חוסם את הגלישה האופקית בדיוק כמו
   hidden, בלי ליצור תיבת גלילה, והדביקות חוזרת לעבוד.
   הקובץ הזה נטען רק בדפי הרמאות, ולכן ההחרגה אינה נוגעת בשאר האתר. */
html,body.cs-body{overflow-x:clip}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ── עוגן חזותי אחד ──────────────────────────────────────────────────
   guides.css מיישר את פירורי הלחם לעמודה של 700px ממורכזת, בעוד שהכותרת
   והטבלה יושבות בעמודה של 1180px. התוצאה: שלושה קצוות ימניים שונים.
   כאן פירורי הלחם עוברים לאותה עמודה, וכל הבלוק מיושר לימין אחד. */
.cs-body .g-crumb{max-width:1180px;padding:18px 22px 0}
@media screen and (max-width:1099.98px){.cs-body .g-crumb{padding-inline:14px}}

/* ── מעטפת ───────────────────────────────────────────────────────────── */
.cs{max-width:1180px;margin:0 auto;padding:20px 22px 72px}

.cs-head{margin-bottom:14px}
.cs-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(26px,5.4vw,38px);line-height:1.16;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:7px;
}
.cs-sub{
  font-size:clamp(14.5px,2vw,16.5px);line-height:1.5;
  color:var(--ink);opacity:.82;max-width:64ch;margin-bottom:8px;
}
/* אותה שפה חזותית כמו .g-meta בשאר האתר: קטן, שקט, בלי תג ובלי הדגשה. */
.cs-date{font-size:12.5px;color:var(--ink-soft)}

/* ── מקרא — רכיב מוצר, לא שורת טקסט ─────────────────────────────────── */
.cs-legend-panel{
  padding:0 0 14px;margin-bottom:6px;
  border-bottom:1px solid var(--rule);
}
.cs-legend-h{
  font-family:var(--font);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;color:var(--ink-soft);
  text-transform:none;margin-bottom:10px;
}
.cs-legend{
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 14px;margin:0 0 12px;
}
.cs-legend li{display:flex;align-items:center;gap:8px;min-width:0}
.cs-lg-sym{font-size:19px;line-height:1;flex:none}
.cs-lg-txt{font-size:13.5px;line-height:1.3;color:var(--ink);font-weight:600}

/* ── פעולות — שקטות. התוכן צריך לנצח אותן ───────────────────────────── */
.cs-actions{display:flex;flex-wrap:wrap;gap:9px;padding-top:12px}
.cs-btn{
  font-family:var(--font);font-size:13.5px;font-weight:600;
  color:var(--band);background:transparent;
  border:1.5px solid var(--rule);border-radius:var(--r);
  padding:8px 16px;cursor:pointer;
}
.cs-btn:hover{background:var(--paper);border-color:var(--teal)}
.cs-btn:disabled{opacity:.72;cursor:default}
.cs-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ── קבוצת אזור — מפרידה אמיתית בין מקטעים ──────────────────────────── */
.cs-group th{
  font-family:var(--font-display);font-weight:400;font-size:23px;
  color:var(--band);text-align:start;
  padding:76px 2px 14px;border-bottom:1.5px solid var(--band);
}
.cs-table tbody:first-of-type .cs-group th{padding-top:30px}

/* ── תא מצב: משותף לכל המצבים ───────────────────────────────────────── */
.cs-lab{display:block;font-size:11.5px;color:var(--ink-soft);line-height:1.3}
.cs-sym{display:block;font-size:22px;line-height:1.25}
.cs-val{display:block;font-size:12px;line-height:1.32;color:var(--ink)}

/* 7 · הגוונים בתאים ירדו. הם היו התחושה של "עיצוב מותנה באקסל", והסמלים
   ממילא נבדלים בצורה ובצבע. מה שנשאר הוא הסימן והמילים. */
.cs-c.is-unverified .cs-val{
  color:var(--ink-soft);font-style:italic;opacity:.75;
}
.cs-lg-unv{
  font-size:13.5px;font-weight:400;font-style:italic;
  color:var(--ink-soft);opacity:.75;
}

/* ── כותרת היעד ──────────────────────────────────────────────────────── */
.cs-name{display:block;font-family:var(--font-display);font-weight:400;font-size:25px;line-height:1.18;color:var(--ink)}
.cs-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.cs-tags:last-child{margin-bottom:0}
.cs-tag{
  font-size:11.5px;font-weight:600;font-style:normal;color:var(--sienna-deep);
  background:rgba(200,150,42,.20);border:1px solid rgba(156,63,22,.35);
  border-radius:999px;padding:2px 9px;white-space:nowrap;
}

/* ── חשוב לדעת ───────────────────────────────────────────────────────── */
/* עובדות שנכונות לחודשים ולשנים. כותרת העמודה כבר אומרת מה זה, ולכן
   אין תווית חוזרת בכל שורה. */
.cs-note{font-size:13px;line-height:1.55;color:var(--ink)}
.cs-note-txt{display:block}

/* ── שורת ייחוס (מובייל בלבד — תשתית שיתוף) ──────────────────────────── */
.cs-attr{font-size:11px;color:var(--ink-soft);opacity:.75;text-align:center}

/* ═══════════════════════════════════════════════════════════════════════
   ברירת מחדל — פריסת בלוקים. זו גרסת המובייל, והיא הראשית.
   ═══════════════════════════════════════════════════════════════════════ */
@media screen and (max-width:1099.98px){
  .cs{padding-inline:14px}
  .cs-table,.cs-table tbody{display:block;width:100%}
  .cs-table thead{display:none}
  .cs-group{display:block}
  .cs-group th{display:block;padding:44px 2px 11px}
  .cs-table tbody:first-of-type .cs-group th{padding-top:24px}

  .cs-row{
    display:grid;grid-template-columns:repeat(4,1fr);
    background:var(--paper-hi);
    border:1.5px solid var(--rule);border-radius:var(--r);
    overflow:hidden;margin-bottom:26px;
  }

  .cs-dest{
    grid-column:1/-1;text-align:start;
    padding:14px 15px 13px;border-bottom:1px solid var(--rule);
  }

  .cs-c{
    display:block;min-height:86px;padding:11px 6px 12px;text-align:center;
  }
  /* 7 · במובייל הרשת עצמה כבר מפרידה. נשאר קו אופקי אחד בין שתי
     השורות, ושום קו אנכי. */
  .cs-c:nth-of-type(-n+4){border-bottom:1px solid rgba(196,168,118,.3)}

  .cs-note{
    grid-column:1/-1;padding:12px 15px 13px;
    background:var(--paper);
    border-top:1px solid var(--rule);
    border-inline-start:4px solid var(--teal);
  }
  .cs-note:empty{display:none}

  .cs-attr{
    grid-column:1/-1;padding:7px 15px 8px;
    border-top:1px solid rgba(196,168,118,.5);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   טבלה — דסקטופ והדפסה.
   1100px ולא 1024px: ב־1024 עמודת "חשוב לדעת" יורדת מתחת לרוחב קריא
   ואז נוצרת גלילה אופקית, שאסורה. ראו הערת המימוש ב־PR.
   ═══════════════════════════════════════════════════════════════════════ */
@media screen and (min-width:1100px), print{
  .cs-table{display:table;width:100%;table-layout:fixed;border-collapse:collapse}
  .cs-table thead{display:table-header-group}
  .cs-table tbody{display:table-row-group}
  .cs-row,.cs-group{display:table-row}
  .cs-dest,.cs-c,.cs-note,.cs-h{display:table-cell;vertical-align:top}

  .cs-lab,.cs-attr{display:none}

  .cs-h{
    font-size:12px;font-weight:700;color:var(--ink-soft);text-align:center;
    padding:0 4px 10px;background:var(--paper);
    letter-spacing:.02em;
    /* border-collapse בולע גבולות על תא דביק, ולכן הקו מצויר כצל פנימי. */
    box-shadow:inset 0 -1px 0 var(--rule);
  }
  /* רוחב מפורש לכל עמודה. עמודת ההערה קיבלה את המקום שהיא צריכה כדי
     שהטקסט הארוך ביותר ייכנס בגובה השורה האחיד, במקום למתוח אותה. */
  .cs-h-dest{width:200px;text-align:start;padding-inline-start:4px}
  .cs-h-note{width:376px;text-align:start;padding-inline-start:16px}
  .cs-h-attr{display:none}
  .cs-table thead th:not(.cs-h-dest):not(.cs-h-note){width:70px}

  /* 4 · גובה אחיד לכל השורות. עמודת ההערה רחבה דיה כדי שהטקסט הארוך
     ביותר ייגלוש בתוך הגובה הזה במקום למתוח את השורה שלו. */
  .cs-row{height:92px}

  /* 8 · מקצב שורות. ניגודיות נמוכה מאוד — מספיק כדי לעקוב אחרי שורה,
     לא מספיק כדי להרגיש כמו גיליון. */
  .cs-row:nth-of-type(even) .cs-dest,
  .cs-row:nth-of-type(even) .cs-c,
  .cs-row:nth-of-type(even) .cs-note{background:rgba(46,32,20,.022)}

  /* 10 · ריחוף כשכבה מעל המקצב, כך שהזברה לא נמחקת. */
  .cs-row:hover .cs-dest,
  .cs-row:hover .cs-c,
  .cs-row:hover .cs-note{box-shadow:inset 0 0 0 100vmax rgba(46,32,20,.045)}

  /* 3 · שם היעד: אותו גודל, מיושר לקו אחד עם ערכי השורה, ועם אוויר
     בינו לבין הטבלה במקום קו. */
  .cs-dest{padding:14px 4px 14px;padding-inline-end:26px;vertical-align:middle}
  .cs-name{font-size:21px;line-height:1.25}

  /* 7 · בלי קווים אנכיים בין תאים. הרווח מפריד. */
  .cs-c{text-align:center;padding:12px 4px;vertical-align:middle}
  .cs-sym{font-size:18px}
  .cs-val{font-size:11px}

  .cs-note{
    padding:12px 16px;font-size:12px;line-height:1.5;vertical-align:middle;
  }
}

/* ‎≥760px יש מקום למקרא בשורה אחת. רשת 2×2 מתוחה על 1180px משאירה חצי
   פאנל ריק ונראית שבורה — כאן הוא נהיה סרגל אחד: תווית, ארבעה ערכים,
   והפעולות נדחפות לקצה. */
@media screen and (min-width:760px){
  .cs-legend-panel{
    display:flex;align-items:center;flex-wrap:wrap;
    gap:10px 26px;padding:12px 18px;
  }
  .cs-legend-h{margin-bottom:0;flex:none}
  .cs-legend{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;flex:1 1 auto}
  .cs-actions{border-top:0;padding-top:0;margin-inline-start:auto;flex:none}
}

/* סטיקי רק על מסך. body ב-guides.css מגדיר overflow-x:hidden, ולכן
   ה-sticky נמדד מול חלון הגלילה של המסמך — מתחת לבאנר. */
@media screen and (min-width:1100px){
  .cs-table thead th{position:sticky;top:47px;z-index:4}
}

/* ═══════════════════════════════════════════════════════════════════════
   הדפסה — A4 לרוחב, שני עמודים, בטוח בגווני אפור.
   הסמלים נבדלים בצורתם (✓ △ ✗ ○) ולא בצבעם, ולכן העמוד עובד גם
   במדפסת שחור־לבן. הרקעים נשמטים בכוונה — הם קישוט, לא נשא מידע.
   ═══════════════════════════════════════════════════════════════════════ */
@page{size:A4 landscape;margin:10mm}

@media print{
  html,body{background:#fff!important;color:#000;font-size:9pt}
  body{background-image:none!important}
  .g-banner,.g-crumb,.g-footer,.cs-actions,.cs-ask{display:none!important}
  .cs{max-width:none;padding:0}

  .cs-head{margin-bottom:4pt}
  .cs-title{font-size:16pt;margin-bottom:2pt}
  .cs-sub{font-size:8.5pt;margin-bottom:3pt;max-width:none;opacity:1}
  /* התאריך מופיע גם בנייר, באותה שפה שקטה כמו במסך. */
  .cs-date{font-size:8pt;color:#000;margin-bottom:3pt}

  /* המקרא נשאר סרגל אחד גם בנייר, בלי רקע */
  .cs-legend-panel{
    display:flex;align-items:center;flex-wrap:wrap;gap:3pt 14pt;
    background:transparent;border:0;border-top:.6pt solid #000;border-bottom:.6pt solid #000;
    border-radius:0;padding:3pt 0;margin-bottom:4pt;
  }
  .cs-legend-h{font-size:7.5pt;margin-bottom:0;flex:none}
  .cs-legend{display:flex;flex-wrap:wrap;font-size:8.5pt;margin:0;gap:3pt 14pt}
  .cs-lg-sym{font-size:10pt}
  .cs-lg-txt{font-size:8.5pt}

  .cs-table{font-size:8pt}
  .cs-h{font-size:7.5pt;padding:3pt 2pt;background:transparent;border-bottom:1pt solid #000;position:static}
  /* עמודת היעד רחבה דיה כדי שהשם והמטא לא יישברו לשלוש שורות — זה מה
     שקבע את גובה השורה, ואיתו את מספר העמודים. */
  .cs-h-dest{width:38mm}
  .cs-table thead th:not(.cs-h-dest):not(.cs-h-note){width:19mm}
  .cs-h-note{width:auto}

  /* גובה השורה האחיד שייך למסך. על נייר הוא היה מנפח כל שורה ומוסיף
     עמודים, ולכן כאן השורה חוזרת לגובה טבעי — וכך גם המקצב והריחוף. */
  .cs-row{height:auto;border-bottom:.4pt solid #666}
  .cs-row,.cs-group{break-inside:avoid}
  .cs-row:nth-of-type(even) .cs-dest,
  .cs-row:nth-of-type(even) .cs-c,
  .cs-row:nth-of-type(even) .cs-note{background:transparent!important}
  .cs-row:hover .cs-dest,.cs-row:hover .cs-c,.cs-row:hover .cs-note{box-shadow:none!important}
  .cs-dest{padding:4pt 1pt 4.5pt}
  .cs-name{font-size:10pt;line-height:1.15}
  .cs-tag{font-size:6pt;background:transparent;border:.5pt solid #000;color:#000;padding:.5pt 4pt}
  .cs-tags{margin-bottom:2pt}

  .cs-c{padding:3pt 1.5pt;border-inline-start:.4pt solid #999;background:transparent!important}
  .cs-sym{font-size:11.5pt;line-height:1.15}
  .cs-val{font-size:6.5pt;line-height:1.25;color:#000}
  .cs-c.is-unverified .cs-val{color:#000}

  .cs-note{font-size:7pt;line-height:1.35;padding:3pt 4pt 3.5pt;border-inline-start:.4pt solid #999;background:transparent!important}
  .cs-note-txt{color:#000}

  .cs-group th{font-size:10pt;color:#000;padding:8pt 1pt 3pt;border-bottom:1pt solid #000}
  .cs-table tbody:first-of-type .cs-group th{padding-top:4pt}

  /* עמוד 1 — צפון וגולן. עמוד 2 — השאר ובלוק האמון. */
  .cs-table tbody:first-of-type{break-after:page}

  .cs-trust{
    margin-top:7pt;font-size:8pt;border:.6pt solid #000;padding:5pt 8pt;
    max-width:none;break-inside:avoid;
  }
  .cs-trust h2{font-size:10pt;margin-bottom:2pt}
  .cs-trust-list li{font-size:8pt;line-height:1.4}
  .cs-trust a{color:#000;text-decoration:underline}

  a[href]::after{content:none!important}
}

/* ── בלוק האמון ──────────────────────────────────────────────────────── */
.cs-trust{
  margin-top:44px;padding:20px 0 0;max-width:70ch;
  border-top:1px solid var(--rule);
}
.cs-trust h2{
  font-family:var(--font-display);font-weight:400;font-size:18px;
  color:var(--band);margin-bottom:9px;
}
.cs-trust-list{list-style:none;display:grid;gap:7px}
.cs-trust-list li{
  position:relative;padding-inline-start:15px;
  font-size:13.5px;line-height:1.6;color:var(--ink);
}
.cs-trust-list li::before{
  content:"•";position:absolute;inset-inline-start:0;
  color:var(--teal);font-weight:700;
}
.cs-trust-list .cs-lg-sym{font-size:15px;vertical-align:-2px}
.cs-trust a{color:var(--sienna);text-decoration:none;border-bottom:1px solid rgba(156,63,22,.4)}
.cs-trust a:hover{border-bottom-color:var(--sienna)}

/* ── כרטיס "חסר יעד חשוב?" ──────────────────────────────────────────── */
.cs-ask{
  margin-top:30px;padding:18px 20px 6px;max-width:70ch;
  background:var(--paper-hi);border:1px solid var(--rule);border-radius:var(--r);
}
.cs-ask-h{
  font-family:var(--font-display);font-weight:400;font-size:18px;
  color:var(--band);margin-bottom:7px;
}
.cs-ask-sub{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin-bottom:4px}
/* הרכיב המשותף מביא כותרת, תת־כותרת ומסגרת משלו. הכרטיס הזה כבר אומר
   את שתי השורות בניסוח שנבחר, ולכן נשאר ממנו רק הטופס עצמו. */
.cs-ask .mdr{background:transparent;border:0;padding:0;margin:0 0 14px}
.cs-ask .mdr-title,.cs-ask .mdr-sub{display:none}

/* ── ללא אנימציות בשום מצב (CS-003) ─────────────────────────────────── */
.cs *,.cs *::before,.cs *::after{animation:none!important;transition:none!important}