/**
 * Layout-only CSS for generated pages drawn by this plugin's own page templates
 * (templates/single-full.php and single-canvas.php, see includes/class-spg-single-template.php).
 * No colours or fonts — those come from the theme and from Elementor.
 *
 * Body classes set by SPG_Single_Template::add_body_classes():
 *   spg-layout-full | spg-layout-canvas, spg-width-full | spg-width-boxed, spg-compat.
 * --spg-page-width (the boxed width) is set from Settings → Page layout.
 */

/* The page area itself: block, edge to edge, no spacing of its own. */
.spg-page {
    display: block;
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Boxed: centred, capped at the width chosen in Settings. */
body.spg-width-boxed .spg-page {
    max-width: var(--spg-page-width, 1140px);
    margin-left: auto;
    margin-right: auto;
}

/* Canvas has no theme header or footer, so also drop the theme's own spacing around the body. */
body.spg-layout-canvas {
    margin: 0;
    padding: 0;
}

/**
 * Compatibility mode (Settings → Page layout). For a theme whose header/footer opens a narrow
 * container that the page then sits inside: stretch the page out of it to the full window width.
 * With a boxed width, Elementor's own wrapper inside the page keeps that width instead.
 */
body.spg-compat {
    overflow-x: clip;
}

body.spg-compat .spg-page {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
}

body.spg-compat.spg-width-boxed .spg-page > .elementor {
    max-width: var(--spg-page-width, 1140px);
    margin-left: auto;
    margin-right: auto;
}