/* ===========================================================================
   SWEEP #53 — one navbar, on every public page.

   The founder: "The navbar should be the same on the home and browsing,
   actually on all subsites. And the style should be the same as apple - the
   heart - redirecting to saved offers, the person redirecting to profile and
   the hamburger menu redirecting to all sub sites." And: "both on pc and
   mobile the navbar should be the same at all times, now it's different
   styles sizes and positions."

   It was three different bars. `.site-nav` (shared.css) on home,
   neighbourhood, o-nas, blog, prasa, kontakt, regulamin and
   polityka-prywatnosci — logo, three text links, a login button and sometimes
   a "Wystaw za darmo" CTA, no icons. `.header` (index.html's own inline CSS)
   on browse — the same logo and links plus a heart and a hamburger. `.nf-nav`
   on 404 — logo only. Different heights, different paddings, different
   contents.

   This file is the one they all use now, and it is deliberately
   self-contained: index.html does not link shared.css (the two stylesheets
   name their radius tokens differently, see CLAUDE.md), so a navbar defined in
   either one could not be shared with the other. Everything below depends only
   on the tokens BOTH systems define — --ink, --ink-2, --ink-3, --line, --chip,
   --sans, --serif, --accent — and on literal values for its own geometry. The
   `msn-` prefix (mosaica site nav) keeps it clear of both.

   Panels are out of scope, at the founder's direction: "ah wait the navbar -
   don't change for panels / just public pages". dashboard.html,
   buyer-dashboard.html, negotiation.html, timeline.html, settings.html,
   list.html, edit-listing.html and recap.html keep their own app chrome.

   The menu's type is token-driven on purpose. DR2-followup slices 37 and 39
   spent their existence tokenizing exactly these two rules on index.html's old
   menu (`.site-nav-menu-item` 15px -> --type-body-size,
   `.site-nav-menu-item-quiet` 13px -> --type-label-size); moving the menu into
   a shared file must not quietly hardcode them again.
   =========================================================================== */

.msn {
  position: sticky; top: 0; z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.msn-inner {
  height: 64px;
  padding: 0 clamp(16px, 3vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  /* The same cap the marketing pages' content already uses, so the logo lines
     up with the page under it instead of drifting to the window edge on a
     wide screen. */
  max-width: 1400px; margin: 0 auto;
  box-sizing: border-box;
}

/* The logo, verbatim from shared.css's `.logo` so the mark and wordmark are
   the ones the site already uses — this file only has to restate them because
   index.html cannot see shared.css. */
.msn-logo {
  font-family: var(--serif); font-weight: 600; font-size: 22px;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.msn-logo-mark { width: 22px; height: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.msn-logo-mark i { background: var(--ink); border-radius: 2px; }
.msn-logo-mark i:nth-child(1), .msn-logo-mark i:nth-child(4) { background: var(--accent); }
.msn-logo-mark i:nth-child(4) { opacity: .5; }

/* Three icons, nothing else. The text links they replace all live in the menu
   now — the founder's "the hamburger menu redirecting to all sub sites". */
.msn-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.msn-icon {
  /* 44px, not 40: the iOS minimum touch target, and the same box on desktop so
     the bar really is identical rather than nearly so. */
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--ink-2); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.msn-icon:hover { background: var(--chip); color: var(--ink); }
.msn-icon:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.msn-icon svg { display: block; }

/* ---- the menu ---- */
.msn-menu-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26,26,26,.28);
  display: flex; justify-content: flex-end;
}
.msn-menu-sheet {
  width: min(360px, 100vw);
  height: 100%;
  background: #fff;
  display: flex; flex-direction: column;
  padding: 0 0 max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
  box-sizing: border-box;
}
.msn-menu-head {
  height: 64px; flex: 0 0 auto;
  padding: 0 clamp(16px, 3vw, 24px);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.msn-menu-title { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); }
.msn-menu-list { padding: 8px 0; }
.msn-menu-item {
  display: block;
  padding: 12px clamp(16px, 3vw, 24px);
  /* 500, the weight the old menu shipped. DR2-followup slice 39 left it
     deliberately un-tokenized (body-weight is 400) and its runtime test pins
     it, so moving the menu into a shared file must not quietly restyle it. */
  font-family: var(--sans); font-size: var(--type-body-size); font-weight: 500;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.msn-menu-item:hover { background: var(--chip); }
.msn-menu-item--quiet {
  /* 400, not var(--type-label-weight) (500). DR2-followup slice 37 left this
     weight deliberately un-tokenized — it is a nav-menu label, not body copy,
     and 400 is the weight the old menu shipped. Tokenizing it here would have
     silently made every quiet item half a step heavier. */
  font-size: var(--type-label-size); font-weight: 400; color: var(--ink-3);
}
.msn-menu-divider { height: 1px; background: var(--line); margin: 8px clamp(16px, 3vw, 24px); }