/* Shared service-site bindings — maps theme variables onto boilerplate layout tokens. */

body {
  font-family: var(--font-body);
}

h1,
h2,
h3,
.hero-title,
.section-title,
.problem__heading,
.problem__heading strong,
.mid-cta--problem-cta .mid-cta-box h2,
.mid-cta-soft__title {
  font-family: var(--font-display);
}

:root {
  --primary-orange: var(--service-primary);
  --primary-coral: var(--service-accent);
  --cta-gradient-hover-blend: 16%;
  --gradient-primary: linear-gradient(135deg, var(--service-accent) 0%, var(--service-primary) 100%);
  /* Reversed roles, stops pulled toward each other so high-contrast pairs don't snap */
  --gradient-primary-flipped: linear-gradient(
    135deg,
    color-mix(in srgb, var(--service-primary) var(--cta-gradient-hover-blend), var(--service-accent)) 0%,
    color-mix(in srgb, var(--service-accent) var(--cta-gradient-hover-blend), var(--service-primary)) 100%
  );
  --gradient-soft: linear-gradient(
    145deg,
    color-mix(in srgb, var(--service-accent) 12%, #ffffff) 0%,
    color-mix(in srgb, var(--service-primary) 8%, #ffffff) 45%,
    color-mix(in srgb, var(--service-accent) 6%, #ffffff) 100%
  );
  --blue: var(--service-accent);
  --primary: var(--service-primary);
  --cta: var(--service-accent);
  --cta-hover: var(--service-primary-hover);
}

.hero {
  background:
    radial-gradient(circle at 18% 12%, var(--service-hero-tint-a) 0%, transparent 42%),
    radial-gradient(circle at 82% 88%, var(--service-hero-tint-b) 0%, transparent 45%),
    linear-gradient(145deg, #f6f9ff 0%, #eef5ff 52%, #f4fbf7 100%);
}

.nav-link-cta,
.cta-button {
  background: var(--gradient-primary);
}

.final-cta .cta-button {
  background: var(--white);
  color: var(--primary-orange);
}

.cta-button:hover {
  background: var(--gradient-primary-flipped);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--service-primary) 24%, transparent);
}

/* Nav CTA uses --gradient-primary + shimmer from styles.css; shadow stays on-brand */
.nav-link-cta {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--service-primary) 18%, transparent);
}

.nav-link-cta:hover {
  box-shadow: 0 10px 22px color-mix(in srgb, var(--service-primary) 26%, transparent);
}

.mid-cta--problem-cta {
  background: linear-gradient(135deg, var(--service-accent) 0%, var(--service-primary) 100%);
}

.highlight,
.hero-title .highlight,
.section-title .highlight,
.problem__heading .highlight {
  color: var(--service-accent);
}

.nav-title {
  font-family: var(--nav-title-font, var(--font-display, var(--font-body)));
  color: var(--nav-title-color);
}

.nav-link:hover {
  color: var(--nav-link-hover-color);
}

/* Suite banner is above .navbar — limit hero negative margin so it only tucks under the nav */
body:has([data-rs-service-context-widget]) {
  --hero-nav-pull: 70px;
  --hero-padding-top: 135px;
}

body:has([data-rs-service-context-widget]) [data-rs-service-context-widget] {
  position: relative;
  z-index: 25;
}

@media (max-width: 480px) {
  body:has([data-rs-service-context-widget]) .hero {
    margin-top: 0;
  }
}

.hero-content .hero-subtitle {
  margin-bottom: 0.75rem;
}

.hero-entity {
  margin: 0 0 1.75rem;
  max-width: 520px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-dark);
}