/* 06-components/_hyperclank-header.css
   ── c-hyperclank-header — hyperclank.com's nav bar, the company site's top chrome.

   HyperClank's own component, not Gantry's menu bar restyled: three destinations, no
   overflow menu, no dropdown, no Stimulus controller. It fills the app shell's first row
   (o-appshell sizes it with --bar-h, which the brand scope makes taller). Every value here
   is a role token, so the bar is themed by 02-brands/_hyperclank.css like everything else. */
.c-hyperclank-header {
  grid-row: 1;
  background: var(--surface-raised);
  border-bottom: var(--bw) solid var(--line);
}
/* The bar runs the full width of the window, the way Gantry's menu bar does: the page column
   below it is capped, the chrome above it is not. */
.c-hyperclank-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 100%;
  padding-inline: var(--gutter-page);
}
.c-hyperclank-header__spacer { flex: 1; }

.c-hyperclank-header__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
  color: var(--text-bright);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
}
.c-hyperclank-header__brand:hover { color: var(--text-bright); text-decoration: none; }
.c-hyperclank-header__brand-mark { color: var(--accent); }

.c-hyperclank-header__link {
  color: var(--text-muted);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  padding-block: var(--space-2xs);
  border-bottom: var(--bw) solid transparent;
}
.c-hyperclank-header__link:hover {
  color: var(--text-bright);
  border-bottom-color: var(--accent);
  text-decoration: none;
}
/* The one cross-brand link on the page's chrome: it leaves for the product site, so it takes
   the second colour — amber, which is the colour gantry.software leads with — rather than
   sitting quiet beside the company's own destinations. */
.c-hyperclank-header__link--product { color: var(--warn); }
.c-hyperclank-header__link--product:hover { color: var(--amber-bright); }