/* =========================================================
   BMC prose styles

   Loaded in two places from one file:
     .brxe-post-content     front end, inside a Bricks Post Content element
     .editor-styles-wrapper block editor canvas

   Every value here is a semantic token, so this file is client-agnostic.
   Define --brand, --brand-hover, --surface-alt, --ink-heading, --ink-body and
   --white in the client's Bricks Colors panel and this drops in unchanged.
   ========================================================= */

/* ---------------------------------------------------------
   FALLBACK TOKENS

   The real values come from Bricks' generated style-manager.min.css, which is
   enqueued after this file and therefore wins. These exist so the block editor
   is still usable when that file is missing or stale: on a fresh install, or
   before Bricks has regenerated its CSS.

   Without them, one missing variable takes the whole editor down. A
   `font-size: var(--text-m)` with no --text-m is invalid at computed-value
   time, falls back to `inherit`, and inherits the 10px root that Bricks' 62.5%
   rule establishes. Everything renders at 10px and looks broken.

   Deliberately neutral greys, not a guess at anyone's brand. If the editor
   ever looks grey, the Bricks variables are not reaching it.
   --------------------------------------------------------- */

:root {
  /* Layout. The one place the standard site width is written down. */
  --site-max: 1366px;
  --prose-max: 720px;

  /* Type scale, against a 10px root */
  --text-2xs: 1.1rem;
  --text-xs:  1.3rem;
  --text-s:   1.5rem;
  --text-m:   1.8rem;
  --text-l:   2.4rem;
  --text-xl:  3.2rem;
  --text-2xl: 4.2rem;

  /* Space scale */
  --space-2xs: 0.8rem;
  --space-xs:  1.2rem;
  --space-s:   1.6rem;
  --space-m:   2.4rem;
  --space-l:   3.2rem;
  --space-xl:  4.8rem;
  --space-2xl: 6.4rem;

  /* Colour roles */
  --brand:       #555555;
  --brand-hover: #333333;
  --ink-heading: #222222;
  --ink-body:    #444444;
  --white:       #ffffff;
  --surface-alt: #f2f2f2;
}

/* ---------------------------------------------------------
   Scope
   --------------------------------------------------------- */

.brxe-post-content,
.editor-styles-wrapper {
  color: var(--ink-body);
  font-size: var(--text-m);
  line-height: 1.6;
}

/* ---------------------------------------------------------
   Flow: every direct child gets space above it except the
   first. One rule instead of margin-bottom on ten elements,
   and no trailing margin to strip off the last child.
   --------------------------------------------------------- */

.brxe-post-content > * + *,
.editor-styles-wrapper > * + * {
  margin-top: var(--space-m);
}

/* Headings get more room above than a paragraph does, and stay
   tight to the text they introduce. */
.brxe-post-content > :is(h2, h3, h4) + *,
.editor-styles-wrapper > :is(h2, h3, h4) + * {
  margin-top: var(--space-s);
}

.brxe-post-content > * + :is(h2, h3, h4),
.editor-styles-wrapper > * + :is(h2, h3, h4) {
  margin-top: var(--space-xl);
}

/* ---------------------------------------------------------
   Headings inherit family, case and color from Bricks theme
   styles, and their measure from the content column below.

   They used to carry max-width: 32ch of their own. Two problems. A heading
   then sat at a different width from the paragraph under it, so their right
   edges disagreed and neither lined up with an image. And ch is relative to
   the element's own font size, so the cap moved every time a heading level
   changed size. One column width for everything is both simpler and correct.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Paragraphs and lists
   --------------------------------------------------------- */

.brxe-post-content :is(ul, ol),
.editor-styles-wrapper :is(ul, ol) {
  padding-left: 1.4em;
}

.brxe-post-content :is(ul, ol) li + li,
.editor-styles-wrapper :is(ul, ol) li + li {
  margin-top: .4em;
}

.brxe-post-content ul,
.editor-styles-wrapper ul { list-style: disc; }

.brxe-post-content ul ul,
.editor-styles-wrapper ul ul { list-style: circle; margin-top: .4em; }

.brxe-post-content ol,
.editor-styles-wrapper ol { list-style: decimal; }

.brxe-post-content li::marker,
.editor-styles-wrapper li::marker { color: var(--brand); }

