.elementor-kit-8{--e-global-color-primary:#000000;--e-global-color-secondary:#BFB29C;--e-global-color-text:#000000;--e-global-color-accent:#BFB29C;--e-global-color-2a96af1:#FFFFFF;--e-global-typography-2075a9b-font-family:"neue-haas-grotesk-display";--e-global-typography-2075a9b-font-size:clamp(3.125rem, 1.875rem + 4vw, 5rem);--e-global-typography-2075a9b-font-weight:500;--e-global-typography-2075a9b-text-transform:uppercase;--e-global-typography-2075a9b-line-height:1.1em;--e-global-typography-4cf4226-font-family:"neue-haas-grotesk-display";--e-global-typography-4cf4226-font-size:clamp(1.375rem, 0.917rem + 1.467vw, 2.063rem);--e-global-typography-4cf4226-font-weight:500;--e-global-typography-4cf4226-line-height:1.3em;--e-global-typography-af5079a-font-family:"neue-haas-grotesk-display";--e-global-typography-af5079a-font-size:clamp(1.125rem, 0.75rem + 1.2vw, 1.6875rem);--e-global-typography-af5079a-font-weight:500;--e-global-typography-af5079a-line-height:1.6em;--e-global-typography-dde58bc-font-family:"neue-haas-grotesk-display";--e-global-typography-dde58bc-font-size:clamp(1.125rem, 0.833rem + 0.933vw, 1.5625rem);--e-global-typography-dde58bc-font-weight:500;--e-global-typography-dde58bc-line-height:1.5em;--e-global-typography-8a697ee-font-family:"neue-haas-grotesk-display";--e-global-typography-8a697ee-font-size:clamp(1.125rem, 0.833rem + 0.933vw, 1.5625rem);--e-global-typography-8a697ee-font-weight:500;--e-global-typography-8a697ee-line-height:1.5em;--e-global-typography-1e7fd6d-font-family:"neue-haas-grotesk-display";--e-global-typography-1e7fd6d-font-weight:500;--e-global-typography-1e7fd6d-line-height:1.5em;--e-global-typography-d81f02b-font-family:"richmond-text";--e-global-typography-d81f02b-font-size:22px;--e-global-typography-d81f02b-font-weight:normal;--e-global-typography-d81f02b-font-style:italic;--e-global-typography-d81f02b-line-height:1.6em;--e-global-typography-9ac30de-font-family:"richmond-text";--e-global-typography-9ac30de-font-size:17px;--e-global-typography-9ac30de-font-weight:normal;--e-global-typography-9ac30de-font-style:italic;--e-global-typography-9ac30de-line-height:1.6em;--e-global-typography-a720871-font-family:"neue-haas-grotesk-display";--e-global-typography-a720871-font-size:16px;--e-global-typography-a720871-font-weight:400;--e-global-typography-a720871-line-height:1.6em;--e-global-typography-695ce46-font-family:"neue-haas-grotesk-display";--e-global-typography-695ce46-font-size:15px;--e-global-typography-695ce46-font-weight:300;--e-global-typography-bcdf95d-font-family:"neue-haas-grotesk-display";--e-global-typography-bcdf95d-font-size:clamp(1.875rem, 1.053rem + 2.632vw, 3.125rem);--e-global-typography-bcdf95d-font-weight:500;--e-global-typography-bcdf95d-text-transform:uppercase;--e-global-typography-bcdf95d-line-height:1em;overscroll-behavior:none;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 a{color:#FFFFFF;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(min-width:1440px){.elementor-kit-8{--e-global-typography-9ac30de-font-size:22px;--e-global-typography-9ac30de-line-height:1em;--e-global-typography-695ce46-font-size:clamp(0.813rem, 1.12rem - 0.385vw, 1rem);--e-global-typography-695ce46-line-height:1.5em;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:431px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================
   Reveal Cards — Staggered Two-Phase Hover
   1) Hover-In: Outer shrink → (delay) Inner zoom w/ long tail
   2) Hover-Out: Outer grow → (delay) Inner return w/ long tail
   ========================================= */
