/*
 * Heading appearance, decoupled from the heading level.
 *
 * The theme stylesheets set font-family, font-size and font-weight straight on h1 through h6
 * (compri-2024.css lines 97-148 and 4280-4292, components.css lines 195-232). As long as that is
 * the case, promoting an <h2> to <h1> is always a design change too — and then nobody dares touch
 * the structure, so the site stays stuck with the wrong hierarchy for good.
 *
 * These classes carry exactly the declarations of the matching element rule, including the
 * breakpoint at 479px. A class beats an element selector on specificity, so
 * <h1 class="heading-h2"> is pixel for pixel the <h2> it used to be, while search engines and
 * screen readers see the level that is actually correct.
 *
 * Loaded after compri-2024.css.
 */

.heading-h1 {
  color: var(--compri-black);
  max-width: 38ch;
  margin-top: 0;
  margin-bottom: 6px;
  font-family: Titillium Web, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}

.heading-h2 {
  max-width: 47ch;
  margin-top: 0;
  margin-bottom: 4px;
  font-family: Titillium Web, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.heading-h3 {
  color: var(--compri-black);
  max-width: 59ch;
  margin-top: 0;
  margin-bottom: 4px;
  font-family: Titillium Web, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.heading-h4 {
  color: var(--compri-black);
  max-width: 78ch;
  margin-top: 0;
  margin-bottom: 2px;
  font-family: Titillium Web, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.heading-h5,
.heading-h6 {
  color: var(--compri-black);
  max-width: 88ch;
  margin-top: 0;
  margin-bottom: 2px;
  font-family: Titillium Web, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

@media screen and (max-width: 479px) {
  .heading-h1 {
    font-size: 28px;
  }

  .heading-h2 {
    font-size: 22px;
  }

  .heading-h3 {
    font-size: 20px;
  }
}