/* ---------------------------------------------------------
   Quotes
   --------------------------------------------------------- */

/* Matches the .pull-quote treatment used in Bricks: brand coloured, bold,
   centred, at body size. No tinted panel and no left rule, so a quote in an
   article reads the same as a pull quote on a built page.

   WIDTH NOTE
   max-width is --prose-max, a px value, and NOT a ch measure. The ch
   unit is relative to the element's own font size, so at the larger quote size
   68ch computed WIDER than the 68ch of a body paragraph and the quote stuck
   out past the text column. Anything set at a different font size from body
   text needs a px ceiling, not a ch one. */

.brxe-post-content blockquote,
.editor-styles-wrapper blockquote {
  max-width: var(--prose-max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-m) 0;
  border: 0;
  background: none;
  font-size: var(--text-m);
  font-weight: 700;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
  color: var(--brand);
}

.brxe-post-content blockquote p,
.editor-styles-wrapper blockquote p {
  max-width: none;
  color: inherit;
}

.brxe-post-content blockquote > :last-child,
.editor-styles-wrapper blockquote > :last-child { margin-bottom: 0; }

/* Attribution: quiet, body size, not shouting in uppercase brand. Matches
   .pull-quote__cite. */
.brxe-post-content :is(blockquote cite, .wp-block-quote__citation, .wp-block-pullquote__citation),
.editor-styles-wrapper :is(blockquote cite, .wp-block-quote__citation, .wp-block-pullquote__citation) {
  display: block;
  margin-top: var(--space-s);
  font-size: var(--text-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--ink-body);
}

/* The pull quote is the louder one: larger, with hairline rules above and
   below. Same colour and alignment as the quote so they read as one family. */
.brxe-post-content .wp-block-pullquote,
.editor-styles-wrapper .wp-block-pullquote {
  max-width: var(--prose-max);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-l) 0;
  border-top: 1px solid var(--brand);
  border-bottom: 1px solid var(--brand);
  border-left: 0;
  background: none;
  text-align: center;
}

.brxe-post-content .wp-block-pullquote blockquote,
.editor-styles-wrapper .wp-block-pullquote blockquote {
  max-width: none;
  padding: 0;
  font-size: var(--text-l);
  line-height: 1.35;
}

/* ---------------------------------------------------------
   Details / Summary. This is the client's accordion.
   Native semantics, keyboard accessible, no plugin.
   --------------------------------------------------------- */

.brxe-post-content details,
.editor-styles-wrapper details {
  border-bottom: 1px solid #ddd;
}

.brxe-post-content details + details,
.editor-styles-wrapper details + details { margin-top: 0; }

.brxe-post-content summary,
.editor-styles-wrapper summary {
  position: relative;
  display: block;
  padding: var(--space-s) var(--space-l) var(--space-s) 0;
  font-family: inherit;
  font-size: var(--text-m);
  font-weight: 600;
  color: var(--ink-heading);
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}

.brxe-post-content summary::-webkit-details-marker,
.editor-styles-wrapper summary::-webkit-details-marker { display: none; }

.brxe-post-content summary:hover,
.editor-styles-wrapper summary:hover { color: var(--brand); }

/* Chevron drawn in CSS so there is no icon dependency */
.brxe-post-content summary::after,
.editor-styles-wrapper summary::after {
  content: "";
  position: absolute;
  right: .4em;
  top: 50%;
  width: .5em;
  height: .5em;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}

