/* ==========================================================================
   BRAND LOCKUP
   The nav and footer use the IgniteFirst logo image in place of the old
   amber-circle mark plus "IgniteFirst." text. The knockout artwork carries its
   own white wordmark and amber accents, so .if-brand__mark and .if-brand__word
   are no longer used in either place.
   ========================================================================== */

.if-brand__logo {
  display: block;
  width: auto;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}

/* Nav: 38px matches the height of the mark it replaced, so the pill keeps
   exactly the height it had before. */
.if-nav .if-brand__logo { height: 38px; }
.if-nav .if-brand:hover .if-brand__logo { transform: scale(1.04); }

/* Footer: 42px puts the wordmark at roughly the 24px the text used to be. */
.if-footer .if-brand__logo { height: 42px; }

/* Matches the 460px step where site.css shrank the old mark to 32px. */
@media (max-width: 460px) {
  .if-nav .if-brand__logo { height: 32px; }
  .if-footer .if-brand__logo { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .if-brand__logo { transition: none; }
  .if-nav .if-brand:hover .if-brand__logo { transform: none; }
}