/* PageBloo front-end canvas: escape the active theme's content container
   (negative-margin breakout) and re-constrain to the page width chosen in
   the builder. This makes the published page match the editor preview
   regardless of the theme's default content-width.

   We avoid `overflow-x: hidden` here because it would make the canvas a
   scroll container, which breaks `position: sticky` on theme headers
   above this element. Horizontal overflow is contained by `max-width:
   100vw` — themes/sites with native horizontal-scroll concerns should
   set `body { overflow-x: hidden }` themselves. */
.pagebloo-canvas {
	box-sizing: border-box;
	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: auto;
}
/* Standard modern reset, scoped to PageBloo content. AI-generated layouts
   often combine `width: 100%` with padding/borders; without border-box that
   blows out container bounds. */
.pagebloo-canvas *,
.pagebloo-canvas *::before,
.pagebloo-canvas *::after {
	box-sizing: border-box;
}
.pagebloo-canvas-inner {
	margin: 0 auto;
	width: 100%;
}
.pagebloo-canvas-inner-mobile  { max-width: 420px; }
.pagebloo-canvas-inner-tablet  { max-width: 820px; }
.pagebloo-canvas-inner-desktop { max-width: 1240px; }
.pagebloo-canvas-inner-full    { max-width: 100%; }

/* Some themes apply padding/borders on .entry-content that would clip the
   breakout — neutralize them on the immediate ancestor. */
.entry-content > .pagebloo-canvas,
.wp-block-post-content > .pagebloo-canvas {
	padding-left: 0;
	padding-right: 0;
}

/* PageBloo utility classes — applied to [data-field] elements via the
   editor's floating format toolbar. Mirror UTIL_CSS in custom-editor.js. */
.pb-u-align-left    { text-align: left !important; }
.pb-u-align-center  { text-align: center !important; }
.pb-u-align-right   { text-align: right !important; }
.pb-u-align-justify { text-align: justify !important; }
.pb-u-line-tight    { line-height: 1.1 !important; }
.pb-u-line-snug     { line-height: 1.25 !important; }
.pb-u-line-normal   { line-height: 1.5 !important; }
.pb-u-line-relaxed  { line-height: 1.75 !important; }
.pb-u-line-loose    { line-height: 2 !important; }
.pb-u-track-tight   { letter-spacing: -0.02em !important; }
.pb-u-track-normal  { letter-spacing: 0 !important; }
.pb-u-track-wide    { letter-spacing: 0.05em !important; }
.pb-u-track-wider   { letter-spacing: 0.1em !important; }

/* ---- Container ----
   Sections are full-bleed inside .pagebloo-canvas so backgrounds/gradients
   reach edge to edge. Inner content is wrapped in a .container which is
   capped and centered, with a responsive horizontal gutter so phones don't
   edge-touch and 4K viewports don't leave miles of margin. These fixed
   widths are the ONLY layout primitive PageBloo provides — all other design
   (colors, type, spacing) is authored per section by the generating AI. */
.pagebloo-canvas .container {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.pagebloo-canvas .container.is-narrow { max-width: 760px; }
.pagebloo-canvas .container.is-wide   { max-width: 1440px; }
.pagebloo-canvas .container.is-full   { max-width: none; padding-inline: 0; }