.brxe-post-content details[open] > summary::after,
.editor-styles-wrapper details[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.brxe-post-content details > :not(summary),
.editor-styles-wrapper details > :not(summary) {
  padding-bottom: var(--space-s);
}

/* ---------------------------------------------------------
   Figures, images, captions
   --------------------------------------------------------- */

.brxe-post-content :is(img, video),
.editor-styles-wrapper :is(img, video) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Reset the browser's default figure indent (UA sets margin: 1em 40px).

   :where() so this contributes ZERO specificity. At its old weight of (0,1,1)
   it outranked the content-column rule's (0,1,0), so every top-level image
   took margin-left: 0 and sat hard against the left edge of a 1366 container
   while the paragraphs around it centred. At zero weight the column rule wins
   for a top-level figure and centres it, and a figure nested inside a column
   still loses the 40px indent, which is all this rule was ever for. */
:where(.brxe-post-content, .editor-styles-wrapper) figure {
  margin-left: 0;
  margin-right: 0;
}

.brxe-post-content figcaption,
.editor-styles-wrapper figcaption {
  margin-top: .6em;
  font-size: var(--text-s);
  line-height: 1.5;
  color: var(--ink-body);
}

/* ---------------------------------------------------------
   THE CONTENT COLUMN (front end)

   This is the front-end half of the rule the editor canvas has had since
   2.2.0. Without it the editor and the published page disagreed: the canvas
   centred every top-level block at --prose-max, while the front end left each
   element to cap itself with a ch measure and hug the left edge of a 1366px
   Bricks container. Compose centred, publish left. That mismatch is the bug.

   Top-level blocks now get the column and the auto margins that centre it, so
   the measure comes from one number in one place, and .alignwide / .alignfull
   below opt out of it at higher specificity.

   Scoped to direct children on purpose. A paragraph inside a two-column block
   takes the width of its column, which is what a column is for.
   --------------------------------------------------------- */

.brxe-post-content > * {
  max-width: var(--prose-max);
  margin-left: auto;
  margin-right: auto;
}

/* Block editor alignment classes. Without these a client's full-width
   image sits in the text column and looks like a mistake. */
.brxe-post-content .aligncenter,
.editor-styles-wrapper .aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.brxe-post-content .alignwide,
.editor-styles-wrapper .alignwide {
  width: 100%;
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
}

/* THE left: auto MATTERS. Bricks ships its own full-width breakout in
   frontend-layer.min.css:

     .alignfull { width:100vw; max-width:calc(-0.5em + 100vw);
                  margin-left:-50vw; margin-right:-50vw;
                  position:relative; left:50%; }

   ...AND `right: 50%` on the same rule. Both offsets, which is the whole
   story.

   That is the position/offset technique. The rule below is the negative-margin
   technique. Both work alone. Run together they do not: this rule outranks
   Bricks at (0,2,0) on width and margin, but any offset it fails to reset
   survives, and then the band moves half a container sideways.

   Resetting only `left` is NOT enough, and fails in the opposite direction.
   With `left: auto` and `right: 50%` still standing, CSS relative positioning
   says an auto `left` resolves to the negative of `right`, so `left` computes
   to -50% and the band bleeds off the LEFT instead of the right.

   Measured in headless Chromium at a 1513px viewport, matching the live page:

     no reset          band  737 → 2250   left  736.5px   737px of overflow
     left: auto only   band -736 →  777   left -736.5px   bleeds off the left
     left + right      band    0 → 1513   left       0    correct, no overflow

   Not `position: static`, which would break a cover block's overlay. Clearing
   both offsets is enough: relative positioning with no offsets does nothing. */

.brxe-post-content .alignfull,
.editor-styles-wrapper .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  left: auto;
  right: auto;
}

/* ---------------------------------------------------------
   FULL-BLEED BANDS

   A block set to Full width breaks out to the viewport edges. Holding its
   CONTENT to the site width is WordPress's job, not ours, and the mechanism is
   the Group block's constrained layout:

     Group  -> Full width, background colour and padding on the Group,
               "Inner blocks use content width" ON
       Columns / image / anything  -> Wide for 1366, default for 720

   WordPress then emits, from the contentSize and wideSize in theme.json:

     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
        { max-width: var(--wp--style--global--content-size); margin-inline: auto }
     .is-layout-constrained > .alignwide
        { max-width: var(--wp--style--global--wide-size) }

   Measured against the real page CSS at four viewport widths: band 0 to the
   viewport every time, a Wide child at 1366 centred, a default child at 720
   centred, no overflow.

   2.9.0 tried to do the inset here instead, with padding on the band. Wrong
   twice over. A Columns block is is-layout-flex and never constrains its
   children whatever padding it carries, and padding set in the block's own
   Dimensions panel is an INLINE style, which beats every stylesheet rule: the
   client's own controls defeated it. Deleted rather than defended.

   What stays below is only the breakout itself, which Bricks and this theme
   both implement and therefore have to be reconciled.
   --------------------------------------------------------- */

