/* ==========================================================================
   The site's one top bar, mobile menu and footer (Yonatan 29.10.26, Figma 557:25 top bar, 578:730 menu, 557:106 footer).
   Every site page loads this file: the home (dark bar), every inner page (light bar), legal, 404. Values = ds tokens.
   ========================================================================== */
:root { --sbar-h: 80px; }

/* top bar */
.sbar { position: sticky; top: 0; z-index: 40; block-size: var(--sbar-h); background: var(--cream-50); color: var(--wine-950); box-shadow: 0 1px 0 transparent; transition: box-shadow var(--dur-fast) ease; }
/* The brand's facet texture (Figma 128:28052, wine at 3%) behind every light site page, fixed so it never moves with the
   text; the bar and the boxes keep their own fill, so it shows only on the page itself (Guy 1.11.26). */
body.spage { position: relative; isolation: isolate; }
body.spage::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(../brand/facet-texture.svg) center top / 720px auto repeat; opacity: .8; }
@media (min-width: 768px) { body.spage::before { background-size: 1440px auto; } }
@media (min-width: 1440px) { body.spage::before { background-size: 1920px auto; } }
.sbar.is-scrolled { box-shadow: 0 1px 0 var(--border-subtle); }
.sbar--dark { position: relative; background: var(--wine-950); color: var(--text-on-dark); }
/* Guy 1.11.26: three slots - the menu button at the start (right), the wordmark centred, "לאזור האישי" at the end (left).
   The side columns share the free space equally, so the wordmark sits on the centre line at every width. */
.sbar__in { block-size: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding-inline: var(--gutter); max-inline-size: calc(1248px + 2 * var(--gutter)); margin-inline: auto; }
.sbar__home { display: inline-flex; align-items: center; min-block-size: 48px; flex: none; }
.sbar__in > .sbar__menu { justify-self: start; }
.sbar__in > .sbar__me { justify-self: end; }
.sbar__logo { display: block; block-size: 20px; inline-size: auto; }

.sbar__me { display: inline-flex; align-items: center; min-block-size: 48px; padding-inline: 20px; flex: none;
  -webkit-clip-path: var(--cut-tab); clip-path: var(--cut-tab); /* lp360.css, softened by --cut-soft */
  background: var(--wine-950); color: var(--cream-50); font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) ease; }
@media (hover: hover) { .sbar__me:hover { background: var(--wine-700); } }
.sbar--dark .sbar__me { background: var(--cream-50); color: var(--wine-950); }
@media (hover: hover) { .sbar--dark .sbar__me:hover { background: var(--cream-100); } }

