@import "../layout.css";

/* Post styles */
.post > article > header {
  max-inline-size: 50rem;
}

.post-body {
  max-inline-size: 50rem;
}

.post p,
.post h2, .post h3, .post h4, .post h5,
.post ul, .post ol {
  font-family: Karla, sans-serif;
}

.post-body p,
.post-body h2, .post-body h3, .post-body h4, .post-body h5,
.post-body > ul, .post-body > ol {
  margin-inline: 0;
  max-inline-size: 70ch;
}

@media screen and (min-width: 50rem) {
  .post-body p,
  .post-body h2, .post-body h3, .post-body h4, .post-body h5,
  .post-body > ul, .post-body > ol {
    margin-inline: var(--space-l);
  }
}

@media screen and (min-width: 75rem) {
  .post-body p,
  .post-body h2, .post-body h3, .post-body h4, .post-body h5,
  .post-body > ul, .post-body > ol {
    margin-inline: var(--space-xl);
  }
}

.post-body h2 {
  font-size: var(--ms2);
  margin-block-start: 1.75em;
}

.post-body h3 {
  font-size: var(--ms1);
  margin-block-start: 1.5em;
}

.post-body h4 {
  font-size: var(--ms0);
  font-weight: 500;
  margin-block-start: 1em;
}

.post-body p {
  font-weight: var(--font-weight--body);
  font-size: var(--font-size--body);
  line-height: var(--line-height--body);
}

.post-body p.sign-off {
  margin-block-start: var(--space-xxl);
}

.post-body > ul,
.post-body > ol {
  padding-inline-start: var(--space-m);
}

.post-body > ul > li,
.post-body > ol > li {
  line-height: 2;
  margin-block-end: 0.25em;
}

.post-body > ol.references {
  list-style-type: none;
  counter-reset: ol-counter;
}

.post-body > ol.references li {
  counter-increment: ol-counter;
  position: relative;
  padding-inline-start: var(--space-s);
}

.post-body > ol.references li::before {
  content: counter(ol-counter) " ";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(-1 * var(--space-l));
  font-family: var(--font-family--body);
  font-weight: 700;
  text-align: right;
  width: 1.5em;
  vertical-align: middle;
  display: inline-block;
}

hr.space--xxs { border: none; margin-block: var(--space-xxs); }
hr.space--xs { border: none; margin-block: var(--space-xs); }
hr.space--s { border: none; margin-block: var(--space-s); }
hr.space--m { border: none; margin-block: var(--space-m); }
hr.space--l { border: none; margin-block: var(--space-l); }
hr.space--xl { border: none; margin-block: var(--space-xl); }
hr.space--xxl { border: none; margin-block: var(--space-xxl); }

/* Code styles */
.post-body p code {
  font-family: monospace;
  font-size: var(--ms-1); /* Slightly reduce size of typically larger glyphs of monospace fonts */
  background-color: var(--color-bg-negative);
  border: var(--size-1px) solid var(--color-fg-weaker);
  border-radius: calc(var(--size-2px) * 2);
  padding: var(--size-3px) var(--size-5px);
  margin-inline: var(--size-2px);
}

/* Figure styles */
.post-body > figure {
  margin: 0;
}
.post-body > .figure {
  display: flex;
  flex-direction: var(--direction-block);
  align-items: center;
}
.post-body > .figure,
.post-body .figure-side-by-side {
  margin-inline: calc(-1 * var(--body-inline));
  margin-block: var(--space-xl);
}

.post-body .highlight {
  margin-inline: calc(-1 * var(--body-inline));
  margin-block: var(--space-xl);
  padding-block: var(--space-base);
  /* Match the padding with the margin on the body so the content aligns vertically. */
  padding-inline: var(--body-inline);
  --border--highlight: var(--size-1px) solid var(--color-fg-weaker);
  border-block: var(--border--highlight);
  overflow-x: auto;
  font-size: var(--ms-2);
}

@media screen and (min-width: 50rem) {
  .post-body > .figure,
  .post-body .figure-side-by-side {
    margin-inline: 0;
  }

  .post-body .figure-side-by-side {
    display: flex;
    flex-direction: var(--direction-inline);
    gap: var(--space-base);
  }

  .post-body .highlight {
    margin-inline: 0;
    /* Match the padding with the margin on the post body content so the content aligns vertically. */
    padding-inline-start: var(--space-l);
    border-inline: var(--border--highlight);
    border-radius: var(--size-7px);
    font-size: var(--ms-1);
  }
}

@media screen and (min-width: 75rem) {
  .post-body .highlight {
    /* Match the padding with the margin on the post body content so the content aligns vertically. */
    padding-inline-start: var(--space-xl);
  }
}

.post-body blockquote {
  margin-block: var(--space-l);
  margin-inline-start: var(--space-m);
  margin-inline-end: 0;
}

.post-body blockquote p {
  line-height: 1.75em;
  font-style: italic;
  font-size: calc((var(--ms1) + var(--ms0)) / 2);
}

@media screen and (min-width: 37.5rem) {
  .post-body blockquote {
    margin-inline-start: var(--space-l);
  }
}

/* Header styles */
.post h1 {
  font-family: YoungSerif, serif;
  font-size: var(--ms5);
  line-height: 1.2;
  margin-block: 0;
}

.post > article > header {
  margin-block-end: var(--space-xl);
}

.post > article > header h2 {
  font-family: var(--font-family--subHeading);
  font-weight: var(--font-weight--subHeading);
  font-style: var(--font-style--subHeading);
  font-size: var(--ms1);
  line-height: 1.5;
}