/**
 * Custom block styles (front end + editor iframe).
 *
 * Loaded via add_editor_style() and wp_enqueue_scripts() from
 * inc/ui/block-styles.php, so previews match the live site.
 */

/* Visually reverse a Columns block on desktop only. Below 782px
   WordPress stacks the columns, so the first column stays on top on mobile. */
@media (min-width: 782px) {
  .wp-block-columns.is-style-reversed {
    flex-direction: row-reverse;
  }

  /* row-reverse only swaps the columns visually; the inline, physical
     left/right padding stays glued to each column. The Media + Text pattern
     pins the image column to left:80 / right:0, so after the swap the image
     would touch the outer edge. CSS cannot swap two physical values
     generically, so the image column is matched and its padding mirrored.

     Detection is serialization-proof on purpose: the front end renders the
     inline style without spaces (padding-right:0), while the editor iframe
     renders it via React with a space and possibly a unit (padding-right: 0px).
     So instead of matching the zero, we match the column that uses spacing-80
     but does NOT have spacing-80 on its right edge — i.e. the image column.
     The text column (80 on both sides) and the flush image column (no
     spacing-80 at all) are both left untouched. */
  .wp-block-columns.is-style-reversed > .wp-block-column[style*="--wp--preset--spacing--80"]:not([style*="padding-right:var(--wp--preset--spacing--80)"]):not([style*="padding-right: var(--wp--preset--spacing--80)"]) {
    padding-left: 0 !important;
    padding-right: var(--wp--preset--spacing--80) !important;
  }
}

/* Badge — background hugs the text instead of the full block width. */
.wp-block-heading.is-style-badge.has-background,
p.is-style-badge.has-background {
  width: fit-content;
  max-width: 100%;
  padding: 0.35em 0.75em;
  border-radius: 6px;
}

/* Only the constrained layout needs this: it centres every child with
   !important. Flex parents place the badge themselves, so leave them alone.
   :where() keeps this below the alignment rules, which must still win. */
:where(.is-layout-constrained) > .wp-block-heading.is-style-badge.has-background,
:where(.is-layout-constrained) > p.is-style-badge.has-background {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

.wp-block-heading.is-style-badge.has-background.has-text-align-center,
p.is-style-badge.has-background.has-text-align-center {
  margin-inline: auto !important;
}

.wp-block-heading.is-style-badge.has-background.has-text-align-right,
p.is-style-badge.has-background.has-text-align-right {
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
}

/* Highlight — one background rectangle per rendered line. It needs an inline
   box, so it rides the editor's inline highlight format, not a block style. */
.wp-block-heading mark,
p mark {
  padding: 0.25em 0.5em;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}