---
import BrainMark from "./BrainMark.astro";

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

<a href={siteTitleHref} class="site-title sl-flex" translate="no">
  <BrainMark size={28} title="ThinkWork" />
  <span>{siteTitle}</span>
</a>

<style>
  .site-title {
    align-items: center;
    gap: 0.5rem;
    font-size: var(--sl-text-h4);
    font-weight: 600;
    color: var(--sl-color-text-accent);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  .site-title span {
    color: var(--sl-color-white);
  }
</style>
