/* styles/pages/recipes.css — ארכיון מתכונים (page-recipes.php), תיק 2026-07-13 + סבב תיקונים 2026-07-14
   מסתמך על טוקנים גלובליים (sapir.css/base.css). אינו מגדיר מחדש --espresso/--gold/--sp-* וכו'.
   הערה: sapir.css כבר אוכף !important על .sa-recipe-grid .sa-recipe-card img/flex (יחס 4:3, עמודה, margin-top:auto בקישור) —
   כאן רק גריד/כלים/צ'יפים/תג-ללא-גלוטן/מונה/טען-עוד. */

/* FIX 7 (2026-07-14): רצועת כותרת מצומצמת — רק לעמודי מתכונים/ארכיונים (מחלקה נוספת, לא page-hero הגלובלי) */
.page-hero.page-hero-compact { padding: var(--sp-5) 0 var(--sp-6); }

/* כלים: חיפוש + צ'יפים */
.sa-tools { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.sa-search {
  display: flex; align-items: center; gap: var(--sp-2);
  background: rgba(246,237,225,.06); border: 1.5px solid var(--border);
  border-radius: var(--radius-pill); padding: .6rem 1.1rem; max-width: 360px;
}
.sa-search input {
  background: none; border: 0; outline: none; width: 100%;
  color: var(--cream); font-family: var(--font-body); font-size: .95rem;
}
.sa-search input::placeholder { color: var(--text-muted); }

.sa-chips { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.sa-chip {
  background: var(--espresso-2); border: 1.5px solid var(--border); color: var(--cream);
  border-radius: var(--radius-pill); padding: .5rem 1.1rem; font-family: var(--font-body);
  font-size: .88rem; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.sa-chip:hover { border-color: var(--gold); }
.sa-chip.on { background: var(--gold); color: var(--espresso); border-color: var(--gold); }
.sa-chip-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 .25rem; }

/* תיק 12 (2026-07-21) — מתג הפעלה/כיבוי אמיתי לסינון גלוטן, לא צ'יפ.
   טקסט קבוע שלא מתחלף ("הצג מתכונים ללא גלוטן בלבד"). דלוק = ברירת מחדל.
   שטח מגע ≥44px, ניגודיות ברורה, role="switch" + aria-checked (הנגישות מגיעה מ-<button> טבעי). */
.sa-gf-switch {
  display: flex; align-items: center; gap: .6rem;
  background: none; border: 0; cursor: pointer; padding: .5rem .2rem; min-height: 44px;
  font-family: var(--font-body); font-size: .88rem; font-weight: 600; color: var(--cream);
}
.sa-gf-switch-track {
  position: relative; flex: 0 0 auto; width: 46px; height: 26px; border-radius: 999px;
  background: var(--espresso-2); border: 1.5px solid var(--border); transition: var(--transition);
}
.sa-gf-switch-thumb {
  position: absolute; top: 2px; inset-inline-start: 2px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--cream); transition: var(--transition);
}
.sa-gf-switch[aria-checked="true"] .sa-gf-switch-track { background: var(--berry); border-color: var(--berry); }
.sa-gf-switch[aria-checked="true"] .sa-gf-switch-thumb { inset-inline-start: calc(100% - 21px); background: #fff; }
.sa-gf-switch:hover .sa-gf-switch-track { border-color: var(--gold); }
.sa-gf-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-pill); }

