/* ─── הבהרת עבודת יד — עוגות בהזמנה (02.08.2026) ───
   נטען אוטומטית מ-styles/pages/. אין צורך לגעת ב-functions.php.
   ⛔ פטל אינו צבע טקסט — כאן הוא פס צד ורקע בלבד. הטקסט אספרסו. */

.sa-cake-note{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3, .75rem);
  margin:var(--sp-5, 1.5rem) 0;
  padding:var(--sp-4, 1rem) var(--sp-4, 1rem);
  background:var(--cream-2, #F4EADB);
  border:1px solid var(--border, #E9DCC9);
  border-inline-start:3px solid var(--berry, #B23A5B);
  border-radius:var(--radius, 14px);
}

.sa-cake-note__icon{
  flex:0 0 auto;
  inline-size:20px;
  block-size:20px;
  margin-block-start:2px;
  color:var(--cocoa, #4A2E1C);
}

/* ⛔ באג ניגודיות שנמדד 2.8.2026 — יחס 1.1 לאחד, הטקסט היה בלתי נראה לחלוטין.
   הסיבה: כאן היה כתוב ‎color: var(--text, #3A2A1E)‎. מי שכתב את זה הניח
   ש---text פירושו "טקסט גוף כהה" ושהערך שאחרי הפסיק הוא מה שיחול.
   אבל בפרויקט הזה ברירת המחדל של האתר היא **כהה**, ו-styles/sapir.css מגדיר
   ‎--text: var(--cream)‎. המשתנה קיים, ולכן ערך הגיבוי אחרי הפסיק לעולם לא
   נכנס לתוקף — והתוצאה הייתה קרם על קרם.
   ⛔ הכלל: ערך גיבוי ב-var() הוא רשת ביטחון למשתנה **חסר**, לא הצהרה על מה
   שאמור לחול. על רקע בהיר קובעים צבע כהה מפורש, בלי משתנה. */
.sa-cake-note__text{
  margin:0;
  font-family:var(--font-body, 'Fredoka', system-ui, sans-serif);
  font-size:.9375rem;
  line-height:1.65;
  color:#3a2a1e;
}

/* מובייל — הקהל העיקרי */
@media (max-width:600px){
  .sa-cake-note{
    padding:var(--sp-3, .75rem);
    gap:var(--sp-2, .5rem);
    border-radius:12px;
  }
  .sa-cake-note__text{font-size:.875rem;line-height:1.6}
  .sa-cake-note__icon{inline-size:18px;block-size:18px}
}

/* מצב כהה של המערכת — הרכיב יושב גם על סקשנים כהים */
.sa-section--dark .sa-cake-note,
.sa-dark .sa-cake-note{
  background:rgba(251,246,238,.06);
  border-color:rgba(196,154,74,.35);
  border-inline-start-color:var(--gold, #C49A4A);
}
.sa-section--dark .sa-cake-note__text,
.sa-dark .sa-cake-note__text{color:var(--cream, #FBF6EE)}
.sa-section--dark .sa-cake-note__icon,
.sa-dark .sa-cake-note__icon{color:var(--gold, #C49A4A)}