:root {
  --coral: #c83f2e;
  --aqua: #087d70;
}

.languages {
  gap: 0.2rem;
  padding: 0.25rem;
  border: 1px solid rgba(7, 59, 120, 0.38);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(7, 59, 120, 0.1);
}

.languages a {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 34px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  color: var(--navy);
  font-weight: 800;
  line-height: 1;
}

.languages a.is-active {
  background: var(--navy);
  color: #fff;
}

.languages > span {
  align-self: center;
  color: #526b80;
  font-weight: 700;
}

.card:nth-child(2) .card__icon {
  color: #845600;
}

:where(a, button):focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

.external-link-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.2rem;
  flex: 0 0 auto;
  vertical-align: -0.15em;
}

@media (prefers-contrast: more) {
  .hero__overlay {
    background: rgba(255, 250, 241, 0.96);
  }

  .contact-card,
  .direction-card {
    border-color: var(--navy);
  }
}