/* ==========================================================================
   Service Pages (shared)
   Scoped to body.cb-service — opted in via the body_class filter in
   functions.php (cincybath_service_pages()). All four service pages
   (bathroom-flooring, walk-in-showers, tub-shower-combos,
   full-bathroom-remodels) share this one partial; their differing copy/images
   live in each page's own post_content. Tokens, .pill-btn, .section-wrap, and
   the transparent → glass header come from _design-system.css (body.cb-ds).
   ========================================================================== */

/* --- Hero treatment: pull content up under the fixed transparent header --- */
body.cb-service #content {
  margin-top: 0;
}

/* The page's top banner is tagged .hero-section so the design-system header
   floats transparently over it (like the homepage) and turns to glass on
   scroll. .service-hero is the service-page-specific sizing. */
body.cb-service .service-hero {
  max-width: 100% !important;
  width: 100% !important;
  min-height: 62vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  padding-top: 180px !important;
  padding-bottom: 70px !important;
}

/* Hero copy centered + readable over the dark image */
body.cb-service .service-hero .uagb-ifb-title-prefix,
body.cb-service .service-hero .uagb-ifb-title,
body.cb-service .service-hero .uagb-ifb-desc {
  text-align: center;
}

body.cb-service .service-hero .uagb-ifb-title {
  font-family: var(--heading-font);
}

/* Hero CTA buttons — pill style ported from the homepage hero */
body.cb-service .service-hero .uagb-buttons__wrap {
  justify-content: center;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

body.cb-service .service-hero .uagb-buttons-repeater {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 48px;
  background-color: var(--ast-global-color-0);
  color: #fff;
  font-family: var(--btn-font);
  font-size: 1.2em;
  font-weight: var(--btn-weight);
  text-transform: var(--btn-transform);
  letter-spacing: var(--btn-letter-spacing);
  border: 2px solid var(--ast-global-color-0);
  border-radius: var(--btn-radius);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

body.cb-service .service-hero .uagb-buttons-repeater:hover {
  background-color: #fff;
  color: var(--ast-global-color-0);
}

body.cb-service .service-hero .uagb-buttons-repeater:hover .uagb-button__link {
  color: var(--ast-global-color-0);
}

body.cb-service .service-hero .uagb-buttons-repeater:hover .uagb-button__icon svg {
  fill: var(--ast-global-color-0);
}

body.cb-service .service-hero .uagb-button__icon {
  display: inline-flex;
  align-items: center;
}

body.cb-service .service-hero .uagb-button__icon svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  transition: fill 0.2s;
}

@media (max-width: 768px) {
  body.cb-service .service-hero {
    min-height: 70vh !important;
    padding-top: 130px !important;
    padding-bottom: 60px !important;
  }

  body.cb-service .service-hero .uagb-buttons__wrap {
    flex-direction: column;
    width: 100%;
  }
}

/* --- Content + reviews sections: design-system rhythm + typography --- */

/* Strip the legacy gradient/border so sections read on a clean background;
   .section-wrap (design system) supplies padding, centering, and the
   1200px max-width. */
body.cb-service .service-content,
body.cb-service .service-reviews {
  background: #ffffff !important;
  background-image: none !important;
  border: none !important;
}

/* Headings adopt the design-system display font */
body.cb-service .service-content .uagb-heading-text,
body.cb-service .service-content .uagb-ifb-title,
body.cb-service .service-reviews .uagb-heading-text,
body.cb-service .service-reviews .uagb-ifb-title {
  font-family: var(--heading-font);
}

/* Body copy adopts the design-system body font */
body.cb-service .service-content .uagb-ifb-desc,
body.cb-service .service-reviews .uagb-ifb-desc {
  font-family: var(--body-font);
}