/*
 * Custom stylesheet for the PHP version of the Pet Wanas site.
 * These styles complement TailwindCSS by adding behaviours that cannot
 * easily be expressed with utility classes alone (such as the animated
 * underline on navigation links).
 */

/* Animated underline for navigation links */
.nav-link {
  position: relative;
  font-weight: 500;
  color: #4B5563; /* Tailwind gray-600 */
  transition: color 0.3s ease-in-out;
}

.nav-link:hover {
  color: #7c3aed; /* Tailwind purple-600 */
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #7c3aed; /* Purple underline */
  transition: width 0.3s ease-in-out;
}

.nav-link:hover::after {
  width: 100%;
}

/* Simple card styling for dashboards and lists */
/* Generic card styling.  This class can be used to wrap content in a white box
 * with a subtle shadow.  While Tailwind's @apply cannot be used in the
 * browser, the following declarations emulate similar effects. */
.card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}