/* ============================================================
   קובץ עיצוב נייד — אתר "פינת החי"
   ------------------------------------------------------------
   איך להשתמש:
   הקובץ הזה "מתחבר" לכל עמוד באתר.
   כל עמוד צריך לכלול בראשו (בחלק ה-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;
  }
}