/* nav.css — ההדר והניווט של כל האתר (#36). ההתנהגות ב-js/nav.js, ה-markup זהה בכל עמוד
   (מקור: index.html, מסונכרן ב-scripts/sync_nav.js, ונבדק ב-scripts/test_nav_identity.js).

   ⚠️ עד 24/09 ניווט מלא היה רק בעמוד הבית. ב-12 התבניות האחרות — ולכן ב-2,237 דפי המוצר
   ובכל דפי הקטגוריות והעבודות — היה לוגו, קישור אחד, חיוג ווואטסאפ. מי שהגיע מגוגל לדף
   מוצר לא יכול היה להגיע משם לעבודות, לאודות, לצור קשר או לאזור הנציגים.
   ⚠️ הקובץ נטען **אחרי** ה-<style> של כל עמוד, כדי שבשוויון ספציפיות הוא יגבר.
   ⚠️ לכל משתנה ערך נפילה: ב-accessibility, privacy ו-terms אין `--bronze-deep`. */

/* ===== Navbar sticky מתכווץ =====
   גבוה בראש הדף, מתכווץ ל-57px בגלילה. ההנפשה היא על המידות בלבד. */
/* ⚠️ z-index:100 ולא 90, וזה תיקון של באג ולא כוונון.
   המגירה במובייל (.nav-links, z-index 99) יושבת **בתוך** ההדר, וה-scrim (.nav-scrim, 98)
   הוא ילד ישיר של body. ב-90 ההדר כולו — והמגירה איתו — נצבע מתחת ל-scrim, ו-elementFromPoint
   על מרכז כל הקישורים במגירה החזיר #navScrim: תפריט שנראה פתוח ואינו לחיץ.
   סדר השכבות באתר, מלמעלה: a11yPanel 9999 · a11y-btn 9998 · skip-link 999 · .lb לייטבוקס 200 ·
   header 100 · navLinks 99 · navScrim 98 · .wa 95. */
header{position:sticky;top:0;z-index:100;background:var(--white,#FFFFFF);
  border-bottom:1px solid var(--line,rgba(43,37,33,.14))}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:1400px;margin:0 auto;padding:0 24px;
  height:96px;transition:height .25s ease}
