/*
 * The page width: how wide the content column gets on desktop.
 *
 * Antek has no setting for it. 1140px is hardcoded in two places, and both are
 * overridden here from the one token below (as are the Elementor HTML widgets' own caps,
 * at the bottom, and the plugin's hero, through --container-page in theme.css):
 *
 * - Antek's own .l-section--container / .l-section__container (antek/style.css,
 *   "Layouts (Desktop)"), the column every non-Elementor page sits in.
 * - The Elementor kit's container width, which Antek writes back to 1140 on every
 *   Elementor cache clear and Customizer colour save (ideapark_set_theme_elementor_settings),
 *   so changing it under Elementor → Site Settings → Layout never sticks. The kit prints
 *   it into uploads/elementor/css/post-<kit id>.css; the rules below override that.
 *
 * Only ≥1170px, Antek's desktop breakpoint, where it switches from a full-width column
 * to a fixed one. Between 1170px and the token's width the column fills the viewport
 * less a 15px gutter each side, as Antek's 1140px-in-1170px does, instead of
 * overflowing it.
 *
 * Specificity is deliberately no higher than the rules overridden: this stylesheet loads
 * after both (functions.php), which is what makes it win, and an Elementor section or
 * container given its own width in the editor keeps it, since Elementor prints that
 * under a more specific per-element selector.
 *
 * Antek's "wide" containers (.l-section--container-wide at 1380px, .l-section--wide at
 * 1530px) are left alone, so they end up narrower than this one.
 */
:root {
	--mv-page-width: 1700px;
}

@media (width >= 1170px) {

	.l-section--container,
	.l-section__container {
		width: min(var(--mv-page-width), 100% - 30px);
	}

	/* Elementor sections. An inner section sits in a column already, and takes no gutter. */
	.elementor-section.elementor-section-boxed > .elementor-container {
		max-width: var(--mv-page-width);
	}

	.elementor-top-section.elementor-section-boxed > .elementor-container {
		max-width: min(var(--mv-page-width), 100% - 30px);
	}

	/*
	 * Elementor flexbox containers. Elementor resolves this inside
	 * --content-width: min(100%, var(--container-max-width)), so 100% is the container's own
	 * width. Only a top-level (.e-parent) container takes the gutter, as above.
	 */
	.e-con {
		--container-max-width: var(--mv-page-width);
	}

	.e-con.e-parent {
		--container-max-width: min(var(--mv-page-width), 100% - 30px);
	}

	/*
	 * The hand-written HTML widgets: the homepage and the product/location landing pages
	 * each carry their own markup and <style> in an Elementor HTML widget, and cap their
	 * outer wrapper at a fixed 1100–1320px of their own. That CSS lives in the pages'
	 * Elementor data, not in this repo, so it's matched here family by family, one per
	 * prefix the pages use, each the widget's outermost wrapper.
	 *
	 * The widget prints its <style> in the body, after this stylesheet, so each selector is
	 * the page's own with .elementor-widget-html in front: one class more specific, which is
	 * what wins. Only the wrapper's cap is lifted; the narrower caps inside it (a hero
	 * text, an intro paragraph at 600–960px) are line lengths and stay as they are.
	 *
	 * A new landing page with a new prefix isn't covered until it's added here, unless
	 * its own CSS uses max-width: var(--mv-page-width) to begin with. Left out on purpose:
	 * .mv404, the 404 template's centred message box.
	 */
	.elementor-widget-html :is(
		.aggrev-page, .aggrz-page, .ah-page, .al-page, .bw-page, .kh-page, .mit-page,
		.sh-page, .sp-page, .st-page, .mv-wrap, .mvx-wrap, .sph-wrap, .wsh-guide, .wrap
	),
	.elementor-widget-html .mv .wrap,
	.elementor-widget-html .mv-werken .mv-container,
	.elementor-widget-html .tlp :is(.container, .hero-photo) {
		max-width: var(--mv-page-width);
	}

	/*
	 * The homepage's bands are 100vw wide, scrollbar included, and its USP row has no
	 * padding of its own, so these take the same 15px gutter as Antek's column, or
	 * their edges run under the scrollbar below the token's width.
	 */
	.elementor-widget-html .mvh2-home :is(.mvh2-wrap, .mvh2-usprow) {
		max-width: min(var(--mv-page-width), 100% - 30px);
	}
}