---
import Breadcrumbs from './Breadcrumbs.astro';

const { title, subtitle } = Astro.locals.starlightRoute.entry.data;
---

{Astro.url.pathname !== "/" && (
  <>
    <div id="_top">
      <Breadcrumbs />
    </div>
    <h1>{title}</h1>
    {subtitle && <p class="page-subtitle">{subtitle}</p>}
  </>
)}

<style>
  @layer starlight.core {
    h1 {
      margin-top: 1rem;
      font-size: var(--sl-text-h1);
      line-height: var(--sl-line-height-headings);
      font-weight: 600;
      color: var(--sl-color-white);
    }

    .page-subtitle {
      margin-top: 0.75rem;
      margin-bottom: 0;
      font-size: var(--sl-text-lg);
      line-height: var(--sl-line-height-headings);
      font-weight: 400;
      color: var(--sl-color-gray-2);
    }
  }
</style>