/* ============================================================
   JUDARO · Responsive refinements
   העמודים בנויים ב-inline styles, ולכן ההתאמות כאן נדרשות
   ב-!important. הקובץ נטען אחרי ה-<style> של כל עמוד.
   ============================================================ */

/* ---------- 1. הדר קומפקטי בטלפון ---------- */
@media (max-width: 640px) {
  header > div {
    min-height: 0 !important;
    padding-block: 11px !important;
    gap: 10px 16px !important;
  }
  header nav {
    gap: 8px 18px !important;
    row-gap: 10px !important;
  }
  header nav a {
    font-size: 15px !important;
  }
  /* הקישור לדף הבית מיותר בטלפון, הלוגו כבר מוביל לשם */
  header nav a[data-nav="home"] {
    display: none !important;
  }
  /* כפתור ה-CTA נשאר בשורה אחת */
  header nav a[href$="#beta"] {
    padding: 9px 16px !important;
    white-space: nowrap !important;
  }
}

/* ---------- 2. אזורי נגיעה ---------- */
@media (pointer: coarse) {
  .jd-foot-col li {
    margin-bottom: 4px;
  }
  .jd-foot-col li a,
  .jd-foot-bottom nav a {
    display: inline-block;
    padding-block: 6px;
  }
  header nav a {
    padding-block: 4px;
  }
}

/* ---------- 3. סימן המים ---------- */
/* במסך צר הוא יושב מתחת לכותרת ומתחרה בה. משאירים רמז בלבד. */
@media (max-width: 720px) {
  main section > span[aria-hidden="true"] {
    opacity: 0.45;
  }
}
@media (max-width: 460px) {
  main section > span[aria-hidden="true"] {
    opacity: 0.3;
  }
}

/* ---------- 4. טיפוגרפיה ומרווחים בטלפון ---------- */
@media (max-width: 640px) {
  /* שורות ארוכות מדי בעברית על מסך צר */
  main p {
    text-wrap: pretty;
  }
  /* הפוטר: שתי עמודות במקום שלוש, בלי דחיסה */
  .jd-foot-cols {
    gap: 24px 20px !important;
  }
  .jd-foot {
    padding-block: 36px 22px !important;
  }
}

/* מסכים צרים במיוחד: עמודה אחת בפוטר */
@media (max-width: 340px) {
  .jd-foot-cols {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- 5. טבלאות ורשימות רחבות ---------- */
@media (max-width: 640px) {
  main table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 6. ליטוש כללי ---------- */
/* קישורי גוף טקסט מקבלים קו תחתון עדין, כדי שיהיו מזוהים כקישור
   גם למי שלא מבחין בהבדל הצבע. לא חל על ניווט, פוטר וכפתורים. */
main article a:not([style*="background"]),
main p > a:not([style*="background"]) {
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
main article a:hover,
main p > a:hover {
  text-decoration-color: currentColor;
}

/* תמונות לא חורגות אף פעם */
img {
  max-width: 100%;
  height: auto;
}

/* ---------- 7. כפתורי פעולה בטלפון ---------- */
/* כפתור ראשי ברוחב מלא: יעד נגיעה גדול, ושוליים שלא נראים אקראיים. */
@media (max-width: 560px) {
  main a[href$="#beta"] {
    display: block !important;
    width: 100% !important;
    /* לעמודים האלה אין box-sizing גלובלי, ובלי זה הריפוד מוסיף רוחב */
    box-sizing: border-box !important;
    text-align: center !important;
    padding-block: 15px !important;
  }
}

/* ---------- 8. רשימת התחומים בדף הבית ---------- */
/* כל תחום שיש לו כתבה במרכז הידע הוא קישור. הכיתה jd-area נקבעת ב-link_domains.py.
   בורר לפי href בעברית נשבר בקלות בקידוד, ותופס גם קישורים אחרים לאותו נתיב. */
.jd-area > span:last-child {
  /* נוכח אבל שקט: מסמן שאפשר ללחוץ בלי להפוך את הרשימה לתפריט צועק. */
  opacity: .35;
  transition: opacity .15s ease, transform .15s ease;
}
.jd-area:hover > span:first-child {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.jd-area:hover > span:last-child,
.jd-area:focus-visible > span:last-child {
  opacity: 1;
  transform: translateX(-3px);
}

/* ---------- 9. נגן ההדגמה בדף הבית ---------- */
/* הסרטון מתארח באתר עצמו ונטען עם preload="none", ולכן אין כאן צד שלישי
   ואין בית אחד שיורד לפני שהמבקר לוחץ. הכפתור הוא רק שכבת עיצוב מעל הפוסטר. */
.jd-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(to bottom, rgba(24,36,48,.06), rgba(24,36,48,.26));
  transition: background .2s ease;
}
.jd-video-play:hover,
.jd-video-play:focus-visible {
  background: linear-gradient(to bottom, rgba(24,36,48,.14), rgba(24,36,48,.36));
}
.jd-video-play > span {
  width: clamp(58px, 13%, 82px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--action);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.24);
  transition: transform .2s ease;
}
/* משולש הפעלה מצביע ימינה בכל שפה, זו מוסכמה של נגנים ולא של כיוון קריאה,
   ולכן השוליים כאן פיזיים ולא לוגיים. */
.jd-video-play > span::before {
  content: "";
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--action-ink);
  margin-left: 5px;
}
.jd-video-play:hover > span,
.jd-video-play:focus-visible > span {
  transform: scale(1.07);
}
.jd-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--raised);
}
/* הכיתה קובעת display:flex, ולכן בלי השורה הזו התכונה hidden לא תסתיר כלום. */
.jd-video-play[hidden] {
  display: none;
}