/* ============================================================
   תפריט המבורגר לנייד - לורי בר
   מקור אחד לכל העמודים. אל תערוך עותק בתוך עמוד בודד.
   עד 1620px התפריט מתקפל לכפתור. מעל זה שום דבר לא משתנה.
   המספר נמדד אחרי טעינת הגופן, לא נוחש: התפריט המלא נכנס
   לשורה אחת רק מ-1586 בעמוד הבית (המקרה הגרוע - הסרגל שלו
   נושא גם את השם וגם את כפתור הפנייה) ומ-1480 בעמודי הנושא.
   1620 משאיר מרווח לפס גלילה. זה המספר היחיד לשנות.
   ============================================================ */

.navtoggle{display:none}

@media (max-width:1620px){

  .navtoggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex:none; margin-inline-start:auto;
    padding:0; border:1px solid currentColor; border-radius:10px;
    background:transparent; color:inherit; cursor:pointer;
    opacity:.75;
  }
  .navtoggle:focus-visible{outline:3px solid currentColor;outline-offset:2px;opacity:1}
  .navtoggle svg{width:20px;height:20px;display:block;fill:none;
    stroke:currentColor;stroke-width:2;stroke-linecap:round}

  /* שלושת הקווים הופכים ל-X. פעם אחת, לא בלולאה. */
  .navtoggle .l{transition:transform .22s ease, opacity .18s ease;
    transform-origin:center}
  .navtoggle[aria-expanded="true"] .l1{transform:translateY(6px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] .l2{opacity:0}
  .navtoggle[aria-expanded="true"] .l3{transform:translateY(-6px) rotate(-45deg)}
  @media (prefers-reduced-motion:reduce){
    .navtoggle .l{transition:none}
  }

  /* התפריט עצמו: מוסתר עד שפותחים, ואז נפרש מתחת לסרגל */
  .topbar .navcats,
  .top .navcats{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    margin:0;
    padding:6px 0 10px;
    font-size:16px;
  }
  .topbar .navcats[data-open="1"],
  .top .navcats[data-open="1"]{display:flex}
  /* במסך נמוך (320x568) התפריט הפתוח הגיע עד כפתורי הוואטסאפ
     והנגישות. התקרה הזו משאירה להם מקום, וגוללת אם צריך. */
  .topbar .navcats[data-open="1"],
  .top .navcats[data-open="1"]{
    max-height:calc(100vh - 195px); overflow-y:auto;
    overscroll-behavior:contain;
  }

  .topbar .navcats a,
  .top .navcats a{
    display:block; width:100%;
    padding:13px 2px;
    opacity:1;
    border-top:1px solid currentColor;
    border-color:color-mix(in srgb, currentColor 16%, transparent);
  }
  .topbar .navcats a:first-child,
  .top .navcats a:first-child{border-top:0}

  /* הקו שמפריד את "דף הבית" מהשאר מיותר כשהכל אנכי */
  .navcats .home-link::after{content:none}

  /* הסרגל נותן לתפריט שורה משל עצמו */
  .topbar, .top{flex-wrap:wrap; row-gap:0}
  .topbar .name, .top .brand{margin-inline-end:auto}
}