/* ============================================================================
 * 1. GLOBAL — prevent horizontal scroll
 * ============================================================================ */

@media (max-width: 1024px) {
	html, body {
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	/* Any direct child of body can't push beyond viewport */
	body > * {
		max-width: 100vw;
	}
}


/* ============================================================================
 * 2. MEDIA — images / videos / iframes can never overflow
 * ============================================================================ */

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

iframe {
	max-width: 100%;
}

@media (max-width: 768px) {
	/* Embedded videos that use fixed sizes — force responsive */
	iframe[src*="youtube"],
	iframe[src*="vimeo"] {
		width: 100%;
		aspect-ratio: 16 / 9;
		height: auto;
	}
}


/* ============================================================================
 * 3. CONTAINER PADDING — consistent across templates
 * ============================================================================ */

@media (max-width: 1024px) {
	.container,
	.tll-container,
	.wp-block-group.container {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

@media (max-width: 640px) {
	.container,
	.tll-container,
	.wp-block-group.container {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

@media (max-width: 380px) {
	.container,
	.tll-container,
	.wp-block-group.container {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
}


/* ============================================================================
 * 4. TYPOGRAPHY — readable scale on all phones
 * ============================================================================ */

@media (max-width: 768px) {
	h1, .wp-block-heading.has-x-large-font-size {
		font-size: clamp(28px, 6.5vw, 38px) !important;
		line-height: 1.2 !important;
		word-break: break-word;
	}
	h2 {
		font-size: clamp(24px, 5.5vw, 32px) !important;
		line-height: 1.25 !important;
		word-break: break-word;
	}
	h3 { font-size: clamp(20px, 4.5vw, 26px) !important; }
	h4 { font-size: clamp(17px, 3.8vw, 20px) !important; }

	p, li {
		font-size: clamp(14px, 3.6vw, 16px);
		line-height: 1.65;
	}
}

@media (max-width: 480px) {
	h1 { font-size: 26px !important; }
	h2 { font-size: 22px !important; }
	h3 { font-size: 19px !important; }
}


/* ============================================================================
 * 5. LONG WORDS — URLs, emails, brand-name compounds
 * ============================================================================ */

@media (max-width: 640px) {
	p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
	a {
		word-break: break-word;
	}
}


/* ============================================================================
 * 6. TAP-TARGET MIN SIZE — accessibility + usability
 *    Apple HIG / WCAG: minimum 44 × 44 px for touch targets.
 * ============================================================================ */

@media (max-width: 768px) {
	a.btn-primary,
	a.btn-outline,
	a.btn-outline-light,
	.wp-block-button__link,
	button:not(.is-icon):not([aria-label$="close"]) {
		min-height: 44px;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
}


/* ============================================================================
 * 7. STICKY / FIXED — never cover the viewport on small phones
 * ============================================================================ */

@media (max-width: 480px) {
	/* If any floating element ends up wider than viewport, contain it. */
	.tll-float-cta,
	.floating-cta,
	[class*="floating"],
	[class*="sticky-cta"] {
		max-width: 92vw;
		left: 4vw !important;
		right: 4vw !important;
	}

	/* WhatsApp-bubble-style buttons — keep bottom-right but never overflow */
	a[href*="wa.me"][class*="whatsapp"],
	a[href*="wa.me"].wa-bubble,
	.tll-wa-float {
		max-width: 60px;
		max-height: 60px;
	}
}


/* ============================================================================
 * 8. TABLES — wrap in horizontal scroll on narrow screens
 * ============================================================================ */

@media (max-width: 768px) {
	table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	/* Tables wrapped in figure (Gutenberg core/table) */
	.wp-block-table {
		overflow-x: auto;
		max-width: 100%;
	}
	.wp-block-table table {
		display: table;
		width: max-content;
		min-width: 100%;
	}
}


/* ============================================================================
 * 9. FORMS — full-width inputs on mobile
 * ============================================================================ */

@media (max-width: 640px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="search"],
	textarea,
	select {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
		font-size: 16px; /* ≥16px prevents iOS zoom on focus */
	}

	form .form-row,
	form .field-row {
		flex-direction: column !important;
		gap: 12px !important;
	}
}


/* ============================================================================
 * 10. BUTTON ROWS — stack vertically on phones
 * ============================================================================ */

@media (max-width: 480px) {
	.wp-block-buttons,
	.button-group,
	.btn-row,
	.cta-row {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}

	.wp-block-buttons .wp-block-button,
	.btn-row > a,
	.cta-row > a {
		width: 100%;
	}

	.wp-block-button__link,
	.btn-row > a,
	.cta-row > a {
		text-align: center;
		width: 100%;
		box-sizing: border-box;
	}
}


/* ============================================================================
 * 11. BIG GRID FIXES — common 2/3/4/5-col grids reflow to 1 col
 * ============================================================================ */

@media (max-width: 480px) {
	/* Anything declared as a 3+ column grid collapses to 1 col on phones */
	.services-grid,
	.trust-grid,
	.tll-brand-grid,
	.testi-grid,
	.process-track,
	.city-grid {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}
}


/* ============================================================================
 * 12. HEADER / NAV — collapse on mobile, never overflow
 * ============================================================================ */

@media (max-width: 1024px) {
	.site-header,
	header {
		max-width: 100vw;
		overflow-x: hidden;
	}
}

@media (max-width: 768px) {
	/* Logo never bigger than ~50% viewport width */
	.site-header img.logo,
	.site-header .site-logo img,
	header img.logo {
		max-width: 50vw;
		height: auto;
	}
}


/* ============================================================================
 * 13. FOOTER — wrap columns on phones
 * ============================================================================ */

@media (max-width: 768px) {
	.site-footer .footer-columns,
	.site-footer [class*="grid"] {
		grid-template-columns: 1fr 1fr !important;
		gap: 24px !important;
	}
}

@media (max-width: 480px) {
	.site-footer .footer-columns,
	.site-footer [class*="grid"] {
		grid-template-columns: 1fr !important;
	}
}


/* ============================================================================
 * 14. SPACING TIGHTENING — sections waste less vertical space on phones
 * ============================================================================ */

@media (max-width: 640px) {
	section,
	.section,
	.wp-block-group.section,
	.wp-block-group.section-cream,
	.wp-block-group.section-dark {
		padding-top: 56px !important;
		padding-bottom: 56px !important;
	}
}

@media (max-width: 380px) {
	section,
	.section,
	.wp-block-group.section,
	.wp-block-group.section-cream,
	.wp-block-group.section-dark {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}
}


/* ============================================================================
 * 15. WHATSAPP / FLOATING BUTTONS — touch friendly without dominating screen
 * ============================================================================ */

@media (max-width: 480px) {
	.tll-wa-float,
	a[href*="wa.me"].floating,
	a.whatsapp-float {
		bottom: 16px !important;
		right: 16px !important;
	}
}


/* ============================================================================
 * 16. SUSTAINABLE SECTION — known to break on narrow phones
 *     (it has vertical text + side image — defensive override)
 * ============================================================================ */

@media (max-width: 380px) {
	.tll-sustainable-section .tll-vertical-text {
		font-size: 24px !important;
		letter-spacing: 2px !important;
	}
	.tll-sustainable-section .tll-with {
		font-size: 24px !important;
	}
	.tll-sustainable-section .tll-center-image img {
		width: 180px !important;
	}
}


/* ============================================================================
 * 17. UTILITY — hide things that just don't work on phones
 *     (decorative grain overlays, hero floats, etc.)
 * ============================================================================ */

@media (max-width: 480px) {
	.hero-grain,
	.hero-float-1,
	.hero-float-2,
	.hero-float-3 {
		display: none !important;
	}
}