/* ═══════════════════════════════════════════════════════════════
   CLICKABILY · כפתורים צפים + תפריט נגישות
   ───────────────────────────────────────────────────────────────
   שני רכיבים שמלווים כל עמוד, ולכן הם נכתבים בשפה של האתר ולא
   בשפה של תוסף: אותה קרקע כחולה, אותה מנטה, אותו pill, אותו ease.

   ⚠️ המיקום של שני הרכיבים נכתב ב-left/right פיזיים ולא ב-
   inset-inline, וזה מכוון. האתר RTL, ולכן inset-inline-start
   מתמפה לימין — הגרסה הראשונה כאן נכתבה לוגית ושני הרכיבים יצאו
   בדיוק הפוך ממה שההגדרה אמרה. ההגדרה בפאנל היא "ימין" או
   "שמאל" במובן שהלקוח מתכוון אליו כשהוא מסתכל על המסך, ולכן
   הקוד חייב לדבר באותם מונחים. בתוך הכפתור עצמו, לעומת זאת,
   הכיוון כן לוגי — שם הוא באמת נגזר מכיוון הקריאה.
   ═══════════════════════════════════════════════════════════════ */

.ckf,.cka{
  --ck-navy:#04122e; --ck-mint:#00eaad; --ck-paper:#f2f2f2;
  --ck-ease:cubic-bezier(.22,1,.36,1);
  --ck-plate:linear-gradient(to left,rgba(12,38,86,.97),rgba(4,18,46,.96));
  --ck-fill:linear-gradient(102deg,#00c9a0,#00eaad 30%,#7cffda 52%,#00eaad 76%,#00c9a0);
}

/* ══ הכפתורים הצפים ═══════════════════════════════════════════ */
.ckf{
  position:fixed;inset-block-end:clamp(1rem,3vh,1.6rem);z-index:960;
  display:flex;flex-direction:column;gap:.7rem;
  /* נכנסים מלמטה. opacity לבד היה משאיר אותם לחיצים בזמן
     שהם שקופים, ולכן גם visibility. */
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .32s var(--ck-ease),transform .32s var(--ck-ease),
             visibility 0s linear .32s}
.ckf.is-in{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ckf--right{right:clamp(1rem,3vw,1.6rem)}
.ckf--left {left:clamp(1rem,3vw,1.6rem)}

.ckf__b{
  position:relative;display:flex;align-items:center;gap:.6rem;
  inline-size:58px;block-size:58px;padding:0;border-radius:999px;
  background:var(--ck-plate);color:var(--ck-mint);
  border:1px solid rgba(0,234,173,.34);text-decoration:none;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.85),
             0 0 0 0 rgba(0,234,173,.35),
             inset 0 1px 0 rgba(0,234,173,.16);
  transition:inline-size .34s var(--ck-ease),background .26s var(--ck-ease),
             color .26s var(--ck-ease),transform .2s var(--ck-ease),
             box-shadow .26s var(--ck-ease);
  overflow:hidden}
.ckf__i{flex:0 0 58px;display:grid;place-items:center;block-size:58px}
.ckf__i svg{display:block}

/* התווית נפתחת פנימה מהאייקון. inline-size ולא width כדי
   שהכיוון ייגזר מה-RTL ולא ייכתב פעמיים. */
.ckf__l{
  white-space:nowrap;font-family:'Fb Singulari',system-ui,sans-serif;
  font-weight:700;font-size:.95rem;opacity:0;
  padding-inline-end:1.15rem;
  transition:opacity .2s var(--ck-ease)}

@media (hover:hover) and (min-width:781px){
  .ckf:not(.ckf--bare) .ckf__b:hover,
  .ckf:not(.ckf--bare) .ckf__b:focus-visible{inline-size:var(--ckf-w,168px)}
  .ckf:not(.ckf--bare) .ckf__b:hover .ckf__l,
  .ckf:not(.ckf--bare) .ckf__b:focus-visible .ckf__l{opacity:1;transition-delay:.06s}
}
/* במובייל התווית לא נפתחת לעולם — היא הייתה חוצה את המסך */
@media (max-width:780px){ .ckf__l{display:none} }

.ckf__b:hover,.ckf__b:focus-visible{
  background:var(--ck-fill);color:var(--ck-navy);border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(0,234,173,.55),
             0 0 0 6px rgba(0,234,173,.10)}
.ckf__b:focus-visible{outline:2px solid var(--ck-mint);outline-offset:3px}

/* פעימה עדינה פעם אחת בכניסה, כדי שהעין תמצא אותם בלי שהם
   יפעמו לנצח ויהפכו להסחה */
@media (prefers-reduced-motion:no-preference){
  .ckf.is-in .ckf__b--wa{animation:ckfPulse 2.4s var(--ck-ease) .5s 2}
}
@keyframes ckfPulse{
  0%,100%{box-shadow:0 10px 26px -10px rgba(0,0,0,.85),0 0 0 0 rgba(0,234,173,.42)}
  50%    {box-shadow:0 10px 26px -10px rgba(0,0,0,.85),0 0 0 12px rgba(0,234,173,0)}
}

/* ══ תפריט הנגישות ════════════════════════════════════════════ */
.cka{position:fixed;inset-block-end:clamp(1rem,3vh,1.6rem);z-index:970}
.cka--left {left:clamp(1rem,3vw,1.6rem)}
.cka--right{right:clamp(1rem,3vw,1.6rem)}

.cka__open{
  inline-size:56px;block-size:56px;display:grid;place-items:center;
  border-radius:999px;cursor:pointer;
  background:var(--ck-plate);color:var(--ck-mint);
  border:1px solid rgba(0,234,173,.34);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.85),inset 0 1px 0 rgba(0,234,173,.16);
  transition:background .24s var(--ck-ease),color .24s var(--ck-ease),
             transform .2s var(--ck-ease)}
