/* One horizontal alignment contract for the public site and editor canvas.
   Section backgrounds stay edge-to-edge; content occupies the middle 85%.
   Use cb-site-width once at the outer edge, never on nested cards/columns. */
:root { --site-gutter: 7.5%; }

@media screen {
  .cb-site-width,
  .cb-site-preview-nav,
  .cb-site-preview-footer > div,
  .cb-site-preview-footer > small {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--site-gutter, 7.5%);
  }

  .cb-site-main { min-width: 0; }

  .cb-page {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Saved pages can contain old inline padding and fixed-width presets.
     Normalise only the outer page sections, not their nested layouts. */
  .cb-page > .cb-section {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--site-gutter, 7.5%) !important;
  }

  .cb-page > .cb-section:not([data-cb-width-override="true"]):not([data-section-width="custom"]) > .cb-container {
    width: 100% !important;
    max-width: none !important;
  }

  /* Imported HTML or individual elements placed directly on the page also
     receive the page gutter, without adding it again inside their columns. */
  .cb-page > :is(div, section, article, header, footer, nav, aside):not(.cb-section) {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--site-gutter, 7.5%);
  }

  .cb-site-preview-brand { min-width: 0; }
  .cb-site-preview-brand > img + div { display: flex; min-width: 0; }
  .cb-site-preview-brand strong,
  .cb-site-preview-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media screen and (max-width: 1023px) {
  .cb-site-preview-nav nav { display: none; }
  .cb-site-preview-menu { display: block; }
}