/* ==========================================================================
   igm-site.css — שכבת העיצוב המשותפת לכל האתר · 05.11.2026
   ==========================================================================
   נטען בכל עמוד פרונט דרך ה-mu-plugin, ולא דרך functions.php.
   הוא מכיל רק פרימיטיבים: טוקנים, טבעת פוקוס, פינות ויעדי מגע.
   כל מה שהוא ספציפי לעמודי ההשוואה נשאר ב-hishtalmut-tokens.css, שנטען
   אחריו ולכן גובר עליו.
   ========================================================================== */

:root{
  --igm-cta:#2563EB;
  --igm-cta-hover:#1D4ED8;
  --igm-cta-press:#1E40AF;
  --igm-focus:#1C2033;
  --igm-r-field:10px;
  --igm-r-cta:12px;
  --igm-bg-backdrop:#F9F8FD;
}

/* --------------------------------------------------------------------------
   1. טבעת פוקוס
   --------------------------------------------------------------------------
   נמדד לפני: כפתור ממוקד החזיר outline:none — כלומר למי שמנווט במקלדת
   אין שום סימן איפה הוא נמצא. :focus-visible מראה את הטבעת לניווט מקלדת
   בלבד ולא בלחיצת עכבר, ולכן אין לזה מחיר ויזואלי לגולש הרגיל.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--igm-focus) !important;
  outline-offset:2px !important;
  border-radius:4px;
}

/* --------------------------------------------------------------------------
   2. פינות
   --------------------------------------------------------------------------
   נמדד לפני: שדות הטופס החזירו 30px, 0px ו-3px באותו עמוד. אחידות, ולא
   עיגול לשם עיגול.
   -------------------------------------------------------------------------- */
