/* ── GRUMI skin לכלים המוטמעים (family-tools) ──────────────────────────────
   שכבת override אחת לכל 31 הכלים. הכלים נבנו כדפי-נחיתה רחבים (טיפוגרפיה
   ענקית + נאו-ברוטליזם), אבל חיים תמיד בתוך iframe ברוחב טלפון בגרומי — אז
   כאן: פלטת GRUMI, טיפוגרפיה/מרווחים שפויים לנייד, תיקון באג גובה-כרטיס,
   הסתרת לוגו קיקבו הכפול, ודמות גרומי צפה ומונפשת. */

:root{
  /* בסיס GRUMI */
  --kk-cream:#fff7f1; --kk-cream-deep:#f4e4d8; --kk-cream-warm:#ffeee2;
  --kk-ink:#1e2a3a; --kk-ink-soft:#37465c; --kk-ink-mid:#5d6b80;
  --kk-text-muted:#8a95a5; --kk-text-secondary:#4a5568;
  --kk-surface-page:var(--kk-cream);
  --kk-font-display:'Varela Round','Assistant',Arial,sans-serif;
  --kk-border-strong:rgba(30,42,58,.14);
  --kk-border-default:rgba(30,42,58,.09);

  /* ה-ramps הישנים (ורוד-אבק/כחלחל) → כתום GRUMI + תכלת רגועה */
  --kk-peach-50:#fff3ec; --kk-peach-100:#ffe4d6; --kk-peach-200:#ffc9ad;
  --kk-peach-300:#ffac85; --kk-peach-500:#ff8b64; --kk-peach-600:#d95f38; --kk-peach-700:#b34a28;
  --kk-mint-50:#f1f6fd; --kk-mint-100:#e0ecfb; --kk-mint-300:#a7c7f4;
  --kk-mint-500:#5d84bd; --kk-mint-700:#3a5a8c;

  /* טיפוגרפיה שפויה לנייד — הקצה העליון היה 48–112px (מפלצתי ב-iframe צר) */
  --kk-text-2xl:24px; --kk-text-3xl:27px; --kk-text-4xl:31px;
  --kk-text-5xl:37px; --kk-text-6xl:44px; --kk-text-7xl:50px;

  /* מרווחים — כיווץ הקצה הגדול (היה 40–96px) */
  --kk-space-8:26px; --kk-space-10:30px; --kk-space-12:34px;
  --kk-space-16:40px; --kk-space-20:48px; --kk-space-24:56px;

  --kk-radius-lg:20px; --kk-radius-xl:24px; --kk-radius-2xl:26px;
}

/* ── באג הפרופורציות: הכרטיסים היו בגובה 200px ──
   הכלל `.stat{flex:1 1 200px}` נועד לרוחב שווה בשורה, אבל בפריסת עמודה בנייד
   ה-flex-basis הופך ל-200px גובה. איפוס לגובה-תוכן. (מחלקות *-stat בכל הכלים) */
[class$="stat"],[class$="-stat"],[class~="stat"]{
  flex:0 0 auto !important; min-height:0 !important;
}

/* ── לוגו קיקבו הופיע פי-3 בכל כלי (פס עליון + hero + פוטר) ──
   מסתירים את השניים העליונים בלבד. לוגו הפוטר נשאר — GRUMI משרת את קיקבו,
   ולכן קרדיט החסות עם הלוגו חייב להופיע בסוף כל דף (הנחיית ג'ון, 5.8.2026). */
img[alt="קיקבו"],.kb-brand-strip,.kk-logo:not(.kk-logo--footer){display:none !important;}
/* breadcrumb "קיקבו › ..." בראש הכלי — מיותר בתוך האפליקציה (יש כפתור חזרה) */
[class*="breadcrumb"]{display:none !important;}

/* ── לינקים חיצוניים שבורים/מיותרים לאתר קיקבו ("לכל הכלים" / "חזרה לאתר") ──
   בתוך האפליקציה הניווט הוא של גרומי; קישורי-חוץ לאתר החנות רק נראים שבורים. */
a[href*="kikkaboo.co.il"]{display:none !important;}

/* ── צ'קליסט (תיק לידה) — בנייד ה-media query של הכלי שבר כל פריט לשתי שורות
   (שם בשורה מלאה + כפתורים בשורה מלאה מתחת) → כרטיסים ארוכים. מחזירים לשורה אחת. */
