/* Footer: hand-drawn icons instead of emojis, blue email button, same page background */
.footer-left {
  grid-row-gap: 0.75rem;
}

.footer-left .made-with {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.375rem;
}

.footer-icon {
  flex-shrink: 0;
  width: 1.6em;
  height: 1.6em;
}

.footer-icon--heart { width: 1.375em; height: 1.375em; transform: translateY(-2px); }
.footer-icon--cup { transform: translateY(-5px); }

.footer-left .footer-email {
  display: inline-flex;
  flex-flow: row nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: 0.375rem;
  padding: 0.5rem 1.125rem;
  font-size: 0.9062rem;
  font-weight: 400;
  line-height: normal;
  border-radius: 1.25rem;
  background: transparent;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  text-decoration: none;
  transition: transform .2s, background-color .2s, border-color .2s;
}

.footer-email__arrow {
  width: 1.1em;
  height: 1.1em;
}

.footer-left .footer-email:hover,
.footer-left .footer-email:focus-visible {
  transform: scale(1.06);
  background: #ff9f45;
  border-color: #ff9f45;
}

/* the wiggle underline isn't needed on a button */
.footer-left .footer-email::after { display: none; }

/* Footer links: Get in touch, LinkedIn and CV side by side, same pill style */
.footer-left .footer-links {
  display: flex;
  flex-flow: row wrap;
  gap: 0.75rem;
  align-self: flex-start;
  margin-top: 0.375rem;
}

.footer-left .footer-links .footer-email {
  margin-top: 0;
}

/* Pills keep their natural width, also on phones (a phone rule makes .paragraph-text full width) */
.footer-left .footer-links .footer-email {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}