/* ============================================================
   קובץ עיצוב נייד — אתר "פינת החי"
   ------------------------------------------------------------
   איך להשתמש:
   הקובץ הזה "מתחבר" לכל עמוד באתר.
   כל עמוד צריך לכלול בראשו (בחלק ה-head) את שתי השורות:
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="mobile.css">

   את השורות האלה אפשר להוסיף לכל העמודים אוטומטית
   עם הסקריפט hosafat_mobile.py שצירפתי.
   ============================================================ */

/* ---- 1. תמונות לעולם לא יחרוגו אל מחוץ למסך ---- */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* ---- 2. ביטול גלילה אופקית (כך שהעמוד לא "נזרק" ימינה-שמאלה) ---- */
body, html {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ---- 3. טבלאות לא יחרוגו מהמסך ---- */
table, td {
  max-width: 100% !important;
}

/* ---- 4. שילוב: כשהמסך צר (טלפון) - התאמת גודל טקסט ---- */
@media only screen and (max-width: 640px) {

  /* גודל בסיסי קריא ונוח */
  body {
    font-size: 17px !important;
  }

  /* טקסט רגיל - גודל אחיד ונוח לקריאה בטלפון */
  p, li, td, div, span, a, u, em, strong {
    font-size: 17px !important;
  }

  /* כותרות - גדולות וברורות */
  h1 { font-size: 25px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 20px !important; }

  /* מרחב נשימה מסביב לקצוות */
  body {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ---- 5. תוספת אוקטובר 2026 (גרסה 2): שום דבר לא ייחתך בטלפון ----
   סעיף 2 למעלה מסתיר כל מה שרחב יותר מהמסך, ולכן בטלפון
   נחתכו סרטונים, שורות ארוכות וטבלאות. הסעיף הזה מתאים את
   הדברים הרחבים לרוחב המסך, כך שלא נשאר מה להסתיר.
   הסעיף לא נוגע בקובצי התמונות.
   פועל רק במסך צר (טלפון). במחשב לא משתנה כלום.
   לביטול: למחוק מכאן ועד סוף הקובץ. */
@media only screen and (max-width: 640px) {

  /* סרטונים (יוטיוב ווידאו) - לא רחבים יותר מהמסך */
  video { max-width: 100% !important; height: auto !important; }
  iframe, embed, object { max-width: 100% !important; }

  /* מילים וכתובות ארוכות - עוברות לשורה הבאה במקום להיחתך */
  p, li, div, span, a, font, u, b, i, em, strong, h1, h2, h3, h4, h5, h6, blockquote { overflow-wrap: break-word !important; }
  td, th { overflow-wrap: break-word !important; }

  /* כתובת אינטרנט ארוכה בתוך טבלה - מותר לשבור אותה בכל מקום */
  td a, th a { overflow-wrap: anywhere !important; }

  /* טבלאות - מותאמות לרוחב המסך */
  td, th { white-space: normal !important; }
  pre { white-space: pre-wrap !important; }
  table { width: auto !important; }

  /* קופסאות ושורות שנקבע להן רוחב קבוע - לא רחבות יותר מהמסך */
  div[style*="width: 988"], div[style*="width:988"] { width: auto !important; height: auto !important; }
  [style*="width"]:not(img):not(video):not(iframe):not(embed):not(object) { max-width: 100% !important; box-sizing: border-box !important; }

  /* סרטון יוטיוב שהותאם למסך - שומר על הצורה הרחבה שלו */
  @supports (aspect-ratio: 1 / 1) {
    iframe[src*="youtube"] { aspect-ratio: 16 / 9; height: auto !important; }
  }
}