.checklist-item{flex-wrap:nowrap !important;align-items:center !important;box-shadow:var(--shadow-chip,0 3px 10px -2px rgba(30,42,58,.1)) !important;}
.checklist-item .item-name{width:auto !important;margin-bottom:0 !important;}
.checklist-item .status-btns{width:auto !important;flex-shrink:0 !important;}
.checklist-item .status-btn{width:34px !important;height:34px !important;box-shadow:0 2px 5px rgba(30,42,58,.14) !important;}

/* ── פוטר: GRUMI המותג, ומתחתיו קרדיט החסות עם לוגו קיקבו ──
   הסדר הוא הסיפור: GRUMI → "בחסות" → הלוגו בסוף. הלוגו הוא קישור נמדד
   (/go/shop?p=tool_footer), כי חסות שאי-אפשר לספור היא חסות שאי-אפשר להצדיק. */
.kb-footer .kb-footer-tag::before{
  content:"GRUMI · גדלים יחד"; display:block;
  font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:16px;
  color:#1e2a3a; margin-bottom:6px;
}
.kb-footer .kb-sponsor{
  display:inline-flex !important; align-items:center; gap:8px;
  text-decoration:none !important; margin-top:2px;
}
/* !important על המידות: ה-CSS של כל כלי ממוקד ב-id (#vaccinations .kk-logo--footer)
   ולכן גובר על סלקטור-מחלקה. בלעדיו הלוגו נמדד 195px — לוגו-hero, לא קרדיט חסות. */
.kb-footer .kk-logo--footer{
  display:block !important;
  width:28px !important; height:28px !important;
  min-width:0 !important; max-width:28px !important; margin:0 !important;
  object-fit:contain; opacity:.9;
}
.kb-footer .kb-sponsor-name{
  font-size:12px; font-weight:800; letter-spacing:.4px; color:#5c6675;
}

/* ═══ v6 — שכבת "אפליקציה": מדף-נחיתה למסך אפליקציה ═══════════════════════
   הכלים נבנו כדפי נחיתה (hero ענק + פס סטטיסטיקות + נאו-ברוטליזם). בתוך
   גרומי הם מסכי אפליקציה: כותרת קומפקטית, בלי פלאף, שפה רכה. הריכוך של
   המסגרות/צללים הקשיחים רץ ב-grumi-mascot.js (מעבר על גיליונות הסגנון). */

/* פלאף לנדינג: פס סטטיסטיקות ה-hero ("400 שמות במאגר"), בועות הרקע
   המרחפות וגלולת ה-eyebrow — מוסתרים. (stats-bar של hospitals = טאבים
   אמיתיים, לא נוגעים.) */
[class*="hero__stats"],[class*="hero__blob"],[class*="hero__eyebrow"]{display:none !important;}

/* ה-hero הענק → כותרת מסך קומפקטית: שקוף, בלי מסגרת וצל, מרווחי אפליקציה */
[class$="-hero"]{border:0 !important;box-shadow:none !important;background:transparent !important;
  padding:8px 6px 0 !important;margin:0 0 12px !important;}
/* v8 — בכלים עם overflow:hidden ב-hero (חופשת לידה) הכותרת נחתכה מלמעלה →
   גלוי + ריווח עליון קטן לכותרת כדי שלא תיגזר. */
[class$="-hero"]{overflow:visible !important;}
[class$="-hero"] h1,[class*="hero__inner"] h1{padding-top:3px !important;}
/* גם hero__inner שמוזרק בלי העטיפה החיצונית (my-kikkaboo הדינמי) */
[class$="-hero"] h1,[class*="hero__inner"] h1{font-size:23px !important;line-height:1.3 !important;margin:0 0 6px !important;}
[class*="hero__subtitle"]{font-size:13.5px !important;line-height:1.65 !important;
  color:var(--kk-ink-mid) !important;margin:0 !important;max-width:none !important;}

/* אנימציות reveal-בגלילה של דפי נחיתה — התוכן גלוי מיד, המסך לא "קופץ" */
[class*="reveal"],[data-reveal],[data-aos]{opacity:1 !important;transform:none !important;
  transition:none !important;animation:none !important;}

/* קיקרים של סקשנים (גלולות "חיפוש מהיר" וכו') — מדיו כהה לחום גרומי */
[class*="kicker"]{background:var(--kk-peach-100) !important;color:var(--kk-peach-700) !important;
  border-color:transparent !important;}

/* ── דמות גרומי משולבת בכמה מקומות ריקים בכל כלי (מוזרקת ע"י grumi-mascot.js) ──
   לא מרחפת קבוע על העמוד — יושבת בתוך התוכן, בפינות/רווחים, כמה פעמים לדף. */
