---
import NavbarDesktop from './navbarDesktop.astro'
import NavbarLogo from './navbarLogo.astro'
import NavbarMobile from './navbarMobile.astro'
---

<header>
  <NavbarLogo/>
  <NavbarDesktop>
    <slot name="desktop" />
  </NavbarDesktop>
  <NavbarMobile>
    <slot name="mobile" />
  </NavbarMobile>
</header>

<style>
  header {
    z-index: 1000;
    position: sticky;
    top: 0px;
    background-color: var(--c-primary-background);
    display: flex;
    height: auto;
    width: 100%;
    align-items: flex-start;
    line-height: 1.5em;
    border-bottom: 2px solid var(--c-accent-1) ;
  }

  @media (min-width: 1140px) {
    header {
      height: 64px;
      align-items: center;
    }
  }
</style>