/* ─── עמודי אזורי שירות — גלריית עוגות + תיקון ניגודיות (05.08.2026) ───
   נטען אוטומטית מ-styles/pages/. אין צורך לגעת ב-functions.php.
   הקובץ אינו רשום ב-$scope ולכן נטען בכל האתר — הוא זעיר ומקונן תחת
   .generic-content / .sa-area-gallery בלבד. */


/* ═══ 1. תיקון ניגודיות — הבהרת האיסוף העצמי ═══
   ⛔ באג שנמדד בצילום מסך של טל, 5.8.2026: הטקסט בקופסת ההבהרה היה
   קרם-בהיר על רקע קרם, כמעט בלתי קריא.
   הסיבה אינה צבע שגוי ב-cake-notice.css — הצבע שם נכון (#3a2a1e).
   הסיבה היא **ספציפיות**:
       .generic-content p    → 0,1,1  ומגדיר color: var(--text-muted)
       .sa-cake-note__text   → 0,1,0
   הכלל הכללי מנצח את הכלל הספציפי, ו---text-muted ב-sapir.css הוא #cbb9a4.
   ⚠️ זו אותה משפחת כשל שכבר נמדדה כאן פעמיים (כפתור זהב בתוכן, קופסת
   ההבהרה ב-2.8). הכלל: כל רכיב שמושתל בתוך .generic-content חייב סלקטור
   שמנצח את .generic-content p — לא מספיק להגדיר לו צבע.
   ⛔ לא נעשה שימוש ב-important: הוא מסתיר את הבעיה במקום לפתור אותה,
   ואם יגיע כלל שלישי הוא ישבור גם אותו. */
.generic-content .sa-cake-note__text{
  color:#3a2a1e;
}
.generic-content .sa-cake-note__text strong{
  color:#3a2a1e;
}

/* גרסת הרקע הכהה של אותו רכיב — לשמר גם אותה מעל .generic-content p */
.generic-content .sa-section--dark .sa-cake-note__text,
.generic-content .sa-dark .sa-cake-note__text{
  color:var(--cream, #FBF6EE);
}


/* ═══ 1ב. הרווח הענק מתחת לכותרת ═══
   נמדד 5.8.2026, לא נוחש:
       .section        → padding-block: clamp(3.5rem, 7vw, 6.5rem)  = עד 104px
       .generic-content h2 → margin: 2rem 0 1rem                     = +32px
   סה"כ עד 136px של ריק מעל השורה הראשונה. הכותרת שנוספה ב-13:34 החמירה
   את זה ב-32px בדיוק, כי היא האלמנט הראשון וה-margin שלה לא נבלע.
   ⛔ מבנה ה-HTML של העמודים האלה זהה בתו לעמוד "תקנון" — נבדק בהשוואת
   מקור. אין כאן תקלה בתבנית, יש ריפוד גלובלי שנראה סביר בעמוד קצר
   ומוגזם בעמוד תוכן ארוך.

   ⚠️ ⛔ תיקון 5.8.2026 — ההנחה הראשונה כאן הייתה שגויה ונתפסה במדידה:
   ההיררכיה **אינה** שטוחה. שאילתה ל-post_parent מחזירה שלושה עמודים
   שאינם ילדים של 67 אלא נכדים:
       522 → הורה 59   |   523 → הורה 60   |   524 → הורה 62
   ובנוסף עמוד 67 עצמו אינו ילד של עצמו ולכן אין לו parent-pageid-67 כלל.
   סלקטור יחיד על parent-pageid-67 החמיץ ארבעה מתוך העמודים שהוא נועד לכסות.
   ⛔ הלקח: לא להסיק מבנה מ-URL אחד. body class נבדק בעמוד, post_parent
   נבדק במסד — שניהם, לפני שכותבים סלקטור.

   ⛔ במכוון לא נגעתי ב---section-pad ולא ב-.page-hero--short:
   הם חלים על כל האתר, ושינוי גלובלי כזה כבר שבר כאן אתר שלם בעבר. */
body.page-id-67 .section,
body.parent-pageid-67 .section,
body.parent-pageid-59 .section,
body.parent-pageid-60 .section,
body.parent-pageid-62 .section{
  padding-block-start:2.5rem;
}
body.page-id-67 .generic-content > :first-child,
body.parent-pageid-67 .generic-content > :first-child,
body.parent-pageid-59 .generic-content > :first-child,
body.parent-pageid-60 .generic-content > :first-child,
body.parent-pageid-62 .generic-content > :first-child{
  margin-block-start:0;
}


/* ═══ 1ג. כפתור הוואטסאפ הירוק ═══
   מקורו ב-functions.php, בבלוק <style> שמוזרק ב-wp_head בעדיפות 50:
       .prositive-wa-block{ background:#25D366 }
   הכפתור נושא גם btn btn-accent, אבל ההזרקה הידנית מנצחת אותו.
   ⛔ למה טל מעולם לא ראה אותו: השורטקוד קיים אך ורק ב-15 עמודי אזורי
   השירות. נבדק בשאילתה למסד. הוא אינו "כפתור גלובלי" — הוא כפתור
   של העמודים האלה בלבד, ולכן צביעתו כאן אינה שינוי גלובלי.
   ספציפיות 0,2,0 מנצחת את 0,1,0 של ההזרקה בלי תלות בסדר הטעינה,
   ולכן אין צורך ב-important. */
body.page-id-67 .prositive-wa-block,
body.parent-pageid-67 .prositive-wa-block,
body.parent-pageid-59 .prositive-wa-block,
body.parent-pageid-60 .prositive-wa-block,
body.parent-pageid-62 .prositive-wa-block{
  background:var(--gold, #c9a24b);
  color:#2a1c16;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
body.page-id-67 .prositive-wa-block:hover,
body.parent-pageid-67 .prositive-wa-block:hover,
body.parent-pageid-59 .prositive-wa-block:hover,
body.parent-pageid-60 .prositive-wa-block:hover,
body.parent-pageid-62 .prositive-wa-block:hover,
body.page-id-67 .prositive-wa-block:focus-visible,
body.parent-pageid-67 .prositive-wa-block:focus-visible,
body.parent-pageid-59 .prositive-wa-block:focus-visible,
body.parent-pageid-60 .prositive-wa-block:focus-visible,
body.parent-pageid-62 .prositive-wa-block:focus-visible{
  background:#dcb45f;
  color:#2a1c16;
}


/* ═══ 2. גלריית העוגות ═══ */
.sa-area-gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-4, 1rem);
  margin:var(--sp-5, 1.5rem) 0;
}

.sa-area-gallery figure{
  margin:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--radius-lg, 18px);
  background:rgba(251,246,238,.05);
  border:1px solid rgba(196,154,74,.22);
  transition:border-color .25s ease, transform .25s ease;
}