.grumi-inline{display:flex;align-items:flex-end;margin:10px 0 14px;pointer-events:none;}
.grumi-inline.side-r{justify-content:flex-end;padding-inline-end:20px;}
.grumi-inline.side-l{justify-content:flex-start;padding-inline-start:20px;}
.grumi-inline.side-c{justify-content:center;}
.grumi-inline img{width:60px;height:auto;transform-origin:50% 100%;
  filter:drop-shadow(0 8px 12px rgba(239,116,73,.24));will-change:transform;}
@media (max-width:380px){ .grumi-inline img{width:50px;} }

/* ── סוגי תנועה (gm-*) — לולאה אינסופית עדינה, כל דמות מקבלת סוג אקראי ── */
.grumi-inline img.gm-bob{animation:gm-bob 3.2s ease-in-out infinite;}
.grumi-inline img.gm-sway{animation:gm-sway 3.6s ease-in-out infinite;}
.grumi-inline img.gm-wobble{animation:gm-wobble 3s ease-in-out infinite;}
.grumi-inline img.gm-wave{animation:gm-wave 3.4s ease-in-out infinite;}
.grumi-inline img.gm-peek{animation:gm-peek 3.8s ease-in-out infinite;}
.grumi-inline img.gm-breathe{animation:gm-breathe 2.8s ease-in-out infinite;}
.grumi-inline img.gm-hop{animation:gm-hop 2.6s cubic-bezier(.3,1.2,.5,1) infinite;}

/* נדנוד למעלה-למטה + נשימה (squash&stretch) */
@keyframes gm-bob{0%,100%{transform:translateY(0) scale(1,1)}25%{transform:translateY(-6px) scale(.98,1.03)}50%{transform:translateY(0) scale(1.03,.97)}75%{transform:translateY(-4px) scale(.99,1.02)}}
/* צד לצד — הליכה קטנה עם הטיה */
@keyframes gm-sway{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-11px) rotate(-6deg)}50%{transform:translateX(0) rotate(0)}80%{transform:translateX(11px) rotate(6deg)}}
/* קפיצה עם נחיתה-squash */
@keyframes gm-hop{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-20px) scale(.93,1.09)}52%{transform:translateY(0) scale(1.11,.89)}70%{transform:translateY(-5px) scale(.98,1.02)}}
/* נדנוד-סיבוב שובב */
@keyframes gm-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(4deg)}}
/* נפנוף — הטיה של כל הגוף */
@keyframes gm-wave{0%,100%{transform:translateY(0) rotate(0)}15%{transform:translateY(-3px) rotate(8deg)}35%{transform:translateY(-3px) rotate(-4deg)}55%{transform:translateY(-3px) rotate(8deg)}75%{transform:translateY(0) rotate(-2deg)}}
/* הצצה — מתכווץ ומזנק חזרה */
@keyframes gm-peek{0%,100%{transform:translateY(0) scale(1,1)}25%{transform:translateY(9px) scale(1.05,.9)}45%{transform:translateY(-4px) scale(.95,1.06)}70%{transform:translateY(0) scale(1.02,.98)}}
/* נשימה עדינה */
@keyframes gm-breathe{0%,100%{transform:scale(1,1) translateY(0)}50%{transform:scale(1.04,.96) translateY(-2px)}}
@media (prefers-reduced-motion:reduce){ .grumi-inline img{animation:none !important;} }

/* ── חידון זוגי: ההוראות היו קריאות רק על רקע כהה ──────────────────────────
   `.cq-open-note` נצבע ב-`--kk-cream` על `rgba(255,255,255,.08)` — נוסחה
   שנכתבה כשהכרטיס שמסביב היה כהה. בשכבת GRUMI הרקע הפך בהיר, וקרם על קרם
   הוא טקסט בלתי נראה: "יש הוראות שאי אפשר לקרוא" (ג'ון, 11.8.2026).
   `inherit` פותר את שני המצבים בבת אחת — על כרטיס בהיר הטקסט יורש כהה,
   ובתוך הפאנל הכהה של הסיכום הוא נשאר בהיר. הגבול הולך אחריו עם currentColor. */
#couple-quiz .cq-open-note{
  color:inherit !important;
  background:transparent !important;
  border-color:currentColor !important;
  border-width:1.5px !important;
  opacity:.92;
}

/* ── קרדיט חסות: רצועה אחת, הקומפקטית ────────────────────────────────────
   שני הקרדיטים חיו זה מעל זה: הפוטר הוותיק של הכלי (.kb-footer, שלוש שורות)
   והרצועה של שכבת GRUMI (דמות + GRUMI + בחסות + לוגו). ג'ון בחר ברצועה
   (11.8.2026), ולכן הפוטר הוותיק יורד — ב-CSS ולא ב-JS, כדי שלא תהיה תלות
   בסדר הטעינה: כלים שמזריקים את הפוטר בזמן ריצה יוסתרו גם הם. */
