/* Cross-page refinements. Desktop-only requests are kept inside the desktop query. */
#donation:focus { outline: none; }
.wa-launcher-hint { opacity: 0; visibility: hidden; transform: translateX(-5px); }
@media (hover:hover) and (pointer:fine) {
  .whatsapp-float:hover .wa-launcher-hint { opacity: 1; visibility: visible; transform: none; }
}
.wa-chat { width: min(310px,calc(100vw - 28px)); border-radius: 18px; box-shadow: 0 12px 42px #431f1021; background: #fffdf9; }
.wa-chat-header { padding: 13px 14px; gap: 9px; }
.wa-chat-logo { width: 34px; height: 34px; }
.wa-chat-heading h2 { font-size: 19px; }
.wa-chat-heading p { font-size: 12px; margin-top: 2px; }
.wa-chat-close { width: 32px; height: 32px; border: 0; }
.wa-chat-body { padding: 14px; }
.wa-chat-bubble { padding: 0; border: 0; box-shadow: none; background: none; font-size: 14px; }
.wa-chat-bubble .wa-chat-hello { font-size: 16px; }
.wa-chat-compose { margin-top: 12px; }
.wa-chat-compose textarea { min-height: 65px; padding: 9px 11px; font-size: 14px; border-color: #431f1026; }
/* הירוק הרשמי של וואטסאפ, עם טקסט כהה לניגודיות תקינה. */
.wa-chat-continue { min-height: 42px; font-size: 14px; border-radius: 10px; background: #25D366; color: #053B26; }
.wa-chat-continue:hover { background: #1FBF5B; color: #053B26; }
/* התווית חוזרת על אותו נוסח של ה-placeholder — נשארת לקוראי מסך בלבד. */
.wa-chat-compose label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wa-chat-compose textarea { text-align: right; }
.wa-chat-note { display: none; }
.join-form .join-field { gap: 0; }
body.home-page .join-form .join-consent { font-size:14px !important; }
body.home-page .join-form .join-consent > span,
body.home-page .join-form .join-consent a { white-space:normal; }
.join-form .join-submit,.join-form .join-submit em { font-style: normal !important; transform: none !important; }
.join-arrow { animation: joinArrowHint 2.6s ease-in-out infinite; }
@keyframes joinArrowHint { 0%,100% { translate: 0 0; } 50% { translate: -10px 8px; } }
.field-copy { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.field-copy > .section-tag { margin-left: auto !important; margin-right: 0 !important; transform: none !important; align-self: flex-end; }
.field-copy .field-title { align-self: flex-end; text-align: right; }
.footer-section .ft-btn--orange { background: var(--grad-accent) !important; background-size: 180% 100% !important; }
.blog-card-tags { display: none !important; }
/* Desktop only: on phones the same lift pushed the route over the headline. */
@media (min-width:901px) { .dj .dj-route { translate: 0 -90px; } }
/* Header "תרמו עכשיו": the same heart as the Roei "הצטרפו לעשייה לזכרו" button
   (roee-section.js), drawn through a mask in the button's text colour on every
   page and viewport. The inline path in the markup stays hidden. */
:root { --pill-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3s-6.9-4.3-8.8-8.3A4.8 4.8 0 0 1 12 7.1a4.8 4.8 0 0 1 8.8 4.9c-1.9 4-8.8 8.3-8.8 8.3z'/%3E%3C/svg%3E"); }
/* לב מצויר ביד ולא סימטרי — האונה השמאלית רחבה ונמוכה יותר,
   המפגש בין השתיים מוסט מהמרכז והקצה התחתון מעוגל. הא-סימטריה
   אפויה בתוך הצורה עצמה, ולכן היא נשארת זהה גם כשהלב זז. */
:root { --heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11.2 20.9C9.4 19.2 4.6 15.4 2.6 11.9 0.9 8.9 2.1 5.1 5.3 4.4 7.9 3.8 10.6 5.3 11.9 7.4 13.1 5.7 15.3 4.6 17.4 5.2 20.3 6 21.6 9 20.5 11.7 19 15.4 14.2 18.8 12.3 20.6 11.9 21 11.5 21.2 11.2 20.9Z'/%3E%3C/svg%3E"); }
/* הלב המצויר ביד של המותג (assets/icons) — ללבבות הקטנים שעפים. */
:root { --heart-drawn: url("/assets/icons/heart-2.svg"); }
.site-header .donate-pill svg { background: currentColor; -webkit-mask: var(--pill-heart) center / contain no-repeat; mask: var(--pill-heart) center / contain no-repeat; }
.site-header .donate-pill svg path { display: none; }
.dj .dj-start.is-ready { background-image: linear-gradient(100deg,#FF5F35,#FB8C2E,#FFA25C,#FB8C2E,#FF5F35); background-size: 260% 100%; animation: journeyButtonPulse 2.8s ease-in-out infinite, journeyButtonGradient 5s ease-in-out infinite; }
@keyframes journeyButtonPulse { 0%,100% { scale: 1; } 50% { scale: 1.045; } }
@keyframes journeyButtonGradient { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
.dj.dj-entry-ready .dj-stage { transform: translateY(18px); clip-path: inset(0 round var(--dj-frame-radius)); transition-duration: 560ms; }
.dj.dj-entry-ready.dj-is-mounted .dj-stage { transform: none; }
.site-header .nav-item-row > .sub-toggle { width: auto; height: auto; display: inline-flex; align-items: center; gap: 7px; color: inherit; font: inherit; padding: 0; border: 0; background: none; cursor: pointer; }
.site-header .nav-item-row > .sub-toggle svg { width: 12px; height: 12px; flex: none; }
.site-header .nav-item-row > .sub-toggle { font-weight: 600; }
.footer-section .ft-col h3 a { font: inherit; color: inherit; }
.site-header .nav-item-row > .sub-toggle .nav-parent-label { white-space: nowrap; }
.act-partners .partner-welfare .full { opacity:1; animation: partnerRevealWipe 12s ease-in-out infinite; }
.act-partners .partner-welfare .muted { animation: partnerMutedWipe 12s ease-in-out infinite; }
.act-partners .partner-mizam .mizam-icon { animation: partnerIconReveal 12s ease-in-out infinite; }
.act-partners .partner-mizam .mizam-text::after { animation: partnerTextReveal 12s ease-in-out infinite; }
.act-partners .partner-mizam .mizam-text { animation: partnerCopyReveal 12s ease-in-out infinite; }
@keyframes partnerCopyReveal { 0%,30%,100% { color:#b3a69e; } 58%,82% { color:var(--ink); } }
/* Keep the intro below the hero: a negative margin covers its title and corners. */
.about-page .about-belief { margin-top: 0; }
@media (min-width: 1025px) {
  /* The desktop About introduction had 78px of internal top padding. Reducing
     it by exactly 60px lifts the whole second area without overlapping the
     shared hero. Mobile is already flush to the hero and needs no offset. */
  .about-page .about-belief__fit-canvas { padding-top: 18px; }
  .home-page .hero .partners { translate: 0 -60px; }
  .home-page .hero.hero-armed .partners.hero-anim { translate: 0 calc(-60px + var(--hi-y,0px)); }
  .home-page .hero.hero-armed.hero-in .partners.hero-anim { translate: 0 -60px; }
  /* 17.9.2026: עמודות הקצה ברוחב הכפתורים שבקצוות — במצב "מראה" רוחב
     כפתור אחד, ובמצב "ליד" רוחב הצמד ("צפו בהשפעה" + "תרמו עכשיו").
     ‎--hd-actions‎ נמדד ב-site-refinements.js; שתי העמודות שוות
     תמיד, ולכן הלוגו נשאר במרכז. 132px הוא הגיבוי כשאין JavaScript.
     הרווח בין העמודות קטן יותר (היה עד 28px). במצב "ליד" בלבד הפס הצף
     בגלילה רחב יותר (עד 1400px במקום 1280px), כדי שהצמד לא ייגע בלשוניות. */
  :root:has(.site-navigation:not(.journey-mirror) .journey-pill) { --hd-float-w: max(1280px, min(1400px, calc(100vw - 120px))); }
  .site-header .site-navigation { display: grid; grid-template-columns: var(--hd-actions,132px) minmax(0,1fr) auto minmax(0,1fr) var(--hd-actions,132px); align-items: center; height: 100%; gap: clamp(10px,1.1vw,20px); width: min(1600px,calc(100% - 48px)); margin-inline: auto; }
  /* 24.9.2026: במחשבים ניידים צרים (עד 1340) הפס מנצל עוד 28px לרוחב, כדי
     שהלשונית "מנציחים את רועי" תיכנס גם באנגלית */
  @media (max-width: 1340px) { .site-header .site-navigation { width: min(1600px, calc(100% - 20px)); } }
  .site-header .nav-right { grid-column: 2; padding: 0; justify-self: end; }
  .site-header .logo-badge { grid-column: 3; position: relative; inset: auto; transform: none; width: var(--hd-logo); height: 0; }
  /* 5.10.2026: the image is centred in the badge (was left:0), so it stays in
     its plate even when the badge is wider than the image */
  .site-header .logo-badge img { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); }
  .site-header.is-stuck .logo-badge { width: var(--hd-logo-stuck); transform: translateY(var(--hd-pop)); }
  .site-header .nav-left-group { grid-column: 4; padding: 0; }
  .site-header .donate-pill { grid-column: 5; grid-row: 1; justify-self: end; transform: none; }
  /* 17.9.2026: רווח קטן יותר בין הלשוניות (היה 45px קבוע) */
  /* 24.9.2026: קטן יותר משהיה (clamp(20px,1.5vw,26px)) כי נוספה הלשונית
     "האור של רועי" לקבוצה השמאלית; site-refinements.js מודד ומצמצם עוד
     (nav-tight / nav-tighter) כשקבוצה עדיין רחבה מעמודתה. */
  .site-header .nav-menu { gap: clamp(14px,1.12vw,22px) !important; justify-content: flex-start; }
  /* 7.10.2026: המדרגות מצמצמות מרווחים בלבד. ה-‎font-size‎ שהיה בכל אחת
     מהן גרם לכך שגודל הטקסט בתפריט נקבע ממדידה שתלויה בעמוד ובמצב
     הגלילה: אותו רוחב חלון נתן 17px בעמוד פנימי ו-13px בדף הבית, והגודל
     קפץ בזמן גלילה. הגודל נקבע עכשיו למטה, לפי רוחב החלון בלבד. */
  /* 8.10.2026: המדרגות האחרונות היו צפופות מדי, וזה נראה באנגלית —
     שם התוויות ארוכות יותר ולכן כל שלוש המדרגות נדלקות בגלילה,
     והמרווח ירד ל-4px מול 14–16px בעברית. נמדד ב-1280 וב-1440.

     הסיבה שאפשר להרפות: הסולם נגמר ב-‎nav-overflow‎, שמקצר את תווית
     ההנצחה ומשחרר כ-65px. ב-1440 הקבוצה השמאלית יצאה 247px בתוך
     עמודה של 315px — כלומר 68px פנויים ובכל זאת 4px מרווח, כי אף
     מדרגה אינה מתרופפת אחרי שהתווית התקצרה.
     11→12, 8→10, 4→7, ועוד הרפיה כשהקיצור כבר פעל (למטה). */
  .site-header.nav-tight .nav-menu { gap: 12px !important; }
  .site-header.nav-tighter .nav-menu { gap: 10px !important; }
  .site-header.nav-tightest .nav-menu { gap: 7px !important; }
  .site-header.nav-tightest .nav-menu a, .site-header.nav-tightest .sub-toggle { letter-spacing: -.01em; }
  .site-header.nav-tightest .nav-menu .nav-roei > span { padding-inline: .4em; }
  /* במדרגה הזו הפס מנצל את השוליים והלוגו מצטמצם מעט, כדי שהתפריט ייכנס */
  body .site-header.nav-tightest { padding-inline: 12px; }
  .site-header.nav-tightest .site-navigation { width: calc(100% - 12px); }
  .site-header.nav-tightest .logo-badge { width: 96px; }
  /* 5.10.2026: in the floating bar the badge follows the small logo in every
     tier; the 96px above used to win here and push the logo out of its plate */
  .site-header.nav-tightest.is-stuck .logo-badge { width: var(--hd-logo-stuck); }
  /* מוצא אחרון, כשגם זה לא נכנס: הלשונית מציגה את הקיצור שב-data-short */
  .site-header.nav-overflow .nav-menu .nav-roei > span { font-size: 0; padding: 4px 7px 5px; }
  .site-header.nav-overflow .nav-menu .nav-roei > span::before { content: attr(data-short); font-size: 10px; letter-spacing: -.01em; }
  /* 8.10.2026: ברגע שהתווית התקצרה, המרווח יכול לחזור לנשום —
     הקיצור משחרר כ-65px, ויותר מהרווח שהמדרגות חסכו. הכלל יושב
     **אחרי** ‎nav-tightest‎ ובאותה סגוליות, ולכן הוא גובר עליו. */
  .site-header.nav-overflow .nav-menu { gap: 11px !important; }
  .site-header .nav-left-group { min-width: 0; justify-self: start; }
  /* הגודל היחיד של הטקסט בתפריט, בכל עמוד ובשני מצבי ההידר. ‎clamp‎ לפי
     רוחב החלון בלבד, בלי שום תלות במדידה או במחלקות ההידוק — ולכן אותו
     רוחב נותן בדיוק אותו גודל בכל מקום. התקרה 14px במקום 17: ב-17 התפריט
     לא נכנס לעמודה המכווצת ברוחבים גדולים, ומשם הגיעה הקפיצה בגלילה. */
  .site-header .nav-menu a,.site-header .sub-toggle { font-size: clamp(12px,.86vw,14px) !important; }
  /* הכפתור נמתח לרוחב עמודת הגריד (132px), ולכן בלי justify-content
     התוכן נצמד לימין ונשאר רווח ריק משמאל. מרכוז משווה את השוליים
     משני הצדדים, גם במצב הרגיל וגם בגלילה. */
  .site-header .donate-pill { position: static !important; min-width: 0 !important; width: auto !important; height: 32px !important; min-height:32px !important; padding: 0 12px !important; gap: 6px; font-size: 13px !important; margin: 0 !important; flex: none; justify-content: center !important; text-align: center; }
  /* flex:none keeps the heart at full size; the 132px edge columns above give
     the text, 7px gap and icon room (the old 110px squeezed the icon to 0). */
  .site-header .donate-pill svg { width: 15px; height: 15px; flex: none; }
  /* 7.10.2026: ‎:not(.nav-tight)‎ אינו קישוט. הכלל הזה ומדרגות ההידוק
     שלמעלה הם באותה ספציפיות בדיוק (שלוש מחלקות), והוא מאוחר יותר
     בקובץ — ולכן בגלילה הוא ניצח אותן תמיד, וההידוק לא פעל כלל. זו
     הייתה הסיבה האמיתית לכך שהתפריט עלה על הכפתורים בגלילה. */
  .site-header.is-stuck:not(.nav-tight) .nav-menu { gap: clamp(14px,1.1vw,20px) !important; }
  .site-header.is-stuck .donate-pill { height: 30px !important; min-height:30px !important; font-size: 12.5px !important; padding-inline: 11px !important; justify-content: center !important; }
  /* כל עמוד פנימי הגדיר לעצמו 18.09px לכפתור. הכפתור צריך להיראות
     זהה בכל האתר, ולכן הגודל של דף הבית גובר (14.9.2026). */
  body.internal-page .site-header:not(.is-stuck) .donate-pill,
  body.internal-page .site-header:not(.nav-open) .donate-pill { font-size: 13px !important; }
  body.internal-page .site-header.is-stuck .donate-pill { font-size: 12.5px !important; }
  .home-page .voices-section { min-height: 0 !important; padding-block: 22px 16px !important; scroll-margin-top: var(--site-header-clear,90px); }
  .home-page .voices-wrap { gap: 0; }
  /* הכותרת חוזרת ל-65px כמו כל כותרות דף הבית; ההתאמה לגובה המסך
     נעשית ב-fitSections (site-refinements.js) שמקטין את הבלוק כולו. */
  .home-page .voices-title { line-height: 1.05; margin-top: 10px; }
  .home-page .voices-title > span { transform: none; }
  .home-page .voices-lead { margin-top: 10px; font-size: clamp(14px,1.8vh,18px); line-height: 1.35; max-width: 880px; }
  .home-page .voices-deck { --vc-card-h: clamp(210px,37vh,390px); --vc-card-w: calc(var(--vc-card-h) * .72); height: calc(var(--vc-card-h) + 60px); margin-top: 16px; }
  .home-page .voice-card { top: 50%; height: var(--vc-card-h); width: var(--vc-card-w); }
  .home-page .voices-dots { margin-top: 10px; }
  /* The logo crosses the footer's top edge again (site.css .ft-logo): the top
     padding must equal --ft-pad-top, which the logo offset is computed from.
     88px = the 44% of the logo that sits inside + the cream ring + a small gap. */
  .footer-section { --ft-pad-top: 88px; min-height: 0 !important; padding-top: var(--ft-pad-top) !important; padding-bottom: 14px !important; }
  /* 14.9.2026: הכותרת בגודל של כל כותרות דף הבית (--ft-title: 65px),
     ומרווחי נשימה בין הכותרת לכפתורים, בין הכפתורים לרשתות ובין
     הרשתות לעמודות. אם הפוטר גדל מעבר למסך, fitSections מקטין אותו. */
  .footer-section .ft-title { line-height: 1.08; margin-top: 0; }
  .footer-section .ft-cta-row { margin-top: 40px; }
  .footer-section .ft-social { margin-top: 40px; margin-bottom: 18px; }
  .footer-section .ft-cols { margin-top: 38px; gap: 25px; }
  .footer-section .ft-contact li { gap: 9px; margin-bottom: 4px; line-height: 1.2; }
  .footer-section .ft-contact li svg { width: 24px; height: 24px; flex: 0 0 24px; }
  .footer-section .ft-contact li a { min-height: 28px; }
  .footer-section .ft-col h3 { margin-bottom: 8px; }
  .footer-section .ft-col li { margin-bottom: 5px; }
  .footer-section .ft-note { margin-top: 18px; }
  /* 14.9.2026: במקום עיגול האור שרדף את הסמן — שובל של לבבות רכים.
     הצבע והשקיפות זהים לעיגול הקודם (‎#ff9a59‎ ב-16%, כפול ה-opacity
     של השכבה). המיקום, הסיבוב והמתיחה של כל לב מחושבים ב-JS. */
  /* השכבה אחראית על ההופעה וההיעלמות (transition), והלבבות עצמם
     על השקיפות המשתנה לפי מהירות — ולכן אין להם transition. */
  /* שכבה קבועה על פני החלון כולו: השובל מלווה את הסמן בכל אזור
     ובכל עמוד. z-index נמוך מההידר (60) ומהכפתורים הצפים, והשכבה
     שקופה ללחיצות, ולכן היא לא חוסמת שום דבר. */
  .hero-pointer-art { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; background: none; opacity: calc(.8 * var(--hero-pointer-visible,0)); transition: opacity .5s ease; }
  /* המעטפת נושאת את המיקום והמריחה (מחושבים ב-JS); הגלעין שבפנים
     נושא את הצבע והנשימה, ולכן שניהם לא נלחמים על אותו transform. */
  .hero-heart {
    position: absolute; left: 0; top: 0;
    width: var(--s,90px); height: var(--s,90px);
    margin: calc(var(--s,90px) / -2) 0 0 calc(var(--s,90px) / -2);
    opacity: var(--op,.15);
    will-change: transform;
  }
  .hero-heart > i {
    display: block; width: 100%; height: 100%;
    /* גרדיאנט שנמוג לקצוות — כך אין שום קו מתאר, רק אור בצורת לב. */
    background: radial-gradient(circle closest-side at 50% 46%, #ff9a59 0%, #ff9a59cc 24%, #ff9a5966 55%, #ff9a5900 94%);
    -webkit-mask: var(--heart-fill) center / contain no-repeat;
    mask: var(--heart-fill) center / contain no-repeat;
    filter: blur(var(--blur,6px));
    animation: heroBreathe 5.4s ease-in-out infinite;
    animation-delay: calc(var(--i,0) * -.75s);
  }
  @keyframes heroBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

  /* לבבות קטנים מצוירים ביד שמשתחררים מהשובל ועולים למעלה. */
  .hero-spark {
    position: absolute; left: 0; top: 0;
    width: var(--s,20px); height: var(--s,20px);
    margin: calc(var(--s,20px) / -2) 0 0 calc(var(--s,20px) / -2);
    background: #f16a2c;
    -webkit-mask: var(--heart-drawn) center / contain no-repeat;
    mask: var(--heart-drawn) center / contain no-repeat;
    opacity: 0;
    animation: heroSpark var(--life,1900ms) cubic-bezier(.22,.7,.3,1) forwards;
    will-change: transform, opacity;
  }
  @keyframes heroSpark {
    0%   { opacity: 0; transform: translate(var(--x),var(--y)) rotate(var(--r0)) scale(.45); }
    22%  { opacity: .34; }
    62%  { opacity: .28; }
    100% { opacity: 0; transform: translate(calc(var(--x) + var(--drift,0px)),calc(var(--y) - var(--rise,74px))) rotate(var(--r1)) scale(1); }
  }
  .hero { position: relative; }
  /* 10.9.2026: the hero carousel sits 20px higher. */
  .home-page .hero .g-stage { top: -20px; }
}
@media (min-width:1025px) and (max-width:1350px) {
  .site-header .site-navigation { width: calc(100% - 24px); gap: 12px; }
  .site-header .nav-menu a,.site-header .sub-toggle { font-size: 12px; }
  .site-header .logo-badge { width: 105px; height: 0; }
}

@media (prefers-reduced-motion:reduce) {
  .join-arrow,.dj .dj-start.is-ready,.act-partners .partner-welfare img,.act-partners .mizam-icon,.act-partners .mizam-text,.act-partners .mizam-text::after { animation: none !important; }
  .hero-pointer-art { display: none; }
}
@media (min-width:1025px) and (prefers-reduced-motion:reduce) {
  .home-page .hero .partners,
  .home-page .hero.hero-armed .partners.hero-anim,
  .home-page .hero.hero-armed.hero-in .partners.hero-anim { translate:0 -60px !important; }
}

/* 15.9.2026: מקום קבוע לפס הגלילה. בחלק מהעמודים הפס הופיע רק אחרי
   הפריים הראשון, וכל העמוד, כולל הלוגו והבאנר, זז 7.5px הצידה. */
html { scrollbar-gutter: stable; }

/* 17.9.2026: באריח "אודות העמותה" במגה-מניו — תמונה מחדר האוכל במקום הלוגו.
   האריח נמוך ורחב, ולכן החיתוך ממוקד בגובה הפנים. */
.site-header .nav-thumb--brand { padding: 0; background: #2a1a12; }
.site-header .nav-thumb--brand img { object-fit: cover !important; object-position: 50% 30%; }

/* 17.9.2026: מד הגלילה בצבעי המותג — גרדיאנט כתום (כמו הכפתורים והכותרות)
   על מסילה בצבע שמנת, במקום האפור של הדפדפן. בכרום ובספארי דרך
   ::-webkit-scrollbar, שמאפשר גרדיאנט; בפיירפוקס דרך scrollbar-color.
   scrollbar-color מוגדר רק היכן שאין ::-webkit-scrollbar, כי בכרום החדש
   הוא מבטל את העיצוב המלא. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #F4EDE6; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FF6A3D 0%, #FB8C2E 100%);
  border: 3px solid #F4EDE6;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #F15A2A 0%, #F07D1F 100%); }
::-webkit-scrollbar-corner { background: #F4EDE6; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #F16A2C #F4EDE6; }
}

/* ===================== צבעי הכפתורים (15.9.2026) =====================
   לבקשת חן: הכיתוב בכפתורים חוזר ללבן המקורי, והכפתור הלבן בפוטר
   לגרדיאנט המקורי. זו החלטת מותג מודעת; הניגודיות שם נמוכה מ-4.5:1.
   אין כאן דריסות צבע לכפתורים — כל משפחה חוזרת לעיצוב שלה. */

/* "התקשרו עכשיו", "פתחו שיחה", "שלחו מייל", "נווטו אלינו" בכרטיסי צור
   קשר — בגרדיאנט הכתום של האתר, גם החץ שלצידם. */
.contact-way__cta,
.contact-way__cta i {
  background-image: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* פאנל העריכה של הסטודיו מוסתר מהאתר הציבורי ונפתח עם ‎?edit‎ בכתובת.
   הכלי עצמו נשאר בקוד ולא נמחק. */
.editor-toggle, .editor-panel { display: none !important; }
html.dev-editor .editor-toggle { display: block !important; }
html.dev-editor .editor-panel.open { display: block !important; }

/* פירורי לחם: החמישים אחוז שביקשת נתנו 2.5 מול 1 מעל תמונות בהירות.
   שבעים אחוז שומר על אותה היררכיה בדיוק ועובר את התקן (4.8 מול 1). */
body.internal-page .internal-hero__crumbs a { opacity: .7 !important; }

/* =====================================================================
   ההירו המחודש — 16.9.2026. כל הבלוק מותנה ב-‎body.hero-v2‎ בלבד.
   הסרת המחלקה מ-<body> ב-index.html מחזירה את ההירו הקודם במלואו:
   כתב היד, שורת הרווחה והמרווחים המקוריים. אין כאן מחיקה של דבר.
   גיבוי מלא: index.backup-לפני-שינוי-הירו-20260916.html
   ===================================================================== */

/* כתב היד והחץ שלצדו יורדים מהמסך הראשון בטאבלט ובנייד.
   17.9.2026: מ-901px ומעלה ההערה חוזרת בנוסח "פועלים בשיתוף הרווחה
   והמיזם לביטחון תזונתי" (ראו "כתב יד בהירו" בהמשך הקובץ). */
/* 5.10.2026: בטלפון כתב היד והחץ חוזרים, מתחת לכפתור "מלאו להם צלחת" —
   לבקשת חן. הם נשארים מוסתרים רק בטווח הטאבלט (768–900), שבו הפריסה אחרת
   ואין להם מקום. ההצגה עצמה מעוצבת ב-home-hero-mobile.css. */
@media (min-width: 768px) and (max-width: 900px) {
  body.hero-v2 .hero .hero-handnote { display: none !important; }
}

/* שורת הרווחה והמיזם מפנה את מקומה לשורת התקשורת */
body.hero-v2 .hero .partners { display: none !important; }

/* בלי המחלקה התוספות פשוט לא קיימות ויזואלית */
body:not(.hero-v2) .hero-sub,
body:not(.hero-v2) .hero-press { display: none !important; }

/* ===== תת-כותרת =====
   ‎width:0‎ עם ‎min-width:100%‎ — אותו תכסיס שכבר קיים באתר ל-‎.hero-copy p‎:
   הפסקה לא מרחיבה את ‎.copy-inner‎ (שנמדד לפי הכותרת), ואז נמתחת
   בדיוק לרוחב הכותרת הראשית. */
body.hero-v2 .hero-copy .hero-sub {
  width: 0;
  min-width: 100%;
  max-width: 100%;
  margin: clamp(10px, 1vw, 16px) auto 0;
  font-size: 15.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink, #35180F);
  text-align: center;
  text-align-last: center;
  text-wrap: balance;
}
body.hero-v2 .hero-copy .hero-sub b { font-weight: 800; }
/* 17.9.2026: הנוסח המלא (עם "הפועל בקרית ים") בשתי שורות קבועות וממורכזות,
   בריווח מילים טבעי. היה מתוח לרוחב הכותרת, ולבקשת חן ירד — המתיחה הרחיבה
   את הרווחים בין המילים. 14.2px: הגודל הגדול ביותר שבו השורות נכנסות. */
@media (min-width: 901px) {
  body.hero-v2 .hero-copy .hero-sub { font-size: 14.2px; }
  body.hero-v2 .hero-copy .hero-sub__line {
    display: block;
    white-space: nowrap;
  }
}

/* הכותרת הראשית צפופה יותר (היה 1.04 ו-1.02), והתת-כותרת עולה אליה */
body.hero-v2 .hero-copy h1 .line1 { line-height: .96; }
body.hero-v2 .hero-copy h1 .line2 { line-height: .94; }
body.hero-v2 .hero-copy .hero-sub { margin-top: clamp(4px, .5vw, 8px); }

/* 17.9.2026: התגית "בית תמחוי הפועל בקרית ים" הוסרה מההירו (index.html).
   הכללים שעיצבו אותה כאן ירדו איתה. */

/* כניסת התוספות ברצף מסך הפתיח.
   התת-כותרת מצטרפת לטבלת הרצף ב-index.html. עד שהרצף מתחמש היא מוסתרת
   כאן, אחרת הייתה מבליחה לפני הכותרת. שורת התקשורת כבר משתמשת ב-translate
   למיקום, ולכן נכנסת בשקיפות בלבד, באותה עקומה, אחרונה ברצף. */
.hero-pre body.hero-v2 .hero .hero-sub,
.hero-pre body.hero-v2 .hero .hero-press { opacity: 0; }
body.hero-v2 .hero.hero-armed .hero-press { opacity: 0; }
body.hero-v2 .hero.hero-armed.hero-in .hero-press {
  opacity: 1;
  transition: opacity .9s var(--hi-ease, cubic-bezier(.22,.72,.24,1)) 1.25s;
}
@media (prefers-reduced-motion: reduce) {
  body.hero-v2 .hero.hero-armed .hero-press { opacity: 1; transition: none; }
}
body.hero-v2 .hero-sub__short { display: none; }

/* מתחת ל-900 הכותרת הראשית מתכווצת מ-586 ל-424 פיקסלים, והנוסח המלא
   היה נשבר לשלוש וארבע שורות. שם עובר לנוסח הקצר.
   באותו רוחב ‎.copy-inner‎ גם הופך ל-contents, וההורה נעשה כל עמודת
   הטקסט — לכן הרוחב נקבע כאן במפורש לרוחב הכותרת, ו-min-width מתאפס
   (min-width גובר על max-width ובלי האיפוס התקרה לא הייתה תופסת). */
@media (max-width: 900px) {
  body.hero-v2 .hero-sub__full { display: none; }
  body.hero-v2 .hero-sub__short { display: inline; }
  body.hero-v2 .hero-copy .hero-sub {
    width: min(424px, 86vw);
    min-width: 0;
    max-width: 100%;
    font-size: clamp(12.4px, 3.5vw, 16.5px);
  }
  /* בטלפונים הצרים ביותר קיצוץ ריווח זעיר שומר על שתי השורות */
  @media (max-width: 380px) {
    body.hero-v2 .hero-copy .hero-sub { letter-spacing: -.012em; }
  }
}

/* ===== שורת התקשורת =====
   יושבת בדיוק בפס של שורת השותפים: אבסולוטית בדסקטופ, בזרימה
   מתחת ל-900 פיקסלים — בדיוק כמו ‎.partners‎. */
body.hero-v2 .hero .hero-press {
  position: absolute;
  z-index: 400;
  bottom: var(--partners-bottom, 38px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
}
/* הפס כולו מוביל לעמוד "בתקשורת", ששם הכתבות המלאות */
body.hero-v2 .hero .hero-press__link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: clamp(9px, 1.2vw, 20px);
  /* 17.9.2026: 25px בין הכיתוב ללוגואים (14px ועוד עד 11px). ‎--press-gap-extra‎
     נמדד ב-site-refinements.js לפי המקום שמתחת לכרטיסי הגליל. */
  row-gap: calc(14px + var(--press-gap-extra, 11px));
  padding: 5px 10px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  body.hero-v2 .hero .hero-press__link:hover { background: rgba(255, 255, 255, .42); }
  /* הכיתוב מתחלף ל"לצפייה בכתבות ←" (במקום קו תחתון) — שני הנוסחים יושבים
     באותו תא, כך שהרוחב לא קופץ במעבר */
  body.hero-v2 .hero .hero-press__link:hover .hero-press__say { opacity: 0; transform: translateY(-6px); }
  body.hero-v2 .hero .hero-press__link:hover .hero-press__go { opacity: 1; transform: none; }
  body.hero-v2 .hero .hero-press__link:hover .hero-press__go svg { transform: translateX(-3px); }
  /* רק הלוגו שמתחת לסמן נצבע, לא כל השורה */
  body.hero-v2 .hero .hero-press img:hover {
    animation: none;
    filter: grayscale(0);
    opacity: 1;
  }
}
body.hero-v2 .hero .hero-press__link:focus-visible {
  outline: 3px solid #35180F;
  outline-offset: 3px;
}
body.hero-v2 .hero .hero-press b {
  /* 17.9.2026: הכיתוב בשורה משלו, ממורכז מעל שורת הלוגואים (היה לצדם) */
  flex: 0 0 100%;
  text-align: center;
  font-size: clamp(13.5px, 1.08vw, 17px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .01em;
  color: rgba(53, 24, 15, .62);
  white-space: nowrap;
}
/* שני הנוסחים של הכיתוב באותו תא בגריד: הרוחב נקבע לפי הארוך מביניהם */
body.hero-v2 .hero .hero-press__label { display: inline-grid; place-items: center; }
body.hero-v2 .hero .hero-press__label > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.22,.72,.24,1);
}
body.hero-v2 .hero .hero-press__go { opacity: 0; transform: translateY(6px); color: #F16A2C; }
body.hero-v2 .hero .hero-press__go svg { width: 1em; height: 1em; transition: transform 260ms cubic-bezier(.22,.72,.24,1); }
body.hero-v2 .hero .hero-press__link:focus-visible .hero-press__say { opacity: 0; }
body.hero-v2 .hero .hero-press__link:focus-visible .hero-press__go { opacity: 1; transform: none; }
body.hero-v2 .hero .hero-press img {
  height: clamp(15px, 1.45vw, 23px);
  width: auto;
  filter: grayscale(1);
  opacity: .5;
  mix-blend-mode: multiply;
  animation: heroPressWave 9s ease-in-out infinite;
}
/* גל צבע שעובר על הלוגואים מימין לשמאל, באותה שפה של "פועלים בשיתוף" */
body.hero-v2 .hero .hero-press img:nth-of-type(1) { animation-delay: 0s; }
body.hero-v2 .hero .hero-press img:nth-of-type(2) { animation-delay: .9s; }
body.hero-v2 .hero .hero-press img:nth-of-type(3) { animation-delay: 1.8s; }
body.hero-v2 .hero .hero-press img:nth-of-type(4) { animation-delay: 2.7s; }
@keyframes heroPressWave {
  0%, 5%    { filter: grayscale(1); opacity: .5; }
  15%, 29%  { filter: grayscale(0); opacity: 1; }
  40%, 100% { filter: grayscale(1); opacity: .5; }
}

/* בדסקטופ שורת השותפים מורמת ב-60 פיקסלים (הכלל שלמעלה בקובץ),
   אחרת הפס יוצא מתחת לקו הקיפול. שורת התקשורת יורשת בדיוק את אותו
   ההרמה, ולכן היא נוחתת באותו פס ובאותו גובה.
   17.9.2026: כל האזור (כיתוב + לוגואים) מורם עד 40 פיקסלים נוספים, ואז
   יורד בחזרה 15 (כלומר עד 25). ‎--press-lift‎ נמדד ב-site-refinements.js:
   במסכים נמוכים כרטיסי הגליל יורדים נמוך יותר, ושם ההרמה קטנה בדיוק כדי
   שהכיתוב לא ייכנס מתחתם. ‎--hero-rise‎: כמה ההירו עלה אחרי הסרת התגית
   (מוגדר בסוף הקובץ) — השורה עולה יחד עם הקרוסלה. */
@media (min-width: 901px) and (max-width: 1024px) {
  body.hero-v2 .hero .hero-press { translate: 0 calc(0px - var(--hero-rise, 0px) - var(--press-lift, 25px)); }
}
@media (min-width: 1025px) {
  body.hero-v2 .hero .hero-press { translate: 0 calc(-60px - var(--hero-rise, 0px) - var(--press-lift, 25px)); }
}

@media (max-width: 900px) {
  /* מתחת ל-900 ‎.hero-copy‎ הוא flex עם order קבוע לכל פריט
     (תגית 1, כותרת 2, כפתור 3, כתב יד 4), ולכן התת-כותרת חייבת
     order משלה — אחרת היא קופצת לראש ההירו. */
  body.hero-v2:not(.desktop-preview) .hero-copy .hero-sub { order: 2; }

  body.hero-v2:not(.desktop-preview) .hero .hero-press {
    position: relative;
    bottom: auto;
    margin-top: 0;
    padding-inline: 14px;
    column-gap: 10px;
    row-gap: 4px;
  }
  body.hero-v2 .hero .hero-press__link { column-gap: 10px; row-gap: 8px; padding: 4px 8px; }
  body.hero-v2 .hero .hero-press img { height: 17px; }
}

/* =====================================================================
   ניסוי "קרוסלה רחבה" — 16.9.2026, מותנה ב-‎body.gallery-wide‎ בלבד.
   הגיאומטריה עצמה יושבת ב-index.html (wideCfg), וכאן רק מה שנוגע
   לשוליים: הקשת נפרסת עד קצה המסך, ולכן ההינתכות בצדדים מצטמצמת
   ומרחב הקרוסלה גבוה מעט יותר. הסרת המחלקה מחזירה הכל כמו שהיה.
   ===================================================================== */
/* 1101 ולא 768: הגליל עצמו פעיל רק מעל 1100 (wideCfg ב-index.html),
   ובטאבלט הקרוסלה הרגילה חייבת להישאר עם הסגנון המקורי שלה */
@media (min-width: 1101px) {
  /* ברפרנס הקיר נחתך בחדות בקצה המסך, בלי הינתכות */
  body.gallery-wide .gallery3d::before,
  body.gallery-wide .gallery3d::after { display: none; }
  /* קצוות הקשת עולים אל מעבר לגובה הרצועה וממלאים את הצדדים
     הריקים שליד הכותרת. בלי שחרור החיתוך הם היו נחתכים שם.
     אזור הטקסט עצמו נשאר פנוי: העלייה מתרחשת רק בכרטיסים
     הרחוקים מהמרכז, מחוץ לעמודת הכותרת. */
  body.gallery-wide .hero-slot { min-height: 380px; overflow: visible; }
  /* הגליל נבנה סימטרי סביב העין — נקודת המבט במרכז האזור */
  body.gallery-wide .gallery3d { perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; }
  /* ‎--g-bottom‎ שומר אוויר מתחת לגליל, מעל שורת התקשורת. מרכז הגליל
     נקבע כך שהכרטיס האמצעי מתחיל מעט מתחת לכפתור. */
  body.gallery-wide .gallery3d { overflow: visible; clip-path: none; --g-bottom: calc(200px + var(--hero-rise, 0px)); top: 80px; }
  /* הכרטיסים בגליל גדולים פי שניים "בעולם" ומוקטנים בפרספקטיבה, ולכן
     גם עיגול הפינות כפול — כך הוא נראה על המסך כמו ברפרנס */
  /* 17.9.2026: הכרטיס נבנה קטן פי ‎--g-card-q‎ ומוגדל ב-transform (index.html,
     measure) — לכן גם הפינות והצל מוקטנים באותו יחס, והתוצאה על המסך זהה */
  body.gallery-wide .g-card {
    border-radius: calc(34px * var(--g-card-q, 1));
    box-shadow: 0 calc(6px * var(--g-card-q, 1)) calc(10px * var(--g-card-q, 1)) calc(-6px * var(--g-card-q, 1)) rgba(67,31,16,.16);
  }
}
@media (min-width: 1025px) {
  body.gallery-wide .hero-copy { position: relative; z-index: 6; }
}
/* במסכים רחבים שורת הלוגואים רחבה יותר ונכנסת מתחת לכרטיסים הגבוהים
   שבצדי הגליל — לכן שם היא יושבת נמוך יותר, ועדיין בתוך המסך הראשון */
@media (min-width: 1280px) {
  body.gallery-wide.hero-v2 .hero .hero-press { translate: 0 calc(-20px - var(--hero-rise, 0px) - var(--press-lift, 25px)); }
}

/* "עצירת אנימציות" בתפריט הנגישות עוצרת את הגל; בלי הגל הלוגואים
   נשארים צבעוניים ולא תקועים באפור. */
html.a11y-still body.hero-v2 .hero .hero-press img {
  animation: none !important;
  filter: grayscale(0);
  opacity: .9;
}
@media (prefers-reduced-motion: reduce) {
  body.hero-v2 .hero .hero-press img {
    animation: none;
    filter: grayscale(0);
    opacity: .9;
  }
}

/* ============================================================
   17.9.2026 · "צפו בהשפעה" — כפתור חלול, מראה של "תרמו עכשיו"
   (או צמוד אליו), שפותח את סצנת מסע התרומה בחלון קופץ. הכפתור והחלון נוצרים
   ב-site-refinements.js; הסצנה עצמה היא journey.html בתוך iframe.
   ============================================================ */
.site-header .journey-pill { display: none; }
/* 5.10.2026: בנייד הכפתור מופיע כשורה בתפריט ההמבורגר — ראו site-refinements.js.
   הוא נראה כמו הגרסה בדסקטופ: מסגרת כתומה, טקסט כהה וסמל הפעלה. */
.nav-journey-item { display: none; }
@media (max-width: 1024px) {
  body:not(.desktop-preview) .site-header .nav-journey-item { display: block; }
  body:not(.desktop-preview) .site-header .nav-journey {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 4px 0 2px;
    padding: 9px 15px;
    border: 1.5px solid #F16A2C;
    border-radius: 999px;
    background: #FFF6F0;
    color: var(--ink);
    font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
    cursor: pointer;
  }
  body:not(.desktop-preview) .site-header .nav-journey svg { width: 16px; height: 16px; flex: none; color: #F16A2C; }
  body:not(.desktop-preview) .site-header .nav-journey:focus-visible { outline: 3px solid rgba(241,106,44,.38); outline-offset: 3px; }

  /* 5.10.2026: "מנציחים את רועי" הרגיש תקוע באמצע רשימת הקישורים. בנייד הוא
     יורד לשורה האחרונה וניצב ליד "צפו בהשפעה" — שני כפתורים באותו גובה, אחד
     לצד השני, מתחת לתפריט מסודר. הרשימה נשארת טור: כל פריט תופס שורה מלאה,
     ורק שני אלה חולקים שורה. בדסקטופ שום דבר מכאן לא חל. */
  body:not(.desktop-preview) .site-header #mobileNavMenu {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  body:not(.desktop-preview) .site-header #mobileNavMenu > li { flex: 0 0 100%; }
  body:not(.desktop-preview) .site-header #mobileNavMenu > .nav-roei-item,
  body:not(.desktop-preview) .site-header #mobileNavMenu > .nav-journey-item {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    margin-top: 14px;
  }
  body:not(.desktop-preview) .site-header #mobileNavMenu > .nav-roei-item { order: 90; padding-inline-end: 6px; }
  body:not(.desktop-preview) .site-header #mobileNavMenu > .nav-journey-item { order: 91; padding-inline-start: 6px; }
  body:not(.desktop-preview) .site-header #mobileNavMenu > .nav-roei-item > .nav-roei,
  body:not(.desktop-preview) .site-header #mobileNavMenu > .nav-journey-item > .nav-journey {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 10px;
    border-radius: 999px;
    border-bottom: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
  }
  body:not(.desktop-preview) .site-header #mobileNavMenu > .nav-roei-item > .nav-roei {
    background: #FDE9DD;
    border: 1.5px solid transparent;
    color: var(--ink);
  }
  /* התגית הכתומה שסביב הטקסט מיותרת כשהכפתור כולו בצבע שלה */
  body:not(.desktop-preview) .site-header #mobileNavMenu > .nav-roei-item > .nav-roei > span {
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: inherit;
  }
}
@media (min-width: 1025px) {
  .site-header .journey-pill {
    grid-column: 5; grid-row: 1; justify-self: start; align-self: center;
    /* position+z-index: שכבת הזכוכית של ההידר (::before, z-index 0)
       מכסה כל תוכן שאינו ממוקם */
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; margin: 0; padding: 0 12px;
    /* 17.9.2026: מסגרת חומה (הייתה כתומה); רק האייקון נשאר כתום */
    border: 1.5px solid rgba(67,31,16,.55); border-radius: 999px;
    background: rgba(255,255,255,.5); color: var(--ink,#431F10);
    font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
    white-space: nowrap; cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, translate .2s ease;
  }
  .site-header .journey-pill svg { width: 15px; height: 15px; flex: none; color: #F16A2C; }
  .site-header .journey-pill:hover { background: #FFF6F0; border-color: #431F10; translate: 0 -1px; }
  .site-header .journey-pill:focus-visible { outline: 3px solid rgba(241,106,44,.38); outline-offset: 3px; }
  .site-header.is-stuck .journey-pill { height: 30px; padding-inline: 11px; font-size: 12.5px; }
}
/* מצב "ליד": במחשבים הקטנים אין מקום לכיתוב ליד הלשוניות, ולכן נשאר
   עיגול עם אייקון; השם המלא נשמר לקוראי מסך (aria-label) ולריחוף (title). */
@media (min-width: 1025px) and (max-width: 1199px) {
  .site-header .site-navigation:not(.journey-mirror) .journey-pill { width: 32px; padding: 0; }
  .site-header.is-stuck .site-navigation:not(.journey-mirror) .journey-pill { width: 30px; }
  .site-header .site-navigation:not(.journey-mirror) .journey-pill span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
/* 17.9.2026 · מצב "מראה" (ברירת המחדל, JOURNEY_PILL_SIDE ב-site-refinements.js):
   "צפו בהשפעה" בקצה הימני של ההידר, מול "תרמו עכשיו" שבקצה השמאלי —
   אותו גובה, אותו רוחב (‎--hd-pair-w‎, הרחב מבין השניים) ואותו מרחק מהקצה,
   כך ששני צדי ההידר מאוזנים. */
@media (min-width: 1025px) {
  .site-header .site-navigation.journey-mirror .journey-pill { grid-column: 1; justify-self: start; width: var(--hd-pair-w, auto); }
  .site-header .site-navigation.journey-mirror .donate-pill { width: var(--hd-pair-w, auto) !important; }
}

/* 17.9.2026: תצוגה מקדימה של בורר שפות (דגל ישראל ודגל ארה"ב) בקצה הימני של
   ההידר — חזותי בלבד, עד שיהיה אתר דו-לשוני. נוצר ב-site-refinements.js. */
.site-header .lang-preview { display: none; }
@media (min-width: 1025px) {
  .site-header .lang-preview {
    grid-column: 1; grid-row: 1; justify-self: start; align-self: center;
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 4px;
    box-sizing: border-box; height: 32px; padding: 3px;
    border: 1px solid rgba(67, 31, 16, .12); border-radius: 999px;
    background: rgba(255, 255, 255, .55);
  }
  .site-header .lang-preview__flag {
    display: block; width: 24px; height: 24px; border-radius: 50%; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(67, 31, 16, .14);
    opacity: .55; filter: saturate(.55);
    transition: opacity .2s ease, filter .2s ease;
  }
  .site-header .lang-preview__flag svg { display: block; width: 100%; height: 100%; }
  .site-header .lang-preview__flag.is-active { opacity: 1; filter: none; box-shadow: 0 0 0 1.5px #F16A2C; }
  .site-header .lang-preview:hover .lang-preview__flag { opacity: 1; filter: none; }
  .site-header.is-stuck .lang-preview { height: 30px; }
  .site-header.is-stuck .lang-preview__flag { width: 22px; height: 22px; }
}
/* 23.9.2026: the switcher is a real language switch now. On phones and
   tablets the header is a flex bar (donate pill, logo, menu button), so the
   flags sit between the logo and the menu button, in both languages. */
@media (max-width: 1024px) {
  .site-header .lang-preview {
    display: inline-flex; align-items: center; gap: 3px;
    position: absolute; top: 50%; right: 70px; transform: translateY(-50%);
    z-index: 3; box-sizing: border-box; height: 28px; padding: 3px;
    border: 1px solid rgba(67, 31, 16, .12); border-radius: 999px;
    background: rgba(255, 255, 255, .55);
  }
  .site-header .lang-preview__flag {
    display: block; width: 20px; height: 20px; border-radius: 50%; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(67, 31, 16, .14);
    opacity: .55; filter: saturate(.55);
  }
  .site-header .lang-preview__flag svg { display: block; width: 100%; height: 100%; }
  .site-header .lang-preview__flag.is-active { opacity: 1; filter: none; box-shadow: 0 0 0 1.5px #F16A2C; }
}

html.journey-modal-open { overflow: hidden; }
/* 6.10.2026: תפריט המובייל הפתוח. ‎site-navigation.js‎ מוסיף את המחלקה
   רק בנייד, ומסיר אותה בכל סגירה - כולל Esc ולחיצה בחוץ. */
html.nav-scroll-lock { overflow: hidden; }
.journey-modal:not([open]) { display: none; }
.journey-modal[open] {
  position: fixed; inset: 0; box-sizing: border-box;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  margin: 0; padding: clamp(12px,2.4vw,36px);
  display: grid; place-items: center;
  border: 0; background: transparent; overflow: hidden;
}
.journey-modal::backdrop { background: rgba(38,17,9,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.journey-modal__panel {
  position: relative; width: min(1320px,100%); height: min(860px,100%);
  border-radius: clamp(18px,1.8vw,28px); overflow: hidden;
  background: #FEFCF8; box-shadow: 0 30px 90px rgba(20,8,3,.35);
}
.journey-modal__frame { display: block; width: 100%; height: 100%; border: 0; }
.journey-modal__close {
  position: absolute; z-index: 2; top: 14px; left: 14px;
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(53,24,15,.14); border-radius: 50%;
  background: rgba(254,252,248,.92); color: #35180F; cursor: pointer;
  box-shadow: 0 8px 24px rgba(53,24,15,.08);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .24s cubic-bezier(.16,1,.3,1);
}
.journey-modal__close svg { width: 18px; height: 18px; }
.journey-modal__close:hover { color: #F16A2C; border-color: rgba(241,106,44,.4); background: #fff; transform: rotate(4deg) scale(1.04); }
.journey-modal__close:focus-visible { outline: 3px solid #35180F; outline-offset: 3px; }
.journey-modal[open] .journey-modal__panel { animation: journeyModalIn .5s cubic-bezier(.16,1,.3,1) both; }
.journey-modal[open]::backdrop { animation: journeyBackdropIn .3s ease both; }
@keyframes journeyModalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes journeyBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .journey-modal[open] .journey-modal__panel, .journey-modal[open]::backdrop { animation: none; }
}
html.a11y-still .journey-modal[open] .journey-modal__panel,
html.a11y-still .journey-modal[open]::backdrop { animation: none; }

/* ============================================================
   17.9.2026 · כתב יד בהירו — האפשרות "כמו בתמונה" שחן בחרה בדף
   המעבדה (_lab/hero-preview.html), עם כותרת הכתבה במעבר עכבר.
   מ-901px ומעלה; בטאבלט ובנייד נשארת שורת התקשורת עם הכיתוב מעליה.
   ============================================================ */
.hero-press__hand, .hero-press__tip, .hero-note-arrow { display: none; }

/* כמה ההירו עלה אחרי הסרת התגית (נמדד: הכפתור עלה ב-80px בדסקטופ, ואחרי
   60px האוויר שנוסף מעל הכותרת — 20px נטו). הקרוסלה הרחבה (1101px+) נשארת
   ממורכזת בשטח שלה ועולה מעצמה רק בחצי, ולכן היא מקבלת את ההפרש ב-‎--g-bottom‎;
   שורת התקשורת עולה באותו מרחק, כך שהמרווחים שחן אישרה בין הכפתור, הקרוסלה
   והלוגואים נשמרים. מתחת ל-1101px הקרוסלה עולה כמעט כולה מעצמה, ורק שורת
   התקשורת האבסולוטית צריכה את הערך. */
@media (min-width: 901px) and (max-width: 1024px) { body.hero-v2 .hero { --hero-rise: 57px; } }
/* 1025–1100: הקרוסלה הרגילה גבוהה שם, והלוגואים היו עולים על הכרטיסים — השורה אפילו יורדת מעט */
@media (min-width: 1025px) and (max-width: 1100px) { body.hero-v2 .hero { --hero-rise: -12px; } }
@media (min-width: 1101px) { body.hero-v2 .hero { --hero-rise: 20px; } }
/* 17.9.2026: אוויר מעל הכותרת לבקשת חן — 40px, ואז עוד 20px (60px). padding על
   כל אזור הטקסט, כך שגם העיטורים (הלב וההערה) יורדים איתו */
@media (min-width: 901px) { body.hero-v2 .hero-copy { padding-top: 60px; } }
/* 17.9.2026: הקרוסלה לבדה יורדת עוד 15px (הכותרת והלוגואים נשארים). translate
   ולא top: כך גובה אזור הגלריה — וממנו גודל הכרטיסים — לא משתנה. */
@media (min-width: 901px) { body.hero-v2 .hero .gallery3d { translate: 0 15px; } }
@media (min-width: 901px) {
  /* "כתבו עלינו בתקשורת" בכתב יד משמאל ללוגואים, וחץ מקווקו שיורד אליהם.
     הכיתוב שמעל הלוגואים יורד. העוגן: הקצה השמאלי של שורת הלוגואים. */
  body.hero-v2 .hero .hero-press__label { display: none; }
  body.hero-v2 .hero .hero-press__link { position: relative; }
  body.hero-v2 .hero .hero-press__hand {
    display: block; position: absolute; top: 50%; right: 100%;
    width: 0; height: 0; pointer-events: none;
  }
  /* 17.9.2026: padding — הקו של ה-ת האחרונה בכתב היד חורג מתיבת הטקסט, והמסכה
     של אנימציית הכתיבה חתכה אותו. הריפוד מכניס אותו פנימה (וגם מזיז שמאלה). */
  body.hero-v2 .hero .hero-press__hand-text {
    position: absolute; right: 78px; top: -26px; padding: .2em .45em;
    transform: translateY(-50%) rotate(-5deg); transform-origin: right center;
    font-family: 'OhYaelLeibushor', 'Afek', sans-serif;
    font-size: clamp(20px, 1.87vw, 31px); line-height: 1; white-space: nowrap;
    color: #431F10;
    transition: color .2s ease;
  }
  body.hero-v2 .hero .hero-press__link:hover .hero-press__hand-text { color: #F16A2C; }
  body.hero-v2 .hero .hero-press__hand-arrow {
    position: absolute; right: -6px; top: -47px; width: 92px; height: 40px; overflow: visible;
  }

  /* ההערה ליד הכותרת חוזרת ("פועלים בשיתוף הרווחה והמיזם לביטחון תזונתי"),
     קטנה מעט מהמקור, גבוהה יותר ורחוקה יותר מהכותרת — כמו בתמונה */
  /* ההזזה ימינה גדלה עם רוחב המסך (30px ב-1100 עד 112px), כדי שבמחשבים
     הקטנים החץ לא ייחתך בקצה המסך */
  /* 17.9.2026: ההערה ירדה 20px (היה ‎-40px‎), והחץ שלה הוא קו מצטייר גדול
     יותר שיורד עד מעל הכרטיסים. תמונת החץ הישנה מוסתרת. מיקום החץ ביחידות
     em של גודל ההערה, כך שהוא גדל וקטן איתה בכל רוחב. */
  /* ‎--note-dx‎ הוגדל ב-25px (לבקשת חן, ההערה והחץ ימינה יותר) */
  body.hero-v2 .hero { --note-fs: clamp(19px, 1.78vw, 30px); --note-dx: clamp(55px, calc(55px + (100vw - 1100px) * .2), 137px); }
  /* ‎--note-shift‎: תיקון עדין למעלה/למטה לפי המקום עד הקרוסלה (site-refinements.js) */
  body.hero-v2 .hero .hero-handnote .deco-hand { --script-fs: var(--note-fs); translate: var(--note-dx) calc(-20px + var(--note-shift, 0px)); }
  body.hero-v2 .hero .hero-handnote .deco-harr { display: none; }
  body.hero-v2 .hero .hero-note-arrow {
    display: block; font-size: var(--note-fs);
    right: calc(-1 * var(--hand-x) + 1.3em);
    top: calc(var(--hand-y) - var(--copy-rise, 0px) + 2.9em);
    width: 4.1em; height: auto;
    translate: var(--note-dx) -20px;
  }
  /* העיטורים שליד הכותרת ממוקמים מראש אזור הטקסט, והכותרת עלתה בגובה התגית
     שהוסרה — לכן הם עולים איתה באותו מרחק. top ולא translate: הלב נכנס
     באנימציית הפתיחה, שמאפסת את ה-translate שלו. */
  body.hero-v2 .hero .deco-hand { top: calc(var(--hand-y) - var(--copy-rise, 0px)); }
  body.hero-v2 .hero .deco-harr { top: calc(var(--harr-y) - var(--copy-rise, 0px)); }
  body.hero-v2 .hero .deco-heart { top: calc(var(--heart-y) - var(--copy-rise, 0px)); }
}
/* 22.9.2026 · תיקון תחום הטאבלט.
   ‎site.css:5806‎ מסתיר את כל ה-‎.deco‎ מתחת ל-961px — שם כבר אין להם מקום,
   אחרי שהם מתכווצים ל-‎--deco-k: .55‎. אבל החץ של ההערה אינו ‎.deco‎ והודלק
   כאן כבר מ-901px, ולכן בחלון 901–960 הוא נשאר מצויר ומצביע על כלום.
   עכשיו הוא נעלם יחד עם כתב היד שאליו הוא שייך. */
@media (max-width: 960px) { body.hero-v2 .hero .hero-note-arrow { display: none; } }

/* גובה התגית שהוסרה (עם הרווח שמתחתיה), כפי שנמדד */
@media (min-width: 901px) and (max-width: 1024px) { body.hero-v2 .hero { --copy-rise: 102px; } }
@media (min-width: 1025px) { body.hero-v2 .hero { --copy-rise: 76px; } }
/* כותרת הכתבה בבועה מעל הלוגו שמתחת לסמן. הבועה נבנית ב-site-refinements.js
   מתוך data-press-head / data-press-title שעל כל לוגו ב-index.html. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  body.hero-v2 .hero .hero-press__tip {
    display: block; position: absolute; z-index: 5; top: 0; left: 0;
    width: max-content; max-width: 280px; padding: 9px 13px 10px;
    border-radius: 12px; background: #35180F; color: #FEFCF8;
    box-shadow: 0 12px 30px rgba(53, 24, 15, .22);
    font-family: 'Afek', 'Assistant', sans-serif; font-size: 13px; line-height: 1.35;
    text-align: right; white-space: normal; pointer-events: none;
    opacity: 0; transform: translate(-50%, calc(-100% + 6px));
    transition: opacity .2s ease, transform .2s ease;
  }
  body.hero-v2 .hero .hero-press__tip.is-on { opacity: 1; transform: translate(-50%, -100%); }
  body.hero-v2 .hero .hero-press__tip::after {
    content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px;
    border: 6px solid transparent; border-top-color: #35180F;
  }
  body.hero-v2 .hero .hero-press__tip small { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; color: #FF9A59; }
  body.hero-v2 .hero .hero-press__tip-title { display: block; font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
  body.hero-v2 .hero .hero-press__tip { transition: none; }
}

/* ===== כניסה: הכתב יד נכתב והחצים מצטיירים =====
   באותה שיטה של אנימציית הפתיחה (site.css): מצב ההתחלה כבר ב-hero-pre ובחימוש,
   והמעבר רק כש-hero-in נוסף. הסדר: ההערה ליד הכותרת נכתבת (site.css, 1–2.2 שניות)
   וחץ שלה מצטייר, ואז שורת התקשורת מופיעה, הכתב יד שלה נכתב והחץ יורד ללוגואים.
   החצים מקווקווים, ולכן לא "מושכים" את הקו עצמו: מסכה בצורת אותו קו נמתחת
   לאורכו (stroke-dashoffset על pathLength=1) וחושפת את המקווקו, והראש מופיע בסוף. */
.hero-draw-mask { stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero-pre .hero .hero-draw-mask,
.hero.hero-armed .hero-draw-mask { stroke-dashoffset: 1; }
.hero-pre .hero .hero-draw-head,
.hero.hero-armed .hero-draw-head { opacity: 0; }
.hero.hero-armed.hero-in .hero-note-arrow .hero-draw-mask {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.45,.05,.25,1) 2s;
}
.hero.hero-armed.hero-in .hero-note-arrow .hero-draw-head { opacity: 1; transition: opacity .25s ease 2.9s; }
.hero.hero-armed.hero-in .hero-press__hand-arrow .hero-draw-mask {
  stroke-dashoffset: 0; transition: stroke-dashoffset .85s cubic-bezier(.45,.05,.25,1) 2.95s;
}
.hero.hero-armed.hero-in .hero-press__hand-arrow .hero-draw-head { opacity: 1; transition: opacity .25s ease 3.7s; }
/* "כתבו עלינו בתקשורת" נכתב מימין לשמאל — אותה מסכה רכה של ההערה שליד הכותרת */
.hero-pre .hero .hero-press__hand-text,
.hero.hero-armed .hero-press__hand-text {
  -webkit-mask-image: linear-gradient(to left, #000 0 34%, rgba(0,0,0,0) 66%);
          mask-image: linear-gradient(to left, #000 0 34%, rgba(0,0,0,0) 66%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 300% 100%;   mask-size: 300% 100%;
  -webkit-mask-position: 0% 50%;  mask-position: 0% 50%;
}
.hero.hero-armed.hero-in .hero-press__hand-text {
  -webkit-mask-position: 100% 50%; mask-position: 100% 50%;
  transition: color .2s ease,
              -webkit-mask-position 1.15s cubic-bezier(.36,.68,.3,1) 1.8s,
                      mask-position 1.15s cubic-bezier(.36,.68,.3,1) 1.8s;
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-draw-mask, .hero.hero-armed .hero-draw-mask { stroke-dashoffset: 0 !important; transition: none !important; }
  .hero .hero-draw-head, .hero.hero-armed .hero-draw-head { opacity: 1 !important; transition: none !important; }
  .hero.hero-armed .hero-press__hand-text { -webkit-mask-image: none; mask-image: none; transition: none; }
}
html.a11y-still .hero .hero-draw-mask { stroke-dashoffset: 0 !important; transition: none !important; }
html.a11y-still .hero .hero-draw-head { opacity: 1 !important; transition: none !important; }
html.a11y-still .hero .hero-press__hand-text { -webkit-mask-image: none !important; mask-image: none !important; }

/* 5.10.2026: בטלפון ההערה בכתב יד והחץ שלה נכנסים לכוריאוגרפיה של ההירו במקום
   להיות שם מההתחלה. הטקסט "נכתב" מימין לשמאל באותה מסכה של שורת התקשורת,
   והחץ מופיע אחריו. התזמון נופל בין הכפתור לשורת התקשורת, לפי סדר הקריאה. */
@media (max-width: 767px) {
  .hero-pre .hero .hero-handnote .deco-hand,
  .hero.hero-armed .hero-handnote .deco-hand {
    -webkit-mask-image: linear-gradient(to left, #000 0 34%, rgba(0,0,0,0) 66%);
            mask-image: linear-gradient(to left, #000 0 34%, rgba(0,0,0,0) 66%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 300% 100%;   mask-size: 300% 100%;
    -webkit-mask-position: 0% 50%;  mask-position: 0% 50%;
  }
  .hero.hero-armed.hero-in .hero-handnote .deco-hand {
    -webkit-mask-position: 100% 50%; mask-position: 100% 50%;
    transition: -webkit-mask-position 1.05s cubic-bezier(.36,.68,.3,1) 1.35s,
                        mask-position 1.05s cubic-bezier(.36,.68,.3,1) 1.35s;
  }
  .hero-pre .hero .hero-handnote .hero-arrow-code,
  .hero.hero-armed .hero-handnote .hero-arrow-code { opacity: 0; translate: 10px -4px; }
  .hero.hero-armed.hero-in .hero-handnote .hero-arrow-code {
    opacity: .94; translate: 0 0;
    transition: opacity .5s ease 2.25s, translate .6s cubic-bezier(.16,1,.3,1) 2.25s;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero.hero-armed .hero-handnote .deco-hand { -webkit-mask-image: none; mask-image: none; transition: none; }
    .hero.hero-armed .hero-handnote .hero-arrow-code { opacity: .94; translate: 0 0; transition: none; }
  }
}
html.a11y-still .hero .hero-handnote .deco-hand { -webkit-mask-image: none !important; mask-image: none !important; }
html.a11y-still .hero .hero-handnote .hero-arrow-code { opacity: .94 !important; translate: 0 0 !important; transition: none !important; }

/* 5.10.2026: בטלפון חלון "צפו בהשפעה" נפתח מקצה לקצה. הריפוד של הדיאלוג
   והפינות המעוגלות של הפאנל השאירו מסגרת סביב הסרטון. */
@media (max-width: 700px) {
  .journey-modal[open] { padding: 0; }
  .journey-modal__panel { width: 100%; height: 100%; border-radius: 0; }
}

/* ===== 24.9.2026: הלשונית "מנציחים את רועי" =====
   לבקשת הלקוח רועי יצא מתפריט "אודות" ללשונית משלו, שונה משאר הלשוניות.
   הסימון: תגית אפרסק רכה, כמו תגיות האזורים בעמוד, בלי אייקון ובלי קו.
   בעמוד רועי עצמו התגית כתומה. בתפריט הנייד אותה תגית בתוך השורה. */
.site-header .nav-menu .nav-roei { color: var(--ink); font-weight: 800; }
/* 7.10.2026: הרקע האפרסקי הוסר. בתפריט שכולו טקסט פשוט, פריט אחד עם
   רקע נקרא ככפתור או כפרסומת ומושך את העין מהניווט עצמו. ההנצחה ממילא
   נישאת עכשיו בשלושה מקומות אחרים — הפופ-אפ, הלשונית והרצועה בנייד —
   ואין צורך בהדגשה רביעית. נשאר משקל כבד וקו תחתון בריחוף, שמסמנים
   אותו בלי לצעוק. להחזרה: ‎background: #FDE9DD‎ בשורה הזאת. */
/* 7.10.2026: ‎display: inline-block‎ והריפוד שנשארו מהתגית הישנה הרימו
   את הפריט ב-2px מעל שאר התפריט (נמדד: y=43 מול y=45). עכשיו הוא טקסט
   רגיל לכל דבר, ומה שמסמן אותו הוא המשקל בלבד. */
.site-header .nav-menu .nav-roei > span { display: inline; padding: 0; border-radius: 0; line-height: inherit; box-shadow: none; transition: color .2s ease; }
.site-header .nav-menu .nav-roei > span { text-decoration: none; }
.site-header .nav-menu .nav-roei:hover { color: var(--orange); }
.site-header .nav-menu .nav-roei:hover > span { text-decoration: underline; text-underline-offset: 4px; }
/* בעמוד רועי עצמו: כתום, בלי רקע — אותה שפה כמו שאר הפריטים הפעילים. */
.site-header .nav-menu .nav-roei[aria-current="page"],
.site-header .nav-menu .nav-roei[aria-current="page"] > span,
.site-header .nav-menu .nav-roei[aria-current="page"]:hover > span { background: none; color: var(--orange); }

/* ===== 24.9.2026: הקדשה לזכרו של רועי (site-refinements.js) =====
   מסך פתיחה על רקע הקרם של האתר; לא תיבה קופצת. השמיים של עמוד רועי
   פרושים על כל החלק העליון ונמסים למטה ובצדדים; רועי עומד בהם עם ההילה
   מאחוריו ושוליו נמסים אל השמיים; מתחתיו כותרת גדולה בשתי שורות, שורה
   שנכתבת אות-אות, וכפתור לסיפור. הקו הדק למטה מראה שהמסך זמני. */
.dedication { --ded-sky: 56vh; --ded-fig: min(40vh, 420px); position: fixed; inset: 0; z-index: 12000; overflow: hidden; background: #FBF7F1; color: var(--ink, #431F10); opacity: 0; transition: opacity .5s ease; }
.dedication.is-in { opacity: 1; }
.dedication.is-leaving { opacity: 0; pointer-events: none; transition: opacity .85s ease; }
/* השמיים: על כל רוחב החלק העליון, נמסים אל הקרם בתחתית ובשני הצדדים */
.dedication__sky { position: absolute; inset: 0 0 auto 0; height: var(--ded-sky); pointer-events: none; opacity: 0; transform: scale(1.05); transition: opacity 1.4s ease, transform 7s ease-out;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.55) 76%, transparent 100%), linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.55) 76%, transparent 100%), linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dedication.is-in .dedication__sky { opacity: 1; transform: none; }
.dedication__clouds, .dedication__clouds-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.3) contrast(1.08); }
.dedication__clouds-video { opacity: 0; transition: opacity 1.2s ease; }
.dedication__clouds-video.is-playing { opacity: 1; }
/* הרכב: רועי יושב על גבול השמיים, הטקסט מתחתיו על הקרם */
.dedication__card { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; text-align: center; padding: calc(var(--ded-sky) - var(--ded-fig)) 24px 0; }
.dedication__figure { position: relative; height: var(--ded-fig); width: calc(var(--ded-fig) * 0.94); display: grid; justify-items: center; align-items: end; opacity: 0; transform: translateY(16px); transition: opacity 1.1s ease .3s, transform 1.4s cubic-bezier(.22,.9,.3,1) .3s; }
.dedication.is-in .dedication__figure { opacity: 1; transform: none; }
.dedication.is-leaving .dedication__figure, .dedication.is-leaving .dedication__pre, .dedication.is-leaving .dedication__name, .dedication.is-leaving .dedication__line, .dedication.is-leaving .dedication__cta { opacity: 0; transform: translateY(-8px); transition: opacity .6s ease, transform .9s ease; }
/* ההילה: זוהר חם וקרניים איטיות מאחורי הראש, כמו בעמוד רועי */
/* ההילה: עדינה, סביב הראש בלבד. ממורכזת בגובה הראש, דועכת לפני הסנטר
   (מסכה אנכית על כל השכבה, כולל הקרניים) ולא מגיעה לגוף ולא לטקסט. */
/* 5.10.2026: האור ממשיך סביבו ולא נעצר מעל הסנטר — ליבה באותה עוצמה שאושרה,
   ומסביבה טבעת רכה שנמשכת עד הכתפיים ודועכת הרבה לפני הטקסט. */
.dedication__light { position: absolute; left: 50%; top: 27%; width: 130%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; background: radial-gradient(circle, rgba(255,252,240,.95) 0%, rgba(255,247,226,.7) 16%, rgba(255,240,208,.36) 32%, rgba(255,236,200,.16) 44%, rgba(255,238,206,.08) 54%, rgba(255,236,200,0) 64%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.45) 68%, rgba(0,0,0,.15) 80%, transparent 90%); mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.45) 68%, rgba(0,0,0,.15) 80%, transparent 90%); animation: dedicationBreathe 6s ease-in-out infinite; }
.dedication__rays { position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, rgba(255,250,232,0) 0deg 6deg, rgba(255,250,232,.6) 9deg 11.5deg, rgba(255,250,232,0) 14.5deg 20deg); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.6) 22%, transparent 44%); mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.6) 22%, transparent 44%); filter: blur(2px); animation: dedicationRays 110s linear infinite; }
/* הדיוקן: גובה מפורש (אחוזים לא נפתרים כאן), והחלק התחתון נמס */
.dedication__photo { position: relative; z-index: 1; height: var(--ded-fig); width: auto; max-width: none; -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 97%); mask-image: linear-gradient(to bottom, #000 58%, transparent 97%); }
/* שורת הפתיחה נמתחת בדיוק לרוחב השם: site-refinements.js מודד וקובע את הגופן */
.dedication__pre { margin: 6px 0 0; font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; color: #6B4A38; white-space: nowrap; opacity: 0; transition: opacity .8s ease .7s; }
.dedication.is-in .dedication__pre { opacity: 1; }
.dedication__name { margin: 2px 0 0; font-size: clamp(42px, 6vw, 72px); font-weight: 900; line-height: 1.08; letter-spacing: -.01em; }
.dedication__line { margin: 12px 0 0; font-size: clamp(17px, 1.55vw, 22px); line-height: 1.6; max-width: 48ch; color: #5A3A2A; }
.dedication__line b { color: var(--orange, #F16A2C); font-weight: 800; }
/* הכניסה אות-אות, כמו djLetterIn בסצנה; המילים שלמות כדי שלא יישברו באמצע */
.dedication__word { display: inline-block; white-space: nowrap; }
.dedication__letter { display: inline-block; white-space: pre; opacity: 0; transform-origin: 50% 100%; }
.dedication.is-in .dedication__letter { animation: dedicationLetter 560ms cubic-bezier(.16,1,.3,1) both; animation-delay: var(--d, 0ms); will-change: opacity, filter, transform; }
/* השם בגרדיאנט הכתום של האתר, נמתח על כל השורה (site-refinements.js מודד) */
.dedication__name .dedication__letter, .dedication.is-still .dedication__name { background-image: linear-gradient(90deg, #FF6A3D 0%, #FB8C2E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.dedication__name .dedication__letter { background-size: var(--gw, 100%) 100%; background-position: var(--gx, 0) 50%; background-repeat: no-repeat; }
/* הכפתור מופיע כשהשורה נגמרת */
.dedication__cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px 13px 16px; border-radius: 999px; background: linear-gradient(100deg, #F16A2C, #FB8C2E); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px rgba(241,106,44,.32); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .6s ease, transform .7s cubic-bezier(.22,.9,.3,1), box-shadow .2s ease; }
.dedication.is-typed .dedication__cta { opacity: 1; transform: none; pointer-events: auto; }
.dedication__cta:hover { box-shadow: 0 14px 30px rgba(241,106,44,.42); color: #fff; }
.dedication__cta:focus-visible { outline: 3px solid var(--ink, #431F10); outline-offset: 3px; }
.dedication__cta svg { width: 18px; height: 18px; flex: none; }
html[dir="ltr"] .dedication__cta { padding: 12px 16px 13px 22px; }
html[dir="ltr"] .dedication__cta svg { transform: scaleX(-1); }
.dedication__hint { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; margin: 0; display: grid; justify-items: center; gap: 8px; font-size: 12.5px; color: #9A7F70; white-space: nowrap; opacity: 0; transition: opacity .6s ease; }
.dedication.is-typed .dedication__hint { opacity: 1; }
.dedication__hint i { display: block; width: 120px; height: 2px; border-radius: 2px; background: rgba(67,31,16,.12); overflow: hidden; }
.dedication.is-typed .dedication__hint i::after { content: ""; display: block; height: 100%; width: 100%; background: var(--orange, #F16A2C); transform-origin: 100% 50%; animation: dedicationDrain 4.2s linear forwards; }
html[dir="ltr"] .dedication__hint i::after { transform-origin: 0 50%; }
@media (max-width: 700px) { .dedication { --ded-sky: 48vh; --ded-fig: min(34vh, 300px); } .dedication__card { padding-inline: 18px; } .dedication__pre { font-size: 15px; } .dedication__name { font-size: clamp(36px, 10vw, 44px); } .dedication__line { max-width: none; font-size: 16.5px; } }
@media (max-height: 720px) and (min-width: 701px) { .dedication { --ded-sky: 52vh; --ded-fig: min(34vh, 320px); } .dedication__name { font-size: clamp(32px, 4.8vw, 52px); } }
@keyframes dedicationBreathe { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes dedicationRays { to { rotate: 360deg; } }
@keyframes dedicationLetter { from { opacity: 0; filter: blur(1.25px); transform: translateY(.12em) scale(.985); } 58% { opacity: .94; filter: blur(.2px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes dedicationDrain { to { transform: scaleX(0); } }
/* מצב ביקורת (‎?dedication=hold‎): בלי הקו שמתרוקן, והכיתוב למטה הוא הכפתור לסגירה */
.dedication.is-hold .dedication__hint { pointer-events: auto; cursor: pointer; color: var(--ink, #431F10); border: 1px solid rgba(67,31,16,.25); border-radius: 999px; padding: 6px 14px; background: rgba(255,255,255,.6); }
.dedication.is-hold .dedication__hint i { display: none; }
.dedication.is-still, .dedication.is-still * { transition: none !important; animation: none !important; }
.dedication.is-still .dedication__card { opacity: 1; transform: none; }

/* ===================================================================
   8.10.2026 · הפריט הפעיל בתפריט — בגרדיאנט הכתום
   -------------------------------------------------------------------
   לבקשת חן. עד כה הפריט של העמוד הנוכחי נראה כמו כל השאר — חום
   ‎#431F10‎ ומשקל 600 — ולא היה שום סימן חזותי לאיפה המבקר נמצא.

   אותו גרדיאנט שמשמש להדגשות בכל האתר (‎--grad-accent‎), חתוך על
   הטקסט. הכלל יושב כאן ולא ב-‎site.css‎ כי ‎transparency.css‎ מחזיר
   את הפריט הפעיל לחום (שורה 83), ו-‎site-refinements.css‎ נטען
   אחריו בכל 13 העמודים — כלומר זה המקום היחיד שבו הכלל גובר בכל
   האתר בלי ‎!important‎.

   ⚠️ ‎color‎ נקבע לפני החיתוך בכוונה: אם ‎background-clip: text‎
   אינו נתמך, הטקסט יוצא כתום מלא ולא שקוף. בלי זה הפריט היה
   נעלם לגמרי בדפדפן שלא תומך.

   ⚠️ ‎.nav-roei‎ מוחרג: לפריט ההנצחה יש כבר כלל משלו (שורה 971),
   והוא כתום מלא בכוונה — הגרדיאנט על טקסט דו-צבעי שם היה מוחק את
   ההדגשה שבתוכו.

   ⚠️ ‎.sub-menu‎ מוחרג: שם הפריט הפעיל מעוצב ב-‎site-navigation.css‎
   (שורה 34) עם רקע, ושם זה נראה נכון.
   =================================================================== */
.site-header .nav-menu > li > a[aria-current="page"]:not(.nav-roei) {
  color: var(--orange);
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ⚠️ במצבי הנגישות שמשנים צבע — ניגודיות כהה, ניגודיות בהירה,
   גווני אפור והיפוך צבעים — הגרדיאנט החתוך על טקסט מתנגש עם
   הפילטר ויכול להשאיר טקסט שקוף. שם חוזרים לכתום אחיד.
   שמות המחלקות מ-‎a11y.js:15‎. */
html.a11y-contrast .site-header .nav-menu > li > a[aria-current="page"]:not(.nav-roei),
html.a11y-contrast-light .site-header .nav-menu > li > a[aria-current="page"]:not(.nav-roei),
html.a11y-grayscale .site-header .nav-menu > li > a[aria-current="page"]:not(.nav-roei),
html.a11y-invert .site-header .nav-menu > li > a[aria-current="page"]:not(.nav-roei) {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--orange);
}