/*
 * Hover effects for the blocks that were rebuilt as React components rather
 * than converted markup — the featured-blog strip, the related-services cards
 * and the city links on state pages. Their originals carried inline
 * onmouseover/onmouseout handlers, which a React Server Component cannot hold,
 * so the same style toggles live here.
 */

.dwx-blog-card:hover {
  transform: translateY(-5px);
  border-color: rgba(250, 78, 78, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* The global `img { max-width: 80%; border-radius: 50% }` rule would render the
   thumbnail at 80% of the card and clip it to an ellipse. Every card image in
   the original carried inline `max-width:none !important; border-radius:0
   !important` to escape it; one selector does the same job here. */
.dwx-blog-card img {
  width: 100%;
  min-width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.5s;
}

.dwx-blog-card:hover img {
  transform: scale(1.05);
}

.dwx-view-all-posts:hover {
  background: rgba(250, 78, 78, 0.1);
}

.dwx-related-card:hover {
  border-color: #fa4e4e;
  transform: translateY(-4px);
}

.dwx-city-link:hover {
  color: #fa4e4e !important;
}

/* The ported pages post their forms through server actions, which report their
   own status; these style the messages those actions return. */
.form-message-success {
  margin-top: 16px;
  color: #4ade80;
  font-weight: 600;
}

.form-message-error {
  margin-top: 16px;
  color: #fa4e4e;
  font-weight: 600;
}