/* --------------------------------------------------------------------------
   VENDORED COPY. Do not edit here.
   source   /home/user/design-system/components/nav-bar/component.css
   version  1.1.0
   refresh  node sync.mjs nav-bar "/home/user/PinboardMCP/docs"
   warning  An edit made in this copy is lost on the next sync.
   -------------------------------------------------------------------------- */

/* ============================================================================
   nav-bar · v1.1.0 · component

   The header a site carries on every template: brand mark left, nav links
   centred on the page, actions right. Built 2026-09-27 from the first consumer
   site's header, which appeared on its website, links and slides views alike,
   so it is a component and not a region of one template.

   Markup
     <header class="nav-bar site-header" data-component="nav-bar"><div class="inner">
       <a class="brand" href="#/" aria-label="Home"><span class="brand-logo"> svg </span></a>
       <nav aria-label="Main"><a class="active" href="#/">Work</a> <a href="#/about">About</a></nav>
       <div class="header-actions"> theme toggle, template-menu, style control </div>
     </div></header>
   site-header is kept as a second class so a consumer that styled that name
   keeps working while it moves over.

   Three columns, so the nav centres on the page and not in the space the brand
   leaves. The brand mark is inline SVG in currentColor, painted by
   --color-brand, falling back to the accent. Inline, not a mask: a CSS mask
   from a file is blocked on file://.

   Token surface, falling back to layer 2:
     --nav-bg          ground            --color-bg
     --nav-blur        backdrop blur     0px
     --nav-link-font   link face         --font-body

   Sticky at the top by default. A template that owns the viewport (slides)
   sets position: static on it.

   At 375px: brand, nav and actions stay on one row with tighter gaps and
   caption-size links.
   ============================================================================ */

.nav-bar, .nav-bar *, .nav-bar *::before, .nav-bar *::after { box-sizing: border-box; }
.nav-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg, var(--color-bg));
  backdrop-filter: blur(var(--nav-blur, 0px));
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
}
.nav-bar .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-base) var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-bar .brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  line-height: 1;
  text-decoration: none;
}
/* The brand mark is inline SVG in currentColor, painted by --color-brand. A
   style with no brand colour falls back to its accent. Inline, not a mask: a
   CSS mask from a file is blocked on file://. */
.nav-bar .brand-logo {
  display: block;
  width: var(--space-2xl);
  height: var(--space-2xl);
  color: var(--color-brand, var(--color-accent));
}
.nav-bar .brand-logo svg { display: block; width: 100%; height: 100%; }
.nav-bar nav { display: flex; gap: var(--space-xl); justify-self: center; }
.nav-bar nav a {
  color: var(--color-text-muted);
  font-family: var(--nav-link-font, var(--font-body));
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav-bar nav a.active,
.nav-bar nav a[aria-current="page"],
.nav-bar nav a:hover { color: var(--color-accent-text, var(--color-accent-deep)); }
.nav-bar nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav-bar .header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
@media (max-width: 600px) {
  .nav-bar .inner { padding: var(--space-md) var(--gutter); }
  .nav-bar nav { gap: var(--space-base); }
}
/* 1.1.0 (2026-09-29): below 480px the links take their own row under the
   brand and the actions. Measured at 375 with a theme toggle and two menus:
   brand, links and actions filled all 327px with no gap in any style, and
   the links ran into the first action. A template that fixes the header
   height (slides) hides the row instead; see its own stylesheet. */
@media (max-width: 480px) {
  .nav-bar .inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand actions" "links links";
    row-gap: var(--space-xs);
  }
  .nav-bar .brand { grid-area: brand; }
  .nav-bar .header-actions { grid-area: actions; }
  .nav-bar nav { grid-area: links; justify-self: center; }
}