/* The canvas marks alignment with an attribute rather than the alignfull
   class, so the class-based disarm may not match there. Reset the offsets on
   the attribute too. Harmless if nothing set them. */
.editor-styles-wrapper [data-align="full"],
.editor-styles-wrapper [data-align="full"] > * {
  left: auto;
  right: auto;
}

/* Floated image with text wrapping around it. The bio-page pattern.
   60% against the 720px content column gives roughly the same image-to-text
   ratio as the current site (500px image in a 795px column). */
.brxe-post-content :is(.alignleft, .alignright),
.editor-styles-wrapper :is(.alignleft, .alignright) {
  max-width: 60%;
  margin-bottom: var(--space-s);
}

.brxe-post-content .alignleft,
.editor-styles-wrapper .alignleft { float: left; margin-right: var(--space-l); }

.brxe-post-content .alignright,
.editor-styles-wrapper .alignright { float: right; margin-left: var(--space-l); }

/* Contain a trailing float. Without this, an image taller than the text it
   wraps hangs out of the bottom of the content area and whatever follows in
   the Bricks template rides up beside it. */
.brxe-post-content,
.editor-styles-wrapper { display: flow-root; }

/* A heading always starts a new band, never sits beside a float. */
.brxe-post-content > :is(h2, h3, h4),
.editor-styles-wrapper > :is(h2, h3, h4) { clear: both; }

/* Below the tablet breakpoint a 60% float leaves too narrow a text column to
   read. Drop the float and let the image sit full width above the text. */
@media (max-width: 767px) {
  .brxe-post-content :is(.alignleft, .alignright),
  .editor-styles-wrapper :is(.alignleft, .alignright) {
    float: none;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------------------------------------------------------
   Tables. Wrapped so a wide table scrolls instead of
   blowing out the page on a phone.
   --------------------------------------------------------- */

.brxe-post-content .wp-block-table,
.editor-styles-wrapper .wp-block-table { overflow-x: auto; }

.brxe-post-content table,
.editor-styles-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
}

.brxe-post-content :is(th, td),
.editor-styles-wrapper :is(th, td) {
  padding: .8em 1em;
  border-bottom: 1px solid #e2e2e2;
  text-align: left;
  vertical-align: top;
}

.brxe-post-content th,
.editor-styles-wrapper th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-heading);
  background: var(--surface-alt);
}

/* ---------------------------------------------------------
   Code
   --------------------------------------------------------- */

.brxe-post-content :is(code, kbd, samp),
.editor-styles-wrapper :is(code, kbd, samp) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  padding: .15em .4em;
  border-radius: 3px;
  background: var(--surface-alt);
  color: var(--ink-heading);
}

.brxe-post-content pre,
.editor-styles-wrapper pre {
  padding: var(--space-m);
  border-radius: 3px;
  background: var(--surface-alt);
  overflow-x: auto;
  font-size: var(--text-s);
  line-height: 1.5;
}

.brxe-post-content pre code,
.editor-styles-wrapper pre code { padding: 0; background: none; }

/* ---------------------------------------------------------
   Separators
   --------------------------------------------------------- */

.brxe-post-content hr,
.editor-styles-wrapper hr {
  border: 0;
  border-top: 1px solid #e2e2e2;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  max-width: none;
}

.brxe-post-content hr.is-style-dots,
.editor-styles-wrapper hr.is-style-dots { border: 0; }

/* ---------------------------------------------------------
   Links inside prose. Matches the theme style rule so
   block content and builder content read the same.
   --------------------------------------------------------- */

.brxe-post-content a:not(.wp-block-button__link),
.editor-styles-wrapper a:not(.wp-block-button__link) {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}

.brxe-post-content a:not(.wp-block-button__link):is(:hover, :focus-visible),
.editor-styles-wrapper a:not(.wp-block-button__link):is(:hover, :focus-visible) {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------
   Buttons, so a client's core/button matches Bricks buttons
   --------------------------------------------------------- */

.brxe-post-content .wp-block-button__link,
.editor-styles-wrapper .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--text-s);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-s) var(--space-l);
  border: 2px solid var(--brand);
  border-radius: 3px;
  background-color: var(--brand);
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.brxe-post-content .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button__link:hover {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
}

.brxe-post-content .is-style-outline .wp-block-button__link,
.editor-styles-wrapper .is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--brand);
}

