#site-header {
  background: linear-gradient(
    to right,
    var(--color-lions-pantone) 0%,
    var(--color-lions-blue) 33%,
    var(--color-lions-purple) 100%
  );

  color: white;

  /*The header has a dark background, and light fonts on dark*/
  /*backgrounds always feel like they are bolder than they*/
  /*actually are*/
  & h1 {
    font-weight: var(--font-weight-headings-dark) !important;
  }

  & img {
    /*This determines the overall header height*/
    height: var(--space-scale-m);
  }

  /*Push the "Menu" button all the way to the right side*/
  & button {
    margin-inline-start: auto;
  }

  /* The header spans the entire page, but the content inside of it */
  /* should only be --max-page-width wide */
  & > * {
    max-inline-size: var(--max-page-width);
  }
}

#site-navigation-toggle-button {
  border: none;
  outline: none;
  cursor: pointer;
  color: white;
  text-decoration: underline;
  text-decoration-thickness: 0.2em;
  text-decoration-skip-ink: none;
  text-decoration-color: var(--color-lions-yellow);

  &[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }
}

#login-button {
  background-color: var(--color-lions-yellow);
  color: var(--color-text-primary);
  padding: calc(0.5 * var(--space-scale-xxs)) var(--space-scale-xxs);
  border-radius: 4px;
  transition: filter 0.2s ease;

  &:hover {
    filter: brightness(90%);
  }
}

#site-navigation {
  border-bottom: 1px solid var(--color-border-primary);
  height: var(--s3);

  & ul {
    padding: 0;
    list-style-type: none;

    & li a:hover {
      text-decoration-thickness: 0.2em;
      text-decoration-skip-ink: none;
      text-decoration-color: var(--color-lions-yellow);
    }
  }
}

@media (min-width: 601px) {
  #site-navigation-toggle-button {
    display: none;
  }

  /*Switch from a vertical stack to a horizontal row on bigger screens*/
  #site-navigation ul {
    display: flex;
    gap: var(--space-scale-base);
    flex-direction: row;
    /*Without baseline the text and the login button aren't aligned*/
    align-items: baseline;
  }
}