---
import { PAGE_TITLE_ID } from './TableOfContent/constants'
const route = Astro.locals.starlightRoute
const { data } = route.entry
const slug =
  (route.entry as { slug?: string }).slug ??
  route.entry.id ??
  route.pathname ??
  ''
const { title = data.title, tagline, image, actions = [] } = data.hero || {}
const is404Page = slug === '404' || slug.endsWith('/404')
---

<div class:list={['hero', { 'hero--404': is404Page }]}>
  <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
  {tagline && <div class="tagline" set:html={tagline} />}
</div>

<style>
  .hero {
    display: grid;
    grid-template-columns: 100%;
    margin-top: 40px;
    margin-bottom: 60px;
    @include for-mobile-screen-sizes {
      margin-bottom: 40px;
    }

    &.hero--404 {
      margin-bottom: 1rem;
      @include for-mobile-screen-sizes {
        margin-bottom: 0.85rem;
      }
    }

    .hero-highlight {
      color: var(--hover-color);
    }
    .hero-lowlight {
      color: var(--secondary-text-color);
    }
  }
  .tagline {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    line-height: 1.5;
    color: var(--primary-text-color);
  }
</style>
