/* ==========================================================================
   lt-hub - גיליון הסגנון של עמודי-המרכז (15 עמודים חולקים אותו)
   --------------------------------------------------------------------------
   מיקום: להוסיף לסוף law-tip-theme/style.css  (או לטעון כקובץ נפרד מהתוסף)
   גרסה : 1.0 · 28.07.2026

   ⚠️ הכלל: העמוד עצמו לא מכיל שום עיצוב. הוא מכיל HTML סמנטי עם המחלקות
      שכאן בלבד. שינוי עיצוב ל-15 העמודים = עריכה אחת בקובץ הזה.

   כל המשתנים כבר קיימים ב-:root של התמה. אנחנו לא מגדירים צבעים חדשים -
   רק צורכים את הקיימים, כדי שהעמודים לעולם לא ייצאו מהפלטה.

   צבע התחום: כל עמוד-מרכז מקבל class נוסף על העטיפה, למשל
   <div class="lt-hub lt-hub--insurance">, וכל ההדגשות בעמוד מקבלות
   את צבע התחום מהתמה. 17 התחומים כבר מוגדרים ב-:root.
   ========================================================================== */

.lt-hub{
  --hub: var(--lt-primary);            /* ברירת מחדל אם לא נבחר תחום */
  --hub-soft: var(--lt-accent);
}

/* --- הגנת גלישה ----------------------------------------------------------
   ביקורת על 67 העמודים לא מצאה היום מחרוזת ארוכה שחורגת, אבל התוכן ימשיך
   להתעדכן: מספר תיק, כתובת URL או שם לועזי ארוך שייכנסו מחר ישברו את
   הפריסה במובייל. שלוש שורות שמונעות את זה מראש. */
.lt-hub{ overflow-wrap:break-word; }
.lt-hub img{ max-width:100%; height:auto; }
.lt-hub a{ overflow-wrap:break-word; }

/* --- 17 צבעי התחום, ישירות מ-:root של התמה --- */
.lt-hub--insurance     { --hub: var(--lt-cat-insurance); }
.lt-hub--traffic       { --hub: var(--lt-cat-traffic); }
.lt-hub--family        { --hub: var(--lt-cat-family); }
.lt-hub--criminal      { --hub: var(--lt-cat-criminal); }
.lt-hub--realestate    { --hub: var(--lt-cat-realestate); }
.lt-hub--labor         { --hub: var(--lt-cat-labor); }
.lt-hub--commercial    { --hub: var(--lt-cat-commercial); }
.lt-hub--admin         { --hub: var(--lt-cat-admin); }
.lt-hub--military      { --hub: var(--lt-cat-military); }
.lt-hub--immigration   { --hub: var(--lt-cat-immigration); }
.lt-hub--consumer      { --hub: var(--lt-cat-consumer); }
.lt-hub--execution     { --hub: var(--lt-cat-execution); }
.lt-hub--insolvency    { --hub: var(--lt-cat-insolvency); }
.lt-hub--tax           { --hub: var(--lt-cat-tax); }
.lt-hub--civil         { --hub: var(--lt-cat-civil); }
.lt-hub--cyber         { --hub: var(--lt-cat-cyber); }
.lt-hub--constitutional{ --hub: var(--lt-cat-constitutional); }

/* --- פתיח --- */
.lt-hub-lede{
  font-size:1.15rem; line-height:1.8; color:var(--lt-text);
  border-right:4px solid var(--hub);
  background:var(--lt-bg-alt);
  padding:18px 20px; margin:0 0 1.8rem;
}

/* --- רשת הקוביות --- */
.lt-hub-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px; margin:1.6rem 0;
}
.lt-hub-card{
  border:1px solid var(--lt-border);
  border-top:3px solid var(--hub);
  border-radius:var(--lt-radius);
  background:var(--lt-white);
  box-shadow:var(--lt-shadow);
  padding:18px 20px;
  transition:box-shadow var(--lt-transition);
}
.lt-hub-card:hover{ box-shadow:var(--lt-shadow-hover); }
.lt-hub-card h3{ margin:0 0 .5rem; font-size:1.05rem; color:var(--lt-dark); }
.lt-hub-card p { margin:0 0 .8rem; color:var(--lt-text-medium); font-size:.95rem; }

/* --- מדרגות ההליך --- */
.lt-hub-steps{ counter-reset:lthub; list-style:none; padding:0; margin:1.6rem 0; }
.lt-hub-steps li{
  counter-increment:lthub; position:relative;
  padding:0 54px 20px 0; margin-right:18px;
  border-right:2px solid var(--lt-border);
}
.lt-hub-steps li:last-child{ border-right-color:transparent; padding-bottom:0; }
/* ⚠️ ההיסט חייב להיות שווה בדיוק ל-margin-right של ה-li (18px). היה כאן
   -19px, כלומר העיגול חרג בפיקסל אחד מעבר לשולי הרשימה. לא נראה לעין
   בזכות ה-padding של המכל, אבל במכל בלי padding זה נחתך. */
