/* styles/pages/footer.css — תיק 09 (2026-07-21), פוטר דינמי + מבנה קבוע.
   קובץ גלובלי (footer.php נטען בכל עמוד) — נטען אוטומטית אחרי sapir.css (filemtime).
   מסתמך על טוקנים גלובליים בלבד (espresso/gold/berry/cream/sp-*/radius-*) — לא מגדיר מחדש.
   הבסיס (.site-footer צבע רקע, .footer-title, .footer-col צבע טקסט, .footer-social:hover)
   כבר קיים ב-sapir.css ואינו נוגע כאן. הקובץ הזה מוסיף רק פריסה/מרווח/רכיבים חדשים.

   22.7.2026 — כרטיסי התוכן (.footer-dynamic*) הוסרו מכאן לגמרי. הם עברו לתוך <main>
   עם עיצוב משלהם ב-styles/pages/related.css. מה שנשאר בפוטר הוא סילו קישורי טקסט בלבד.
*/

/* ─── פריסת הגריד הראשית ─── */
.site-footer .container { padding-top: var(--sp-8); padding-bottom: var(--sp-6); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
@media (min-width: 641px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--sp-6); }
  /* גרסת 4 עמודות (כשעמודת הסילו קיימת) — בטאבלט שתיים בשורה, בדסקטופ ארבע.
     ארבע עמודות ב-641px היו צרות מדי והיו שוברות את שמות הקטגוריות. */
  .footer-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .footer-grid--4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ─── עמודה 1: מותג ─── */
.footer-col--brand { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-logo-link img { max-height: 44px; width: auto; }
.footer-site-name { font-family: var(--font-heading); font-size: 1.3rem; color: var(--cream); font-weight: 700; }
.footer-tagline { font-size: .92rem; line-height: 1.5; max-width: 34ch; }
.footer-contact-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--cream); font-size: .92rem; width: fit-content; transition: var(--transition);
  min-height: 44px; /* 2026-07-23 (תיק layout): שטח מגע — הטקסט/אייקון היו ~26px גובה */
}
.footer-contact-link svg { flex: 0 0 auto; color: var(--gold); }
.footer-contact-link:hover { color: var(--gold-soft); }

/* ─── עמודה 2: ניווט — כותרת קבועה <h3>, זהה לעמודות הסילו והרשתות החברתיות.
   23.7.2026: הוסרו כל כללי ה-<details>/<summary> (קיפול, סימן −/+, ביטול קליק בדסקטופ)
   — הרכיב עצמו הוסר מ-footer.php כי הוא היה היחיד מבין שלוש כותרות הפוטר שהתנהג
   אחרת (קיפול + סימן ליד הכותרת), מה שנראה כבאג ולא כתכונה. ─── */
.footer-nav-list { list-style: none; margin-top: var(--sp-4); display: flex; flex-direction: column; gap: 0; }
/* assets/components.css מגדיר ".footer-col ul a" (ספציפיות 0-1-2) שמנצח ".footer-nav-list a" (0-1-1)
   בלי קשר לסדר קבצים — לכן מפרט יותר כאן (0-2-1) כדי לנצח בוודאות, בלי לגעת ב-components.css. */
.footer-col .footer-nav-list a {
  color: inherit; font-size: .95rem; transition: var(--transition);
  display: block; padding-block: var(--sp-3); /* 2026-07-23: שטח מגע ≥44px (היה ~26px) —
    חל גם על עמודת הסילו (ul משותף .footer-nav-list.footer-silo-list), gap הרשימה הוקטן
    ל-sp-1 כי הריפוד כאן מספק את עיקר המרווח */
}
.footer-col .footer-nav-list a:hover { color: var(--gold-soft); }

/* 27.7.2026 (סבב 02, סעיף 3.1) — טל: "הרווחים בין הקישורים בפוטר גדולים מדי".
   מה שיצר את הרווח: padding-block של sp-3 (12px למעלה+למטה) + gap של sp-1 בין
   פריטי הרשימה = 28px אוויר בין שתי שורות טקסט.
   מובייל/מגע: הריפוד נשאר sp-3 — הוא מה שמייצר את יעד המגע של 44px, שנעול.
   רק ה-gap אופס שם (48px→44px פסיעה).
   דסקטופ עם עכבר (pointer:fine): אין דרישת 44px, ולכן הריפוד יורד ל-sp-2 —
   הפסיעה יורדת מ-48px ל-36px, צמצום של 25 אחוז. */
@media (min-width: 1025px) and (pointer: fine) {
  .footer-col .footer-nav-list a { padding-block: var(--sp-2); }
}
/* נמדד בדפדפן אחרי השינוי: נשאר margin-bottom של 9.6px על ה-<li>, שמגיע מ-
   ".footer-col ul li" ב-assets/components.css (ספציפיות 0-2-1). זה היה הרווח
   האמיתי, לא ה-gap. הסלקטור כאן הוא 0-3-0 ולכן מנצח בוודאות, בלי !important
   ובלי לגעת ב-components.css. הריפוד על ה-<a> כבר מספק את כל שטח המגע. */
.footer-col .footer-nav-list li { margin-bottom: 0; }