@media (hover:hover){
  .sa-area-gallery figure:hover{
    border-color:var(--gold, #C49A4A);
    transform:translateY(-3px);
  }
}

/* ⛔ .generic-content img מוסיף margin-block:1.5rem ו-border-radius —
   בתוך רשת זה שובר את היישור ואת פינות הכרטיס. האיפוס מקומי בלבד. */
.generic-content .sa-area-gallery img{
  display:block;
  inline-size:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  margin:0;
  border-radius:0;
}

/* ⚠️ figcaption אינו p, ולכן .generic-content p לא נוגע בו — אבל הוא כן
   יורש את צבע הגוף. נקבע במפורש זהב-בהיר: הרקע כאן כהה.
   ⛔ בכוונה **לא** var(--gold-light, ...): נבדק ואומת ש---gold-light אינו
   מוגדר בשום מקום בתבנית. ערך גיבוי ב-var() הוא רשת ביטחון למשתנה חסר,
   לא הצהרה — ברגע שמישהו יגדיר --gold-light בצבע כהה, הכיתוב ייעלם.
   הצבע כאן קשיח במכוון. */
.sa-area-gallery figcaption{
  padding:var(--sp-3, .75rem) var(--sp-3, .75rem);
  font-family:var(--font-body, 'Fredoka', system-ui, sans-serif);
  font-size:.875rem;
  line-height:1.4;
  text-align:center;
  color:#e0be7e;
}

/* מובייל — הקהל העיקרי. שתי עמודות: שש תמונות מלאות = גלילה אינסופית. */
@media (max-width:600px){
  .sa-area-gallery{
    grid-template-columns:repeat(2, 1fr);
    gap:var(--sp-3, .75rem);
  }
  .sa-area-gallery figcaption{
    padding:var(--sp-2, .5rem);
    font-size:.8125rem;
  }
}