/* גריד: מובייל 2 קבוע, 3 מ-640, 4 מ-900 */
.sa-recipe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 640px) { .sa-recipe-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
@media (min-width: 900px) { .sa-recipe-grid { grid-template-columns: repeat(4, 1fr); } }

/* כרטיס — צבע/מסגרת/מרווח (יחס תמונה + flex-column כבר נאכפים גלובלית ב-sapir.css) */
.sa-recipe-grid .sa-recipe-card {
  position: relative; background: var(--espresso-2); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; transition: transform .25s ease, border-color .25s ease;
}
@media (hover: hover) {
  .sa-recipe-grid .sa-recipe-card:hover { transform: translateY(-4px); border-color: rgba(201,162,75,.5); }
}
.sa-recipe-grid .sa-recipe-card h3 { font-size: .95rem; padding: .8rem .9rem .2rem; color: var(--cream); }
.sa-recipe-grid .sa-recipe-more { display: block; padding: 0 .9rem .9rem; color: var(--gold-soft); font-size: .82rem; font-weight: 600; }

/* תג ללא-גלוטן */
.sa-gf-badge {
  position: absolute; top: .55rem; inset-inline-end: .55rem;
  background: var(--berry); color: #fff; font-size: .7rem; font-weight: 700;
  padding: .28rem .6rem; border-radius: var(--radius-pill); line-height: 1;
}

.sa-recipe-count { color: var(--text-muted); font-size: .88rem; margin: var(--sp-4) .1rem 0; }

/* FIX 4 (2026-07-14): כפתור "טען עוד" */
.sa-load-more { display: block; margin: var(--sp-6) auto 0; }

/* FIX 1 (2026-07-14) — קריטי: sapir.css אוכף `.sa-recipe-grid .sa-recipe-card { display:flex !important; }`
   (ספציפיות 0-2-0). כלל ה-.hide הגנרי למטה (0-1-0) הפסיד למרות ה-!important שלו כי ספציפיות מכריעה
   לפני !important כששני הצדדים !important. לכן: כלל ספציפי-יותר (0-3-0) שמנצח בוודאות. */
.sa-recipe-grid .sa-recipe-card.hide { display: none !important; }

/* כלל גנרי — לשאר האלמנטים (לא בתוך הגריד) */
.hide { display: none !important; }

@media (max-width: 640px) {
  .sa-tools { gap: var(--sp-3); }
}


/* ═══════════════════════════════════════════════════════════
   שורת הסינון — עיצוב מחדש (2026-07-22, Opus)

   תלונת הלקוחה: במסך 375 שדה החיפוש נחתך ("חיפוש נ"), החיפוש והמתג נדחסו
   לשורה אחת, הצ'יפים גלשו לשתי שורות, והכרטיס הראשון הופיע רק בתחתית המסך.

   ⚠️ הקובץ הזה נטען גלובלית (הוא מכיל את .page-hero המשמש בכל האתר).
      לכן כל כלל כאן ממוקד תחת .sa-tools--recipes / .sa-recipes-section /
      body.page-template-page-recipes ואינו דולף לעמודים אחרים.
═══════════════════════════════════════════════════════════ */

/* ─── חיסכון אנכי: הירו והסקשן מצטמצמים בעמוד הזה בלבד ─── */
body.page-template-page-recipes .page-hero.page-hero-compact {
  padding: var(--sp-4) 0 var(--sp-4);          /* היה sp-5/sp-6 = 24+32 → 16+16, חיסכון 24px */
}
.sa-recipes-section { padding-top: var(--sp-4); }  /* היה style מוטבע 2rem=32 → 16, חיסכון 16px */
@media (min-width: 900px) {
  body.page-template-page-recipes .page-hero.page-hero-compact { padding: var(--sp-5) 0 var(--sp-6); }
  .sa-recipes-section { padding-top: var(--sp-6); }
}

/* ─── מבנה: חיפוש · מתג · צ'יפים — נערמים, שום דבר לא נדחס ─── */
.sa-tools.sa-tools--recipes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);                  /* היה sp-6=32 → 16, חיסכון 16px */
}

/* החיפוש תופס את מלוא הרוחב במובייל — זו הסיבה שהוא נחתך קודם */
.sa-tools--recipes .sa-search-row { display: block; margin-bottom: 0; }
.sa-tools--recipes .sa-search {
  max-width: none;
  width: 100%;
  margin-bottom: 0;
  padding: .55rem 1rem;
}
.sa-tools--recipes .sa-search input { min-width: 0; width: 100%; }
.sa-tools--recipes .sa-search:focus-within { border-color: var(--gold); }

