/* ============================================================================
   הפוטר המשותף של האתר
   ----------------------------------------------------------------------------
   קובץ אחד לכל העמודים הציבוריים. עד היום הפוטר היה משוכפל בתוך ה-style של
   כל דף, בשלוש גרסאות שונות — ומי שערך אחד מהם השאיר את השאר מאחור.

   שני כללים שמחזיקים את הקובץ עצמאי, ולכן ניתן להכללה בכל דף:

     1. **צבעים מפורשים ולא משתני CSS.** ‏var(--teal-dark) קיים ב-index אבל
        לא בכל דף, ופוטר בלי רקע הוא פוטר בלתי קריא.
     2. **‎.footer-wrap ולא ‎.wrap‎.** ל-‎.wrap‎ יש רוחב מרבי אחר בכל דף
        (‏860px בדף הקוד האתי, ‏1180px בדף הבית), והפוטר צריך להיראות זהה
        בכולם.

   ההתנהגות (הרשמה לניוזלטר, קיפול קבוצות הניווט וענן החיפושים) יושבת ב-
   ‏assets/site-footer.js. התיעוד המלא — המבנה, המרווח האחיד והקיפול —
   ב-docs/site-footer.md.
   ============================================================================ */

/* ‏--fs-gap הוא **המרווח היחיד** בין חלקי הפוטר: בין הרצועה שבראשו לגוש
   המותג, בין גוש המותג לענן החיפושים, ובין ענן החיפושים לשורת הזכויות.
   עד עכשיו כל מעבר כזה נשא מספר משלו (‏26px, ‏24px, ‏34px), ולכן הפוטר
   נקרא כערימת בלוקים ולא כיחידה אחת — ובטלפון גם היה ארוך ממסך שלם.
   מי שמשנה מרווח בפוטר משנה אותו כאן, פעם אחת, ולא בשבעה מקומות. */
footer.site{
  --fs-gap:20px;
  background:#0d1b3d;color:#c3cde6;padding:var(--fs-gap) 0 14px;margin-top:var(--fs-gap);
  font-family:'Heebo',sans-serif;line-height:1.6;
}
footer.site *{box-sizing:border-box}
.footer-wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.footer-top{display:grid;grid-template-columns:1fr;gap:var(--fs-gap)}

