---
import { brand } from '../lib/brand.mjs';

/**
 * Overrides Starlight's `SiteTitle` so the documentation header carries the same lockup as
 * the marketing header. One product, two chromes, one mark.
 *
 * The override still earns its place now that the mark is a raster image and Starlight's
 * own `logo` option would also render an `<img>`: that option takes an asset IMPORTED
 * through Vite, which fingerprints the filename into the build. A fingerprinted logo is one
 * the bind mount can never replace (§7), which is the whole point of `/brand/*`. Pointing
 * at the stable URL is what keeps the docs header swappable along with everything else.
 */
const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
---

<a href={siteTitleHref} class="site-title sl-flex">
  <img
    class="docs-mark"
    src="/brand/logo-32.webp"
    srcset="/brand/logo-32.webp 1x, /brand/logo-64.webp 2x, /brand/logo-96.webp 3x"
    width="32"
    height="32"
    alt=""
  />
  <span translate="no">{siteTitle || brand.siteName}</span>
</a>

<style>
  /* Layout only. The brand of this element — display face, weight, letter-spacing and
     colour — is set once in src/styles/starlight.css, next to the rest of the docs
     theming, so there is one place to change it. */
  .site-title {
    align-items: center;
    gap: 0.6rem;
    font-size: var(--sl-text-h4);
    text-decoration: none;
    white-space: nowrap;
    min-width: 0;
  }

  .docs-mark {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
  }

  span:last-child {
    overflow: hidden;
  }
</style>