/* =========================================================
   ניווט קטגוריות — כרטיסי שער + פס סינון דביק
   בשימוש: career.html, chanichut.html
   דורש: style.css (משתני הצבע והצללים)
   ========================================================= */

/* ----- שער הקטגוריות ----- */
.cat-hub{background:#fff;border-bottom:1px solid var(--border);padding:26px var(--px) 30px}
.cat-hub h2{font-size:var(--fs-sm);font-weight:800;letter-spacing:.22em;color:var(--accent);margin-bottom:8px}
.cat-hub-lead{font-size:var(--fs-md);color:var(--text2);margin-bottom:16px;max-width:62ch}
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}

.catcard{
  font:inherit;text-align:start;cursor:pointer;color:inherit;
  display:flex;align-items:flex-start;gap:13px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:16px 17px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.catcard::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:0;background:var(--m-grad-v);transition:width .28s var(--ease)}
.catcard:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--border-strong)}
.catcard:hover::before,.catcard.on::before{width:4px}
.catcard.on{border-color:var(--cyan);background:var(--cyan-100);box-shadow:var(--sh-md)}
.catcard:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.catcard .ci{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--blue-bg);color:var(--navy-800);transition:transform .3s var(--ease),background .25s,color .25s}
.catcard .ci svg{width:21px;height:21px}
.catcard:hover .ci,.catcard.on .ci{transform:scale(1.06) rotate(-3deg);background:#fff;color:var(--accent)}
.catcard .ct{display:flex;flex-direction:column;gap:2px;min-width:0}
.catcard .cn{font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
.catcard .cttl{font-size:var(--fs-base);font-weight:800;color:var(--navy);line-height:1.25}
.catcard .csub{font-size:var(--fs-xs);color:var(--text2);line-height:1.45}

/* ----- פס הסינון הדביק ----- */
.cat-bar{position:sticky;top:var(--navh,66px);z-index:80;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.cat-bar-in{display:flex;align-items:center;gap:12px;padding:10px 0}
.cb-label{font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--muted);flex:0 0 auto}
/* 11.10.26: הכפתורים עוטפים לכמה שורות במקום גלילה הצידה (כמו שאר פסי הניווט) */
.cb-pills{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0}
.cb-pills::-webkit-scrollbar{display:none}
.cpill{font:inherit;font-size:var(--fs-sm);font-weight:700;white-space:nowrap;cursor:pointer;
  border:1px solid var(--border);background:#fff;color:var(--text2);border-radius:999px;padding:6px 16px;
  transition:all .2s var(--ease)}
.cpill:hover{border-color:var(--cyan);background:var(--cyan-100);color:var(--navy)}
.cpill.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--sh-sm)}
.cpill:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ----- הפאנלים ----- */
.cat-panel[hidden]{display:none}
.cat-panel+.cat-panel{border-top:1px solid var(--border);margin-top:34px;padding-top:30px}
.cat-panel.pop{animation:rise .45s var(--ease) both}
.cat-next{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px;padding-top:18px;border-top:1px solid var(--border)}
.cat-next>span{font-size:.76rem;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.cgo{font:inherit;font-size:var(--fs-md);font-weight:700;cursor:pointer;color:var(--navy);
  background:#fff;border:1.5px solid var(--border-strong);border-radius:999px;padding:8px 20px;transition:all .2s var(--ease)}
.cgo:hover{border-color:var(--cyan);background:var(--cyan-100)}
.cgo:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ----- אייקון קו קטן בתוך תא טבלה (במקום אמוג'י) ----- */
.ik{display:inline-grid;place-items:center;width:22px;height:22px;color:var(--accent)}
.ik svg{width:18px;height:18px}

@media(max-width:980px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .cat-grid{grid-template-columns:1fr}
  .cat-bar-in{gap:8px}
  .cb-label{display:none}
}
/* בנייד לא דביק — עם הכותרת הדביקה הוא בולע חצי מסך */
@media(max-width:720px){.cat-bar{position:relative;top:auto}}
@media print{
  .cat-hub,.cat-bar,.cat-next{display:none}
  .cat-panel[hidden]{display:block !important}
}
@media (prefers-reduced-motion: reduce){
  .catcard,.catcard .ci,.cat-panel.pop{transition:none;animation:none}
}

/* 11.10.26: פס הכפתורים הדביק כפול לכרטיסיות הקטגוריה שמעליו — יורד. מעבר בין
   קטגוריות: הכרטיסיות למעלה, "הקטגוריה הבאה" בסוף כל אחת, ו"↑ לכרטיסיות" בשורה העליונה */
.cat-bar{display:none !important}