.kb-footer{display:none !important;}

/* ── 🚨 מרווח אותיות שלילי: הבאג הכי גלוי בכלים ─────────────────────────
   הכלים נכתבו ככותרות-ענק (48–112px), ושם `letter-spacing:-3px` הוא כ-3%
   ולגיטימי. הסקין מכווץ את הכותרת ל-23px — והמרווח נשאר מוחלט, כלומר 13%.
   התוצאה בעברית היא אותיות שנדבקות: "באיזהשבועאת?" במקום "באיזה שבוע את?".
   30 מתוך 34 הכלים מגדירים מרווח שלילי כזה, ולכן התיקון הוא כאן ולא בכל כלי.
   ערך ביחידות em נשאר פרופורציונלי לכל גודל גופן, ולעברית ממילא אין תועלת
   במרווח שלילי — זה הרגל מטיפוגרפיה לטינית. */
h1, h2, h3, h4, h5,
[class*="title"], [class*="headline"], [class*="heading"],
[class*="hero"] h1, [class*="hero"] h2, [class*="display"] {
  letter-spacing: -0.015em !important;
}

/* מדריך בן/בת הזוג: שורות ה"דוגמה" הוגדרו 11px — מתחת לרף הקריאה בנייד,
   וארבע מהן על אותו מסך. 12.5px נשאר משני לטקסט הראשי ועדיין נקרא. */
.pg-style-sample { font-size: 12.5px !important; line-height: 1.6 !important; }

/* ═══ v14 — שלוש תקלות שחוזרות בכל הכלים, לא בכלי אחד ═════════════════════
   כל אחת מהן היא אותו שורש: הכלים נבנו כדפי-נחיתה, הסקין מכווץ אותם למסך
   אפליקציה, וכל ערך שנכתב במידה מוחלטת נשאר במקומו ומאבד פרופורציה. */

/* 🚨 1. קו-ההדגשה חצה את האותיות במקום לשבת מתחתן (29 מתוך 35 הכלים).
   `.accent::after` הוא סימון-מרקר שנכתב `bottom:4–6px` לכותרת של 48–112px —
   שם 6px נופלים מתחת לשורת הבסיס. הסקין מכווץ את הכותרת ל-23px, והפסולת
   נשארת מוחלטת: הפס נוחת **באמצע** האותיות ונקרא כקו-מחיקה או כתקלה.
   בדיוק המלכודת של `letter-spacing:-3px` — ולכן אותו פתרון: יחידות em.
   מתחת לשורת הבסיס בכוונה — בעברית אין זנבות, וקו שנוגע באות נראה שבור. */
.accent::after{
  bottom:-.05em !important; height:.13em !important;
  border-radius:99px !important;
}

/* 2. הצ'יפ הנבחר היה שחור-דיו — שריד הנאו-ברוטליזם. בגרומי הבחירה כתומה
   (כך גם `.stylechip.on` במשחק השמות). רק בוררים: איקונים ונקודות-מצב
   נשארים כפי שהם, ו"לא צריך" בתיק הלידה נשאר שחור כי זה **מצב**, לא בחירה. */
#baby-names .bn-view-btn.active,
#baby-registry .cat-btn.active,
#babypedia .bp-cat-btn.active,
#dad-baby-skills .db-tab.active,
#food-checker .fc-pill.active,
#food-checker .fc-cat.active,
#hospital-bag .cat-btn.active,
#milestones .ms-age-tab.active{
  background:linear-gradient(135deg,#ff8b64,#ee6a3f) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 10px 20px -12px rgba(217,95,56,.85) !important;
}

/* 🚨 3. פס ההתקדמות היה קו של 2px — כלומר בלתי-נראה — בשלושה כלי צ'קליסט.
   הפס נכתב `flex:1` כדי למלא את **רוחב** השורה, אבל ההורה שלו הוא עמודה
   (`flex-direction:column`), ושם `flex:1` נקרא כ-`flex-basis:0%` על הגובה
   וגורף את `height:28px`. נמדד בדפדפן: גובה 2px = שתי המסגרות בלבד.
   `milestones` לא נכלל בכוונה — שם ההורה הוא שורה והפס תקין (18px). */
#hospital-bag .progress-bg,
#baby-registry .progress-bg,
#dad-hospital-bag .dhb-progress-bar{ flex:0 0 auto !important; }