.cka__open:hover,.cka__open:focus-visible{
  background:var(--ck-fill);color:var(--ck-navy);transform:translateY(-2px)}
.cka__open:focus-visible{outline:2px solid var(--ck-mint);outline-offset:3px}

.cka__panel{
  position:absolute;inset-block-end:calc(100% + .8rem);
  inline-size:min(88vw,308px);
  background:var(--ck-plate);border:1px solid rgba(0,234,173,.3);
  border-radius:18px;padding:1.1rem 1.1rem 1rem;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(0,234,173,.14);
  color:var(--ck-paper);font-family:'Fb Singulari',system-ui,sans-serif;
  max-block-size:min(76vh,560px);overflow-y:auto}
.cka--left  .cka__panel{left:0}
.cka--right .cka__panel{right:0}
.cka__panel[hidden]{display:none}

.cka__head{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-block-end:.9rem}
.cka__t{margin:0;font-size:1.06rem;font-weight:900;letter-spacing:-.01em}
.cka__x{background:none;border:0;color:rgba(242,242,242,.62);cursor:pointer;
  padding:.35rem;border-radius:8px;display:grid;place-items:center}
.cka__x:hover{color:var(--ck-mint);background:rgba(0,234,173,.1)}
.cka__x:focus-visible{outline:2px solid var(--ck-mint);outline-offset:1px}

.cka__grp + .cka__grp{margin-block-start:1rem;padding-block-start:1rem;
  border-block-start:1px solid rgba(242,242,242,.1)}
.cka__lbl{margin:0 0 .5rem;font-size:.82rem;font-weight:700;
  letter-spacing:.06em;color:rgba(242,242,242,.5)}

/* גודל טקסט */
.cka__size{display:flex;align-items:center;gap:.5rem}
.cka__sz{flex:1;min-block-size:44px;border-radius:11px;cursor:pointer;
  background:rgba(242,242,242,.07);border:1px solid rgba(242,242,242,.16);
  color:var(--ck-paper);font-family:inherit;font-weight:700;font-size:1rem}
.cka__sz:hover{background:rgba(0,234,173,.14);border-color:rgba(0,234,173,.4);
  color:var(--ck-mint)}
