/*
 * Compatibility rules for markup already stored in migrated posts.
 *
 * Keep component and Gutenberg styles in theme.css. The !important rules below
 * are limited to legacy inline declarations that cannot be removed safely from
 * production content.
 */

/* Empty paragraphs emitted by the former editor wrapper. */
.entry-content > p.paragraph:empty {
  display: none;
}

/* Legacy coloured callout blocks with inline background declarations. */
.entry-content
  > div[style*="background-color"]:not([class*="wp-block-"]):not(
    .has-background
  ) {
  margin: var(--ns-space-5) 0 0 !important;
  padding: clamp(var(--ns-space-4), 3vw, var(--ns-space-5)) !important;
  border: 1px solid var(--ns-border);
  border-radius: var(--ns-radius);
  background: var(--ns-surface-soft) !important;
  color: var(--ns-muted) !important;
  font-size: var(--ns-size-lead) !important;
  line-height: 1.65 !important;
}

.entry-content
  > div[style*="background-color"]:not([class*="wp-block-"]):not(
    .has-background
  )
  p {
  margin: 0;
}

.entry-content
  > div[style*="background-color"]:not([class*="wp-block-"]):not(
    .has-background
  )
  a {
  display: inline-flex;
  min-height: var(--ns-control-height);
  padding: 0 var(--ns-space-3);
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ns-accent);
  color: #fff;
  font-size: var(--ns-size-sm);
  font-weight: 600;
  text-decoration: none;
}

/* Inline typography in old paragraphs must follow the article scale. */
.entry-content p[style*="font-size"],
.entry-content p [style*="font-size"],
.entry-content li[style*="font-size"],
.entry-content li [style*="font-size"],
.entry-content .paragraph[style*="line-height"],
.entry-content .paragraph [style*="line-height"] {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Preserve layout when old embeds carry a fixed inline max-width. */
.entry-content .wp-caption[style*="max-width"],
.entry-content figure[style*="max-width"],
.entry-content iframe[style*="max-width"],
.entry-content video[style*="max-width"],
.entry-content embed[style*="max-width"],
.entry-content object[style*="max-width"] {
  max-width: 100% !important;
}