header.shrink .nav{height:57px}
.logo{font-weight:400;font-size:1.625rem;letter-spacing:.02em;white-space:nowrap;
  width:auto;transition:font-size .25s ease;color:var(--ink,#2B2521);text-decoration:none;
  /* ⚠️ inline-flex + min-height ולא padding: הלוגו מתכווץ בגלילה, ו-padding קבוע היה משנה
     את גובה ההדר. הגובה נעצר ב-44 והטקסט ממורכז בתוכו. */
  display:inline-flex;align-items:center;min-height:44px;
  /* ⚠️ ה-gap הוא הרווח בין "בית" ל"הטפט", ולא תו הרווח ב-markup: בתוך flex הטקסט הוא
     פריט אנונימי, והרווח שבסופו נבלע — הלוגו הוצג "ביתהטפט" (0.0px, נמדד ב-#36). */
  gap:.25em}
header.shrink .logo{font-size:1.1875rem}
.logo span{color:var(--bronze-deep,#7D6845)}
.nav-links{display:flex;gap:30px;font-size:0.9375rem;font-weight:400}
.nav-links a{color:var(--ink,#2B2521);text-decoration:none;transition:color .15s ease}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--bronze-deep,#7D6845)}
/* ⚠️ העמוד הנוכחי (#36): aria-current נכתב ב-HTML של כל עמוד (sync_nav.js), ומסומן גם בעין —
   קו תחתון, לא רק צבע, כדי שלא יהיה תלוי בהבחנה בין גוונים. */
.nav-links a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav-links .nav-deals{color:var(--bronze-deep,#7D6845);font-weight:500}

/* ===== פעולות ההדר =====
   שני כפתורים באותה שפה, בלי היררכיה: טלפון ווואטסאפ הם שני ערוצי המרה שקולים. */
.nav-actions{display:flex;align-items:center;gap:8px}
.call-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ink,#2B2521);min-height:44px;padding:.35em 1.1em;
  font-weight:500;font-size:0.9375rem;color:var(--ink,#2B2521);text-decoration:none;
  white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.call-pill:hover{background:var(--ink,#2B2521);color:var(--white,#FFFFFF)}
.call-pill svg{width:17px;height:17px;fill:currentColor;flex:none}
/* הוואטסאפ בירוק המותג בגבול ובטקסט בלבד — לא כפתור מלא, כדי שלא יצרח יותר מהטלפון. */
.pill-wa{border-color:#1FA855;color:#0F7A36}
.pill-wa:hover{background:#0F7A36;border-color:#0F7A36;color:var(--white,#FFFFFF)}

/* ===== אזור נציגים =====
   כניסה לאזור סגור, לא CTA: טקסט עם קו דק. ⚠️ בלי white-space:nowrap — ב-200% (תוסף
   הנגישות) הקישור דחף את העמוד 49px הצידה ב-1440. */
.portal-link{font-size:0.875rem;font-weight:400;color:var(--stone,#6F6659);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line,rgba(43,37,33,.14));
  transition:color .15s ease,text-decoration-color .15s ease}
.portal-link:hover{color:var(--ink,#2B2521);text-decoration-color:var(--ink,#2B2521)}
/* ⚠️ 1023 ולא 900: הסרגל נושא גם את ניווט האתר (348px), ומתחת ל-1024 לא נשאר מקום לקישור
   (נמדד ב-901: 838px פנימיים מול 858). הכניסה לפורטל שם היא מהמגירה ומהפוטר. */
@media(max-width:1023px){ .nav .portal-link{display:none} }

/* ===== המבורגר + מגירה מהצד ===== */
.nav-toggle{display:none;background:none;border:1px solid var(--ink,#2B2521);
  width:44px;height:44px;cursor:pointer;padding:0;flex:none;
  align-items:center;justify-content:center;flex-direction:column;gap:4.5px}
.nav-toggle span{display:block;width:19px;height:1.5px;background:var(--ink,#2B2521);
  transition:transform .25s ease, opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;background:rgba(43,37,33,.45);z-index:98;
  opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s ease}
.nav-scrim.open{opacity:1;visibility:visible}

@media(max-width:900px){
  .nav{height:72px}
  header.shrink .nav{height:57px}
  .nav-toggle{display:flex}
  /* המגירה עוגנת בקצה ההתחלתי — הצד הימני בעברית, הצד של ההמבורגר. translateX חיובי דוחף
     אותה מחוץ למסך ימינה בשני כיווני הכתיבה. */
  .nav-links{position:fixed;inset-block:0;inset-inline-start:0;z-index:99;
    width:min(320px,84vw);background:var(--white,#FFFFFF);
    flex-direction:column;gap:0;padding:88px 0 24px;
    transform:translateX(100%);transition:transform .3s ease;
    border-inline-end:1px solid var(--line,rgba(43,37,33,.14));overflow-y:auto}
  .nav-links.open{transform:translateX(0)}
  .nav-links a{padding:16px 24px;font-size:1.0625rem;border-block-end:1px solid var(--line,rgba(43,37,33,.14))}
  .nav-links a[aria-current]{text-decoration:none;box-shadow:inset -3px 0 0 var(--bronze-deep,#7D6845)}
  /* ===== ההחלטה למובייל: אייקונים, לא הגליה למגירה =====
     שני הכפתורים נשארים בהדר ומאבדים את התווית בלבד. המשמעות נשמרת ב-aria-label וב-title. */
  .call-pill{width:44px;padding:0}
  .call-pill .pill-txt{display:none}
  /* בתוך המגירה הכפתורים חוזרים עם תוויות מלאות. width/padding מוחזרים במפורש. */
  .nav-links .drawer-call{display:flex;width:auto;padding:.35em 1.1em;margin:20px 24px 0;border-block-end:0}
  .nav-links .drawer-call + .drawer-call{margin-top:8px}
  .nav-links .drawer-call .pill-txt{display:inline}
  /* אזור הנציגים בתחתית המגירה, מופרד מפריטי הניווט — כניסה לאזור סגור ולא יעד תוכן.
     ⚠️ 7px תחתונים ולא 0: הקישור היה 37px גובה, מתחת ליעד המגע. */
  .nav-links .drawer-portal{margin-top:22px;padding:14px 24px 7px;
    border-block-end:0;border-block-start:1px solid var(--line,rgba(43,37,33,.14));
    font-size:0.9375rem;color:var(--stone,#6F6659)}
  .nav-links .drawer-portal:hover{color:var(--ink,#2B2521)}
}
/* מעל 900 המגירה נפתחת כניווט אופקי, והפריטים שנועדו לה בלבד נעלמים. ‏.drawer-portal לא הוסתר
   פעם, והתוצאה הייתה "אזור נציגים" פעמיים בסרגל. */
@media(min-width:901px){
  .nav-links .drawer-call{display:none}
  .nav-links .drawer-portal{display:none}
}

/* ===== מסכים צרים במיוחד (≤420px) =====
   ב-360 הכול בשורה אחת: לוגו, חיוג, וואטסאפ והמבורגר (#36). ההדר 332 פנימיים; שני כפתורים +
   המבורגר + הרווחים הם 146, וללוגו נשארים 176. מצטמצמים ה-padding והלוגו — לא פעולה. */
@media(max-width:420px){
  .nav{padding:0 14px;gap:10px}
  .logo{font-size:1.0625rem;min-width:0}
  .nav-actions{gap:6px}
  .call-pill{width:44px}
}

/* ===== מגע: 44×44 לכל מה שבהדר (#36) =====
   גם בטאבלט רחב, שבו הניווט אופקי: קישור טקסט בגובה 20 אינו יעד מגע. */
@media (pointer:coarse){
  /* ⚠️ min-width גם הוא: "אודות" הוא 36px רוחב — גובה 44 לבדו לא הופך אותו ליעד מגע. */
  .nav-links a,.portal-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
}