/* Sub-service pages (scripts/service_pages.py) and the links to them on /audit/, /build/ and /grow/.
   Sits on top of seo-pages.css and the site's tokens. */

/* Long titles ("Influencer & Creator Management") need a smaller display size than the search pages' 140px. */
.svc-hero .seo-hero__title {
  font-size: var(--fs-d2);
  max-width: 20ch;
}

.svc-crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}

.svc-crumb li + li::before {
  content: '/';
  margin-inline: 0.6em;
  color: var(--c-text-dim);
}

.svc-crumb a {
  color: inherit;
  text-decoration: none;
}

.svc-crumb a:hover,
.svc-crumb a:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.svc-crumb [aria-current='page'] {
  color: var(--c-text);
}

/* The sub-service titles on the Audit, Build and Grow pages are now links. */
.service-block__item-title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.3s ease, color 0.2s ease;
}

.service-block__item-title a::after {
  content: '\2197';
  margin-left: 0.4em;
  font-size: 0.8em;
  color: var(--c-accent);
}

.service-block__item-title a:hover,
.service-block__item-title a:focus-visible {
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  .service-block__item-title a {
    transition: none;
  }
}