/* Advoke CV — Heading Composition Patterns */

.display-1 {
  font-size: var(--text-7xl);
  font-weight: var(--font-weight-black);
  line-height: 1.02;
  letter-spacing: var(--letter-spacing-tight);
  text-wrap: balance;
}

.display-2 {
  font-size: var(--text-6xl);
  font-weight: var(--font-weight-black);
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-tight);
  text-wrap: balance;
}

.heading-xl {
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.heading-lg {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.heading-md {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.heading-sm {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

.heading-xs {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.accent-underline {
  position: relative;
  display: inline-block;
}

.accent-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  width: 100%;
  height: 0.18em;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  z-index: -1;
  opacity: 0.55;
}

.heading-highlight {
  background: linear-gradient(
    to bottom,
    transparent 55%,
    var(--yellow-200) 55%
  );
  padding: 0 0.15em;
}

@media (max-width: 640px) {
  .display-1 { font-size: var(--text-5xl); }
  .display-2 { font-size: var(--text-4xl); }
  .heading-xl { font-size: var(--text-4xl); }
  .heading-lg { font-size: var(--text-3xl); }
  .heading-md { font-size: var(--text-2xl); }
}