/* ---------------------------------------------------------
   Editor-only: give the canvas the same measure as the front
   end so the client is not writing into a 1400px column and
   wondering why their line breaks move.
   --------------------------------------------------------- */

/* Superseded by the px values in the LAYOUT BLOCKS section below. rem here
   meant 720px on the front end and 1152px in the editor. */

/* =========================================================
   LAYOUT BLOCKS

   Added in 2.1.0. Everything above this line was written for prose: a column
   of paragraphs, headings and lists. Once the client builds page layouts in
   the block editor, Columns, Group, Cover and Media & Text arrive, and the
   flow rules above do not reach inside them because they only match direct
   children of the content root.
   ========================================================= */

/* ---------------------------------------------------------
   Flow inside layout containers.

   Same rhythm as the top level, one nesting level down. Without this, two
   paragraphs inside a column sit flush against each other while the same two
   paragraphs outside it are spaced.
   --------------------------------------------------------- */

.brxe-post-content :is(.wp-block-group, .wp-block-column, .wp-block-cover__inner-container) > * + *,
.editor-styles-wrapper :is(.wp-block-group, .wp-block-column, .wp-block-cover__inner-container) > * + * {
  margin-top: var(--space-m);
}

.brxe-post-content :is(.wp-block-group, .wp-block-column) > :is(h2, h3, h4) + *,
.editor-styles-wrapper :is(.wp-block-group, .wp-block-column) > :is(h2, h3, h4) + * {
  margin-top: var(--space-s);
}

/* ---------------------------------------------------------
   Columns

   Core supplies the flex behaviour and the stack below 782px. Only the gutter
   and the measure need to come from the design system: a paragraph in a
   half-width column should not inherit the 68ch measure meant for full width.
   --------------------------------------------------------- */

.brxe-post-content .wp-block-columns,
.editor-styles-wrapper .wp-block-columns {
  gap: var(--space-l);
  margin-bottom: 0;
}

.brxe-post-content .wp-block-column > :is(p, ul, ol),
.editor-styles-wrapper .wp-block-column > :is(p, ul, ol) {
  max-width: none;
}

.brxe-post-content .wp-block-column :is(h2, h3, h4, h5, h6),
.editor-styles-wrapper .wp-block-column :is(h2, h3, h4, h5, h6) {
  max-width: none;
}

/* ---------------------------------------------------------
   Group and Cover
   --------------------------------------------------------- */

.brxe-post-content .wp-block-group.has-background,
.editor-styles-wrapper .wp-block-group.has-background {
  padding: var(--space-l);
}

.brxe-post-content .wp-block-cover,
.editor-styles-wrapper .wp-block-cover {
  padding: var(--space-2xl) var(--space-l);
}

.brxe-post-content .wp-block-cover :is(h1, h2, h3, h4, h5, h6, p),
.editor-styles-wrapper .wp-block-cover :is(h1, h2, h3, h4, h5, h6, p) {
  color: inherit;
  max-width: none;
}

/* ---------------------------------------------------------
   Media & Text
   --------------------------------------------------------- */

.brxe-post-content .wp-block-media-text,
.editor-styles-wrapper .wp-block-media-text {
  gap: var(--space-l);
}

.brxe-post-content .wp-block-media-text__content,
.editor-styles-wrapper .wp-block-media-text__content {
  padding: 0;
}

.brxe-post-content .wp-block-media-text__content > * + *,
.editor-styles-wrapper .wp-block-media-text__content > * + * {
  margin-top: var(--space-s);
}

.brxe-post-content .wp-block-media-text :is(p, ul, ol),
.editor-styles-wrapper .wp-block-media-text :is(p, ul, ol) {
  max-width: none;
}

/* ---------------------------------------------------------
   Video and embeds

   responsive-embeds is enabled in the theme, so core handles the aspect ratio
   for known providers. These cover self-hosted video and the wrapper margins.
   --------------------------------------------------------- */

.brxe-post-content :is(.wp-block-video, .wp-block-embed) video,
.editor-styles-wrapper :is(.wp-block-video, .wp-block-embed) video {
  width: 100%;
  height: auto;
}