/* ─── עמודה 3: סילו לפי סוג העמוד — קישורי טקסט בלבד, נראה זהה לעמודת הניווט ─── */
.footer-col--silo .footer-silo-list { margin-top: var(--sp-4); }
/* שמות קטגוריות ארוכים ("מתכונים לעוגיות ללא גלוטן") — שוברים בתוך העמודה, לא גולשים החוצה */
.footer-col--silo .footer-silo-list a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

/* ─── עמודה 4: רשתות חברתיות — מינימום 44px שטח מגע ─── */
.footer-social { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
/* assets/components.css מגדיר ".footer-social a" (ספציפיות 0-1-1, 34px) שמנצח ".footer-social-link"
   (0-1-0) בלי קשר לסדר קבצים. ".footer-social a.footer-social-link" (0-2-1) מנצח בוודאות. */
.footer-social a.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1.5px solid rgba(246,237,225,.2); border-radius: 50%;
  background: transparent;
  transition: var(--transition);
}

/* 29.7.2026 — עמודת "עקבו אחריי" הצטמצמה מ-1fr מתוך 4 ל-1fr מתוך 5.2 אחרי הוספת
   עמודת "הצטרפו לקהילה שלי" (footer-grid--5). נמדד בדפדפן ב-1280px לפני התיקון:
   עמודת .footer-social רוחבה 195.39px בפועל; 4 אייקונים × 44px + 3 מרווחי sp-3(12px)
   = 212px — גדול מהעמודה. האייקון הרביעי (יוטיוב) נפל לשורה שנייה (top 6007 מול
   5951 לשלושת האחרים). מ-1240px ומעלה רוחב ה-container קבוע (--container: 1240px),
   כך שהחישוב זהה בכל רוחב "1280 ומעלה".
   תיקון רוחב בלבד, בלי לגעת במספר העמודות: על דסקטופ עם עכבר (pointer:fine — אותו
   תנאי שכבר קיים למעלה בעמודת הניווט) מקטינים אייקון ל-40px ומרווח ל-sp-2(8px).
   מובייל/מגע לא נוגעים בהם — 44px נשאר נעול שם כשטח מגע מינימלי.
   4×40 + 3×8 = 184px, נכנס בנוחות בתוך 195px (11px רזרבה). */
@media (min-width: 1200px) and (pointer: fine) {
  .footer-social { gap: var(--sp-2); }
  .footer-social a.footer-social-link { width: 40px; height: 40px; }
}

/* ─── כפתור קבוצת הוואטסאפ, מתחת לאייקוני הרשתות (30.7.2026) ───
   קטן ומוצמד לרוחב העמודה, לא כפתור-הירו במידה מלאה. משתמש בטוקנים/מחלקת
   btn/btn-primary הקיימת של האתר (לא צבע/רדיוס מומצא) — רק גודל/מרווח מקומיים. */
.footer-whatsapp-note {
  /* צבע לא מוגדר כאן בכוונה - יורש מ-".footer-col p" הקיים ב-sapir.css (#a8927b),
     אותו גוון מעומעם שכל שאר טקסט העמודה כבר משתמש בו. */
  margin-top: var(--sp-5);
  margin-bottom: 0;
  max-width: 26ch;
  font-size: .85rem;
  line-height: 1.5;
}
.footer-whatsapp-btn {
  display: inline-flex;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  font-size: .85rem;
  white-space: nowrap;
}
/* אין טקסט הסבר (שדה ריק) - הכפתור חוזר לרווח הרגיל מהאייקונים */
.footer-social + .footer-whatsapp-btn {
  margin-top: var(--sp-5);
}

/* ─── ריפוד תחתון קבוע — פינוי מקום לכפתור הוואטסאפ הצף (23.7.2026) ───
   הוחלף כאן ב-CSS סטטי מה שקודם נעשה ב-JS (reposition() שהוסר מ-footer.php).
   הכפתור לא זז יותר בגלילה, ולכן במקום "להרים" אותו מעל הפוטר בזמן ריצה, פשוט
   משאירים לו תמיד מספיק מקום פנוי מתחת לשורה האחרונה של הפוטר.
   48px (גובה הכפתור) + 1.5rem/24px (ה-bottom הרגיל שלו ב-assets/components.css)
   = 72px = --sp-8 בדיוק. מוגבל למובייל/טאבלט קטן — בדסקטופ הפוטר רחב מספיק
   שהכפתור בפינה השמאלית לא מתקרב לתוכן הפוטר. body.has-sticky-buy כבר מטפל
   בעצמו (padding-bottom: 84px, שורה 370 ב-sapir.css) וגובר על הכלל הזה. */
@media (max-width: 640px) {
  .site-footer { padding-bottom: var(--sp-8); }
}

/* ─── Bottom Bar ─── */
.footer-bottom-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-5); padding-bottom: var(--sp-5);
  font-size: .82rem;
}
.footer-bottom-links { display: flex; align-items: center; gap: var(--sp-2); }
.footer-bottom-links a,
.footer-credit a {
  color: inherit; transition: var(--transition);
  display: inline-flex; align-items: center; min-height: 44px; /* 2026-07-23: שטח מגע */
}
.footer-credit a { color: var(--gold-soft); }
.footer-bottom-links a:hover { color: var(--gold-soft); }
.footer-bottom-sep { opacity: .5; }

@media (max-width: 640px) {
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-2); text-align: start; }
}