/* Xora Labs: the live 3D lockup in the nav.
   Every dimension is a custom property so the mobile overrides below are a
   handful of values rather than a duplicated rule set, and so the renderer,
   which reads its host's box, resizes with them. */

:root {
  --lockup-size: 65px;   /* the mark */
  --lockup-word: 22px;   /* the wordmark */
  --lockup-gap:  13px;   /* between the two */
  --lockup-left: -40px;  /* inset; negative pulls toward the page edge */
}

/* The static lockup images are removed from the DOM by lockup.js, not hidden
   here: site.css sets their display from a four-class selector that no rule in
   this file could outrank without !important. See the note there. */
.navlive .nav-in { position: relative; }
.navlive .nav    { overflow: visible; }

/* Out of flow, so a mark larger than the bar can overhang it without growing
   the bar and pushing the links, the CTA and the whole page down. Placed by
   its own centre, which is the nav row's centre, so it stays aligned with the
   links at any size. */
.navlive .nav-logo {
  position: absolute;
  top: calc(var(--nav-h) / 2 - var(--lockup-size) / 2);
  left: calc(var(--pad) + var(--lockup-left));
  display: flex;
  align-items: center;
  gap: var(--lockup-gap);
  z-index: 70;
  text-decoration: none;
}

#navmark {
  flex: none;
  display: block;
  width: var(--lockup-size);
  height: var(--lockup-size);
  /* The mark fills about 62% of its square canvas, so a slice of dead space
     sits between it and the wordmark. That slice is a FRACTION of the canvas,
     so the correction has to scale with the size rather than be a fixed px. */
  transform: translateX(calc(var(--lockup-size) * 28 / 120));
}

/* The still that holds the slot until the first WebGL frame. Its artwork fills
   the same 62% of the square that the 3D mark does, and both are centred in
   that square, so the swap is a flat mark becoming a turning one rather than a
   jump. Both rules hang off :not(.is-live), so when the class lands neither
   matches and the background falls away on its own: no third rule to outrank
   the four-class landing selector below. */
#navmark:not(.is-live) {
  background: center / contain no-repeat url("/assets/brand/mark.svg");
}
.navover .nav:not(.is-stuck):not(.open) #navmark:not(.is-live) {
  background-image: url("/assets/brand/mark-dark.svg");
}

.nav-word {
  font: 700 var(--lockup-word)/1 Archivo, system-ui, sans-serif;
  letter-spacing: -.03em;
  text-decoration: none;
  color: #000;
}
.nav-word b { color: #0B7A5A; font-weight: 700; }

/* The bar is dark over an unscrolled dark header with the mobile menu shut.
   Scrolling or opening the menu brings the light bar back, and the blog
   articles, which open on a light section, never carry .navover at all. */
.navover .nav:not(.is-stuck):not(.open) .nav-word   { color: #fff; }
.navover .nav:not(.is-stuck):not(.open) .nav-word b { color: #00FFA8; }

@media (max-width: 900px) {
  /* A shorter bar, since the lockup is smaller here. --nav-h flows through to
     the bar height, the dropdown offset and the landing hero's overlay
     padding, so one value keeps all three in step. */
  :root {
    --nav-h:       64px;
    --lockup-size: 52px;
    --lockup-word: 18px;
    --lockup-gap:  10px;
    /* Pulls the mark's artwork onto the page gutter rather than its canvas:
       the glyph fills about 62% of that square and is nudged right to close
       the gap to the wordmark, so the box has to start well left of --pad for
       the ink to line up with the headline below and with the burger's margin
       on the other side. */
    --lockup-left: -23px;
  }
}