/*
Theme Name: Hello Thermo
Theme URI: https://thermoforming.com
Description: Child theme for Thermoforming — Elementor header & Garet typography.
Author: Thermoforming
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-thermo
*/

/* Base resets for Elementor canvas */
body {
	margin: 0;
}

/*
 * Page side gutter — all content blocks.
 * 96px @1440 → 160px @1920 (linear between)
 */
:root {
	--tf-page-x: clamp(96px, calc(96px + (100vw - 1440px) * 64 / 480), 160px);
}

@media (max-width: 1024px) {
	:root {
		--tf-page-x: 24px;
	}
}

@media (max-width: 767px) {
	:root {
		--tf-page-x: 20px;
	}
}

/* Very narrow phones (iPhone SE / 360) */
@media (max-width: 400px) {
	:root {
		--tf-page-x: 16px;
	}
}

/* Prevent horizontal scroll from overlapping media on mobile */
@media (max-width: 1024px) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* Site-wide containment + wrap on ~360 phones */
@media (max-width: 400px) {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	img,
	video,
	svg,
	iframe {
		max-width: 100%;
	}

	.elementor-heading-title,
	.elementor-widget-text-editor,
	.elementor-widget-text-editor p,
	.elementor-icon-list-text {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.elementor-button,
	a.elementor-button,
	button.elementor-button {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.elementor-button-text {
		white-space: normal;
	}
}