/* ============================================================================
   @fgl/vituno nav/header chrome (Story 1.2.1).
   Census: all three sites + deccentral planned. The framework ships the
   topnav shell and ONE mobile-toggle mechanism — the donor's native
   <details> hamburger + sheet (the disclosure behavior module, Story
   1.2.2, drives Escape/outside dismiss; kitchenbridget's button-based
   toggle and scroll-reveal stay site-local until its adoption swaps them).
   Site-specific chrome (expeal's state switcher, theme toggles) stays out.
   TOKENS ONLY (structural markers audited by test/components.test.mjs).
   Breakpoint literals in @media are the framework constants (census).
   ============================================================================ */

/* position:relative anchors the mobile-menu overlay. */
.topnav { position: relative; background: var(--surface-primary); border-bottom: 1px solid var(--border-subtle); /* structural: hairline */ }
.topnav__inner { display: flex; align-items: center; gap: var(--space-4); min-height: var(--space-7); }

.topnav__brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.topnav__wordmark { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--brand-primary); }

.topnav__links { display: flex; gap: var(--space-4); margin-inline-start: auto; margin-block: 0; padding: 0; list-style: none; }
.topnav__links a { color: var(--ink-body); text-decoration: none; font-weight: var(--fw-semibold); }
.topnav__links a:hover { color: var(--brand-primary); }
.topnav__actions { display: flex; align-items: center; gap: var(--space-3); }

/* Mobile menu — a native <details> whose summary is the hamburger, so a
   closed menu is hidden without JS. The whole <details> is display-gated:
   display:none at >=md IS the breakpoint teardown (an open menu can never
   render at desktop; the behavior module also drops [open] on crossing,
   keeping AT state true). */
.topnav__menu { display: none; }
.topnav__hamburger { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; /* structural: WCAG tap target with the 24px icon centered */ cursor: pointer; list-style: none; }
.topnav__hamburger::-webkit-details-marker { display: none; }

/* The sheet overlays the page below the header bar. */
.mobile-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-elevated); border-block: 1px solid var(--border-subtle); /* structural: hairline */ box-shadow: var(--shadow-2); }
.mobile-menu__links a { display: flex; align-items: center; min-height: 48px; /* structural: WCAG tap target */ border-bottom: 1px solid var(--border-subtle); /* structural: hairline row divider */ text-decoration: none; color: var(--ink-body); }
.mobile-menu__cta { margin-top: auto; }

@media (max-width: 47.999rem) {
  .topnav__links, .topnav__actions { display: none; }
  .topnav__menu { display: block; margin-inline-start: auto; }
}