/*
 * A card that stands out, styled like the hero heading: yellow, heavy black
 * border, rounded, with the site's offset shadow. Add alongside a
 * component's own class, e.g. class="fixture-card card--highlighted".
 */
.card--highlighted {
  border: 0.25rem solid var(--black);
  border-radius: 0.5rem;
  background-color: var(--tertiary);
  color: var(--black);
  /* A fixed size to match the hero heading's: --box-shadow is in em, so it
     would be much smaller on normal-sized text. */
  box-shadow: 0.375rem 0.375rem var(--black);
}

/* When the card is a link: lift slightly on hover/focus. */
a.card--highlighted {
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

a.card--highlighted:hover,
a.card--highlighted:focus-visible {
  transform: translate(-0.125rem, -0.125rem);
  box-shadow: 0.5rem 0.5rem var(--black);
}

a.card--highlighted:focus-visible {
  outline: 0.2rem solid var(--black);
  outline-offset: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
  a.card--highlighted {
    transition: none;
  }
}