/* Typography for the_content() on single posts. Scoped to .mrl-prose only. */
.mrl-prose {
  --prose-body: #334155;
  --prose-heading: #1a202c;
  --prose-brand: #ed8910;
  --prose-brand-dark: #985300;
  --prose-muted: #64748b;
  --prose-border: #e2e8f0;
  --prose-soft: #fff9f2;
  color: var(--prose-body);
  font-family: "Onest", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
.mrl-prose > :first-child {
  margin-top: 0 !important;
}
.mrl-prose > :last-child {
  margin-bottom: 0 !important;
}

/* Paragraphs */
.mrl-prose p {
  margin: 0 0 1.25em;
  color: var(--prose-body);
  font-size: inherit;
  line-height: inherit;
}
.mrl-prose p:empty {
  display: none;
}

/* Headings */
.mrl-prose h1,
.mrl-prose h2,
.mrl-prose h3,
.mrl-prose h4,
.mrl-prose h5,
.mrl-prose h6 {
  color: var(--prose-heading);
  font-weight: 600;
  scroll-margin-top: 120px;
}
.mrl-prose h1,
.mrl-prose h2 {
  color: var(--prose-brand-dark);
  font-size: 1.5em;
  line-height: 1.35;
  margin: 2em 0 0.75em;
}
.mrl-prose h3 {
  color: var(--prose-brand);
  font-size: 1.25em;
  line-height: 1.5;
  margin: 1.75em 0 0.6em;
}
.mrl-prose h4 {
  font-size: 1.125em;
  line-height: 1.5;
  margin: 1.5em 0 0.5em;
}
.mrl-prose h5,
.mrl-prose h6 {
  font-size: 1em;
  margin: 1.5em 0 0.5em;
}
.mrl-prose :is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 0;
}

/* Inline */
.mrl-prose a {
  color: var(--prose-brand);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mrl-prose a:hover {
  color: var(--prose-brand-dark);
}
.mrl-prose a:has(> img) {
  text-decoration: none;
}
.mrl-prose strong,
.mrl-prose b {
  color: var(--prose-heading);
  font-weight: 600;
}
.mrl-prose em,
.mrl-prose i {
  font-style: italic;
}

/* Lists (Word/Docs pastes often split every <li> into its own <ul>) */
.mrl-prose ul,
.mrl-prose ol {
  margin: 0 0 1.25em;
  padding-left: 1.5em;
}
.mrl-prose ul {
  list-style: disc;
}
.mrl-prose ol {
  list-style: decimal;
}
.mrl-prose ul ul {
  list-style: circle;
}
.mrl-prose ul:has(+ ul),
.mrl-prose ol:has(+ ol) {
  margin-bottom: 0;
}
.mrl-prose ul + ul,
.mrl-prose ol + ol {
  margin-top: 0.4em;
}
.mrl-prose li {
  margin: 0.4em 0;
  padding-left: 0.25em;
}
.mrl-prose li::marker {
  color: var(--prose-brand);
}
.mrl-prose ol > li::marker {
  font-weight: 600;
}
.mrl-prose li > p {
  margin: 0.5em 0;
}
.mrl-prose li :is(ul, ol) {
  margin: 0.4em 0;
}

/* Images: keep their inserted size instead of stretching */
.mrl-prose img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  vertical-align: middle;
}
.mrl-prose p:has(> img:only-child),
.mrl-prose p:has(> a:only-child > img:only-child) {
  margin: 1.75em 0;
}
.mrl-prose img.aligncenter,
.mrl-prose .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.mrl-prose p[style*="text-align: center"] img,
.mrl-prose p[style*="text-align:center"] img {
  display: inline-block;
}
.mrl-prose .alignleft,
.mrl-prose .alignright {
  display: block;
  margin: 0.5em auto 1.25em;
}
@media (min-width: 768px) {
  .mrl-prose .alignleft {
    float: left;
    margin: 0.35em 1.5em 1em 0;
    max-width: 50%;
  }
  .mrl-prose .alignright {
    float: right;
    margin: 0.35em 0 1em 1.5em;
    max-width: 50%;
  }
}
.mrl-prose::after {
  content: "";
  display: table;
  clear: both;
}

/* Captions */
.mrl-prose figure,
.mrl-prose .wp-caption {
  max-width: 100%;
  margin: 1.75em 0;
}
.mrl-prose .wp-caption.aligncenter,
.mrl-prose figure.aligncenter {
  margin-left: auto;
  margin-right: auto;
}
.mrl-prose figure img,
.mrl-prose .wp-caption img {
  display: block;
  margin: 0 auto;
}
.mrl-prose figcaption,
.mrl-prose .wp-caption-text {
  color: var(--prose-muted);
  font-size: 0.875em;
  line-height: 1.5;
  margin: 0.6em 0 0;
  text-align: center;
}

/* Blockquote */
.mrl-prose blockquote {
  margin: 1.75em 0;
  padding: 0.75em 1.25em;
  border-left: 4px solid var(--prose-brand);
  background: var(--prose-soft);
  border-radius: 0 12px 12px 0;
  color: var(--prose-brand-dark);
  font-style: italic;
}
.mrl-prose blockquote p {
  color: inherit;
  margin: 0.4em 0;
}

.mrl-prose hr {
  border: 0;
  border-top: 1px solid var(--prose-border);
  margin: 2.5em 0;
}

/* Tables */
.mrl-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.75em 0;
  font-size: 0.9em;
  line-height: 1.6;
}
.mrl-prose thead {
  background: #fff4d9;
}
.mrl-prose th {
  color: var(--prose-heading);
  font-weight: 600;
  text-align: left;
}
.mrl-prose th,
.mrl-prose td {
  border: 1px solid var(--prose-border);
  padding: 0.6em 0.8em;
  vertical-align: top;
}
.mrl-prose tbody tr:nth-child(even) {
  background: #fdfbf6;
}

/* Embeds */
.mrl-prose iframe,
.mrl-prose video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  margin: 1.75em 0;
}

.mrl-prose code {
  color: var(--prose-brand-dark);
  background: #fff4d9;
  border-radius: 6px;
  padding: 0.15em 0.4em;
  font-size: 0.875em;
}

@media (min-width: 768px) {
  .mrl-prose {
    font-size: 17px;
  }
}