/* ------------------------------------------------------------------
   CardSnacks — interaction and responsive polish for the static demo
   ------------------------------------------------------------------ */

/* Desktop category links keep their existing green hover and gain the
   same underline affordance used by the footer links. */
.cs-category-nav a:hover,
.cs-category-nav a:focus-visible {
  color: var(--color-foreground, #3f3f3f);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Unify the large outline CTAs with the established See All Blogs state.
   Category chips are buttons rather than anchors, so they stay untouched. */
main a.rounded-full {
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

main a.rounded-full:hover,
main a.rounded-full:focus-visible {
  border-color: var(--color-primary, #20b2a4) !important;
  background-color: var(--color-primary, #20b2a4) !important;
  color: #fff !important;
  text-decoration: none;
}

main a.rounded-full:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--color-primary, #20b2a4) 25%,
    transparent
  );
}

/* The archived Swiper markup contains desktop inline dimensions. The live
   site recalculates these values on mobile; reproduce that responsive state. */
@media (max-width: 767px) {
  .swiper .swiper-slide {
    width: calc((100% - 16px) / 3) !important;
    margin-right: 8px !important;
  }
}