/*
 * PBK M1.04B — content width contract.
 *
 * Normal content uses the readable 48rem measure, alignwide uses the
 * Tailwind max-w-7xl equivalent (80rem), and alignfull uses the complete
 * page container (up to Tailwind max-w-screen-2xl / 96rem).
 *
 * The front-page composition has its own layout contract. PBK custom blocks
 * are also excluded from the implicit normal width: their internal geometry
 * must remain owned by the component. An explicit alignwide/alignfull class
 * is still respected for every direct child, including a PBK block.
 */

:where(.pbk-content, .editor-styles-wrapper) {
  --pbk-content-width-normal: var(--wp--style--global--content-size, 48rem);
  --pbk-content-width-wide: var(--wp--style--global--wide-size, 80rem);
  --pbk-content-width-full: 96rem;
}

/* Front end: only direct children participate in the editorial geometry. */
.pbk-content:not(.pbk-front-page-content)
  > :where(
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    ol,
    dl,
    blockquote,
    pre,
    hr,
    figure,
    table,
    details,
    form,
    [class*="wp-block-"]
  ):not(.alignwide):not(.alignfull):not([class*="wp-block-pbk-"]) {
  box-sizing: border-box;
  inline-size: min(100%, var(--pbk-content-width-normal));
  max-inline-size: var(--pbk-content-width-normal);
  min-inline-size: 0;
  margin-inline: auto;
}

.pbk-content:not(.pbk-front-page-content) > .alignwide {
  box-sizing: border-box;
  inline-size: min(100%, var(--pbk-content-width-wide));
  max-inline-size: var(--pbk-content-width-wide);
  min-inline-size: 0;
  margin-inline: auto;
}

.pbk-content:not(.pbk-front-page-content) > .alignfull {
  box-sizing: border-box;
  inline-size: min(100%, var(--pbk-content-width-full));
  max-inline-size: var(--pbk-content-width-full);
  min-inline-size: 0;
  margin-inline: auto;
}

/*
 * Editor: Gutenberg wraps every top-level block in .wp-block. The selectors
 * mirror the front end but stop at the root container, so nested/custom block
 * structures are not modified.
 */
.editor-styles-wrapper .is-root-container
  > .wp-block:not(.alignwide):not(.alignfull):not([class*="wp-block-pbk-"]) {
  box-sizing: border-box;
  inline-size: min(100%, var(--pbk-content-width-normal));
  max-inline-size: var(--pbk-content-width-normal);
  min-inline-size: 0;
  margin-inline: auto;
}

.editor-styles-wrapper .is-root-container > .wp-block.alignwide {
  box-sizing: border-box;
  inline-size: min(100%, var(--pbk-content-width-wide));
  max-inline-size: var(--pbk-content-width-wide);
  min-inline-size: 0;
  margin-inline: auto;
}

.editor-styles-wrapper .is-root-container > .wp-block.alignfull {
  box-sizing: border-box;
  inline-size: min(100%, var(--pbk-content-width-full));
  max-inline-size: var(--pbk-content-width-full);
  min-inline-size: 0;
  margin-inline: auto;
}

/* Keep wide content inside the canvas on narrow screens and zoomed layouts. */
@media (max-width: 47.999rem) {
  .pbk-content:not(.pbk-front-page-content) > :where(.alignwide, .alignfull),
  .editor-styles-wrapper .is-root-container > :where(.wp-block.alignwide, .wp-block.alignfull) {
    max-inline-size: 100%;
  }
}