/* Layout contract. GENERATED by tools/sync_theme.py -- do not hand-edit.
   Container aliases and alignment shared by the site and editor. */

:root,
.editor-styles-wrapper {
  --container-width: var(--theme-container-width);
  --normal-container-max-width: var(--od-content-max);
  --theme-normal-container-max-width: var(--od-content-max);
  --theme-block-max-width-custom: var(--od-content-max);
  --theme-block-wide-max-width: var(--od-wide-max);

  --theme-container-width: min(100%, calc(100vw - (2 * var(--od-gutter))));
}

/* Wide content uses the same width on both surfaces. */
.entry-content > .alignwide {
  max-width: var(--od-wide-max);
}

/* alignfull must reach the viewport edge on both surfaces. */
.entry-content > .alignfull {
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Editor alignment.
   block-editor-style.css sets `margin-left: unset` on every .wp-block,
   at the same specificity as the negative margins WordPress uses for
   this, and it loads later -- so full-width blocks stopped breaking
   out. Measured: an alignfull group was 1272px in the editor against
   1320px on the front end, and its inner paragraph 1224px against
   1272px, because the root padding applied twice.

   Modern WordPress marks alignment with a CLASS and sets no data-align
   attribute on the canvas block wrapper, so block-editor-style.css's
   `:not([data-align="wide"]):not([data-align="full"])` guards exclude
   nothing: every aligned block was being pinned to the content width
   with `margin-left: auto !important`. Re-target by class. The
   !important is not decoration -- it is answering an !important. */
.block-editor-block-list__layout.is-root-container > .alignwide {
  max-width: var(--od-wide-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.block-editor-block-list__layout.is-root-container > .alignfull {
  max-width: none !important;
  margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1) !important;
  margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
}

/* Alignment inside our containers. WordPress only implements
   alignwide/alignfull for its own layout containers, so the editor
   offered the control on blocks inside ours and nothing happened. */
.od-container > .alignwide {
  width: min(var(--od-wide-max), 100vw - (2 * var(--od-gutter)));
  max-width: none;
  margin-inline: calc((100% - min(var(--od-wide-max), 100vw - (2 * var(--od-gutter)))) / 2);
}
.od-container > .alignfull {
  width: 100vw;
  max-width: none;
  margin-inline: calc((100% - 100vw) / 2);
}
.od-compare > .alignwide,
.od-compare > .alignfull { grid-column: 1 / -1; }
.od-footer__grid > .alignwide,
.od-footer__grid > .alignfull { grid-column: 1 / -1; }
.od-grid > .alignwide,
.od-grid > .alignfull { grid-column: 1 / -1; }
.od-meet > .alignwide,
.od-meet > .alignfull { grid-column: 1 / -1; }

/* Editor: elements keep their own margins. WordPress zeroes every
   .wp-block's block margins and spaces siblings with a fixed
   block-gap instead, so the canvas used 24px where the page uses the
   heading's .5em. Derived from components.css, not restated. */
.is-root-container > h1.block-editor-block-list__block { margin: 0 0 .5em; }
.is-root-container > h2.block-editor-block-list__block { margin: 0 0 .5em; }
.is-root-container > h3.block-editor-block-list__block { margin: 0 0 .5em; }
.is-root-container > h4.block-editor-block-list__block { margin: 0 0 .5em; }
.is-root-container > h5.block-editor-block-list__block { margin: 0 0 .5em; }
.is-root-container > h6.block-editor-block-list__block { margin: 0 0 .5em; }
.is-root-container > p.block-editor-block-list__block { margin: 0 0 1em; }

/* Editor: positioned components stay positioned. Core's block wrapper
   rule (.block-editor-block-list__layout .block-editor-block-list__block
   { position: relative }) outranks a single-class component rule, so
   every absolute/fixed/sticky piece fell into flow in the canvas. These
   are derived from components.css, not listed by hand. */
.editor-styles-wrapper .block-editor-block-list__block.od-wire__line { position: absolute; max-width: none; }
.editor-styles-wrapper .block-editor-block-list__block.od-wire__line :where(.wp-block, svg) { max-width: none; }
.editor-styles-wrapper .block-editor-block-list__block.od-skip { position: absolute; max-width: none; }
.editor-styles-wrapper .block-editor-block-list__block.od-skip :where(.wp-block, svg) { max-width: none; }