/* =====================================================================
   CoreCMS - rich text output
   ---------------------------------------------------------------------
   Styles for HTML that came out of the editor. Everything is scoped to
   .rich-text so it can never leak into a theme's own layout.

   Link it after the theme stylesheet and wrap editor content in
   <div class="rich-text">...</div>. The colours inherit from the theme,
   so nothing here has to be re-skinned per site.

   The class names match the "Styles" dropdown in the editor. Adding a
   style there means adding a rule here, and nothing else.
   ================================================================== */

.rich-text { overflow-wrap: break-word; }

.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child  { margin-bottom: 0; }

/* --- headings ------------------------------------------------------- */

.rich-text h1, .rich-text h2, .rich-text h3,
.rich-text h4, .rich-text h5, .rich-text h6 {
  margin: 1.8em 0 .6em;
  line-height: 1.25;
  font-weight: 700;
}
.rich-text h1 { font-size: 2em; }
.rich-text h2 { font-size: 1.6em; }
.rich-text h3 { font-size: 1.32em; }
.rich-text h4 { font-size: 1.15em; }
.rich-text h5 { font-size: 1.03em; }
.rich-text h6 { font-size: .95em; text-transform: uppercase; letter-spacing: .04em; }

/* --- text ----------------------------------------------------------- */

.rich-text p  { margin: 0 0 1.1em; line-height: 1.75; }
.rich-text a  { text-decoration: underline; text-underline-offset: .16em; }
.rich-text hr { border: 0; border-top: 1px solid currentColor; opacity: .18; margin: 2.2em 0; }
.rich-text mark { padding: 0 .15em; }

.rich-text ul, .rich-text ol { margin: 0 0 1.1em; padding-left: 1.5em; line-height: 1.75; }
/* Themes very often carry a blanket "li { list-style: none }" for their
   own menus. That inherits into editor content and quietly removes every
   bullet, so the marker is restated on the li, where it wins. */
.rich-text ul > li { list-style: disc; }
.rich-text ol > li { list-style: decimal; }
.rich-text ul ul > li { list-style: circle; }
.rich-text li { margin-bottom: .4em; }
.rich-text li > ul, .rich-text li > ol { margin-top: .4em; margin-bottom: 0; }

.rich-text blockquote {
  margin: 1.6em 0;
  padding: .3em 0 .3em 1.2em;
  border-left: 3px solid currentColor;
  font-style: italic;
  opacity: .92;
}

.rich-text pre {
  margin: 1.4em 0; padding: 1em 1.15em;
  background: #171b2e; color: #d8dcec;
  border-radius: 8px; overflow-x: auto;
  font-size: .88em; line-height: 1.6;
}
.rich-text :not(pre) > code {
  padding: .12em .38em; border-radius: 4px;
  background: rgba(127, 127, 127, .14);
  font-size: .9em;
}

/* --- images --------------------------------------------------------- */

.rich-text img { max-width: 100%; height: auto; border-radius: 8px; }
.rich-text figure { margin: 1.6em 0; }
.rich-text figure.image { display: table; }
.rich-text figure.image img { display: block; }
.rich-text figcaption {
  display: table-caption; caption-side: bottom;
  padding-top: .55em; font-size: .88em; opacity: .72; text-align: center;
}

/* The editor writes these when an image is aligned or resized. */
.rich-text .image-style-block         { margin-left: auto; margin-right: auto; }
.rich-text .image-style-align-center  { margin-left: auto; margin-right: auto; }
.rich-text .image-style-align-left    { float: left;  margin: .4em 1.6em 1.2em 0; max-width: 50%; }
.rich-text .image-style-align-right   { float: right; margin: .4em 0 1.2em 1.6em; max-width: 50%; }
.rich-text .image-style-side          { float: right; margin: .4em 0 1.2em 1.6em; max-width: 50%; }
.rich-text .image-inline              { display: inline-block; vertical-align: baseline; }
.rich-text .image_resized             { max-width: 100%; height: auto; }
.rich-text .image_resized img         { width: 100%; }

/* Floats must not escape the article. */
.rich-text::after { content: ""; display: block; clear: both; }

/* --- tables --------------------------------------------------------- */

/* A wide table scrolls inside its own box rather than stretching the
   page sideways on a phone. */
.rich-text figure.table { margin: 1.6em 0; overflow-x: auto; }
.rich-text table {
  border-collapse: collapse; width: 100%; min-width: 420px; font-size: .95em;
}
.rich-text th, .rich-text td {
  padding: .6em .8em; border: 1px solid rgba(127, 127, 127, .28); text-align: left;
}
.rich-text thead th { background: rgba(127, 127, 127, .1); font-weight: 700; }
.rich-text table caption { padding-bottom: .5em; font-size: .9em; opacity: .75; }

/* --- embedded video and maps ---------------------------------------- */

/* Keeps a 16:9 frame at any width. Google Maps embeds are usually 4:3,
   so they get their own ratio via the wrapper the editor writes. */
.rich-text figure.media { margin: 1.8em 0; }
.rich-text figure.media div[data-oembed-url] { position: relative; padding-bottom: 56.25%; height: 0; }
.rich-text figure.media iframe,
.rich-text figure.media div[data-oembed-url] iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: 8px;
}
.rich-text > iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }

/* --- the Styles dropdown -------------------------------------------- */

.rich-text p.lead { font-size: 1.15em; line-height: 1.7; opacity: .92; }

.rich-text p.small-print { font-size: .85em; opacity: .72; }

.rich-text p.note-box {
  padding: 1em 1.15em; margin: 1.6em 0;
  border-left: 3px solid currentColor;
  background: rgba(127, 127, 127, .08);
  border-radius: 0 8px 8px 0;
}

.rich-text ul.tick-list, .rich-text ul.tick-list > li { list-style: none; }
.rich-text ul.tick-list { padding-left: 0; }
.rich-text ul.tick-list li { position: relative; padding-left: 1.7em; }
.rich-text ul.tick-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  font-weight: 700;
}

.rich-text blockquote.pull-quote {
  border-left: 0; padding: 0; text-align: center;
  font-size: 1.25em; font-style: normal; font-weight: 600; line-height: 1.5;
  margin: 2em 0;
}

.rich-text table.table-bordered th,
.rich-text table.table-bordered td { border-width: 2px; }

/* The editor's to-do list, if one ends up on a public page. */
.rich-text ul.todo-list, .rich-text ul.todo-list > li { list-style: none; }
.rich-text ul.todo-list { padding-left: 0; }
.rich-text ul.todo-list li { padding-left: 1.7em; position: relative; }
.rich-text ul.todo-list input[type=checkbox] { position: absolute; left: 0; top: .35em; }

/* --- print ----------------------------------------------------------- */

@media print {
  .rich-text figure.media, .rich-text iframe { display: none; }
  .rich-text a::after { content: " (" attr(href) ")"; font-size: .85em; }
}