/* KWL Fix Stretch Row -- see kwl-fix-stretch-row.php for the root cause.
 *
 * Applies only to the homepage KWL Support row, marked synchronously by
 * script.js as `[data-kwl-support-row-fix="true"]`. A previous broad
 * `[data-vc-full-width="true"]` selector changed legitimate product-page
 * widths and made consecutive rows inherit this support row's #444
 * background after Ultimate removed its marker elements.
 *
 * Standard CSS full-bleed technique: stretch to the viewport width and pull
 * back by half that width on each side to re-center relative to the row's
 * own (already-centered) position. `width: auto` here, not `100vw` -- an
 * explicit 100vw width measures the viewport including its scrollbar and
 * can introduce a horizontal-scroll sliver percentage points wide that
 * pure negative margins don't; letting the margins alone do the stretching
 * avoids that class of bug entirely rather than needing a fix for it.
 */
[data-kwl-support-row-fix="true"] {
	width: auto !important;
	max-width: none !important;
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
	left: 0 !important;
	/* Left/right cleared, not just left alone: js_composer's own JS sets
	 * both as part of the same inline pixel-math this whole file replaces
	 * (e.g. `padding: 100px 135px`), and leaving them in place would
	 * double-inset the content -- once from this padding, again from the
	 * inner wrap's own max-width + auto margins below. Top/bottom padding
	 * is untouched -- that's vertical spacing, not part of this bug. */
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box !important;
}

/* js_composer keeps the row's actual content readable by adding
 * matching inset padding via the same per-row JS pixel math as the width
 * above. Replaced the same way: the theme's own standard content width
 * (1170px, read live off a normal, non-full-width row elsewhere on this
 * page, not guessed) applied directly to the inner wrap via plain
 * max-width + auto margins -- no padding-math needed since centering a
 * fixed-width box inside a wider one is what margin: auto is for. */
[data-kwl-support-row-fix="true"] > .vcrow_inner_wrap {
	max-width: 1170px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --- Everything below is scoped to the explicitly marked support row. --- */

/* Ultimate Addons' own `.upb_row_bg` fill (see script.js bug 3) is measured
 * against the icon row alone and never covers the heading above it -- drop
 * it in favour of a background-color directly on the outer row, which
 * covers whatever height the row actually ends up with, heading included,
 * with no measurement step to get wrong. Color matches `.upb_row_bg`'s own
 * computed value (rgb(68, 68, 68) / #444), read live, not guessed. */
[data-kwl-support-row-fix="true"] {
	background-color: #444444;
}

[data-kwl-support-row-fix="true"] .upb_row_bg {
	display: none;
}

/* js_composer's own float-based grid doesn't lay these columns out
 * correctly once the row's width stops coming from its inline-style pixel
 * math -- flex is a robust replacement for what's meant to be a simple
 * equal-width row of icon boxes, independent of that math. */
[data-kwl-support-row-fix="true"] .vc_row.vc_inner > .wpb_columns_wrap,
[data-kwl-support-row-fix="true"] .vc_row.vc_inner .vcrow_inner_wrap {
	display: flex !important;
	flex-wrap: wrap !important;
}

[data-kwl-support-row-fix="true"] .vc_row.vc_inner .wpb_column {
	float: none !important;
	flex: 1 1 0;
	min-width: 0;
	box-sizing: border-box;
}

/* js_composer's own grid CSS only floats `.vc_col-sm-*` columns at
 * `min-width:768px` and up (Bootstrap 3's `sm` breakpoint) -- below that
 * they're plain full-width blocks, stacking one per row. The unconditional
 * `flex: 1 1 0` above overrides that everywhere, which also squeezes these
 * 4 icon columns onto one cramped row on mobile instead of stacking them
 * (Chris, 2026-07-30: "the KWL support icons should reflow to one item at
 * a time on mobile resolution"). Restoring one-per-row below 768px, same
 * breakpoint js_composer itself uses, not a new one. */
@media ( max-width: 767px ) {
	[data-kwl-support-row-fix="true"] .vc_row.vc_inner .wpb_column {
		flex: 1 1 100%;
	}
}