/* Site nav, DESIGN.md §9. Desktop chrome plus hamburger below 768px.
   Local file, not a token copy. Reads tokens only. Pair with /site-nav.js. */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding: var(--nav-pad-y) var(--nav-pad-x);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.site-nav-logo,
.site-nav .logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  border-radius: var(--tk-radius-frame);
}
.site-nav-logo img,
.site-nav .logo img { height: 22px; width: auto; display: block; }
.site-nav .tk-nav { display: flex; align-items: center; gap: var(--nav-gap); }
.site-nav .tk-nav a { border-radius: var(--tk-radius-frame); }

.site-nav-toggle { display: none; }

@media (max-width: 767.98px) {
  /* Doubled class outranks the Astro component's scoped .site-nav rule. */
  header.site-nav.site-nav { padding: var(--nav-pad-y) var(--page-pad-compact); gap: var(--tk-space-3); }

  /* Toggle: secondary nav-size button holding three bars. Needs JS (the script sets data-js). */
  header.site-nav[data-js] .site-nav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--tk-space-1); width: var(--btn-nav-h); padding: 0; flex: none;
  }
  .site-nav-toggle .bar {
    display: block; width: var(--tk-space-4); height: var(--tab-underline);
    border-radius: var(--tk-radius-flag); background: currentColor;
    transition: transform var(--tk-duration) var(--tk-ease), opacity var(--tk-duration) var(--tk-ease);
  }
  header.site-nav[data-open] .site-nav-toggle .bar:nth-child(1) { transform: translateY(calc(var(--tk-space-1) + var(--tab-underline))) rotate(45deg); }
  header.site-nav[data-open] .site-nav-toggle .bar:nth-child(2) { opacity: 0; }
  header.site-nav[data-open] .site-nav-toggle .bar:nth-child(3) { transform: translateY(calc(-1 * (var(--tk-space-1) + var(--tab-underline)))) rotate(-45deg); }

  /* Items: stacked dropdown under the bar, same white surface and Rule divider as §9. */
  header.site-nav[data-js] .tk-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: var(--tk-space-4);
    padding: var(--tk-space-5) var(--page-pad-compact);
    background: var(--color-surface); border-bottom: 1px solid var(--color-divider);
  }
  header.site-nav[data-js][data-open] .tk-nav { display: flex; }
  header.site-nav[data-js] .tk-nav a { position: relative; padding: var(--tk-space-2) 0; }
  /* Enlarges the tap target without moving the §9 current-page underline. */
  header.site-nav[data-js] .tk-nav a::after { content: ""; position: absolute; inset: calc(-1 * var(--tk-space-2)) calc(-1 * var(--tk-space-4)); }
}