/* ============================================================
   mobile-fixes.css — Centurion Services responsive corrections
   Added 2026-08-02 (mobile rendering review, req. David Brookes).
   Purpose: fix horizontal overflow on small screens caused by
   two-column enquiry/rail grids not collapsing (specificity gap
   between base `.csl-x .csl-x__inner` rules and single-class
   `@media` overrides).
   Fully self-contained + reversible: remove this file and its
   enqueue line in functions.php to revert.
   Loaded LAST so these rules win without editing existing CSS.
   ============================================================ */

@media (max-width: 900px) {
	/* Collapse all enquiry / two-column "__inner" grids to a single
	   column. Higher specificity than the base 2-column rules so the
	   collapse actually applies on mobile. */
	html body .csl-enquiry .csl-enquiry__inner,
	html body .csl-plant-home__enquiry .csl-plant-home__enquiry__inner,
	html body .csl-plant-home__enquiry .csl-enquiry__inner,
	html body .csl-section--dark .csl-enquiry__inner {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}

	/* The contact / plant-hire / trade-accounts pages place the info
	   "aside" (rail) beside a form in a 2-col grid. Force any such
	   enquiry/dark-section aside to full width so it can't be pushed
	   off-screen. */
	html body .csl-enquiry aside,
	html body .csl-plant-home__enquiry aside,
	html body .csl-plant-section--dark aside,
	html body .csl-section--dark aside {
		grid-column: 1 / -1 !important;
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Any generic two-column enquiry form row → single column. */
	html body .csl-enquiry-form__row {
		grid-template-columns: 1fr !important;
	}

	/* Contact & Trade Accounts pages set a 2-column grid via an INLINE
	   style attribute on `.csl-container` (Elementor HTML widget), e.g.
	   `display:grid; grid-template-columns:1.2fr 1fr`. Inline styles beat
	   normal rules, so we need !important here to collapse them and stop
	   the info aside being pushed off-screen. Scoped to Elementor HTML
	   widgets so ordinary `.csl-container` wrappers are untouched. */
	html body .elementor-widget-html .csl-container {
		grid-template-columns: 1fr !important;
	}
	html body .elementor-widget-html .csl-container > aside {
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* The Contact & Trade Accounts pages embed a plant-category strip whose
   `.csl-plant-cats` grid is hardcoded to `repeat(3, 1fr)` via an INLINE
   style attribute, which overrides the theme's responsive media queries
   and forces 3 columns on phones (cards overflow the viewport). Restore
   the intended responsive behaviour with !important so it beats the
   inline style. Mirrors plant.css: 2 cols <=760px, 1 col <=480px. */
@media (max-width: 760px) {
	html body .csl-plant-cats {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 480px) {
	html body .csl-plant-cats {
		grid-template-columns: 1fr !important;
	}
}

/* Global safety net: never allow the page to scroll sideways on
   narrow screens. Individual fixes above address the root causes;
   this guards against any stray wide element regressing later.
   Kept scoped to small screens so desktop layout is untouched. */
@media (max-width: 600px) {
	html, body {
		overflow-x: hidden !important;
		max-width: 100% !important;
	}
	/* Media, embeds and tables should shrink, not overflow. */
	html body img,
	html body video,
	html body iframe,
	html body .fluentform,
	html body .csl-ff-embed {
		max-width: 100% !important;
	}
	html body table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}