:root{
  /* כניסה לפריים בגלילה */
  --reveal-translate: 22px;
  --reveal-duration: 740ms;
  --reveal-ease: cubic-bezier(.2,.8,.2,1);

  /* יעדים */
  --card-scale-hover: 0.950;  /* הקטנה חיצונית */
  --img-scale-hover: 1.13;    /* זום פנימי */

  /* Hover-IN (כניסה להובר) */
  --in-outer-duration: 900ms;                   /* מהיר יותר */
  --in-outer-ease: cubic-bezier(.25,.85,.25,1); /* רך ומהיר */
  --in-outer-delay: 160ms;

  --in-inner-duration: 900ms;                   /* ארוך יותר */
  --in-inner-ease: cubic-bezier(.25,.85,.25,1); /* רך */
  --in-inner-delay: 160ms;                       /* הדיליי המבוקש */

  /* Hover-OUT (יציאה מהובר) – "זנב" ארוך יותר */
  --out-outer-duration: 620ms;                  /* המיכל חוזר מהר */
  --out-outer-ease: cubic-bezier(.2,.8,.2,1);
  --out-outer-delay: 300ms;

  --out-inner-duration: 900ms;                 /* התמונה חוזרת לאט (זנב) */
  --out-inner-ease: cubic-bezier(.19,1,.22,1);  /* easeOutExpo-like */
  --out-inner-delay: 300ms;

  /* מבנה */
  --radius: 15px;
}

/* קלף – ברירת מחדל גלויה; JS מפעיל reveal */
.reveal-card{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  contain: content;
  backface-visibility: hidden;
  opacity: 1;
  transform: none;
  transition:
    transform var(--reveal-duration) var(--reveal-ease),
    opacity   var(--reveal-duration) var(--reveal-ease);
  will-change: transform, opacity;
}

/* מצב לפני כניסה (כש-JS פעיל) */
html.has-io .reveal-card{
  opacity: 0;
  transform: translateY(var(--reveal-translate));
}
html.has-io .reveal-card.is-inview{
  opacity: 1;
  transform: none;
}

/* ====== ברירת מחדל (משמשת ל-HOVER OUT) ======
   כשעוזבים את ההובר, חוזרים אל הערכים האלה, ולכן כאן מגדירים
   קצבים/דיליים של יציאה: קודם outer, ואז (עם delay) inner.
*/
.reveal-card :where(.elementor-widget-image){
  border-radius: inherit;
  overflow: hidden;
  transform-origin: center center;
  transform: translateZ(0);
  transition:
    transform var(--out-outer-duration) var(--out-outer-ease) var(--out-outer-delay);
  will-change: transform;
}
.reveal-card :where(.elementor-widget-image) img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transform-origin: center center;
  transform: translateZ(0);
  transition:
    transform var(--out-inner-duration) var(--out-inner-ease) var(--out-inner-delay),
    filter    var(--out-inner-duration) ease var(--out-inner-delay);
  will-change: transform, filter;
}

/* ====== בזמן :hover מחליפים לערכי Hover-IN ======
   קורה בסדר: קודם המיכל מצטמצם (ללא דיליי), אחריו (עם דיליי)
   התמונה נכנסת לזום עם משך ארוך יותר (אנימטיבי יותר).
*/
@media (hover:hover){
  .reveal-card.is-inview:hover :where(.elementor-widget-image){
    transform: scale(var(--card-scale-hover));
    transition:
      transform var(--in-outer-duration) var(--in-outer-ease) var(--in-outer-delay);
  }
  .reveal-card.is-inview:hover :where(.elementor-widget-image) img{
    transform: scale(var(--img-scale-hover));
    transition:
      transform var(--in-inner-duration) var(--in-inner-ease) var(--in-inner-delay),
      filter    var(--in-inner-duration) ease var(--in-inner-delay);
    /* חיות בצבעים: */
    /* filter: saturate(1.03) contrast(1.02); */
  }
}

/* רספונסיביות (עדינות במסכים קטנים) */
@media (max-width:1024px){
  :root{ --reveal-translate: 18px; }
}
@media (max-width:768px){
  :root{ --reveal-translate: 16px; --radius: 16px; }
}
@media (max-width:480px){
  :root{ --reveal-translate: 14px; --radius: 14px; }
}

/* נגישות */
@media (prefers-reduced-motion: reduce){
  .reveal-card,
  .reveal-card :where(.elementor-widget-image),
  .reveal-card :where(.elementor-widget-image) img{
    transition: none !important;
    transform: none !important;
  }
}

/* RTL */
[dir="rtl"] .reveal-card .caption,
[dir="rtl"] .reveal-card .badge{ direction: rtl; }

/* ===============================================
   TOGGLE SYSTEM - מתוקן לבעיית הלייאוט
   =============================================== */

:root{
  --toggle-lines: 5;        /* כמה שורות להציג */
  --line-height: 1.6;       /* line-height של הפסקה */
  --icon-size: 20px;
  --icon-gap: 10px;         /* הקטנה מ-20px ל-10px */

  /* חדש: שליטה על אנימציה */
  --toggle-duration: 550ms;
  --toggle-ease: cubic-bezier(.22,1,.36,1); /* "זנב" נעים (ease-out חזק) */
}

