/*
 * The three client-facing editor styles for CMS article bodies.
 *
 * Two of the three are theme-native and need no CSS at all — they are WordPress
 * global-style presets the theme already carries:
 *   .has-p-20-font-size  lead paragraph   (used 6x in the original articles)
 *   .has-p-16-font-size  fine print / medical disclaimer
 *
 * Only the callout needs new CSS, because the theme has no prose-level
 * equivalent (its banner blocks are section-level and can't be toggled on a
 * paragraph). It is built from the theme's own custom properties so it reads as
 * native, and it is scoped to article bodies. Nothing else on the site uses this
 * class, so it cannot alter any of the carried pages.
 */

.wk-article-body .wk-callout {
  position: relative;
  margin-block: 1.75em;
  padding: 1.25em 1.5em 1.25em 1.75em;
  border-radius: 1rem;
  background: var(--dst--secondary-color2, #faebe0);
  color: var(--dst--base-text-color, #42291e);
}

.wk-article-body .wk-callout::before {
  content: '';
  position: absolute;
  inset-block: 0.9em;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--dst--primary-color1, #944fed);
}

.wk-article-body .wk-callout > :first-child { margin-block-start: 0; }
.wk-article-body .wk-callout > :last-child { margin-block-end: 0; }

@media (max-width: 766px) {
  .wk-article-body .wk-callout {
    padding: 1.1em 1.15em 1.1em 1.35em;
  }
}