/**
 * Touch targets on phones and tablets.
 *
 * [LD] 2026-07-31 (QA G-01/G-02): an uncapped census at 390px found the mobile
 * menu toggle at 36x40, the four footer social icons at 36x36, the homepage
 * review dots at 8x8, the payment-promo info pill at 11x11 and the location
 * card links at 118x23. Apple's HIG asks for 44x44 and WCAG 2.5.8 asks for
 * 24x24 with no overlap between neighbours, so several of these were genuinely
 * hard to hit with a thumb.
 *
 * Two techniques, picked per control:
 *   - controls that stand alone get a real min-width / min-height, because
 *     growing the box moves nothing around them;
 *   - text links sitting in a tight stack get an invisible ::after that hangs
 *     off the link, so the drawn text stays exactly where the designer put it
 *     and only the area a finger can hit grows.
 *
 * Every extension below is sized against the measured gap to its neighbour, so
 * no two hit areas overlap. Where the gap could not carry a full 44px the rule
 * takes the largest size that still clears the neighbour, and that is called
 * out in the comment on the rule.
 */

@media (max-width: 900px) {

	/* ── Header ─────────────────────────────────────────────────────────── */

	/* The single most-tapped control on the site. Sits at the right edge of a
	   70px bar, so there is room for the full 44. */
	.mgc-header__menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}

	/* Location dropdown in the mobile bar: 34px tall, room to reach 44. */
	.mgc-header__locdrop-btn {
		min-height: 44px;
	}

	/* ── Homepage ───────────────────────────────────────────────────────── */

	/* Review carousel dots. The dots themselves stay 8px: they are an
	   indicator, not a button face. Widening the gap from ~6px to 16px puts
	   24px between centres, which is exactly what lets each dot own a clean
	   24px-wide hit area with nothing overlapping its neighbour. */
	.mgc-hp-reviews__controls .mgc-hp-reviews__dots {
		gap: 16px;
	}

	.mgc-hp-reviews__dot {
		position: relative;
	}

	.mgc-hp-reviews__dot::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 24px;
		height: 44px;
		transform: translate( -50%, -50% );
	}

	/* Deals carousel arrows are display:none at phone width (the strip is
	   swiped, not stepped) but they come back on the wider tablet profiles. */
	.mgc-hp-deals-carousel__arrow {
		min-width: 44px;
		min-height: 44px;
	}

	/* ── Listing price row ──────────────────────────────────────────────── */

	/* The "i" pill that explains the estimated payment. It sits inside a price
	   card whose whole face links to the listing, so its hit area is held to
	   32px: big enough to hit deliberately, small enough that it does not
	   swallow taps meant for the card underneath it. */
	.mgc-pay-promo__info {
		position: relative;
	}

	.mgc-pay-promo__info::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 32px;
		height: 32px;
		transform: translate( -50%, -50% );
	}

	/* ── Inventory ──────────────────────────────────────────────────────── */

	.cl-sortdd__btn {
		min-height: 44px;
	}

	/* ── Locations ──────────────────────────────────────────────────────── */

	/* "See Inventory" / "Get Directions" sit side by side at the bottom of the
	   showroom card with clear space above, so a full 44 fits. */
	.mgc-loc-card__link {
		position: relative;
	}

	.mgc-loc-card__link::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 44px;
		transform: translateY( -50% );
	}

	/* ── Footer ─────────────────────────────────────────────────────────── */

	/* Social icons run on a 48px pitch, so 44 leaves 4px between them. */
	.gc-footer__socials a {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.gc-footer__btn,
	.gc-footer__connect-btn {
		min-height: 44px;
	}

	/* The footer logo link measured 140x16 only because it was display:inline
	   wrapping a 140x181 image, so the box it reported was the text line box
	   rather than the picture. The image was always the real target; this just
	   makes the element measure what it has always been. */
	.gc-footer__logo-link {
		display: inline-block;
	}

	/* Phone number and the Directions / Contact pair stack 13px apart in the
	   location ledger, which is not enough room for two centred 44px areas:
	   they overlap, and because Directions comes later in the document it wins
	   the overlap and starts swallowing taps meant for the phone number. That
	   is the worst possible trade on a dealer site.
	   So the two grow in opposite directions instead of both growing outward.
	   The phone number's area is pinned to its own bottom edge and grows only
	   upward, into the address paragraph, which is plain text and has nothing
	   to lose. Directions / Contact stays centred. Both get the full 44 and
	   neither touches the other, with the footer's own spacing untouched. */
	.gc-footer__locphone,
	.gc-footer__loclink {
		position: relative;
	}

	.gc-footer__locphone::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 44px;
	}

	.gc-footer__loclink::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 44px;
		transform: translateY( -50% );
	}
}