.lt-hub-steps li::before{
  content:counter(lthub); position:absolute; right:-18px; top:-2px;
  width:36px; height:36px; border-radius:50%;
  background:var(--hub); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.95rem;
}
.lt-hub-steps strong{ display:block; font-size:1.02rem; margin-bottom:2px; color:var(--lt-dark); }

/* --- הערה מודגשת --- */
.lt-hub-note{
  background:var(--lt-bg-alt);
  border-right:4px solid var(--hub);
  border-radius:var(--lt-radius);
  padding:16px 20px; margin:1.6rem 0;
}
.lt-hub-note strong{ color:var(--hub); }

/* --- שאלות נפוצות --- */
.lt-hub-faq{ margin:1.4rem 0; }
.lt-hub-faq details{
  border:1px solid var(--lt-border); border-radius:var(--lt-radius);
  margin:.6rem 0; background:var(--lt-bg-alt);
}
.lt-hub-faq summary{
  padding:14px 18px; font-weight:600; cursor:pointer;
  color:var(--lt-dark); list-style:none;
}
.lt-hub-faq summary::-webkit-details-marker{ display:none; }
.lt-hub-faq summary::after{
  content:"+"; float:left; color:var(--hub); font-weight:700; font-size:1.2rem; line-height:1;
}
.lt-hub-faq details[open] summary::after{ content:"\2212"; }
.lt-hub-faq details p{ padding:0 18px 15px; margin:0; color:var(--lt-text-medium); }

/* --- קריאה לפעולה --- */
.lt-hub-cta{
  background:var(--lt-dark); color:#fff;
  border-radius:var(--lt-radius);
  padding:30px 26px; margin:2.4rem 0 1rem; text-align:center;
}
.lt-hub-cta h2{ color:#fff !important; border:0 !important; margin:0 0 .5rem !important; padding:0 !important; }
.lt-hub-cta p { color:#c9d3e0; max-width:52ch; margin:0 auto 1.2rem; }
.lt-hub-phone{
  display:inline-block; font-size:1.85rem; font-weight:800;
  color:#fff; text-decoration:none; letter-spacing:1px; margin-bottom:.4rem;
}
.lt-hub-btn{
  display:inline-block; padding:12px 26px; border-radius:var(--lt-radius);
  background:var(--hub); color:#fff !important; text-decoration:none; font-weight:700;
}

/* --- גילוי נאות --- */
.lt-hub-disc{
  font-size:.86rem; color:var(--lt-text-light);
  border-top:1px solid var(--lt-border); margin-top:2.4rem; padding-top:14px;
}

/* --- מובייל --- */
@media (max-width:600px){
  .lt-hub-grid{ grid-template-columns:1fr; }
  .lt-hub-cta{ padding:24px 18px; }
  .lt-hub-phone{ font-size:1.5rem; }
}

/* --- טבלאות -> קוביות ---------------------------------------------------
   טבלה עם 3 עמודות לא נכנסת למסך נייד, וגלילה אופקית בתוך עמוד היא חוויה
   גרועה: המשתמש לא יודע שיש עוד תוכן מימין, ובדסקטופ זה גם נראה צר וזר
   לשאר העמוד. במקום גלילה - הטבלה מוצגת כרשת קוביות:
     דסקטופ : קוביות זו לצד זו, כמו lt-hub-grid
     נייד    : קובייה אחת בשורה, שתי שורות בתוכה (כותרת + הסבר)
   הפתרון ב-CSS בלבד ובכוונה, כדי שיחול על עמודים שכבר עלו בלי לדחוף מחדש. */
.lt-hub-table{ margin:1.4rem 0; }

.lt-hub-table table,
.lt-hub-table thead,
.lt-hub-table tbody,
.lt-hub-table tr,
.lt-hub-table th,
.lt-hub-table td{ display:block; width:auto; }

.lt-hub-table thead{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;   /* נגיש, לא נראה */
}

.lt-hub-table table{ border-collapse:separate; border-spacing:0; min-width:0; }

.lt-hub-table tbody{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}

.lt-hub-table tr{
  border:1px solid var(--lt-border);
  border-top:3px solid var(--hub);
  border-radius:var(--lt-radius);
  background:var(--lt-white);
  box-shadow:var(--lt-shadow);
  padding:16px 18px;
  transition:box-shadow var(--lt-transition);
}
.lt-hub-table tr:hover{ box-shadow:var(--lt-shadow-hover); }

.lt-hub-table td{
  border:0; padding:0; text-align:right;
}
.lt-hub-table td:first-child{
  font-weight:600; font-size:1.02rem; color:var(--lt-dark);
  margin-bottom:6px; line-height:1.45;
}
.lt-hub-table td:first-child a{ font-weight:600; }
.lt-hub-table td + td{
  color:var(--lt-text-medium); font-size:.94rem; line-height:1.6;
}
.lt-hub-table td:empty{ display:none; }

@media (max-width:600px){
  .lt-hub-table tbody{ grid-template-columns:1fr; }
  .lt-hub-table tr{ padding:14px 16px; }
}