@layer components {
  #header {
    background-color: var(--color-header);
    padding: 20px;
  }

  #header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #logo {
    width: 145px;
  }

  #logo a,
  #logo img {
    display: block;
  }

  #menu ul {
    display: flex;
  }

  /* Links stretch to the full height of the row (set by the tallest item). */
  #menu li {
    display: flex;
  }

  #menu a {
    display: flex;
    align-items: center;
    padding: 0 15.5px;
    font-family: var(--font-nav);
    font-size: 12px;
    font-weight: 500;
    line-height: 1em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #fff;
  }

  #menu a:hover {
    opacity: 0.6;
  }

  /* Hide Home in the horizontal nav on narrower screens; the logo links home.
     It stays in the hamburger overlay (660px and below). */
  @media (min-width: 661px) and (max-width: 859px) {
    #menu li.home-button {
      display: none;
    }
  }

  /* The "Sign-in" item renders as a pill button. */
  #menu li.sign-in-button a {
    margin-left: 1em;
    white-space: nowrap;
    padding: 1em 1.5em;
    letter-spacing: 1.24px;
    border-radius: 100px;
    background-color: rgba(140, 140, 140, 0.33);
    transition: background-color 0.2s ease-in-out;
  }

  #menu li.sign-in-button a:hover {
    opacity: 1;
    background-color: rgba(140, 140, 140, 0.5);
  }
}

/* Mobile hamburger menu (pattern borrowed from the HelloCue theme). */
@layer components {
  :root {
    --header-height: 70px;
  }

  body.hamburger-open {
    overflow: hidden;
  }

  /* Hide the hamburger toggle on non-mobile screens. */
  @media (min-width: 661px) {
    .hamburger {
      display: none;
    }
  }

  @media (max-width: 660px) {
    #menu {
      display: flex;
      align-items: center;
    }

    .hamburger {
      position: relative;
      padding: 6px 0;
      cursor: pointer;
      z-index: 1001;
    }

    .hamburger .patties {
      position: relative;
      height: 18px;
      width: 28px;
      --bar-height: 2px;
    }

    .hamburger .patties > div {
      position: absolute;
      background-color: #fff;
      width: 100%;
      height: var(--bar-height);
      transition-duration: 0.3s;
    }

    .hamburger .patties > div:nth-child(1),
    .hamburger .patties > div:nth-child(3) {
      transition-delay: 0s, 0.3s;
    }

    .hamburger .patties > div:nth-child(2) {
      top: calc(50% - (var(--bar-height) / 2));
      opacity: 1;
      transition-property: opacity;
      transition-delay: 0.3s;
    }

    /* Open state: bars rotate into an X. */
    .hamburger.open .patties > div:nth-child(1),
    .hamburger.open .patties > div:nth-child(3) {
      transition-property: top, transform;
    }

    .hamburger.open .patties > div:nth-child(1) {
      top: calc(50% - (var(--bar-height) / 2));
      transform: rotate(45deg);
    }

    .hamburger.open .patties > div:nth-child(2) {
      opacity: 0;
    }

    .hamburger.open .patties > div:nth-child(3) {
      top: calc(50% - (var(--bar-height) / 2));
      transform: rotate(-45deg);
    }

    /* Closed state: three stacked bars. */
    .hamburger.closed .patties > div:nth-child(1),
    .hamburger.closed .patties > div:nth-child(3) {
      transition-property: transform, top;
    }

    .hamburger.closed .patties > div:nth-child(1) {
      top: 0;
    }

    .hamburger.closed .patties > div:nth-child(3) {
      top: calc(100% - var(--bar-height));
    }

    /* Slide-in overlay menu. */
    #menu ul {
      opacity: 0.1;
      position: fixed;
      z-index: 1000;
      top: var(--header-height);
      bottom: 0;
      left: -50rem;
      width: 100%;
      background-color: var(--color-header);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    #menu .hamburger.open + ul {
      opacity: 1;
      left: 0;
      transition: opacity 200ms ease-out;
    }

    #menu .hamburger.closed + ul {
      transition: opacity 200ms ease-out, left 0ms 200ms linear;
    }

    #menu a {
      padding: 15px 30px;
      font-size: 16px;
    }

    #menu li.sign-in-button a {
      margin: 15px 0 0;
      padding: 1em 2em;
    }
  }
}