/* Shared heading scale for every page, including analysis examples. */
:root {
  --heading-page-size: clamp(32px, 3.6vw, 48px);
  --heading-section-size: clamp(28px, 2.5vw, 32px);
  --heading-card-size: clamp(22px, 2vw, 24px);
}

/* The content ID keeps legacy page rules from creating a second scale. */
#inhoud :is(h1, h2, h3, h4) {
  font-family: Lato, Arial, sans-serif;
  font-weight: 700;
  color: var(--petrol);
  letter-spacing: -.02em;
  white-space: normal;
  overflow-wrap: break-word;
}

#inhoud h1 {
  font-size: var(--heading-page-size);
  line-height: 1.15;
  margin: 0 0 22px;
}

#inhoud h2,
#inhoud .contact-help h3 {
  font-size: var(--heading-section-size);
  line-height: 1.2;
  margin: 0 0 20px;
}

#inhoud h3,
#inhoud h4,
#inhoud .project h2,
#inhoud .clear-service-card h2 {
  font-size: var(--heading-card-size);
  line-height: 1.3;
  margin: 0 0 14px;
}

#inhoud h2::after,
#inhoud .contact-help h3::after {
  content: "";
  display: block;
  position: static;
  width: 56px;
  height: 4px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--gold);
}

#inhoud .project h2::after,
#inhoud .clear-service-card h2::after {
  content: none;
}

/* Preserve the title/logo alignment and spacing within running text. */
#inhoud .clear-hero-title h1 {
  margin: 0;
}

#inhoud .clear-detail-body h3,
#inhoud .chart-explanation > div h3 {
  margin-top: 28px;
}

#inhoud .document-body h2 {
  margin-top: 32px;
  padding-bottom: 0;
  border-bottom: 0;
}

#inhoud .document-topic h3 {
  margin: 0;
}

/* Give long page titles the full text width on the narrowest phones. */
@media (max-width: 360px) {
  #inhoud .clear-hero-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #inhoud .clear-hero-title .clear-hero-logo {
    grid-row: 1;
    justify-self: end;
  }

  #inhoud .clear-hero-title h1 {
    grid-row: 2;
  }
}