---
/**
 * Overrides Starlight's `PageTitle` for one attribute: `tabindex="-1"` on the heading.
 *
 * Phase 10 found and fixed this on the marketing chrome — following a skip link moves the
 * viewport but not the keyboard focus, because the target of the link is not focusable.
 * Chrome papers over it; not every browser does, and a reader who lands past the header
 * only to find Tab returning them to the top of the nav has not been skipped anywhere.
 * `Base.astro`'s `<main>` gained `tabindex="-1"` then.
 *
 * Phase 11's browser walk found the same defect still standing on the other forty pages.
 * Starlight's skip link points at the page's `<h1>` rather than at a landmark, and an
 * `<h1>` is no more focusable than a `<main>`, so the docs half of the site had the fix
 * that the marketing half had.
 *
 * The rest of this file is Starlight's own implementation, copied because the override
 * mechanism replaces a component rather than decorating it. That is a small drift risk —
 * if Starlight restyles its `h1`, this copy will not follow — so it is deliberately kept
 * to exactly what upstream has, with nothing of ours added beyond the attribute. The
 * check for drift is visual: a documentation title that stops matching the marketing
 * chrome's.
 *
 * The id is Starlight's `PAGE_TITLE_ID`, written out rather than imported: `./constants`
 * is not one of the subpaths the package exports, so importing it reaches past the
 * package's own boundary. It is what `SkipLink.astro` puts in its `href`, so the two must
 * agree; if a Starlight upgrade ever renames it, the skip link stops resolving at all and
 * the first Tab on a documentation page lands somewhere obviously wrong.
 */
const PAGE_TITLE_ID = '_top';
---

<h1 id={PAGE_TITLE_ID} tabindex="-1">{Astro.locals.starlightRoute.entry.data.title}</h1>

<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);
    }

    /* Ours, and the only line that is: the heading is focusable now, so it can be
       focused, and a focus ring drawn around a page title reads as an error rather than
       as a destination. Removing it is safe only because this element is reachable by
       exactly one route — the skip link, which the reader took deliberately. It is never
       in the tab sequence. */
    h1:focus {
      outline: none;
    }
  }
</style>