/* The reading surface of a story, on the page and in the post editor (loaded
   there with add_editor_style). Everything here is a default: :where() keeps
   it weaker than any block's own colour, border, size or spacing. */

:where(.wp-block-post-content) {
  --g-body: 1.125rem;
  font-size: calc(var(--g-body) * var(--gorunum-text-scale, 1));
  line-height: 1.6;
  color: var(--wp--preset--color--ink);
}

/* The text keeps its reading width; wide and full blocks step out of it. */
:where(.wp-block-post-content) > :where(:not(.alignwide):not(.alignfull)) {
  max-width: min(68ch, 700px);
}

/* In the post editor WordPress gives the writing area the site's content width
   (the 1320 px wall); the text keeps its reading width there too. */
.editor-styles-wrapper .is-root-container.wp-block-post-content > :where(:not(.alignwide):not(.alignfull)) {
  max-width: min(68ch, 700px);
}

:where(.wp-block-post-content) img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

:where(.wp-block-post-content) figcaption {
  color: var(--wp--preset--color--stone);
  font-size: var(--wp--preset--font-size--meta);
}

:where(.wp-block-post-content) blockquote {
  margin-inline: 0;
  padding-left: 16px;
  border-left: 4px solid var(--wp--preset--color--brand);
  font-size: 1.25rem;
  font-weight: 500;
}

/* The default link colour inside a story is set in theme.json (core/post-content),
   where WordPress orders it before any colour chosen on a block. */

/* Headings inside a story: the site's display face, a step below the title. */
:where(.wp-block-post-content) :where(h2, h3, h4) {
  margin: 1.6em 0 0.5em;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  line-height: 1.15;
}

:where(.wp-block-post-content) h2 {
  font-size: 1.5rem;
}

:where(.wp-block-post-content) :where(h3, h4) {
  font-size: 1.25rem;
}

/* A photo in the text gets air above and below. */
:where(.wp-block-post-content) > :where(figure) {
  margin-block: 24px;
}

/* A long address or word breaks instead of widening the page. */
:where(.wp-block-post-content) {
  overflow-wrap: break-word;
}

/* A wide table scrolls inside its own box instead of the page. */
:where(.wp-block-post-content) .wp-block-table {
  max-width: 100%;
  overflow-x: auto;
}

:where(.wp-block-post-content) .wp-block-table td,
:where(.wp-block-post-content) .wp-block-table th {
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  :where(.wp-block-post-content) {
    --g-body: 1.25rem;
  }
}