.sbar__menu, .smenu__close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; min-inline-size: 48px; padding: 0 8px; border: 0; background: none; color: inherit; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); cursor: pointer; }
/* the burger (Guy 31.10.26): three lines of brand rhythm - long, short, mid - that even out on hover */
.sbar__menu, .smenu__close { margin-inline-start: -8px; } /* the glyph, not the 48px target, lines up with the gutter */
.sbar__burger { display: grid; justify-items: end; gap: 5px; inline-size: 24px; }
.sbar__burger i { display: block; block-size: 2px; inline-size: 24px; background: currentColor; transition: inline-size var(--dur-base) var(--ease-calm, cubic-bezier(.22, .61, .36, 1)), transform var(--dur-base) var(--ease-calm, cubic-bezier(.22, .61, .36, 1)); }
.sbar__burger i:nth-child(2) { inline-size: 14px; }
.sbar__burger i:nth-child(3) { inline-size: 19px; }
@media (hover: hover) {
  .sbar__menu:hover .sbar__burger i { inline-size: 24px; }
  .sbar__menu:hover .sbar__burger i:nth-child(2) { transition-delay: 40ms; }
  .sbar__menu:hover .sbar__burger i:nth-child(3) { transition-delay: 80ms; }
}
.sbar__menu:active .sbar__burger i { transform: scaleX(.85); }
.sbar__menu-t { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sbar a:focus-visible, .sbar button:focus-visible, .sfoot a:focus-visible, .sfoot button:focus-visible, .smenu a:focus-visible, .smenu button:focus-visible { outline: 2px solid var(--ruby-600); outline-offset: 3px; border-radius: 2px; }
.sbar--dark a:focus-visible, .sfoot a:focus-visible, .sfoot button:focus-visible, .smenu a:focus-visible, .smenu button:focus-visible { outline-color: var(--ruby-300); }

@media (min-width: 1200px) {
  .sbar__logo { block-size: 22px; }
}
@media (max-width: 767px) {
  .sbar__in { gap: 4px; }
  .sbar__logo { block-size: 16px; }
  .sbar__me { padding-inline: 12px; font-size: var(--fs-label); }
}
/* phones: the wordmark at the brand's mobile size (130px, as on the landing pages) so both side slots fit around it */
@media (max-width: 480px) {
  .sbar__logo { block-size: 13px; }
  .sbar__me { padding-inline: 10px; }
}

/* full-screen menu (every width, from the burger) */
.smenu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--wine-800); color: var(--text-on-dark); overflow-y: auto; }
.smenu[hidden] { display: none; }
.smenu__top { block-size: var(--sbar-h); flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding-inline: var(--gutter); }
.smenu__top > .smenu__close { justify-self: start; }
.smenu__nav { display: grid; padding: 24px var(--gutter) 48px; }
.smenu__link { display: flex; align-items: center; min-block-size: 64px; border-block-end: 1px solid var(--wine-700); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); color: var(--text-on-dark); text-decoration: none; }
.smenu__link[aria-current="page"] { font-weight: var(--fw-semibold); color: var(--ruby-300); }
html.smenu-open { overflow: hidden; }
/* opening: the panel settles in, the links follow one after another */
.smenu:not([hidden]) { animation: smenu-in var(--dur-base) var(--ease-calm, cubic-bezier(.22, .61, .36, 1)); }
.smenu:not([hidden]) .smenu__link { animation: smenu-link var(--dur-open) var(--ease-calm, cubic-bezier(.22, .61, .36, 1)) both; }
.smenu__link:nth-child(2) { animation-delay: 40ms; } .smenu__link:nth-child(3) { animation-delay: 80ms; } .smenu__link:nth-child(4) { animation-delay: 120ms; }
.smenu__link:nth-child(5) { animation-delay: 160ms; } .smenu__link:nth-child(6) { animation-delay: 200ms; } .smenu__link:nth-child(n+7) { animation-delay: 240ms; }
@keyframes smenu-in { from { opacity: 0; } }
@keyframes smenu-link { from { opacity: 0; transform: translateY(12px); } }

/* footer: always dark. Guy 1.11.26: one grid - wordmark + nav on top, one hairline, legal on one side and
   copyright + credit on the other, both rows on the same two edges. Under 1024 one column, start-aligned. */
.sfoot { background: var(--wine-950); color: var(--text-on-dark); padding: 48px var(--gutter) 40px; font-size: var(--fs-small); }
.sfoot__in { max-inline-size: 1248px; margin-inline: auto; display: grid; gap: 32px; }
.sfoot__row { display: grid; justify-items: start; gap: 24px; }
.sfoot__row--legal { padding-block-start: 32px; border-block-start: 1px solid var(--wine-700); gap: 16px; }
.sfoot__nav { display: grid; }
.sfoot__nav a { display: flex; align-items: center; min-block-size: 44px; color: var(--text-on-dark); text-decoration: none; }
.sfoot__legal { display: flex; flex-wrap: wrap; gap: 0 24px; }
.sfoot__legal a, .sfoot__legal button { display: flex; align-items: center; min-block-size: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-label); color: var(--text-on-dark); text-decoration: none; cursor: pointer; text-align: start; }
@media (hover: hover) { .sfoot a:hover, .sfoot button:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } }
.sfoot__end { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; font-size: var(--fs-label); }
.sfoot__end p { margin: 0; display: flex; align-items: center; min-block-size: 44px; }
.sfoot__credit a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--text-on-dark); text-decoration: none; }
@media (min-width: 768px) {
  .sfoot__nav { display: flex; flex-wrap: wrap; gap: 0 32px; }
}
@media (min-width: 1024px) {
  .sfoot { padding: 64px var(--gutter) 48px; }
  .sfoot__row:not(.sfoot__row--legal) { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
}
/* the legal row goes side by side only where both halves fit on one line each */
@media (min-width: 1200px) {
  .sfoot__row--legal { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .sfoot__legal a, .sfoot__legal button, .sfoot__end { font-size: var(--fs-small); }
}
@media (prefers-reduced-motion: reduce) { .sbar, .sbar__me, .sbar__burger i { transition: none; } .smenu:not([hidden]), .smenu:not([hidden]) .smenu__link { animation: none; } }