/*
 * NSS Mobile Fixes
 *
 * Reported by NSS's ads agency on 2026-10-30 after the launch settled. Every
 * measurement below was taken on the live site at a 493px viewport, which is
 * the narrowest a desktop browser window would go; a real phone is 390 to 430
 * CSS pixels, so each problem is worse on the hardware than in these numbers.
 *
 * Breakpoints follow the ones main.css already uses, 1024 and 767, rather than
 * introducing new ones.
 */


/* ------------------------------------------------------------------ 1. BBB
 *
 * #divBBB is position:fixed, left:16px, bottom:60px, z-index:10000, from
 * assets/css/bbb-float.css. On the quote page at 493px it covers the Phone
 * input and its label, and the Fax label:
 *
 *     overlapping: LABEL gfield_label_39_20, INPUT input_39_20,
 *                  LABEL gfield_label_39_21
 *
 * Field 20 is the phone number. Since 2026-10-23 that is one of only two
 * fields that qualify a lead, so the badge sits on the most important input on
 * the form.
 *
 * Hidden rather than moved. Any fixed badge on a small screen covers
 * something, and the bottom right is taken by the chat widget and the
 * reCAPTCHA badge. Nothing is lost by hiding it: the footer carries its own
 * BBB seal, 200x42, which stays visible at every width.
 *
 * Hidden to 1024 rather than 767 because a tablet in portrait has the same
 * overlap. Change this to 767 if the badge is wanted back on tablets.
 */
@media (max-width: 1024px) {
	#divBBB {
		display: none !important;
	}
}


/* ------------------------------------------------- 2. Chat scroll chaining
 *
 * UNVERIFIED. Read this before trusting it.
 *
 * Reported as: with the chat open on a phone, scrolling moves the site behind
 * it instead of the conversation. Nothing on the site currently sets
 * overscroll-behavior and the body is never locked, so a scroll that reaches
 * the end of the chat's own scrollable area chains through to the page. These
 * two rules stop that chaining.
 *
 * They are included because they cannot do harm: overscroll-behavior either
 * applies or is ignored, and it strands nobody. What they cannot do is help if
 * the touch is landing on the page rather than on the chat at all, which is a
 * different fault with the same symptom.
 *
 * Zoho's widget is an iframe, so this reaches the wrapper rather than the
 * conversation inside it. Confirm on a real phone before reporting it fixed.
 *
 * The alternative is a JavaScript scroll lock. Zoho does expose the hooks for
 * it, $zoho.salesiq.floatwindow.open and .close, both confirmed present on the
 * live page. It is deliberately not used here: if open fires and close does
 * not, the visitor is left on a page that will not scroll, which is worse than
 * the fault being fixed. That version needs testing on hardware first.
 *
 * The other half of this request, a smaller chat window on phones, is a
 * setting in NSS's own SalesIQ console rather than anything in this file.
 */
#zsiq_chat_wrap,
#zsiq_chat_wrap iframe {
	overscroll-behavior: contain;
}


/* -------------------------------------------------------- 3. Services tiles
 *
 * The services carousel holds 18 tiles. main.css sets
 * .services .carousel .slide { width: 33% !important } below 1024, and the
 * carousel script also writes width inline on each slide. Measured at 493px
 * the result was 112px tiles, about 4.3 of them on screen, an icon rendered at
 * 92px of which 20px each side is padding, and a 12px label with 2px letter
 * spacing that truncated mid-word.
 *
 * The !important here is doing real work. It has to beat both the !important
 * in main.css and an inline width the carousel script sets on every slide, and
 * it was confirmed against the live page that it does.
 *
 * Tablets keep three across and get the type and padding changes only. Phones
 * drop to two across, which measured 169px tiles and 149px icons at 493px.
 */
@media (max-width: 1024px) {
	.services .carousel h2 {
		font-size: 13px !important;
		letter-spacing: .5px !important;
		line-height: 17px !important;
	}

	/* 20px of padding inside a 92px icon left roughly 52px of artwork. */
	.services .carousel .image img {
		padding: 14px !important;
	}
}

@media (max-width: 767px) {
	.services .carousel .slide {
		width: 50% !important;
	}

	/*
	 * This is the rule that actually makes the tiles bigger, and it was
	 * missed on the first pass. .slideset is border-box with padding: 0 70px,
	 * so on a 390px phone 140px of the screen is gutter and the slides divide
	 * the 234px that's left. Two tiles at 50% of that is 117px each, barely
	 * larger than the 112px they were before, which is why the first version
	 * of this file measured as fixed at a 493px test window and would have
	 * looked unchanged on a real handset.
	 *
	 * The gutter isn't holding anything at this width. The previous and next
	 * arrows are position: static below the carousel, measured at y 613-667
	 * against slides at y 310-509, so they don't sit in it and nothing
	 * overlaps when it shrinks.
	 *
	 * At 16px: tiles 171px, icons 151px, no label truncating, no horizontal
	 * page scroll. Measured in a 390px viewport on the live site.
	 */
	.services .carousel .slideset {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.services .carousel h2 {
		font-size: 14px !important;
		line-height: 18px !important;
	}

	.services .carousel .image img {
		padding: 12px !important;
	}

	/*
	 * The pagination is 15 items in a flex row. Narrowing the screen wraps it
	 * onto more rows rather than fewer: it measured 62px tall on a desktop and
	 * 125px at 493px, plus 25px margins, so it was taking more vertical space
	 * than the tiles it belongs to and pushing them into a cramped band.
	 *
	 * Reducing the margin made it worse, because the height is wrapping rather
	 * than spacing. Hidden instead. The previous and next arrows are siblings
	 * and stay visible, confirmed at 50x54 each, and swiping works on a touch
	 * device, so nothing becomes unreachable. Hiding it took the section from
	 * roughly 600px to 472px.
	 */
	.services .paginationDiv {
		display: none !important;
	}
}