/* Headings */
h3 {
  margin-top: 2rem;
  margin-bottom: 0;
}

/* Links */
article a {
  white-space: break-spaces;
}

/* Tables */
div:has(> table) {
  overflow-x: auto;
}

table {
  margin: auto;
  border: solid;
}

td,
th {
  padding: 0.375rem;
  text-align: center;
}

/* Code */
code {
  font-family: var(--mono);
  line-height: 1.5;

  &:not(pre code) {
    overflow-wrap: break-word;
  }
}

pre:has(code) {
  overflow-x: auto;
}

/* Math */
div:has(> math[display="block"]) {
  overflow-y: hidden;
  overflow-x: auto;
  text-align: center;
  margin-block: 1em;
}

math[display="block"] * {
  math-style: normal;
}

/* Layout */
.post-header {
  display: flex;
  flex-direction: column;

  h1 {
    margin-bottom: 0.5rem;
    font-size: 1.625rem;
  }

  p {
    margin: 0.25rem 0;
  }

  time {
    margin: 0.25rem 0;
    opacity: var(--light);
    font-family: var(--mono);
  }
}

/* Figure */
figure {
  margin: auto 0;
}

figcaption {
  text-align: center;
  width: 80%;
  margin: auto;
}

article img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Containers */
.callout[data-callout="note"] {
  padding: 1rem;
  margin: 0.5rem 0;
  background-color: alpha(from var(--primary) / 5%);
  border-left: 0.25rem solid var(--primary);

  .callout-title {
    margin: 0;
    text-align: start;
    font-weight: bold;
  }
}

/* Lists */
:is(ol, ul) li:not(:has(p)) {
  line-height: 1.5;
  margin-block: 1em;
}

/* Text */
em {
  font-family: var(--serif);
}

/* Blockquotes */
blockquote {
  line-height: 1.5;

  & p:last-child {
    text-align: right;
  }
}