/**
 * Phone and tablet zoom (decided 2026-10-01). Every design pack renders the page at 92 percent
 * below 1024px ("the page sits back a touch"), and every measurement in the designs assumes it.
 *
 * Exempt, at full size, so form fields stay at a true 16px (iOS zooms into smaller fields) and
 * tap targets keep their full size:
 * - the Contact Us form card;
 * - the Payroll Stress Test (its plugin's .pst block);
 * - the Book a demo window, which cancels the zoom itself in demo-modal.js.
 * 1.0869565 is 1 / .92.
 */
@media (max-width: 1023px) {
	body { zoom: .92; }
	body .wk-form-sec .wk-form-card,
	body .pst { zoom: 1.0869565; }
}

/*
 * Tap targets. The design guide asks for 44 x 44px at minimum, invisible padding included. At .92 a
 * control the design draws at 44px renders at about 40, and a few were smaller to begin with. Each
 * one below gets an invisible hit area of at least 48 x 48 CSS px (44 on screen), centred on it, so
 * nothing moves. Links inside running sentences are left as they are (WCAG 2.5.8 inline exception).
 */
@media (max-width: 1023px) {
	.wk-root .wk-logo,
	.wk-root .wk-footer__logo,
	.wk-root .wk-footer__social a,
	.wk-root .wk-footer__legal a,
	.wk-root .wk-footer__contact a,
	.wk-root .wk-util__cta,
	.wk-root .wk-mnav__back,
	.wk-root .wk-mnav__link,
	.wk-root .wk-btn,
	.wk-root .wk-text-link,
	.wk-root .wk-arrow-link,
	.wk-root .wk-trust__link,
	.wk-root .wk-tabs__tab,
	.wk-root .wk-bl-f,
	.wk-root .wk-det__v a,
	.wk-root .wk-topics__foot a,
	.wk-root .wk-sr-tab,
	.wk-root .wk-sr-item__h a,
	.cky-btn-revisit-wrapper .cky-btn-revisit { position: relative; }

	.wk-root .wk-logo::after,
	.wk-root .wk-footer__logo::after,
	.wk-root .wk-footer__social a::after,
	.wk-root .wk-footer__legal a::after,
	.wk-root .wk-footer__contact a::after,
	.wk-root .wk-util__cta::after,
	.wk-root .wk-mnav__back::after,
	.wk-root .wk-mnav__link::after,
	.wk-root .wk-btn::after,
	.wk-root .wk-text-link::after,
	.wk-root .wk-arrow-link::after,
	.wk-root .wk-trust__link::after,
	.wk-root .wk-tabs__tab::after,
	.wk-root .wk-bl-f::after,
	.wk-root .wk-det__v a::after,
	.wk-root .wk-topics__foot a::after,
	.wk-root .wk-sr-item__h a::after,
	.cky-btn-revisit-wrapper .cky-btn-revisit::after {
		content: ""; position: absolute; left: 50%; top: 50%;
		width: max(100%, 48px); height: max(100%, 48px); transform: translate(-50%, -50%);
	}
}

/*
 * Rows that clip their overflow would cut those hit areas off, so they get the room inside them, or
 * the control is sized up where a little extra height does not change the design.
 */
@media (max-width: 1023px) {
	/* blog topic chips: the row scrolls sideways, so 4px of room above and below */
	.wk-root .wk-bl-filter { padding-top: 4px; padding-bottom: 8px; margin-top: -4px; }
	/* tabbed cards: the rail scrolls sideways; the tabs grow to 48 (44 on screen) */
	.wk-root .wk-tabs__tab { min-height: 48px; }
	/* a button last in its section: lift it, or the next section paints over the bottom of its hit area */
	.wk-root .wk-btn { z-index: 1; }
	/* footer columns: the rows sit edge to edge, so each grows to 48 (44 on screen) */
	.wk-root .wk-fcol__list a { padding-block: 11px; }
	.wk-root .wk-fcol__head[aria-expanded="true"] + .wk-fcol__list { max-height: 560px; }
}