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

<div class="site-title-row sl-flex">
  <a href={siteTitleHref} class="site-title sl-flex" translate="no" aria-label="AnHonestHost Knowledge Base">
    <svg
      class="brand-logo"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 240 32"
      fill="none"
      height="28"
      role="img"
      aria-hidden="true"
    >
      <path d="M12 4L3 16L12 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M24 4L33 16L24 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      <line x1="12" y1="16" x2="24" y2="16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.35"/>
      <text x="44" y="21" font-family="Inter, system-ui, -apple-system, sans-serif" font-size="18" font-weight="800" fill="currentColor" letter-spacing="-0.5">AnHonest<tspan fill="#00d4aa">Host</tspan></text>
    </svg>
    <span class="kb-label">Knowledge Base</span>
  </a>

  <nav class="ext-nav" aria-label="AnHonestHost links">
    <a href="https://anhonesthost.com/" class="ext-link">Get a Plan</a>
    <a href="https://secure.anhonesthost.com/clientarea.php" class="ext-link">Client Portal</a>
  </nav>
</div>

<style>
  .site-title-row {
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
  }
  .site-title {
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
    min-width: 0;
    color: var(--sl-color-text);
  }
  .brand-logo {
    height: calc(var(--sl-nav-height) - 2 * var(--sl-nav-pad-y));
    width: auto;
  }
  .kb-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--anhh-text-secondary, #94a3b8);
    padding-left: 0.75rem;
    border-left: 1px solid var(--anhh-border-color, #334155);
    line-height: 1;
  }
  .ext-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  .ext-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--anhh-text-secondary, #94a3b8);
    text-decoration: none;
    white-space: nowrap;
    transition: color 120ms ease;
  }
  .ext-link:hover,
  .ext-link:focus {
    color: var(--anhh-accent, #00d4aa);
    outline: none;
  }
  /* Hide kb-label and external nav on narrow viewports — search + hamburger
     get tight on mobile. */
  @media (max-width: 60em) {
    .kb-label {
      display: none;
    }
    .ext-nav {
      display: none;
    }
  }
</style>