/*
 * Styles for content entered through the Wagtail rich text editor.
 * Rich text cannot carry Metronic utility classes, so the equivalent rules are
 * reproduced here to keep the look of the original hand-written pages.
 */
.cms-accent-primary { --cms-accent: var(--kt-primary); }
.cms-accent-secondary { --cms-accent: var(--kt-secondary); }
.cms-accent-warning { --cms-accent: var(--kt-warning); }

.cms-richtext b {
  font-weight: 600;
}

.cms-richtext .accent {
  color: var(--cms-accent);
  font-weight: 600;
}

.cms-richtext a {
  color: var(--cms-accent);
}

.cms-richtext h2,
.cms-richtext h3 {
  text-align: center;
  color: var(--kt-gray-800);
}

.cms-richtext h2 {
  font-size: calc(1.275rem + 0.3vw);
}

.cms-richtext h3 {
  font-size: calc(1.26rem + 0.12vw);
  margin-top: 1.5rem;
}

.cms-richtext-accent-headings h2 {
  color: var(--cms-accent);
  font-size: calc(1.3rem + 0.6vw);
  margin-top: 2.5rem;
}

.cms-richtext-accent-headings h2 ~ h2 {
  margin-top: 0;
}

@media (min-width: 1200px) {
  .cms-richtext h2 { font-size: 1.5rem; }
  .cms-richtext h3 { font-size: 1.35rem; }
  .cms-richtext-accent-headings h2 { font-size: 1.75rem; }
}

.cms-illustrated-list > ul {
  padding-left: 0;
}

.cms-feature-text p {
  margin-bottom: 2.5rem;
}

.cms-feature-text p:last-child {
  margin-bottom: 0;
}

/*
 * Images carry their width/height attributes so that the browser reserves their space
 * while they load. Their displayed size still comes from the Metronic classes
 * (w-100, h-150px, mw-400px…), the attributes only give the aspect ratio.
 */
.cms-page img[width][height] {
  width: auto;
  height: auto;
}