/* The text of a page that was written in the rich text editor (richtext/widgets.py), as it is shown on the site.
   Put the class "rich-text" on the element around the text; the layout (width, margins) is up to the page. */

.rich-text {
  font-size: 1.8rem;
  line-height: 3rem;
}

.rich-text p,
.rich-text ul,
.rich-text ol {
  margin-bottom: 2rem;
}

.rich-text h1,
.rich-text h2,
.rich-text h3 {
  margin: 4rem 0 1.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
}

.rich-text h1 { font-size: 3rem; }
.rich-text h2 { font-size: 2.4rem; }
.rich-text h3 { font-size: 2rem; }

.rich-text ul { padding-left: 2.6rem; list-style: disc; }
.rich-text ol { padding-left: 2.6rem; list-style: decimal; }
.rich-text ul ul { list-style: circle; margin: 0.6rem 0 0; }
.rich-text ol ol { list-style: lower-alpha; margin: 0.6rem 0 0; }
.rich-text li + li { margin-top: 0.6rem; }

.rich-text a {
  color: var(--red);
  text-decoration: underline;
}

.rich-text img {
  margin: 3rem auto;
  border-radius: 0.8rem;
}

/* The red centred text of the services page ("Independent. No-nonsense. Forward-thinking."). */
.rich-text .outline-text {
  color: var(--red);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 3.08rem;
  text-align: center;
  padding-top: 2rem;
}

.rich-text img {
  height: auto;
}

.rich-text img.img-left {
  float: left;
  margin: 0.6rem 3rem 1.6rem 0;
}

.rich-text img.img-right {
  float: right;
  margin: 0.6rem 0 1.6rem 3rem;
}

/* Text after a floating image does not run into the next heading or list. */
.rich-text::after {
  content: "";
  display: block;
  clear: both;
}

.rich-text h1,
.rich-text h2,
.rich-text h3 {
  clear: both;
}

.rich-text .align-center { text-align: center; }
.rich-text .align-right { text-align: right; }
.rich-text .align-justify { text-align: justify; }

@media (max-width: 640px) {
  .rich-text {
    font-size: 1.3rem;
    line-height: 2.1rem;
  }

  .rich-text .outline-text {
    font-size: 1.5rem;
    line-height: 2.1rem;
  }

  /* No text beside the images on a phone: they use the whole width of the screen, without rounded corners. */
  .rich-text img,
  .rich-text img.img-left,
  .rich-text img.img-right {
    display: block;
    float: none;
    width: 100vw;
    max-width: none;
    margin: 2rem calc(50% - 50vw);
    border-radius: 0;
  }

  .rich-text h1 { font-size: 1.8rem; }
  .rich-text h2 { font-size: 1.6rem; }
  .rich-text h3 { font-size: 1.4rem; }
}