/* ComplyVox — the one site header, on every page: the landing page, the
   blog, the Trust Centre and the watch pages. The markup is
   templates/site-header.html; build.sh puts both into every page, so there is
   no second copy of the nav to drift.

   Every colour is a token from _ds/.../tokens/colors.css. The translucent blur
   is the page token mixed with transparency rather than a hardcoded rgba. */

.cvx-appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--surface-page);
  background: color-mix(in srgb, var(--surface-page) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

/* No box-sizing and no min-height here, on purpose: the bar takes the box
   model of the page it is on, so its edges line up with that page's own
   1200px column — content-box on the landing page, border-box from blog.css
   everywhere else. Its height is the button's, the same on both. */
.cvx-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-3) clamp(20px, 4vw, 40px);
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-7);
}

.cvx-wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 19px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.6px;
  transition: color var(--motion-state) var(--ease);
}
.cvx-wordmark:hover { text-decoration: none; color: var(--link); }

.cvx-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  font-size: 14px;
}
.cvx-nav a {
  color: var(--text-secondary);
  padding: var(--space-1) 0;
  transition: color var(--motion-state) var(--ease);
}
.cvx-nav a:hover { color: var(--link); text-decoration: none; }
/* aria-current is set by build.sh on the page you are on; data-active by
   motion.js on the landing page, for the section you are scrolled to. */
.cvx-nav a[aria-current="page"],
.cvx-nav a[data-active] {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  box-shadow: inset 0 -2px 0 var(--violet);
}

/* Qualified so it outranks the plain `a` colour above. */
a.cvx-cta {
  flex: none;
  background: var(--violet);
  color: var(--text-on-violet);
  padding: 10px var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 20px;
  transition: opacity var(--motion-state) var(--ease);
}
a.cvx-cta:hover { color: var(--text-on-violet); text-decoration: none; opacity: 0.9; }

/* Reading progress along the bottom edge of the bar, driven by the scroll
   position with no script. Browsers without scroll-driven animations get no
   bar, which is the right fallback. */
.cvx-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left center;
}
@supports (animation-timeline: scroll()) {
  .cvx-progress {
    animation: cvx-progress linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes cvx-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Phones. Wordmark and button share the first row; the links wrap below. */
@media (max-width: 640px) {
  .cvx-bar { flex-wrap: wrap; padding: var(--space-3) var(--space-5) var(--space-3); gap: var(--space-3) var(--space-4); }
  .cvx-wordmark { order: 0; }
  a.cvx-cta { order: 1; margin-left: auto; padding: 8px var(--space-4); }
  .cvx-nav { order: 2; flex-basis: 100%; margin-left: 0; gap: var(--space-2) var(--space-5); }
}