---
const { siteTitle, siteTitleHref } = Astro.locals.starlightRoute;
const isPreview = Astro.url.pathname === '/docs/preview/' || Astro.url.pathname.startsWith('/docs/preview/');
const docsHref = isPreview ? '/docs/preview/' : '/docs/';
---

<div class="title-row sl-flex">
  <a href={siteTitleHref} class="site-title sl-flex">
    <span class="docs-brand-logo" aria-hidden="true"></span>
    <span translate="no">{siteTitle}</span>
  </a>
  <nav class="title-nav" aria-label="Primary">
    <a href={docsHref}>Docs</a>
    <a href="/plugins/">Plugins</a>
    <a href="/blog/">Blog</a>
  </nav>
</div>

<style>
  @layer starlight.core {
    .title-row {
      align-items: center;
      gap: 1rem;
      min-width: 0;
    }

    .site-title {
      align-items: center;
      gap: 0.55rem;
      font-family: var(--sl-font-mono);
      font-size: var(--sl-text-h4);
      font-weight: 700;
      letter-spacing: -0.04em;
      color: var(--sl-color-white);
      text-decoration: none;
      white-space: nowrap;
      min-width: 0;
      transition: color 120ms ease;
    }

    .docs-brand-logo {
      position: relative;
      display: inline-block;
      width: 32px;
      height: 32px;
      flex: 0 0 auto;
      border: 1px solid var(--sl-color-hairline);
      border-radius: 4px;
      background: var(--sl-color-bg-nav);
    }

    .docs-brand-logo::before {
      content: "";
      position: absolute;
      inset: 2px;
      background: var(--sl-color-white);
      -webkit-mask: url("/assets/agent-icons/herdr-mask.svg") center / contain no-repeat;
      mask: url("/assets/agent-icons/herdr-mask.svg") center / contain no-repeat;
    }

    span:not(.docs-brand-logo) {
      overflow: hidden;
    }

    .title-nav {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      font-size: var(--sl-text-sm);
      font-weight: 600;
      line-height: 1;
    }

    .title-nav a {
      color: var(--sl-color-white);
      text-decoration: none;
      transition: color 120ms ease;
    }

    .site-title:hover,
    .title-nav a:hover {
      color: var(--sl-color-accent-high);
    }

    @media (max-width: 35rem) {
      .title-nav {
        display: none;
      }
    }
  }
</style>