/* TMC Mobile Fixes v2 (2026-11-12, Air agent). Loaded by mu-plugin tmc-mobile-fixes.php.
   Found with phone emulation (390px): content wider than the screen gets CUT OFF because the site clips horizontal overflow. */

/* 1. Wide tables (Resources pages: up to 1,724px, nowrap) — wrap text and scroll inside their own box on phones/tablets */
@media (max-width: 767px) {
	.elementor-widget-text-editor table,
	.elementor-widget-theme-post-content table,
	.entry-content table {
		display: block !important;
		max-width: 100% !important;
		width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
	}
	.elementor-widget-text-editor table th,
	.elementor-widget-text-editor table td,
	.elementor-widget-theme-post-content table th,
	.elementor-widget-theme-post-content table td,
	.entry-content table th,
	.entry-content table td {
		white-space: normal !important;
		min-width: 140px;
		word-break: normal;
		overflow-wrap: anywhere;
	}
}

/* 2. CookieYes consent box: 394px box on a 390px phone shifted the page sideways */
@media (max-width: 480px) {
	.cky-consent-container.cky-box-bottom-right,
	.cky-consent-container.cky-box-bottom-left {
		left: 8px !important;
		right: 8px !important;
		width: auto !important;
		max-width: calc(100vw - 16px) !important;
		box-sizing: border-box !important;
	}
}

/* 3. Older iOS Safari (< 16) doesn't support overflow: clip → fall back so pages can't slide sideways */
@supports not (overflow: clip) {
	html, body { overflow-x: hidden; }
}

/* 4. Safety net: very long words in headings (e.g. "INTERNATIONALLY" at 40px on /watch/) must wrap, not overflow */
@media (max-width: 767px) {
	.elementor-heading-title {
		overflow-wrap: break-word;
		hyphens: auto;
	}
}