---
import Mark from '../assets/placeholder-mark.svg?raw';
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.
 *
 * It exists because Starlight's `logo` option renders an `<img>`, and our mark is an
 * inline-only asset: it is drawn in `currentColor` so it inherits `--gold` and follows a
 * bind-mounted `theme.css` for free (§7). An SVG loaded through `<img>` is an independent
 * document — `currentColor` has nothing to inherit from there, and the mark renders black
 * on black. Inlining it is what makes the token reach the artwork.
 *
 * Phase 2 replaces the placeholder with the real emblem derivatives; this component keeps
 * working, because what it needs is markup rather than a file.
 */
const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
---

<a href={siteTitleHref} class="site-title sl-flex">
  <span class="docs-mark" set:html={Mark} aria-hidden="true" />
  <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: inline-flex;
    flex: none;
    width: 30px;
    height: 30px;
    color: var(--gold);
  }

  :global(:root[data-theme='light']) .docs-mark {
    color: var(--light-gold);
  }

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