/* =========================================================================
   APPGA custom overrides (loaded AFTER appga.shared.css)
   Small, targeted design polish. Does not alter page structure/markup.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) NAV CTA BUTTONS
   Remove the stray/misaligned paw icon from "Find a Groomer" so all of the
   header CTA pills (Find a Groomer / Ask Joey / Dashboard / Sign in|out)
   are consistent, centered text pills.
   ------------------------------------------------------------------------- */
.wa-button {
  background-image: none !important;
  text-align: center !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

/* Keep the header CTA row nicely aligned & evenly spaced. */
.header-right-side {
  align-items: center;
}

/* -------------------------------------------------------------------------
   2) BENEFITS DROPDOWN
   Replace the flat grey box with a clean, modern card menu that matches the
   site's rounded, soft-shadow design language.
   ------------------------------------------------------------------------- */
.nav-dropdown .dropdown-list.w-dropdown-list {
  background-color: #ffffff !important;
  border: 1px solid #eef1f6 !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(31, 45, 61, 0.18) !important;
  padding: 8px !important;
  margin-top: 12px !important;
  min-width: 220px !important;
  overflow: hidden;
}

.nav-dropdown .dropdown-link-2.w-dropdown-link {
  background-color: transparent !important;
  color: #3f3b57 !important;
  border-radius: 9px !important;
  padding: 11px 14px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  transition: background-color .15s ease, color .15s ease, padding .15s ease !important;
}

.nav-dropdown .dropdown-link-2.w-dropdown-link:hover {
  background-color: #eef4ff !important;
  color: #7666ca !important;
  padding-left: 18px !important;
}

.nav-dropdown .dropdown-link-2.w-dropdown-link.w--current {
  background-color: #eef4ff !important;
  color: #7666ca !important;
}

/* Toggle: give the Benefits label + caret a tidy, aligned layout. */
.nav-dropdown .dropdown-toggle-2.w-dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  padding-right: 20px !important;
}
.nav-dropdown .mini-arrow {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  order: 2;
}

/* -------------------------------------------------------------------------
   3) HOME — "OUR FEATURED MEMBERS" CARDS
   Make the cards equal-height and perfectly aligned. The original Webflow
   markup embeds a mini HTML document per image (with stray margins, borders
   and a vertical `margin-top:auto` on .service) which caused ragged heights
   and images/text boxes starting at different vertical positions.
   ------------------------------------------------------------------------- */

/* Card column: stretch to the tallest sibling in the row, top-aligned. */
.service.w-dyn-item {
  flex-direction: column !important;
  align-self: stretch !important;
  margin-top: 0 !important;
  margin-bottom: 2.25rem !important;
}

/* Inner wrapper fills the full card height as a column. */
.service.w-dyn-item .div-block-85 {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  width: 100% !important;
}

/* Image area: uniform fixed height across every card. */
.service.w-dyn-item .service-image-block {
  width: 100% !important;
  height: 200px !important;
  min-height: 200px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
.service.w-dyn-item .hover-image {
  width: 100% !important;
  height: 200px !important;
}

/* Neutralize the per-card embedded mini-document styling so every image
   fills its block edge-to-edge, identically. */
.service.w-dyn-item .hover-image .card {
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}
.service.w-dyn-item .hover-image .image123 img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Teal content box: consistent overlap, grows to fill remaining height so
   all cards end at the same baseline and the contact block sits at bottom. */
.service.w-dyn-item .services-text-box {
  flex: 1 1 auto !important;
  margin-top: -42px !important;
  width: 92% !important;
  justify-content: flex-start !important;
}

/* Keep the title block a stable height so paragraphs line up. */
.service.w-dyn-item .service-preview-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pin the "More Info" button to the bottom of every card so the buttons line
   up across a row even when the cards have different amounts of contact info. */
.service.w-dyn-item .services-text-box .button-box._20-pixels {
  margin-top: auto !important;
}

/* Widen the cards so email addresses fit without truncation, while keeping
   3-per-row on desktop. The original max-width:18rem (288px) was too narrow;
   20rem (320px) adds breathing room without breaking the 3-column layout
   (each card + its 2% side margins must fit within 33% of the container). */
@media screen and (min-width: 992px) {
  .service.w-dyn-item {
    max-width: 20rem !important;
  }
}

/* -------------------------------------------------------------------------
   4) GROOMER DETAIL — LISTING CARD LAYOUT
   The main listing card (.addbusiness.freelancer-single-card) is a Webflow
   2-column grid (grid-template-columns: .33fr 1fr). On the live site each
   inner block carries a per-element grid-placement id (w-node-...) that makes
   the header/description block AND the services block each span the full card
   width, so they stack vertically. Those ids aren't part of this recreation,
   so the two blocks fell into the narrow .33fr / 1fr columns — cramming the
   location, name and description into a thin left column and pushing the
   service pills into the right column (and the certification badges wrapped
   above the name because of flex-wrap:wrap-reverse in the narrow column).
   Restore the intended single-column stack: header row (location + name on the
   left, badges on the right) -> full-width description -> full-width services.
   ------------------------------------------------------------------------- */
.addbusiness.freelancer-single-card {
  display: block !important;
  grid-template-columns: none !important;
}

/* Services grid sits full width below the description. */
.addbusiness.freelancer-single-card .freelancer-card-single-bottom-copy {
  margin-top: 8px;
}


/* §5 The "Call Us" curve link (.mini-title-link) sits on a decorative curve
   whose background is dark on some pages and white on others, so a single text
   color is invisible on one of them. Give it a readable pill that works on any
   background. Scoped to the curve section so the footer usage is unaffected. */
.curve-bg .mini-title-link,
.curve-text-box .mini-title-link {
  color: #0e2438 !important;
  background-color: rgba(255, 255, 255, 0.92);
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(14, 36, 56, 0.18);
}
.curve-bg .mini-title-link:hover,
.curve-text-box .mini-title-link:hover {
  color: #2a82a8 !important;
  background-color: #ffffff;
}