/* ============================================================
   Handshake v2 — brand lockup

   One component for every place the logo appears. Before this, three surfaces
   each rolled their own: the lander paired the mark with the literal word
   "Handshake" in body type, admin did the same in a div, and only the workspace
   used the drawn wordmark — from a different asset path than the other two.

   Sizes are in `em` so a single font-size on the lockup scales the mark and the
   wordmark together and they can never drift out of proportion. Clear space is
   the gap, set to a quarter of the mark height per the brand guide.

   Which colour variant goes on which surface is documented and MEASURED in the
   admin brand guide (/style-guide.html#brand). The short version: the H in every
   mark is a transparent knockout, so it shows whatever is behind the mark —
   the knockout file needs a dark backing, and light surfaces need a duo file.
   ============================================================ */

/* The ratio lives at the DS root, not on .hs-lockup. Surfaces that predate the
   component style their own container (.v2-site-nav__brand, .hs-adm-brand) and
   never pick up the class — scoped to .hs-lockup the vars resolved to nothing
   there, the size declarations became invalid at computed-value time, and the
   mark fell back to its natural 168px. Root defaults cannot fail that way. */
[data-hs="2"] {
  /* The disc reads heavier than the wordmark's cap height at the same measure:
     at 1.55em vs 0.85em it was 1.87x the wordmark box and looked oversized.
     1.5x is the balance point for a circular mark beside this wordmark. */
  --hs-lockup-mark: 1.35em;
  --hs-lockup-word: 0.9em;
}

.hs-lockup {
  --hs-lockup-mark: 1.35em;
  --hs-lockup-word: 0.9em;

  display: inline-flex;
  align-items: center;
  /* clear space = ¼ of the mark height */
  gap: 0.4em;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  /* handshake.css paints an aqua border-bottom on every `a` — chrome lockups
     are links for navigation, not body hyperlinks, so drop that treatment. */
  border-bottom: none;
}

a.hs-lockup:hover {
  opacity: 1;
}

.hs-lockup__mark {
  flex: none;
  /* the mark is a disc, so height and width track together */
  height: var(--hs-lockup-mark);
  width: var(--hs-lockup-mark);
  display: block;
}

.hs-lockup__word {
  flex: none;
  height: var(--hs-lockup-word);
  width: auto;
  display: block;
}

/* Mark-only, for square or very narrow slots — favicons, avatars, app icons.
   Never a nested shape: the mark fills its frame on one flat colour. */
.hs-lockup--mark-only .hs-lockup__word {
  display: none;
}

.hs-lockup--sm {
  font-size: 15px;
}

.hs-lockup--lg {
  font-size: 24px;
}

/* ---- Surface overrides ------------------------------------------------
   The lander sizes its nav brand with `!important` in scroll-lander-ux.css and
   targets `.v2-site-nav__brand img`, which would hit the mark and the wordmark
   with the same height and squash the pair. Re-assert the ratio at a matching
   weight. */
[data-hs="2"] .v2-site-nav__brand {
  gap: 0.4em;
}

[data-hs="2"] .v2-site-nav__brand .hs-lockup__mark {
  height: var(--hs-lockup-mark) !important;
  width: var(--hs-lockup-mark) !important;
}

[data-hs="2"] .v2-site-nav__brand .hs-lockup__word {
  height: var(--hs-lockup-word) !important;
  width: auto !important;
}

/* Admin sidebar: the lockup sits above a role tag, so it stacks. */
[data-hs="2"] .hs-adm-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

[data-hs="2"] .hs-adm-brand .hs-lockup {
  font-size: 16px;
}

/* admin-dashboard.css sets `.hs-adm-brand img { width:30px; height:30px }`,
   which squares off the wordmark — it rendered 30x30 instead of 106x15. That
   selector is 0-1-1; these are 0-2-1, so no !important is needed. */
[data-hs="2"] .hs-adm-brand .hs-lockup__mark {
  width: var(--hs-lockup-mark);
  height: var(--hs-lockup-mark);
}

[data-hs="2"] .hs-adm-brand .hs-lockup__word {
  width: auto;
  height: var(--hs-lockup-word);
}

/* ---- On dark ----------------------------------------------------------
   A marker class, not a restyle. The variant is chosen by swapping the two
   SVG files (knockout mark + cream wordmark); this class exists so the intent
   is legible in the markup and so a reviewer can grep for every dark-surface
   lockup. The admin sidebar is forest-900 at luminance 0.009 — the everglade
   wordmark measures 1.6:1 there, which is why the pairing is not optional. */
.hs-lockup--on-dark {
  color: var(--hs-forest-200);
}