/**
 * Legacy pages — container widths matched to the 2026 theme.
 *
 * SINGLE SOURCE for the .container width on every legacy (old-design) page.
 * Change the values here only. Loaded last on legacy pages
 * (inc/legacy-enqueue.php → ct_legacy_container_css, priority 999), so it overrides
 * Bootstrap 4.4.1 and colortokens.min.css without !important.
 *
 * Widths mirror src/scss/base/_layout.scss (2026 theme).
 * Side padding stays 15px (Bootstrap 4 rows use -15px margins; changing it would misalign the old grid).
 * Page-scoped rules such as ".some-page .container { max-width: … }" in page CSS still win — they are intentional per-page designs.
 */
:root {
	--ct-legacy-container-576: 540px;
	--ct-legacy-container-768: 720px;
	--ct-legacy-container-992: 960px;
	--ct-legacy-container-1200: 1140px;
	--ct-legacy-container-1400: 1350px;
	--ct-legacy-container-1680: 1440px;
	--ct-legacy-container-1920: 1512px;
	--ct-legacy-container-pad: 15px;
	--ct-legacy-container-pad-mobile: 20px;
}

.container {
	width: 100%;
	max-width: 100%;
	padding-left: var(--ct-legacy-container-pad);
	padding-right: var(--ct-legacy-container-pad);
}

@media (min-width: 576px)  { .container { max-width: var(--ct-legacy-container-576); } }
@media (min-width: 768px)  { .container { max-width: var(--ct-legacy-container-768); } }
@media (min-width: 992px)  { .container { max-width: var(--ct-legacy-container-992); } }
@media (min-width: 1200px) { .container { max-width: var(--ct-legacy-container-1200); } }
@media (min-width: 1400px) { .container { max-width: var(--ct-legacy-container-1400); } }
@media (min-width: 1680px) { .container { max-width: var(--ct-legacy-container-1680); } }
@media (min-width: 1920px) { .container { max-width: var(--ct-legacy-container-1920); } }

/* Mobile: full width with 20px gutters (same as both themes) */
@media (max-width: 767.98px) {
	.container {
		max-width: 100%;
		padding-left: var(--ct-legacy-container-pad-mobile);
		padding-right: var(--ct-legacy-container-pad-mobile);
	}
}

/* ------------------------------------------------------------------
 * Japanese / German pages (body.ct-legacy-lang, see inc/legacy-i18n.php):
 * two hero sections set their own width in the old page CSS
 * (home slider .container-fluid 90%, Contact hero .container 85%).
 * Pin them to the same widths as every other container + the header/footer.
 * ------------------------------------------------------------------ */
body.ct-legacy-lang #home_page_2024 #hero_2024 .hero_slider_wrap .container-fluid,
body.ct-legacy-lang #contact_wrap #hero .container {
	width: 100%;
	max-width: 100%;
	padding-left: var(--ct-legacy-container-pad);
	padding-right: var(--ct-legacy-container-pad);
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 576px)  { body.ct-legacy-lang #home_page_2024 #hero_2024 .hero_slider_wrap .container-fluid, body.ct-legacy-lang #contact_wrap #hero .container { max-width: var(--ct-legacy-container-576); } }
@media (min-width: 768px)  { body.ct-legacy-lang #home_page_2024 #hero_2024 .hero_slider_wrap .container-fluid, body.ct-legacy-lang #contact_wrap #hero .container { max-width: var(--ct-legacy-container-768); } }
@media (min-width: 992px)  { body.ct-legacy-lang #home_page_2024 #hero_2024 .hero_slider_wrap .container-fluid, body.ct-legacy-lang #contact_wrap #hero .container { max-width: var(--ct-legacy-container-992); } }
@media (min-width: 1200px) { body.ct-legacy-lang #home_page_2024 #hero_2024 .hero_slider_wrap .container-fluid, body.ct-legacy-lang #contact_wrap #hero .container { max-width: var(--ct-legacy-container-1200); } }
@media (min-width: 1400px) { body.ct-legacy-lang #home_page_2024 #hero_2024 .hero_slider_wrap .container-fluid, body.ct-legacy-lang #contact_wrap #hero .container { max-width: var(--ct-legacy-container-1400); } }
@media (min-width: 1680px) { body.ct-legacy-lang #home_page_2024 #hero_2024 .hero_slider_wrap .container-fluid, body.ct-legacy-lang #contact_wrap #hero .container { max-width: var(--ct-legacy-container-1680); } }
@media (min-width: 1920px) { body.ct-legacy-lang #home_page_2024 #hero_2024 .hero_slider_wrap .container-fluid, body.ct-legacy-lang #contact_wrap #hero .container { max-width: var(--ct-legacy-container-1920); } }
@media (max-width: 767.98px) {
	body.ct-legacy-lang #home_page_2024 #hero_2024 .hero_slider_wrap .container-fluid,
	body.ct-legacy-lang #contact_wrap #hero .container {
		max-width: 100%;
		padding-left: var(--ct-legacy-container-pad-mobile);
		padding-right: var(--ct-legacy-container-pad-mobile);
	}
}