.cka__sz:focus-visible{outline:2px solid var(--ck-mint);outline-offset:2px}
.cka__szv{min-inline-size:58px;text-align:center;font-size:.9rem;font-weight:700;
  color:rgba(242,242,242,.78);font-variant-numeric:tabular-nums}

/* ההתאמות */
.cka__list{list-style:none;margin:0;padding:0;display:grid;gap:.34rem}
.cka__o{
  inline-size:100%;display:flex;align-items:center;gap:.6rem;
  min-block-size:44px;padding:.5rem .7rem;border-radius:11px;cursor:pointer;
  background:rgba(242,242,242,.05);border:1px solid transparent;
  color:rgba(242,242,242,.84);font-family:inherit;font-size:.94rem;
  text-align:start;transition:background .18s,color .18s,border-color .18s}
.cka__ic{flex:0 0 18px;color:rgba(242,242,242,.5);transition:color .18s}
.cka__o:hover{background:rgba(0,234,173,.1);color:var(--ck-paper)}
.cka__o:focus-visible{outline:2px solid var(--ck-mint);outline-offset:2px}
.cka__o[aria-pressed="true"]{
  background:rgba(0,234,173,.16);border-color:rgba(0,234,173,.45);
  color:var(--ck-mint);font-weight:700}
.cka__o[aria-pressed="true"] .cka__ic{color:var(--ck-mint)}

.cka__foot{margin-block-start:1rem;padding-block-start:.9rem;
  border-block-start:1px solid rgba(242,242,242,.1);
  display:grid;gap:.55rem}
.cka__reset{
  min-block-size:44px;border-radius:11px;cursor:pointer;font-family:inherit;
  background:rgba(242,242,242,.07);border:1px solid rgba(242,242,242,.18);
  color:rgba(242,242,242,.8);font-size:.92rem;font-weight:700}