/* המתג בשורה משלו — שטח מגע מלא, טקסט לא נקטע */
.sa-tools--recipes .sa-gf-switch {
  align-self: flex-start;
  white-space: nowrap;
  padding-inline: 0;
}

/* הצ'יפים בשורה אחת נגללת במקום שתי שורות עוטפות — חיסכון של שורה שלמה */
.sa-tools--recipes .sa-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 2px;                          /* שלא ייחתך טבעת הפוקוס */
  margin-inline: calc(var(--sp-4) * -1);       /* גלילה עד קצה המסך */
  padding-inline: var(--sp-4);
}
.sa-tools--recipes .sa-chips::-webkit-scrollbar { display: none; }
.sa-tools--recipes .sa-chip { flex: 0 0 auto; scroll-snap-align: start; }

@media (min-width: 640px) {
  /* מ-640 יש מקום — החיפוש והמתג חוזרים לשורה אחת, הצ'יפים עוטפים כרגיל */
  .sa-tools.sa-tools--recipes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--sp-3);
  }
  .sa-tools--recipes .sa-search-row { grid-column: 1; }
  .sa-tools--recipes .sa-search { max-width: 360px; }
  .sa-tools--recipes .sa-gf-switch { grid-column: 2; align-self: center; }
  .sa-tools--recipes .sa-chips {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* ─── מצב דלוק/כבוי קריא יותר (תלונת הלקוחה: "לא ברור אם זה פועל") ───
   ⛔ ללא שינוי בלוגיקה: המקור היחיד למצב הוא aria-checked שה-JS מעדכן.
      ✓ / ‒ הם סימנים דקורטיביים ב-CSS, מוסתרים מקוראי מסך (הטראק aria-hidden). */
.sa-tools--recipes .sa-gf-switch-track::after {
  content: '‒';
  position: absolute;
  inset-inline-end: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  transition: var(--transition);
}
.sa-tools--recipes .sa-gf-switch[aria-checked="true"] .sa-gf-switch-track::after {
  content: '✓';
  inset-inline-end: auto;
  inset-inline-start: 7px;
  color: #fff;
}
/* כבוי — הטקסט מעומעם; דלוק — קרם מלא. ⛔ אף פעם לא ורוד כצבע טקסט. */
.sa-tools--recipes .sa-gf-switch[aria-checked="false"] .sa-gf-switch-text { color: var(--text-muted); }
.sa-tools--recipes .sa-gf-switch[aria-checked="true"]  .sa-gf-switch-text { color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  .sa-tools--recipes .sa-gf-switch-track,
  .sa-tools--recipes .sa-gf-switch-thumb,
  .sa-tools--recipes .sa-gf-switch-track::after { transition: none; }
}


/* ═══════════════════════════════════════════════════════════
   2026-07-22 (תיק K) — משוב גלוי למתג הגלוטן.
   תלונת הלקוחה: "לוחצים על המתג ולא רואים שקרה משהו".
   שני רכיבים: שורת מונה חיה מעל הגריד + הבזק קצר על הגריד בכל סינון.
   ⚠️ הקובץ הזה נטען גלובלית — כל כלל כאן ממוקד תחת .sa-recipes-section
      ואינו דולף לעמודים אחרים.
═══════════════════════════════════════════════════════════ */

.sa-recipes-section .sa-recipe-count--top {
  margin: 0 0 var(--sp-3);
  font-size: .92rem;
  font-weight: 600;
  color: var(--cream);            /* סקשן כהה — קרם, לא ורוד ולא כהה */
}

.sa-recipes-section .sa-recipe-grid.sa-grid-flash { animation: sa-grid-flash .42s ease both; }
@keyframes sa-grid-flash {
  from { opacity: .3; transform: translateY(5px); }
  to   { opacity: 1;  transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-recipes-section .sa-recipe-grid.sa-grid-flash { animation: none; }
}


/* ═══════════════════════════════════════════════════════════
   תיק 06 (28.07.2026) — איחוד תבנית ארכיון הקטגוריה (category.php) לעיצוב
   page-recipes.php + רשת 4 בשורה בדסקטופ בשני המקומות.

   ⚠️ הקובץ הזה נטען גלובלית (auto-enqueue styles/pages/*.css, ראה functions.php),
   אחרי styles/sapir.css (תלות wp_enqueue: prositive-style → per-page). category.php
   (קובץ חסום לעריכה כרגע? לא — הוא בהיקף, אבל .rc-grid מוגדר ב-styles/sapir.css
   שכן חסום) — לכן העדיפויות כאן: אותה ספציפיות (0,1,0), המאוחר-בטעינה מנצח, ולכן
   הכללים כאן חוקיים בלי !important. ═══════════════════════════════════════════ */

/* רשת 4 בשורה בדסקטופ ל-.rc-grid (ארכיון קטגוריה). sapir.css קובע ברירת מחדל 3
   בשורה מעל 900px, ו-2/1 מתחת — לא נוגעים שם, לא משנים את שבירת המובייל/טאבלט. */
@media (min-width: 901px) {
  .rc-grid { grid-template-columns: repeat(4, 1fr); }
}

/* position:relative חסר ב-.rc-grid .sa-recipe-card ב-sapir.css — נדרש כדי שתגית
   .sa-gf-badge (position:absolute) תמוקם ביחס לכרטיס עצמו, לא לאב רחוק יותר. */
.rc-grid .sa-recipe-card { position: relative; }

/* אכיפת יחס תמונה אחיד בשני התבניות — מונע את בעיית התמונות ה"זוועה" (גבהים לא
   אחידים) שחזרה בעבר. sapir.css כבר אוכף את זה על .rc-grid בלי !important; כאן
   מוסיפים !important כרשת ביטחון נוספת, לא מחליפים ערך קיים. */
.rc-grid .sa-recipe-card img,
.sa-recipe-grid .sa-recipe-card img {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════
   תיק 06 — אזור הספר "יותר מוכר" (template-parts/book-cta.php) בעמוד המתכונים
   בלבד. ⛔ הרכיב עצמו משותף גם עם page-about.php וגם עם single.php — לא עורכים
   אותו ולא את styles/pages/book-cta.css (מחוץ להיקף). scoped ל-body class
   page-template-page-recipes (אומת מול ה-HTML החי) כדי לא לדלוף לעמודים האחרים. */
body.page-template-page-recipes .book-cta-cover img { width: 210px; }
@media (min-width: 620px) {
  body.page-template-page-recipes .book-cta { grid-template-columns: 210px 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   2026-07-23 (תיק layout) — רווח מעל התמונה הראשית בעמוד מתכון בודד.
   תלונת הבעלים על צילום מסך: פירורי הלחם צמודים מדי לתמונה הראשית, "לא נראה טוב".

   ⚠️ הקובץ הזה נטען גלובלית בכל האתר (מכיל .page-hero המשותף) — לכן הכלל כאן
      ממוקד תחת .recipe-single, מחלקה שמתווספת ל-<article> רק ב-single.php
      (post_class('recipe-single'), שורה 35) ולא קיימת בשום קובץ תבנית אחר בערכה.
      פירורי הלחם (.breadcrumbs-wrap) הם רכיב חוזר בכל האתר, אבל כאן הם ילד של
      <article class="recipe-single"> — הסלקטור לא דולף לעמודים אחרים שמשתמשים
      באותו רכיב פירורים (כמו templates/page-*.php, ארכיוני קטגוריה וכו').
      אומת בגריפ: recipe-single מופיע רק ב-single.php. ראה גם דוח האימות בצ'אט. */
.recipe-single .recipe-img-wrap {
  margin-top: var(--sp-6); /* 2rem — תואם ל-margin-bottom הקיים באותו אלמנט (single.php),
                               כדי שהרווח מעל ומתחת לתמונה יהיה סימטרי */
}