/**
 * Full Width Page - helper styles
 *
 * Only loaded on pages using one of this plugin's templates.
 * The templates already render without sidebar markup, so this file
 * just handles comfortable spacing and the "no header/footer" case.
 */

body.fullwidth-page .fullwidth-page-content {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0 20px;
	box-sizing: border-box;
}

/**
 * True edge-to-edge full width.
 *
 * Themes usually wrap content in a max-width container (e.g. 1200px,
 * centered) even on "full width" templates. This breaks the element out
 * of that container using the standard full-bleed trick: make it as wide
 * as the viewport, then pull it back to the left edge, regardless of how
 * deeply it's nested inside the theme's markup.
 */
body.fullwidth-edge-to-edge-body {
	overflow-x: hidden; /* guards against the 100vw trick causing a horizontal scrollbar on some themes */
}

.fullwidth-edge-to-edge {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Blank-canvas template: no theme chrome, so zero out default margins */
body.fullwidth-no-header-footer {
	margin: 0;
}

body.fullwidth-no-header-footer .fullwidth-page-content {
	padding: 40px 20px;
}