---
const { siteTitleHref } = Astro.locals.starlightRoute;
---

<a href={siteTitleHref} class="site-title sl-flex" translate="no">
  <span class="wordmark">jackin<span class="tick">'</span></span>
</a>

<style>
  .site-title {
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    min-width: 0;
  }

  /* Landing-matched wordmark treatment (landing-footer-wordmark scaled
     for a top-nav slot). Uses the static 'Inter Black' face declared
     in docs/src/components/landing/styles.css so the docs chrome
     wordmark matches the landing wordmark glyph-for-glyph. */
  .wordmark {
    font-family: 'Inter Black', 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.375rem;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--sl-color-white);
    user-select: none;
  }

  /* Phosphor-green tick is a brand color — locked to the bright hex in
     both themes regardless of theme-aware --jk-accent remap. Glow
     softens in light mode (saturated glow on white reads muddy). */
  .wordmark .tick {
    color: #00ff41;
    text-shadow: 0 0 0.2em rgba(0, 255, 65, 0.45);
  }

  :root[data-theme='light'] .wordmark .tick {
    text-shadow: none;
  }
</style>