.cka__reset:hover{background:rgba(255,120,120,.14);border-color:rgba(255,120,120,.4);
  color:#ff9a9a}
.cka__reset:focus-visible{outline:2px solid var(--ck-mint);outline-offset:2px}
.cka__stmt{text-align:center;font-size:.9rem;color:var(--ck-mint);
  text-decoration:underline;text-underline-offset:3px;padding:.35rem}
.cka__stmt:hover{color:#7cffda}

/* ══ ההתאמות עצמן ═════════════════════════════════════════════
   מוחלות כמחלקות על <html>, כדי שהן יתפסו גם על אלמנטים שנוצרים
   אחרי הטעינה. */

/* גודל טקסט — מכפיל על שורש המסמך, כך שכל יחידת rem באתר
   נגררת אחריו ואין צורך לגעת באף כלל בנפרד */
html.cka-fs{font-size:calc(100% * var(--cka-font,1))}

/* ניגודיות גבוהה */
html.cka-contrast body{background:#000 !important}
html.cka-contrast :is(p,li,span,h1,h2,h3,h4,dd,dt,figcaption,label,em,strong,td,th){
  color:#fff !important}
html.cka-contrast a:not(.btn):not(.ckf__b){color:#4dffcd !important}
html.cka-contrast :is(.s,.sec,section,header,footer,article,aside)
  {background-color:transparent !important}
html.cka-contrast :is(.card,.cf__card,.wsite,.proj,.cka__panel,.ckf__b){
  background:#0a0a0a !important;border-color:#fff !important}
/* אלמנטים דקורטיביים שמורידים ניגודיות — נייר מילימטרי, גרעין,
   הילות. הם נעלמים, ולא מתבהרים. */
html.cka-contrast :is(.grain,.masslight,.mass,.prop,[aria-hidden="true"] > img){
  opacity:0 !important}

/* גווני אפור — על <html> ולא על body: filter על body היה הופך
   אותו לבלוק המכיל של כל position:fixed שבתוכו, וההדר הקבוע
   והכפתורים הצפים היו מפסיקים להיות קבועים */
html.cka-gray{filter:grayscale(1)}

/* הדגשת קישורים */
html.cka-links a{
  text-decoration:underline !important;text-underline-offset:3px !important;
  text-decoration-thickness:2px !important}
html.cka-links a:not(.btn):not(.ckf__b):not(.logo):not(.cka__stmt){
  outline:2px dashed rgba(0,234,173,.75);outline-offset:2px;
  background:rgba(0,234,173,.07)}

/* גופן קריא — משפחה סיסטמית עם צורות אות ברורות, ומרווח אות
   ושורה נדיבים יותר */
html.cka-readable :is(body,button,input,textarea,select,h1,h2,h3,h4,p,a,li,span){
  font-family:Arial,'Segoe UI',system-ui,sans-serif !important;
  letter-spacing:.012em !important}
html.cka-readable :is(p,li){line-height:1.85 !important}

/* עצירת הנפשות — מתג ההשבתה השני של האתר, לצד
   prefers-reduced-motion. הוא חייב לנטרל גם transform, כי חלק
   מהחשיפות מגיעות משם. */
html.cka-nomotion *,
html.cka-nomotion *::before,
html.cka-nomotion *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important}
html.cka-nomotion :is(.rise,[data-anim]){opacity:1 !important;transform:none !important}
html.cka-nomotion video{display:none}

/* סמן מוגדל */
html.cka-cursor,html.cka-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cpath d='M6 2l24 13-10 2.6L14.4 30z' fill='%23fff' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2,auto !important}
html.cka-cursor a,html.cka-cursor button,html.cka-cursor [role=button]{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cpath d='M13 3a3 3 0 016 0v12h2a6 6 0 016 6v6a8 8 0 01-8 8h-5a7 7 0 01-6-3.4L13 24z' fill='%23fff' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 12 2,pointer !important}

/* מדריך קריאה — פס שנע עם הסמן ומקבע את העין על שורה אחת */
.cka-guide__bar{
  position:fixed;inset-inline:0;block-size:2.5rem;z-index:950;
  pointer-events:none;
  border-block:2px solid rgba(0,234,173,.85);
  background:rgba(0,234,173,.07);
  box-shadow:0 0 0 100vmax rgba(4,18,46,.42)}

@media (max-width:560px){
  .ckf__b,.ckf__i{inline-size:52px;block-size:52px;flex-basis:52px}
  .cka__open{inline-size:52px;block-size:52px}
  .ckf{gap:.55rem}
}

/* המשתמש ביקש מהמערכת שלו פחות תנועה — הרכיבים האלה מכבדים
   את זה בלי שייגע במתג */
@media (prefers-reduced-motion:reduce){
  .ckf,.ckf__b,.cka__open{transition-duration:.01ms}
  .ckf.is-in .ckf__b--wa{animation:none}
}


/* ══ נגן ההמלצות ══════════════════════════════════════════════
   נפתח מלחיצה על כרטיס בקיר הווידאו. הרקע הכהה הוא גם כפתור
   הסגירה — לחיצה מחוצה לסרטון סוגרת, וכך גם Esc. */
.ckv{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(4,18,46,.92);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ckv__in{position:relative;inline-size:min(100%,980px);aspect-ratio:16/9;
  background:#000;border-radius:16px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,1),0 0 0 1px rgba(0,234,173,.24)}
.ckv__m{inline-size:100%;block-size:100%;display:block;border:0;object-fit:contain}
.ckv__x{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;
  inline-size:40px;block-size:40px;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;border:1px solid rgba(242,242,242,.24);color:#f2f2f2;
  background:rgba(4,18,46,.72)}
.ckv__x:hover{background:#00eaad;color:#04122e;border-color:transparent}
.ckv__x:focus-visible{outline:2px solid #00eaad;outline-offset:2px}

/* כרטיס שאפשר לנגן הוא <button> — מאפסים את מראה הכפתור כדי
   שיישאר נראה בדיוק כמו הכרטיסים שלצדו */
.vid--play{border:0;padding:0;background:none;font:inherit;
  color:inherit;text-align:inherit;cursor:pointer;display:block}
.vid--play:focus-visible{outline:2px solid #00eaad;outline-offset:4px}