/* ============================================================
   mobile.css — רשת ביטחון רספונסיבית לכל דפי האתר.
   נטענת אחרונה (מוזרקת מ-appbar.js) כדי לנצח בשוויון ספציפיות.
   העיקרון: לא לעצב מחדש שום דף — רק למנוע גלישה אופקית,
   טקסט זעיר, ומטרות מגע קטנות מדי במסכים צרים.
   ============================================================ */

/* --- 1. אף אלמנט לא רחב מהמסך ------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: clip; }
/* clip ולא hidden — hidden על body שובר position:sticky בכרום */
@supports not (overflow: clip) { body { overflow-x: hidden; } }

img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
}
img, video { height: auto; }
/* קנבס/SVG של עץ המשפחה והמצפן מנוהלים בקוד — לא נוגעים בגובה */

/* ילדי flex/grid מסרבים להתכווץ מתחת לתוכן שלהם אלא אם כן: */
:where(.grid, .cards, .row, .flex, [class*="grid"], [class*="row"]) > * { min-width: 0; }

/* מחרוזות ארוכות בלי רווח (קישורים, מיילים, מונחים לועזיים) */
:where(p, li, td, th, dd, blockquote, .card, .panel) { overflow-wrap: anywhere; }
pre, code, kbd, samp { overflow-x: auto; max-width: 100%; }
pre { white-space: pre-wrap; word-break: break-word; }

/* טבלאות — עוטפות ב-JS ב-.mob-scroll, וכאן מקבלות גלילה משלהן */
.mob-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%; scrollbar-width: thin;
}
.mob-scroll > table { min-width: max-content; }

/* --- 2. מסכים צרים ------------------------------------------- */
@media (max-width: 640px) {
  /* iOS מזגזג ומגדיל את הדף כשנוגעים בשדה עם גופן קטן מ-16px */
  input, select, textarea { font-size: max(16px, 1em); }

  /* מטרות מגע: 40px זה הרף המעשי לאצבע */
  button, .btn, [role="button"], input[type="button"],
  input[type="submit"], select { min-height: 40px; }

  /* כותרות ענק שנחתכות במסך צר */
  h1 { font-size: clamp(1.45rem, 6.4vw, 2.2rem); line-height: 1.25; }
  h2 { font-size: clamp(1.2rem, 5.2vw, 1.7rem); line-height: 1.3; }

  /* ריפודים נדיבים של דסקטופ אוכלים חצי מסך */
  :where(.wrap, .container, main, .panel, .card, .box, .sheet) {
    padding-left:min(4vw, 18px);padding-right:min(4vw, 18px);padding-inline:min(4vw, 18px);
  }

  /* גלילה אופקית של פסי לשוניות במקום שבירה מכוערת */
  :where(.tabs, .nusach-bar, .chips, .filters) {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  :where(.tabs, .nusach-bar, .chips, .filters)::-webkit-scrollbar { display: none; }
  :where(.tabs, .nusach-bar, .chips, .filters) > * { flex: 0 0 auto; }

  /* אלמנטים שהוגדרו ברוחב פיקסלים קשיח */
  .mob-fluid { width: auto !important; max-width: 100% !important; }
}

/* מסכים צרים מאוד (iPhone SE ומטה) */
@media (max-width: 380px) {
  :where(.wrap, .container, main) { padding-left:12px;padding-right:12px;padding-inline:12px; }
}

/* --- 3. נוף בטלפון: הבר התחתון גוזל גובה יקר ------------------ */
@media (max-height: 460px) and (orientation: landscape) {
  html[data-appbar-fs] .lyq-foot { position: static; }
}