/* The site header, one for every page (Ofir, 19.10.2026: "הכיתוב בהדר למעלה, שיהיה מצד ימין ולא באמצע", and
   "לשים את קטגוריות הרכב כסאב-מניו מתחת למניו הראשי למעלה"). The logo and the name sit on the right (the start of an
   RTL line), the menu after them, the phone and the offer button on the left. "הרכבים" opens a submenu of the
   categories on the lot (a disclosure button: Enter/Space/ArrowDown, Escape closes; hover on a mouse). Under 1024px
   the menu folds into "תפריט", and the categories are listed open inside it.
   The markup is written into each page by scripts/sync-chrome.mjs; the behaviour is mockups/e-nav.js.
   Colours are the header's own (light, 19.10.2026), so it looks the same on f-legal and the 404 as on the E pages. */
.shd { --h-bg: rgba(255,253,249,.94); --h-fg: #1d1915; --h-soft: #4a4239; --h-muted: #6e655a; --h-line: #e7dfd2; --h-acc: #c8460c; --h-acc-hover: #b23a06; --h-acc-text: #b23a06; --h-tint: #fbf1e6;
  position: sticky; top: 0; z-index: 46; background: var(--h-bg); color: var(--h-fg); border-bottom: 1px solid var(--h-line);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  font-family: "Heebo", "Assistant", system-ui, sans-serif; font-weight: 500; line-height: 1.3; direction: rtl; }
.shd *, .shd *::before, .shd *::after { box-sizing: border-box; }
.shd a { color: inherit; text-decoration: none; }
.shd-in { width: min(100% - 32px, 1320px); margin-inline: auto; min-height: 76px; display: flex; align-items: center; gap: 18px; }

/* the brand, on the right */
.shd-brand { display: flex; align-items: center; gap: 12px; flex: none; min-width: 0; }
.shd-brand img { width: 46px; height: auto; aspect-ratio: 192 / 197; border-radius: 9px; box-shadow: 0 6px 18px -8px rgba(200,70,12,.55); }
.shd-name { display: grid; line-height: 1.05; text-align: start; }
.shd-name b { font-family: "Karantina", "Heebo", system-ui, sans-serif; font-weight: 700; font-size: 31px; letter-spacing: 0; color: var(--h-fg); white-space: nowrap; }
.shd-name small { font-size: 12.5px; font-weight: 500; color: var(--h-muted); white-space: nowrap; margin-top: 3px; }

/* the menu */
.shd-nav { margin-inline-start: 10px; }
.shd-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.shd-list > li { position: relative; display: flex; align-items: center; }
.shd-list > li > a, .shd-top { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 15.5px; font-weight: 600; color: var(--h-soft); white-space: nowrap; transition: background .2s, color .2s; }
.shd-list > li > a:hover, .shd-top:hover { color: var(--h-fg); background: var(--h-tint); }
.shd-list a[aria-current="page"], .shd-list a.on { color: var(--h-acc-text); background: var(--h-tint); }
.shd-has .shd-top { padding-inline-end: 4px; border-start-end-radius: 0; border-end-end-radius: 0; }
.shd-sub-btn { width: 32px; min-height: 44px; border: 0; padding: 0; margin-inline-start: -2px; background: transparent; color: var(--h-soft); border-radius: 0 999px 999px 0; cursor: pointer; display: grid; place-items: center; }
.shd-sub-btn:hover, .shd-sub-btn[aria-expanded="true"] { color: var(--h-acc-text); background: var(--h-tint); }
.shd-sub-btn svg { width: 14px; height: 14px; transition: transform .2s; }
.shd-sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.shd-sub { list-style: none; margin: 0; padding: 10px; position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 2; width: 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: #fff; border: 1px solid var(--h-line); border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(60,40,20,.35); }
.shd-sub[hidden] { display: none; }
.shd-sub a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--h-fg); }
.shd-sub a:hover, .shd-sub a:focus-visible { background: var(--h-tint); color: var(--h-acc-text); }
.shd-sub a small { font-size: 12.5px; font-weight: 500; color: var(--h-muted); font-variant-numeric: tabular-nums; }
.shd-sub .shd-all { grid-column: 1 / -1; border-top: 1px solid var(--h-line); margin-top: 6px; padding-top: 6px; }
.shd-sub .shd-all a { color: var(--h-acc-text); }