/* עטיפה */
.custom-toggle-container{
  position: relative;
  overflow: visible !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* טקסט – מצב Preview (מוגבל לשורות) */
.toggle-text.preview{
  display: -webkit-box;
  -webkit-line-clamp: var(--toggle-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;

  line-height: var(--line-height);
  margin: 0;
  position: relative;

  text-overflow: ellipsis;
  white-space: normal; /* שובר שורות */
  word-break: break-word;
  padding-right: calc(var(--icon-size) + var(--icon-gap)); /* עכשיו 30px */

  /* חדש: בסיס לאנימציה דו-כיוונית */
  max-height: calc(var(--toggle-lines) * 1em * var(--line-height)); /* fallback אם JS לא נטען */
  transition:
    max-height var(--toggle-duration) var(--toggle-ease),
    padding-right var(--toggle-duration) var(--toggle-ease);
  will-change: max-height;
  box-sizing: border-box !important;
}

/* מצב פתוח – מבטל קלאמפ ומפנה מקום מצד ימין */
.custom-toggle-container.open .toggle-text{
  -webkit-line-clamp: unset;
  text-overflow: unset;
  padding-right: 0;
  display: block; /* מבטל -webkit-box לצורך גובה טבעי */
  /* שים לב: לא קובעים כאן max-height; ה-JS מטפל בזה כדי לאפשר אנימציה חלקה */
}










/* כפתור/אייקון */
.toggle-icon{
  all: unset;
  position: absolute;
  bottom: 0;
  margin-bottom: 3px;
  right: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  background: url('/wp-content/uploads/2025/08/Arrow.svg') no-repeat center/contain;
  cursor: pointer;
  transition: transform var(--toggle-duration) var(--toggle-ease);
  transform-origin: center;
  /* תיקון לבעיית הלייאוט */
  backface-visibility: hidden !important;
  will-change: transform !important;
  pointer-events: auto !important;
  z-index: 10 !important;
  /* הוספות ל-div */
  display: block !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* סיבוב אייקון במצב פתוח */
.custom-toggle-container.open .toggle-icon{
  transform: rotate(180deg) translateZ(0) translateY(-5px);
  /* translateY עם ערך שלילי = למעלה */
  /* translateY עם ערך חיובי = למטה */
  /* אם רוצה גם ימינה/שמאלה, החלף ב: translate(-3px, -5px) */
}

/* לא לשנות מצב ב-hover/focus (כפי שביקשת) */
.toggle-icon:hover,
.toggle-icon:focus,
.toggle-icon:active{
  background: url('/wp-content/uploads/2025/08/Arrow.svg') no-repeat center/contain;
  outline: none;
}

/* נגישות: העדפת המשתמש לצמצם תנועה */
@media (prefers-reduced-motion: reduce){
  .toggle-text.preview,
  .toggle-icon{
    transition: none !important;
  }
}













/* === Stacked Accordion — minimal functional CSS (Elementor-safe, no chev) === */
.ss-accordion {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.ss-track {
  position: relative;
  width: 100%;
}

/* הפאנלים עצמם חייבים להיות absolute גם אם אלמנטור מוסיף עטיפות */
.ss-track .ss-pane {
  position: absolute !important;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  will-change: transform, height;
  min-height: 0 !important;
}

/* ביטול מרווחים אוטומטיים של קונטיינרים */
.ss-track,
.ss-pane {
  gap: 0 !important;
}

/* הכותרת – רק קליקית, בלי מרווחים חיצוניים */
.ss-head {
  display: block;
  margin: 0 !important;
  cursor: pointer;
  background: transparent;
  border: 0;
  min-height: 0 !important;
}

/* גוף הפאנל – נגלל פנימית כשהוא פתוח */
.ss-body {
  overflow: auto;
  background: transparent;
  border: 0;
  min-height: 0 !important;
}

/* עטיפה פנימית – למניעת בעיות width/padding */
.ss-body .inner {
  box-sizing: border-box;
}




/* ודא שהכותרת תמיד קליקה גם כשיש בה ילדים */
.ss-head { pointer-events: auto; }
.ss-head * { pointer-events: none; }
/* אם יש לינקים/כפתורים בתוך הכותרת – תן להם לעבוד רגיל */
.ss-head a, .ss-head button { pointer-events: auto; }





.ss-head { pointer-events:auto; }
.ss-head * { pointer-events:none; }
.ss-head a, .ss-head button { pointer-events:auto; }/* End custom CSS */