/**
 * Controls that only exist once something is opened.
 *
 * [LD] 2026-07-31 (QA G-04): the census in the block above walks what is on the
 * page, so it never saw the inventory filter drawer or the sort menu, both of
 * which are built and hidden until a shopper taps for them. Opening them at
 * 390px turned up the drawer's close button at 24x24, its Reset All at 80x21,
 * each group's Reset All at 61x22 and the Show all toggle at 84x21, plus six
 * sort rows at 198x33.
 *
 * Same two techniques as above, picked per control. The Reset All buttons and
 * the Show all toggle sit alone with 90px or more of clear space around them,
 * so they take an invisible ::after and the drawn control does not move. The
 * sort rows are stacked flush against each other with no gap at all, so an
 * overlay there would steal taps from the row below; those get a real
 * min-height instead and the menu simply grows, which is honest for a list.
 *
 * The drawer's close button is not here. It is locked to 24x24 with !important
 * in cl-inventory.css and both of its pseudo elements are already spent drawing
 * the X, so there was nothing left to grow it with from the outside. It was
 * fixed in place, in the file that owns it.
 *
 * The filter checkboxes themselves are left at their measured 32px. They sit on
 * a 41px pitch, so a 44px area would overlap its neighbour and start putting
 * Used where the shopper aimed at New. 32px clears WCAG 2.5.8's 24px minimum
 * with the gap intact, and that is the better trade in a dense list.
 */
@media ( max-width: 900px ) {

	/* The two Reset All buttons and the Show all toggle are all wider than 44
	   already, so only the height needs help. Nearest thing above Show all is a
	   make checkbox 16px up, which a centred 44px area clears by 5px. */
	.filter-reset.mvl-reset-all,
	.cl-filter-form .heading-action .action-reset,
	.cl-filter-form .show-all,
	.cl-filter-form .show-less {
		position: relative;
		/* The group heading's Reset All is followed by .stm-filter-pro-item-content,
		   which is itself position:relative and therefore paints over anything a
		   positioned sibling before it hangs below its own box. That clipped the
		   overlay at 39px. The z-index puts the button back on top; the 6px it
		   reclaims is that container's own padding, not a checkbox. */
		z-index: 2;
	}

	.filter-reset.mvl-reset-all::after,
	.cl-filter-form .heading-action .action-reset::after,
	.cl-filter-form .show-all::after,
	.cl-filter-form .show-less::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 44px;
		transform: translateY( -50% );
	}

	/* Sort rows: flush stack, so grow the rows themselves. */
	.cl-sortdd__opt {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/**
 * Third pass, 2026-08-01 (QA G-14).
 *
 * The first two passes were written from a census that measured each control's
 * own box. That is the wrong number: the ::after technique above deliberately
 * leaves the box alone and grows only the area a finger can land on. Re-running
 * the census as a real hit test instead, by walking outward from each control's
 * centre and asking elementFromPoint who owns that pixel, confirmed every fix
 * above is doing what it claims (footer links measure 23px tall and hit 45px,
 * the 8px review dots hit 24x45, the 11px payment pill hits 33x33) and turned
 * up three controls the earlier passes had not reached at all.
 *
 * One caveat worth writing down: elementFromPoint works in viewport
 * coordinates, so anything below the fold has to be scrolled into view before
 * it can be tested. Without that every control on the page reports a 1x1 hit
 * area, including ones that are demonstrably fine.
 */
@media ( max-width: 900px ) {

	/* The dealer's phone number on the contact page, inside the showroom card.
	   19px tall, and on a golf cart dealer's site this is close to the most
	   valuable tap on the page. The address paragraph above and the hours list
	   below each leave 14px of clear space, so a centred 44px area needs 12px
	   in each direction and clears both. Neither neighbour is a link. */
	.mgc-loc-showroom__tel a {
		position: relative;
	}

	.mgc-loc-showroom__tel a::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 44px;
		transform: translateY( -50% );
	}

	/* Same number again inside the mobile menu drawer, at 21px. The two
	   location blocks sit 88px apart so there is room vertically, but the
	   Details link sits on the SAME line just to its right, so the area is held
	   to the phone link's own width and grows only up and down. */
	.mgc-header__drawer-loc-phone {
		position: relative;
	}

	.mgc-header__drawer-loc-phone::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 44px;
		transform: translateY( -50% );
	}

	/* Footer column links: 16px tall on a 33px pitch. A full 44 would overlap
	   the link above and below by 11px each, and in a stacked menu that means
	   taps landing on the wrong page. 32px is the largest that keeps a gap, and
	   it clears WCAG 2.5.8's 24px minimum with room to spare. Same trade, and
	   the same reasoning, as the filter checkboxes in the pass above. */
	.gc-footer__menu a {
		position: relative;
	}

	.gc-footer__menu a::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 32px;
		transform: translateY( -50% );
	}

	/* The bottom bar links run across in one horizontal row rather than a
	   stack, so nothing sits above or below them and the full 44 is free. The
	   area stays inside each link's own width so neighbours are untouched. */
	.gc-footer__bottom-menu a {
		position: relative;
	}

	.gc-footer__bottom-menu a::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		height: 44px;
		transform: translateY( -50% );
	}
}