/* Example-specific styles. They sit in Chassis's `custom` layer, so utility classes still win. */

@layer custom {
  /* Header brand link: keep the text color instead of the link color. */
  .brand {
    color: inherit;
    text-decoration: none;
  }

  /* Lift the context cards a little on hover. */
  .card.context {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .card.context:hover {
    --cx-card-box-shadow: var(--cx-box-shadow-md);
    transform: translateY(-2px);
  }

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

    .card.context:hover {
      transform: none;
    }
  }
}