/* ═══════════════════════════════════════════════════════════════════════════
   site-nav.css — the ONE top bar every marketing page carries (2026-09-26).
   Markup: tools/seo/nvpage.py → nav_html(); the homepage and pricing.html get
   the same markup through gen_b.py's <!-- seo:nav --> block. Behaviour:
   /assets/site-nav.js. Colour, size and curve come from tokens.css only.

   What it is: what Nivasik SELLS — Hotels · Restaurants · Shops · Staff &
   payroll · Expenses · Pricing · FAQ — and two actions. Shops is a <details>
   so its kinds open on a tap, a click, Enter or Space with no script.

   On a narrow screen the links do not squeeze into a row: the burger opens a
   SHEET under the bar — one link per row at a thumb's height, Shops expanded
   with its kinds, and the two actions pinned where a thumb rests. The bar
   itself (.nav, its position and glass) stays each page's own: the homepage
   is fixed and clears on scroll, the generated pages are sticky.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The generated pages wrap the bar in a <header> exactly its own height, so
   .nav's own `position: sticky` had nowhere to stick and scrolled away with the
   page (measured 2026-09-27: top -900 at scrollY 900 on every generated page).
   The header is what sticks; the homepage's fixed bar is unaffected. */
header:has(> #nav) { position: sticky; top: 0; z-index: 50; }

.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.nv-menu { display: flex; align-items: center; min-width: 0; }
.nv-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nv-links > li { position: relative; }
.nv-links a, .nv-dd > summary {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 8px;
  color: var(--text-soft); font-size: 15px; font-weight: 500; letter-spacing: var(--tr-body, 0); white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.nv-links a:hover, .nv-dd > summary:hover { color: var(--text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .nv-links a:hover, .nv-dd > summary:hover { background: var(--surface-2); }
}
.nv-links a[aria-current], .nv-dd > summary[data-on] { color: var(--text); }
/* The page you are on carries a short rule under its name — the folio mark's
   rule, not a pill: the bar stays quiet and the name still reads first. */
.nv-links > li > a[aria-current]::after, .nv-dd > summary[data-on]::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 1.5px; border-radius: 1px;
  background: var(--primary); }
/* The site's FAQ styles every <details>/<summary> (a rule above and below, a
   "+" after); none of that belongs in the bar. */
.nav details.nv-dd, .nav details.nv-dd:last-of-type { border: 0; padding: 0; margin: 0; }
.nv-dd > summary { list-style: none; position: relative; min-height: 0; justify-content: flex-start; font-size: 15px; }
.nv-dd > summary::-webkit-details-marker { display: none; }
.nav .nv-dd > summary::after { content: none; }
.nav .nv-dd > summary[data-on]::after { content: ''; transform: none; transition: none; }
.nv-caret { flex: none; opacity: .7; transition: transform var(--dur-1) var(--ease-out); }
.nv-dd[open] > summary .nv-caret { transform: rotate(180deg); }
.nv-dd[open] > summary { color: var(--text); }

/* The kinds of shop: a small raised card under the word. */
.nv-drop { position: absolute; top: calc(100% + 10px); left: -8px; z-index: 60; width: 320px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-2); transform-origin: 24px top; }
.nv-dd[open] .nv-drop { animation: nv-drop-in var(--dur-2) var(--ease-out); }
@keyframes nv-drop-in { from { opacity: 0; transform: translate3d(0, -4px, 0) scale(.98); } }
.nv-drop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nv-drop a { display: grid; gap: 2px; height: auto; padding: 10px 12px; border-radius: 10px; white-space: normal; }
.nv-drop a b { color: var(--text); font-weight: 500; font-size: 15px; line-height: 1.3; }
.nv-drop a span { color: var(--muted); font-size: 13px; line-height: 1.4; font-weight: 400; }
.nv-drop a[aria-current] { background: var(--surface-2); }
.nv-drop a[aria-current]::after { display: none; }

.nav-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.nv-burger { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); cursor: pointer; place-items: center; }
.nv-burger svg path { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; fill: none;
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--dur-2) var(--ease-out); }
.nv-burger[aria-expanded="true"] .nv-b1 { transform: translateY(3.5px) rotate(45deg); }
.nv-burger[aria-expanded="true"] .nv-b2 { transform: translateY(-3.5px) rotate(-45deg); }
.nv-sheet-acts { display: none; }
/* No JavaScript: the <noscript> link stands in for the burger and goes to the
   footer's link columns (#site-links), which hold every destination above. */
.nav-acts:has(.nv-nojs) button.nv-burger { display: none !important; }

/* A laptop keeps every word: the gaps close before anything is dropped. */
@media (max-width: 1240px) { .nv-links a, .nv-dd > summary { padding: 0 8px; font-size: 14.5px; } }

/* ── The sheet ─────────────────────────────────────────────────────────── */
@media (max-width: 1139px) {
  .nv-burger { display: grid; }
  .nv-menu { position: fixed; left: 0; right: 0; top: var(--nav-h, 64px); bottom: 0; z-index: 49;
    display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 24px;
    padding: 8px var(--pad, 20px) calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; transform: translate3d(0, -6px, 0);
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
                visibility 0s linear var(--dur-2); }
  .nav.nv-open .nv-menu { visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s; }
  /* The fixed homepage bar is transparent until scrolled; open, it is solid. */
  .nav.nv-open { background-color: var(--bg) !important; border-bottom-color: var(--border) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nv-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nv-links > li { border-bottom: 1px solid var(--border); }
  .nv-links a, .nav .nv-dd > summary { height: 56px; padding: 0 4px; font-size: 20px; letter-spacing: -0.01em;
    color: var(--text); justify-content: space-between; border-radius: 0; }
  .nv-links > li > a[aria-current]::after, .nv-dd > summary[data-on]::after { left: 4px; right: auto; width: 24px; bottom: 10px; }
  .nv-caret { width: 16px; height: 16px; }
  .nv-drop { position: static; width: auto; padding: 0 0 10px; background: none; border: 0; box-shadow: none; }
  .nv-dd[open] .nv-drop { animation: none; }
  .nv-drop a { padding: 10px 12px; }
  .nv-drop a b { font-size: 16px; }
  .nv-sheet-acts { display: grid; gap: 10px; }
  .nv-sheet-acts .btn { width: 100%; justify-content: center; min-height: 48px; }
  .nv-signin { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
    color: var(--text-soft); font-size: 15px; }
  /* html only: a body with overflow hidden becomes a scroll container of its
     own, and the sticky header then sticks to IT (never scrolled) instead of
     the viewport, so the bar vanished above an open sheet on a scrolled page. */
  html.nv-lock { overflow: hidden; }
}
@media (max-width: 560px) { .nv-try { display: none; } }
@media (max-width: 420px) {
  .nav .nav-acts .btn { padding: 7px 11px; font-size: 14px; min-height: 0; }
  .nav .brand { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .nv-menu, .nav.nv-open .nv-menu { transform: none !important; }
  .nv-dd[open] .nv-drop { animation: none; }
  .nv-burger svg path { transition: none; }
}
@media (prefers-reduced-transparency: reduce) { .nav { -webkit-backdrop-filter: none; backdrop-filter: none; } }