.footer-brand{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.footer-brand .footer-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.footer-brand .footer-logo img{width:40px;height:auto;flex:0 0 auto;display:block}
/* ---- נעילת הלוגו, זהה לזו שבכותרת ----
   הפוטר נשא עד היום ניסוח משלו ("שוק הנדל״ן / של עפולה והסביבה") בשתי
   שורות שבורות ב-‎<br>‎, בזמן שהכותרת נושאת את הנעילה האמיתית: השם, קו זהב
   דק ברוחבו, ומתחתיו האזור במרווח אותיות פתוח. שני ניסוחים לאותו מותג
   באותו עמוד נקראים כשני אתרים. המבנה כאן זהה ל-‎.logo-word‎ ב-
   ‏design-system.css, ורק הצבעים הפוכים — לבן ואפור־כחלחל על ספיר כהה
   במקום דיו כהה על נייר — כי אותם ‎--ink‎ ו-‎--ink-muted‎ של הכותרת פשוט
   נעלמים כאן. הזהב של הקו הוא אותו ‎#c9a227‎ של כפתורי הפוטר.

   הגופן מפורש: ‏design-system.css נותן ל-‎.footer-brand .footer-logo span‎
   את גופן הכותרות, והכלל הזה ספציפי ממנו ולכן גובר — אבל ה-‎span‎ הפנימי
   עדיין נתפס בכלל ההוא, ולכן גם הוא מצהיר על הגופן שלו. */
.footer-brand .footer-logo .footer-logo-word{
  display:flex;flex-direction:column;align-items:stretch;
  font-family:'Heebo',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:20px;line-height:1.05;color:#fff;white-space:nowrap;
}
.footer-brand .footer-logo .footer-logo-word>span{
  font-family:'Heebo',sans-serif;
  font-size:9px;font-weight:600;letter-spacing:.18em;color:#94a3c6;
  margin-top:3px;padding-top:3px;border-top:1px solid #c9a227;
}
/* שתי שורות נפרדות: המשפט המתאר ומתחתיו משפט המפתח. הגופן מתכווץ מעט
   במסכים צרים כדי שהמשפט הראשון יישאר בשורה אחת ולא יישבר לשתיים. */
.footer-tagline{font-size:clamp(.68rem,3.1vw,.8rem);line-height:1.5;color:#94a3c6;margin:0}
.footer-tagline span{display:block}
.footer-tagline-strong{color:#e6ecf9;font-weight:600;margin-top:2px}

/* הכפתורים מוגדרים כאן במלואם ולא נשענים על ‎.btn‎ של הדף המארח — ‎.btn‎ לא
   קיים בכל דף, ובחלק מהדפים הוא בצבע אחר לגמרי */
.footer-cta{display:flex;flex-wrap:wrap;gap:7px}
.footer-cta a{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:700;padding:8px 14px;border-radius:0;text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.footer-cta .footer-btn-primary{background:#c9a227;color:#0d1b3d;border:1px solid #c9a227}
.footer-cta .footer-btn-primary:hover{background:#dcb63c;border-color:#dcb63c}
.footer-cta .footer-btn-ghost{background:transparent;color:#dbe3f5;border:1px solid rgba(255,255,255,.35)}
.footer-cta .footer-btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* ====== ארבע קבוצות הניווט ======
   במסך רחב אלו ארבע עמודות פרושות, כפי שהיו תמיד. בטלפון עשרים הקישורים
   האלה היו **שני שלישים מגובה הפוטר**: שתי עמודות על פני שתי שורות של
   קבוצות, כ-640px שהמבקר גולל דרכם כדי להגיע לשורת הזכויות. כאן הם
   מקופלים לארבע כותרות, בדיוק באותה שיטה שבה מקופל ענן החיפושים מתחת:
   ‎<details open>‎ ב-HTML, ו-‎site-footer.js‎ סוגר אותם במסך צר בלבד.

   למה ‎open‎ ב-HTML ולא ‎closed‎: בלי JS (וגם לסורקים) הכול פרוש, והקישורים
   נשארים ב-DOM בכל מצב — גם כשהקיפול פעיל — ולכן מנוע החיפוש והחיפוש
   בדפדפן מוצאים אותם תמיד. ‏3px ולא 5px בין הקישורים: שטח הנגיעה נשמר
   (‏13px בגובה שורה 1.6 הם 21px, ועם הריפוד 27px מלאי רוחב העמודה). */
.footer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px;align-content:start}
.footer-col > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:4px 0;margin-bottom:2px;
}
.footer-col > summary::-webkit-details-marker{display:none}
/* גבולות פיזיים ולא לוגיים, מאותה סיבה שמתועדת אצל ‎.footer-seo‎ מתחת:
   החץ הוא צורה גיאומטרית, ו-‎border-inline-end‎ היה מסובב אותו ב-RTL */
.footer-col > summary::after{
  content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:2px solid #aab6d6;border-bottom:2px solid #aab6d6;
  transform:rotate(45deg);margin-bottom:4px;transition:transform .18s ease;
}
.footer-col[open] > summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.footer-col > summary:focus-visible{outline:2px solid #c9a227;outline-offset:3px}
.footer-col h4{color:#fff;font-size:.82rem;margin:0;letter-spacing:.02em;font-weight:700}
.footer-col a{
  display:block;font-size:.8rem;color:#94a3c6;padding:3px 0;text-decoration:none;
  transition:color .15s ease;
}
.footer-col a:hover,.footer-col a:focus-visible{color:#fff}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);margin-top:var(--fs-gap);padding-top:12px;
  font-size:.72rem;color:#aab6d6;display:flex;flex-wrap:wrap;gap:6px 14px;
  align-items:center;justify-content:space-between;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.footer-legal a{color:#aab6d6;text-decoration:none;padding:2px 0}
.footer-legal a:hover,.footer-legal a:focus-visible{color:#fff;text-decoration:underline}
.footer-legal .sep{opacity:.45}

/* פרטי הקשר: אימייל ורשתות חברתיות. הכתובת והטלפון ירדו מהפוטר ב-29.9.2026
   לבקשת בעל האתר, והם נשארו בדף "אודות", בתקנון ובנתונים המובנים של דף
   הבית. הסגנון נשאר כללי, לכל שורת קשר. השורה עם האייקון היא grid
   ולא flex כדי שטקסט שנשבר לשתי שורות ייישר מתחת לעצמו ולא מתחת לאייקון.
   הכתובת, האימייל והרשתות באותה רצועה — בלוקים נפרדים היו מוסיפים שורות
   שלמות לגובה הפוטר במובייל. */
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;width:100%}
/* ‏display:contents ולא בלוק משלו: שלוש שורות קשר זו מתחת לזו הן שלוש
   שורות מלאות בטלפון, גם כשכל אחת תופסת חצי רוחב — והאייקון החברתי, שהוא
   אח שלהן ב-‎.footer-meta‎, נדחק אז לשורה רביעית משלו. בלי הקופסה הזו שלוש
   השורות והאייקון הם ארבעה פריטים באותו ‎flex‎ עוטף, ומתמלאים לפי הרוחב
   הקיים: בטלפון שתי שורות במקום ארבע, במסך רחב אחת. הצבע והגודל עדיין
   יורדים מכאן בירושה — ‎display:contents‎ מסיר את הקופסה, לא את הסגנון —
   וכל שורה עדיין נשברת בתוך עצמה מתחת לטקסט ולא מתחת לאייקון, כי
   ‎.footer-contact-row‎ עצמה נשארה grid. */
.footer-contact{display:contents;font-size:.8rem;color:#94a3c6}
/* ‏color מפורש: השורה היא ‎<p>‎, ו-design-system.css נותן לכל ‎p‎ את
   ‎--ink-soft‎ — דיו כהה, שנועד למשטח בהיר. בפוטר הכהה הכתובת יצאה
   ‎#4a5578‎ על ספיר (‏2.3:1) ונבלעה בו; רק המייל נראה, כי ‎a‎ שמתחתיו כן
   קיבל צבע משלו. הצבע כאן זהה לזה של הקישור, ולכן שתי השורות נקראות
   כזוג. */
.footer-contact-row{display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:start;margin:0;color:#94a3c6}
.footer-contact-row svg{width:16px;height:16px;margin-top:2px;fill:none;stroke:#aab6d6;stroke-width:1.8;display:block}
.footer-contact-row a{color:#94a3c6;text-decoration:none}
.footer-contact-row a:hover,.footer-contact-row a:focus-visible{color:#fff;text-decoration:underline}
.footer-social{display:flex;gap:8px}
.footer-social a{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);
  transition:background .15s ease,border-color .15s ease;
}
.footer-social a:hover,.footer-social a:focus-visible{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.footer-social svg{width:17px;height:17px;fill:#dbe3f5;display:block}

/* ====== רצועת הניוזלטר — אינה באוויר כרגע ======
   ‏11.9.2026: הרצועה ירדה מה-HTML של כל העמודים, ובמשבצת שלה יושב היום
   באנר מחפשי הנכס (‎.footer-lead‎ מתחת). שניהם ביקשו מאותו אדם את אותו
   דבר במילים אחרות, והבאנר שומר את החיפוש ולא רק את האימייל.

   הסימון נשאר כאן במכוון, ואינו "קוד מת": הטבלה, ה-Edge Function והטופס
   ב-site-footer.js נשארו כפי שהם, והחזרת הרצועה לעמוד היא הדבקת הבלוק
   ב-HTML שלו ותו לא. ראו docs/newsletter.md.

   שורה רוחבית בראש הפוטר: כותרת בצד אחד וטופס בצד השני, כדי שההרשמה
   תעלה מקום של שורה אחת ולא של בלוק שלם. */
/* רצועת ההרשמה היא לוח ספיר בתוך הפוטר הכהה ולא עוד שורה בתוכו: היא
   מבקשת פעולה, וכל השאר בפוטר הוא ניווט. */
.footer-news{background:#0e2a6b;padding:16px 18px;margin-bottom:var(--fs-gap)}
.footer-news-inner{display:grid;gap:10px;align-items:center}
.footer-news-text h4{color:#fff;font-size:.95rem;margin:0 0 3px;font-weight:700}
.footer-news-text p{margin:0;font-size:.76rem;color:#aab6d6}
.footer-news-form{display:flex;gap:8px;flex-wrap:wrap}
.footer-news-form input{
  flex:1 1 190px;min-width:0;padding:11px 14px;font-size:.85rem;
  border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.08);color:#fff;
  font-family:inherit;
}
.footer-news-form input::placeholder{color:#9aa8cc}
.footer-news-form input:focus{outline:2px solid #c9a227;outline-offset:1px;border-color:transparent}
.footer-news-form button{
  /* זהב עם טקסט כהה: הרצועה עצמה ספיר, וכפתור ספיר עליה לא נראה בכלל. */
  flex:0 0 auto;font-size:.82rem;font-weight:800;padding:11px 20px;
  border:1px solid #c9a227;background:#c9a227;color:#0d1b3d;cursor:pointer;font-family:inherit;
}
.footer-news-form button:hover:not(:disabled){background:#dcb63c;border-color:#dcb63c}
.footer-news-form button:disabled{opacity:.6;cursor:not-allowed}
.footer-news-msg{margin:0;font-size:.76rem;min-height:1.1em;color:#94a3c6}
.footer-news-msg[data-state="ok"]{color:#7fd8a8}
.footer-news-msg[data-state="error"]{color:#f2b0bb}
@media(min-width:760px){
  .footer-news-inner{grid-template-columns:1fr minmax(320px,420px);gap:12px 26px}
  .footer-news-msg{grid-column:2}
}

/* ====== ענן החיפושים הפופולריים ======
   קישורים פנימיים לחיפושים נפוצים — הבלוק שמביא תנועה אורגנית לעמודי
   התוצאות. במובייל הוא מקופל (‏details‎): חמישה־עשר צ׳יפים פרושים תופסים שם
   שמונה שורות. הקישורים נשארים ב-DOM גם כשהוא סגור, ולכן מנועי החיפוש
   והחיפוש בדפדפן מוצאים אותם בכל מצב. */
.footer-seo{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--fs-gap);padding-top:12px}
.footer-seo > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:4px 0;
}
.footer-seo > summary::-webkit-details-marker{display:none}
/* גבולות פיזיים ולא לוגיים: החץ הוא צורה גיאומטרית, ו-border-inline-end
   היה הופך אותו ב-RTL לחץ שמצביע הצידה במקום למטה */
.footer-seo > summary::after{
  content:"";width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid #aab6d6;border-bottom:2px solid #aab6d6;
  transform:rotate(45deg);margin-bottom:4px;transition:transform .18s ease;
}
.footer-seo[open] > summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.footer-seo > summary:focus-visible{outline:2px solid #c9a227;outline-offset:3px;border-radius:0}
.footer-seo h4{color:#fff;font-size:.82rem;margin:0;font-weight:700}
.footer-seo-links{display:flex;flex-wrap:wrap;gap:6px;padding-top:9px}
.footer-seo-links a{
  font-size:.75rem;color:#94a3c6;text-decoration:none;padding:5px 11px;border-radius:0;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.footer-seo-links a:hover,.footer-seo-links a:focus-visible{
  background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.4);
}

.footer-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ====== רצועת הפתיחה של הפוטר ======
   ‏.footer-lead‎ היא המקבילה של ‎.footer-news‎ בעמודים שבהם באנר מתקפל יושב
   בראש הפוטר במקום רצועת ההרשמה. העיצוב הפנימי של הבאנר נשאר של המארח
   (‏assets/buyer-banner.css או ה-style של הדף), וכאן יושב רק מה שהוא בתוך
   הפוטר: המרווח שמתחתיו, והעובדה שהוא נפרש מקצה לקצה.

   **מקצה לקצה ולא בתוך ‎.footer-wrap‎.** שאר חלקי הפוטר הם עמודות טקסט,
   ולכן הם נעצרים ב-1180px ממורכזים עם 18px משני הצדדים. הרצועה הזאת אינה
   עמודת טקסט אלא משטח, וכשהיא נעצרת שם נשארות שתי רצועות ספיר לצדה
   ורצועה שלישית מעליה — והיא נראית ככרטיס שהונח על הפוטר במקום כפתיחה
   שלו. ‏‎.footer-lead‎ מאוחרת כאן מ-‎.footer-wrap‎ ובאותה סלקטיביות, ולכן
   היא זו שגוברת.

   הריפוד העליון של הפוטר יורד לאפס רק בעמודים שבהם הרצועה באמת שם:
   בדף הנכס, בדף המשרד ובדף הסוכן/ת הבאנר יצא מהפוטר (ראו
   docs/site-footer.md), ושם הריפוד נחוץ כדי שגוש המותג לא יידבק לתוכן
   שמעליו. דפדפן ישן שאינו מכיר ‎:has()‎ מתעלם מהכלל ומקבל את הפוטר עם
   הריפוד — כלומר המצב שהיה עד היום, ולא שבירה. */
.footer-lead{margin-bottom:var(--fs-gap);max-width:none;padding-inline:0}
footer.site:has(.footer-lead){padding-top:0}

@media(min-width:560px){
  .footer-grid{grid-template-columns:repeat(4,1fr)}
  /* מ-560px ארבע הקבוצות פרושות תמיד (‏JS מסמן ‎open‎), ולכן הכותרת חוזרת
     להיות כותרת ולא כפתור — בדיוק כמו ענן החיפושים מ-760px */
  .footer-col > summary{cursor:default;padding:0;margin-bottom:6px}
  .footer-col > summary::after{display:none}
}
/* מ-760px ענן החיפושים פתוח תמיד (‏JS מסמן ‎open‎), ולכן החץ מיותר והכותרת
   חוזרת להיות כותרת ולא כפתור */
@media(min-width:760px){
  .footer-seo > summary{cursor:default}
  .footer-seo > summary::after{display:none}
}
/* גוש המותג עולה לצד הקישורים כשיש לו מספיק רוחב למשפט בשורה אחת.
   הסף ירד מ-1024px ל-900px: נעילת הלוגו החדשה צרה מהשם השבור לשתי שורות
   שהיה כאן, ולכן ‎340px‎ מספיקים לגוש — וכל מסך בין שני הסְפים מקבל פוטר
   בחצי הגובה (שתי עמודות זו לצד זו במקום זו מתחת לזו). */
@media(min-width:900px){
  .footer-top{grid-template-columns:minmax(340px,1fr) 2fr;gap:28px}
}

/* ====== אוקטובר 2026: הפוטר בשפה של דף הבית החדש, בכל הדפים ======
   הגלולות (החיפושים הפופולריים) עגולות, הכפתורים מעוגלים, ורשת הקישורים
   נושמת יותר בדסקטופ - כמו במוקאפ של דף הבית. ‏design-system.css מיישר
   פינות ב-‎!important‎ (‏.footer-cta a, ‏.footer-seo-links a) ונטען אחרי הקובץ
   הזה, ולכן הבוררים כאן נושאים ‎footer.site‎ - ספציפיות גבוהה יותר ולא
   סדר טעינה. הקישורים עצמם לא זזו (‏search-pages.ts ו-check_canonical תלויים
   בהם). */
footer.site .footer-seo-links a{border-radius:999px !important;padding:6px 14px;background:transparent}
footer.site .footer-seo-links a:hover,
footer.site .footer-seo-links a:focus-visible{border-color:rgba(229,199,106,.6);color:#fff}
footer.site .footer-cta a{border-radius:8px !important}
footer.site .footer-news-form input,
footer.site .footer-news-form button{border-radius:10px !important}
footer.site .footer-col a:hover,footer.site .footer-col a:focus-visible{color:#e5c76a}
@media(min-width:760px){
  footer.site .footer-col h4{font-size:.95rem}
  footer.site .footer-col a{font-size:.88rem}
}