/* the actions, on the left */
.shd-acts { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.shd-tel { display: grid; justify-items: end; line-height: 1.1; padding: 4px 8px; text-align: end; }
.shd-tel small { font-size: 11.5px; color: var(--h-muted); font-weight: 500; }
.shd-tel b { font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.shd-tel:hover b { color: var(--h-acc-text); }
.shd-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--h-acc); color: #fff !important; font-weight: 700; font-size: 15px; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(200,70,12,.7); transition: background .2s; }
.shd-cta:hover { background: var(--h-acc-hover); }
.shd-menu { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--h-line); background: #fff; color: var(--h-fg); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.shd-menu svg { width: 20px; height: 20px; }
.shd :focus-visible { outline: 2px solid var(--h-acc-text); outline-offset: 2px; }
/* the accessibility button docks at the end of the actions (site-tools.js); in the light header it keeps its own blue */
.shd .ost-a11y.docked { border-color: #fff; }

@media (max-width: 1240px) { .shd-name small { display: none; } .shd-list > li > a, .shd-top { padding: 0 9px; font-size: 15px; } }
@media (max-width: 1100px) { .shd-tel small { display: none; } }

/* phones and tablets: the menu folds into a sheet under the bar; the categories are listed open inside it */
@media (max-width: 1023px) {
  .shd-in { min-height: 66px; gap: 10px; }
  .shd-brand img { width: 40px; }
  .shd-name b { font-size: 27px; }
  .shd-menu { display: inline-flex; }
  .shd-cta, .shd-tel { display: none; }
  .shd-nav { display: none; position: absolute; inset-inline: 0; top: 100%; margin: 0; max-height: calc(100dvh - 66px); overflow-y: auto; overscroll-behavior: contain; background: #fffdf9; border-bottom: 1px solid var(--h-line); box-shadow: 0 30px 50px -30px rgba(60,40,20,.4); }
  .shd.open .shd-nav { display: block; }
  .shd-list { display: block; width: min(100% - 32px, 720px); margin-inline: auto; padding: 8px 0 18px; }
  .shd-list > li { display: block; border-bottom: 1px solid var(--h-line); }
  .shd-list > li > a, .shd-top { display: flex; min-height: 52px; padding: 0 4px; font-size: 18px; border-radius: 0; }
  .shd-list > li > a:hover, .shd-top:hover { background: transparent; }
  .shd-sub-btn { display: none; }
  .shd-sub, .shd-sub[hidden] { position: static; display: grid; width: auto; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 12px; background: transparent; }
  .shd-sub a { background: var(--h-tint); margin: 3px; min-height: 46px; }
  .shd-list > li.shd-xtra { display: flex; }
}
.shd-list > li.shd-xtra { display: none; }
.shd-xtra { list-style: none; gap: 10px; flex-wrap: wrap; padding: 14px 0 0 !important; border: 0 !important; }
.shd-xtra a { flex: 1 1 140px; display: inline-flex !important; justify-content: center; align-items: center; min-height: 50px !important; border-radius: 999px !important; font-weight: 700; font-size: 16px !important; padding: 0 16px !important; }
.shd-xtra .x-tel { border: 1px solid var(--h-line); background: #fff; }
.shd-xtra .x-cta { background: var(--h-acc); color: #fff !important; }
@media (max-width: 380px) { .shd-name b { font-size: 24px; } .shd-brand { gap: 8px; } .shd-brand img { width: 36px; } .shd-menu { padding: 0 10px; } .shd-menu span { font-size: 14px; } }
@media (max-width: 340px) { .shd-menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .shd-menu { width: 44px; justify-content: center; padding: 0; } }
@media print { .shd { position: static; } .shd-nav, .shd-acts { display: none; } }