/* ==========================================================================
   Layout — container, sections, full-bleed integration with GeneratePress.
   ========================================================================== */

.wf-container {
	max-width: var(--wf-container);
	margin-inline: auto;
	padding-inline: var(--wf-gutter);
	width: 100%;
}

.wf-container--wide {
	max-width: var(--wf-container-wide);
}

.wf-container--narrow {
	max-width: var(--wf-container-narrow);
}

/* Vertical section rhythm */
.wf-section {
	padding-block: var(--wf-section);
}

/* Section background variants */
.wf-section--light,
.is-style-wf-bg-light {
	background: var(--wf-light-bg);
}

.wf-section--dark,
.is-style-wf-bg-dark {
	background: var(--wf-secondary);
	color: var(--wf-white);
}

.is-style-wf-bg-dark :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wf-white);
}

/* --- Full-bleed sections on GeneratePress --------------------------------
   Our page content is composed entirely of full-width sections. We let any
   .alignfull element break out of GP's constrained container, then re-center
   inner content with .wf-container. body overflow-x guards against the
   100vw/scrollbar gap. */

body {
	overflow-x: hidden;
}

.wf-page .entry-content > .alignfull,
.wf-page .entry-content > .wf-section {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

/* Zero GP's article/content chrome on designed pages so the hero sits flush. */
.wf-page .inside-article,
.wf-page .entry-content {
	padding: 0;
	margin: 0;
}

.wf-page .site-content,
.wf-page .content-area {
	padding: 0;
}

.wf-page .entry-content > * + * {
	margin-top: 0;
}

/* Reset GP footer container so our footer controls its own backgrounds. */
.site-footer {
	padding: 0;
	background: none;
	border: 0;
}