button,
input[type="submit"],
input[type="button"],
.btnpopNews,
.hisovCal{
  border-radius:var(--igm-r-cta);
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea{
  border-radius:var(--igm-r-field);
}

/* --------------------------------------------------------------------------
   3. יעדי מגע
   --------------------------------------------------------------------------
   רק על פקדים שהם באמת כפתור ראשי או שדה. במכוון לא על כל <button>:
   בטבלאות ההשוואה יש כפתורי אייקון של 26px (כוכב המועדפים, הסרת קופה
   מההשוואה), ו-44px היה הורס אותם. גם לא על קישורי טקסט בתוך פסקה —
   שם min-height פורם את השורה.
   -------------------------------------------------------------------------- */
input[type="submit"],
input[type="button"],
.btnpopNews,
.hisovCal,
.nextStep,
.btnConP button{
  min-height:44px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select{
  min-height:44px;
}

/* --------------------------------------------------------------------------
   4. מצבי CTA
   -------------------------------------------------------------------------- */
.btnpopNews:hover,
.hisovCal:hover,
.nextStep:hover{ background-color:var(--igm-cta-hover); }

.btnpopNews:active,
.hisovCal:active,
.nextStep:active{ background-color:var(--igm-cta-press); }

/* --------------------------------------------------------------------------
   5. גלילה אופקית
   --------------------------------------------------------------------------
   נמדד ב-1440: scrollWidth 1441 מול clientWidth 1434 — 7px שמגיעים
   מה-gutters של Bootstrap בהדר, וקיימים גם בלי הגיליון הזה. ב-375 אין
   גלישה בכלל.

   clip ולא hidden: hidden הופך את האלמנט למיכל גלילה, וזה בדיוק מה
   ששבר את סרגל ההשוואה הדביק. clip חותך בלי ליצור מיכל.
   -------------------------------------------------------------------------- */
html{ overflow-x:clip; }
/* ה-html לבדו לא הספיק: הגלילה הגיעה מה-body, שנמדד עדיין visible.
   נמדד אחרי הכלל על html בלבד — scrollLeft עדיין זז ל-1 ול--6. */
body{ overflow-x:clip; }

/* --------------------------------------------------------------------------
   6. "קרא עוד"
   --------------------------------------------------------------------------
   היה: p בגובה קבוע 40px מול line-height של 26.35px — חיתוך באמצע השורה
   השנייה — ומעליו .redMoreOria ב-position:absolute עם רקע #F0F0F0 שמסתיר
   את מה שנחתך. הרקע הזה גם נשבר ברגע ששינינו את האפור של העמוד.

   עכשיו: line-clamp חותך על גבול שורה, והכפתור יושב אחרי הטקסט בזרימה
   רגילה בלי רקע משלו.
   -------------------------------------------------------------------------- */
.textAfterTitleFirst{
  overflow:visible !important;
  display:block !important;
}
.textAfterTitleFirst > p{
  height:auto !important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.textAfterTitleFirst.is-expanded > p{
  -webkit-line-clamp:unset;
  overflow:visible;
}
.redMoreOria{
  position:static !important;
  background:none !important;
  display:inline-block;
  margin-top:6px;
  padding:2px 0;
  color:var(--igm-cta, #2563EB) !important;
  font-weight:500;
  text-decoration:underline;
  cursor:pointer;
}
.redMoreOria:focus-visible{
  outline:3px solid var(--igm-focus, #1C2033);
  outline-offset:2px;
}

/* --------------------------------------------------------------------------
   7. הירו: רקע אחיד בלי הגלים
   --------------------------------------------------------------------------
   .backgroundImageSec1 עוטף את ראש כל עמוד ונושא PNG של גלים. בתבנית
   ההשוואה כבר החלפנו אותו ברקע שטוח; שאר האתר נשאר עם הגלים, וזה חלק
   גדול מהסיבה שדף הבית נראה אחרת.

   front_page.css מגדיר את הגלים עם !important על .backgroundImageSec1
   שהוא (0,1,1). הגיליון הזה מוזרק ראשון ב-head, ולכן סלקטור זהה היה
   מפסיד בסדר המקור. body .backgroundImageSec1 הוא (0,1,2) ומנצח.
   -------------------------------------------------------------------------- */
body .backgroundImageSec1{
  background-image:none !important;
  background-color:var(--igm-bg-backdrop, #F9F8FD) !important;
}

/* --------------------------------------------------------------------------
   8. בורר המוצר בשורת החיפוש
   --------------------------------------------------------------------------
   נמדד ב-375: הבורר 98px עם 4px ריפוד מכל צד — 90px פנויים. "קרנות
   השתלמות" צורך 87px, והאפשרות הארוכה ביותר "קופות גמל להשקעה" צורכת
   105px. החץ הוא תמונת רקע של 20px שמצוירת בתוך אותה תיבה, ולכן הטקסט
   עובר מתחתיו.

   כאן העמודה נמדדת לפי התוכן במקום 98px קבועים, והבורר שומר מקום אמיתי
   לחץ. שדה החיפוש מקבל את מה שנשאר — placeholder שנחתך הוא בעיה קטנה
   בהרבה משם מוצר שאי אפשר לקרוא.
   -------------------------------------------------------------------------- */
@media (max-width:768px){
  body .con_search{
    grid-template-columns:auto minmax(0, 1fr) !important;
  }
  body .con_search .selectCon{
    width:auto !important;
  }
  body .con_search .smallSelect,
  body .con_search select{
    width:auto !important;
    min-width:132px;
    padding-left:28px !important;   /* מקום לחץ של 20px */
    padding-right:8px !important;
    text-overflow:clip;
  }
}

/* --------------------------------------------------------------------------
   9. ניגודיות הדירוג של ווידג'ט הביקורות
   --------------------------------------------------------------------------
   .wp-google-rating מגיע מתוסף widget-google-reviews בכתום #FB8E28, שנמדד
   2.21:1 מול הרקע — הרבה מתחת ל-4.5 הנדרשים לטקסט. #B45309 נמדד 4.75:1
   ונשאר כתום מזוהה. התיקון כאן ולא בתוסף, כי הוא לא שלנו לעריכה.
   -------------------------------------------------------------------------- */
/* התוסף קורא את הצבע מ-var(--star-color): הצבת המשתנה מנצחת בלי קרב
   ספציפיות. הכלל השני הוא רשת ביטחון מול .wp-gr .wp-google-rating (0,2,0). */
.wp-gr, .wpac, .grw-widget{
  --star-color:#B45309;
}
body .wp-gr .wp-google-rating,
body .wp-google-rating,
body .grw-rating{
  color:#B45309 !important;
}

/* --------------------------------------------------------------------------
   10. חצי הכרטיסים בבלוג שעולים על הכותרת
   --------------------------------------------------------------------------
   נמדד ב-375: בתוך .footerTextWhite יש <a> יחיד, ובתוכו .titePostC (הכותרת)
   ו-.buttonGo (החץ) כאחים.

   .titePostC מוגדר height:2.2em — 35px — עם overflow גלוי ו-line-height של
   24px. כותרת בת ארבע שורות נמדדה 4213 עד 4304, כלומר 91px, וגולשת מקופסה
   של 35px. החץ, שבא אחרי אותה קופסה בזרימה, מצויר ב-4247 — בדיוק על השורה
   השלישית והרביעית.

   לכן הכותרת נחתכת על גבול שורה בתוך הקופסה שלה, וה-<a> הופך לעמודת flex
   כך שהחץ תמיד יבוא אחרי הכותרת, בכל אורך.

   .cardPost .titePostC הוא (0,2,0) וגובר על הכלל ב-media query של gamel.css
   שמגיע עם height:2.7em !important.
   -------------------------------------------------------------------------- */
.footerTextWhite{
  height:auto !important;
  min-height:100px;
}
.footerTextWhite > a{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  width:100%;
}
.cardPost .titePostC,
.footerTextWhite .titePostC{
  height:auto !important;
  max-height:calc(3 * 1.35em);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-height:1.35;
  overflow:hidden;
}
.footerTextWhite .buttonGo{
  position:static !important;
  inset:auto !important;
  margin:0;
  flex:0 0 auto;
}