.brxe-post-content .wp-block-embed figcaption,
.brxe-post-content .wp-block-video figcaption,
.editor-styles-wrapper .wp-block-embed figcaption,
.editor-styles-wrapper .wp-block-video figcaption {
  margin-top: .6em;
  font-size: var(--text-s);
  color: var(--ink-body);
}

/* ---------------------------------------------------------
   Alignment inside a Bricks Post Content element.

   alignfull pulls to the viewport edge with negative margins. That only works
   if no ancestor clips overflow, so if a full-width group turns into a
   horizontal scrollbar, the container above it has overflow set.
   --------------------------------------------------------- */

.brxe-post-content > .alignwide,
.brxe-post-content > .alignfull {
  width: auto;
}

.brxe-post-content > .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

/* ---------------------------------------------------------
   Editor-only: match the theme.json layout widths so the client composes at
   the width the page publishes at.
   --------------------------------------------------------- */

/* Constrain the canvas.

   .wp-block alone is not reliable: bmc-base is a classic theme, not a block
   theme, so the editor's root container is not laid out as "constrained" and
   theme.json's contentSize does not cap top-level blocks. Without a cap the
   content runs the full width of the canvas.

   .is-root-container is the canvas's own block list wrapper and is the stable
   hook. Both selectors are kept so this holds across Gutenberg versions.

   The root container is capped at the site width and centred, so a normal
   block centred inside it sits at a known inset. That inset is what the float
   rules below reuse. */

.editor-styles-wrapper .is-root-container {
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-l);
  padding-right: var(--space-l);
}

.editor-styles-wrapper .is-root-container > *,
.editor-styles-wrapper .wp-block {
  max-width: var(--prose-max);
  margin-left: auto;
  margin-right: auto;
}

.editor-styles-wrapper .is-root-container > [data-align="wide"],
.editor-styles-wrapper .wp-block[data-align="wide"] {
  max-width: var(--site-max);
}

/* Full cancels the container gutter rather than escaping the canvas. */
.editor-styles-wrapper .is-root-container > [data-align="full"],
.editor-styles-wrapper .wp-block[data-align="full"] {
  max-width: none;
  margin-left: calc(-1 * var(--space-l));
  margin-right: calc(-1 * var(--space-l));
}

/* ---------------------------------------------------------
   FLOATS IN THE EDITOR

   A float ignores auto margins: `margin-inline: auto` computes to 0 on a
   floated box. So while paragraphs centre themselves inside the root
   container, a floated image pinned itself to the container's left edge,
   hundreds of pixels away from the text it was supposed to wrap. That is why
   the image sat far left at a wide canvas and only looked right once the
   window narrowed enough for the inset to disappear.

   The fix is to give the float the same inset the centred text column has,
   and to size it against the prose width rather than the container width so
   60% means the same thing in both places.
   --------------------------------------------------------- */

.editor-styles-wrapper .is-root-container > :is(.alignleft, .alignright) {
  max-width: calc(var(--prose-max) * 0.6);
}

.editor-styles-wrapper .is-root-container > .alignleft {
  margin-left: max(0px, calc((100% - var(--prose-max)) / 2));
}

.editor-styles-wrapper .is-root-container > .alignright {
  margin-right: max(0px, calc((100% - var(--prose-max)) / 2));
}

/* ---------------------------------------------------------
   HEADING ANCHORS

   The table of contents itself is a Bricks element (post-toc), styled with its
   own panel controls, so there is nothing to style here. The child theme still
   writes ids onto the headings server side, which is what this rule supports:
   a deep link to #some-heading from an email or a social post lands correctly
   instead of under a sticky header.
   --------------------------------------------------------- */


/* Anchored headings should not land under a sticky header. */
.brxe-post-content :is(h2, h3)[id],
.editor-styles-wrapper :is(h2, h3)[id] { scroll-margin-top: var(--space-2xl); }

/* ---------------------------------------------------------
   STYLE GUIDE LABELS

   Used by the generated Style Guide page so every specimen is captioned with
   the class name that produces it. Client-agnostic and harmless elsewhere.
   --------------------------------------------------------- */

.sg-label {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-2xs);
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink-body);
  background: var(--surface-alt);
  padding: .3em .6em;
  border-radius: 3px;
}

.sg-specimen {
  padding: var(--space-m) 0;
  border-top: 1px solid #e2e2e2;
}