/* =========================================================================
   Valocity Apps — Home navigation header (extracted from home.css)
   Lets non-home pages reuse the exact .vh-nav header without pulling in the
   full homepage stylesheet. Tokens come from tokens.css.
   ========================================================================= */

.vh {
  --vh-nav-h: 72px;
  color: var(--color-ink);
  font-family: var(--font-body);
  /* On inner pages .vh wraps ONLY the nav, so without this the sticky nav's
     containing block is just 72px tall and it scrolls away. display:contents
     removes .vh's box, making the nav stick to the viewport (pinned on scroll)
     like the homepage. .vh here only scopes nav styling, so dropping its box is
     safe; selector matching is DOM-based, so tokens.css zoom selectors are
     unaffected. */
  display: contents;
}

.vh *,
.vh *::before,
.vh *::after { box-sizing: border-box; }

.vh a { color: inherit; }
.vh ul { margin: 0; padding: 0; list-style: none; }

/* container */
.vh-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* buttons */
.vh-btn {
  --btn-pad-y: 15px;
  --btn-pad-x: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms var(--ease-out-soft),
              box-shadow 220ms var(--ease-out-soft),
              background 220ms var(--ease-out-soft),
              color 220ms var(--ease-out-soft),
              border-color 220ms var(--ease-out-soft);
}
.vh-btn__arrow { transition: transform 220ms var(--ease-out-soft); }
.vh-btn:hover .vh-btn__arrow { transform: translateX(4px); }

.vh .vh-btn--accent {
  /* gold sheen (hi → accent) + soft resting glow — matches home.css so the
     most-clicked CTA is the premium version on every page, not just the home. */
  background: linear-gradient(180deg, var(--color-accent-hi), var(--color-accent));
  color: var(--color-primary);
  border-color: var(--color-accent);
  box-shadow: var(--accent-glow, 0 8px 22px -12px rgba(232, 180, 0, 0.5));
}
.vh-btn--accent:hover {
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark));
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(232, 180, 0, 0.5);
}
.vh-btn--accent:active {
  transform: translateY(0);
  box-shadow: 0 6px 16px -10px rgba(232, 180, 0, 0.5);
}

/* nav */
.vh-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-primary);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.vh-nav.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 1px 12px rgba(4, 13, 46, 0.45);
}
.vh-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--vh-nav-h);
}
.vh .vh-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
}
.vh-nav__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.vh-nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.vh .vh-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: color 180ms ease;
}
.vh .vh-nav__link:hover { color: #fff; }
.vh-nav__cta { margin-left: 6px; }
.vh-nav__toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.vh-nav__toggle span {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: #fff;
  transition: transform 200ms ease, opacity 200ms ease;
}
.vh-nav__toggle span:nth-child(1) { top: 14px; }
.vh-nav__toggle span:nth-child(2) { top: 20px; }
.vh-nav__toggle span:nth-child(3) { top: 26px; }
.vh-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vh-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vh-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.vh-nav__panel {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--color-primary);
  padding: 16px var(--container-pad) 24px;
}
.vh-nav__panel.is-open { display: block; }
.vh-nav__panel .vh-nav__link {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.vh-nav__panel .vh-btn { margin-top: 18px; width: 100%; justify-content: center; }

@media (max-width: 860px) {
  .vh-nav__links { display: none; }
  .vh-nav__toggle { display: block; }
}