/* TaskRoof wordmark -loaded after page-specific CSS so colors always win */
.nav-logo .brand-logo:not(.brand-logo--on-green):not(.brand-logo--footer) .brand-task {
  color: var(--pear) !important;
  -webkit-text-fill-color: var(--pear) !important;
  font-weight: 800;
}

.nav-logo .brand-logo .brand-roof,
.nav-logo .brand-logo:not(.brand-logo--footer) .brand-roof {
  color: var(--sun) !important;
  -webkit-text-fill-color: var(--sun) !important;
  font-weight: 800;
}

/* Green backgrounds (dashboard header, heroes) -white Task, yellow Roof */
.nav-logo .brand-logo--on-green .brand-task {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 800;
}

.nav-logo .brand-logo--on-green .brand-roof {
  color: var(--sun) !important;
  -webkit-text-fill-color: var(--sun) !important;
  font-weight: 800;
}

.footer-logo .brand-task,
.brand-logo--footer .brand-task {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 800;
}

.footer-logo .brand-roof,
.brand-logo--footer .brand-roof {
  color: var(--sun) !important;
  -webkit-text-fill-color: var(--sun) !important;
  font-weight: 800;
}

.brand-logo--on-green .brand-task {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.brand-logo--on-green .brand-roof {
  color: var(--sun) !important;
  -webkit-text-fill-color: var(--sun) !important;
}