/**
 * The industry landing-page inquiry form.
 *
 * Only what cannot be an inline style: pseudo-elements, pseudo-classes and the
 * hover motion. Everything else stays inline, matching how the rest of the
 * design is built. `bw-pulse` is NOT defined here — every industry page
 * stylesheet already carries it, and a second definition would be one more
 * place to keep in step.
 *
 * Contrast, all on white: placeholders 4.78:1, labels 5.77:1, body 7.65:1,
 * accent numerals 5.52:1. Keep any colour change above 4.5:1.
 */

#industry-brief input::placeholder,
#industry-brief textarea::placeholder {
	color: rgba(8, 13, 16, 0.58);
}

#industry-brief input:focus,
#industry-brief textarea:focus {
	outline: none;
	border-color: rgba(0, 87, 255, 0.8);
	box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.12);
}

#industry-brief a:focus-visible,
#industry-brief button:focus-visible {
	outline: 2px solid #0057FF;
	outline-offset: 3px;
}

/* The numbered rows shift on hover, matching the ordered lists elsewhere. */
#industry-brief [data-ifstep] {
	transition: padding-left .4s cubic-bezier(.16, 1, .3, 1);
}

#industry-brief [data-ifstep]:hover {
	padding-left: 10px;
}

#industry-brief [data-arrow] {
	transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

#industry-brief a:hover [data-arrow],
#industry-brief button:hover [data-arrow] {
	transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {

	#industry-brief [data-ifstep],
	#industry-brief [data-arrow] {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Touch devices
 *
 * 1. 16px fields. Safari on iOS ZOOMS the whole page when a focused input is
 *    under 16px, and the supplied design specified 15px — so every tap on a
 *    field jerked the layout and left the visitor scrolled sideways. 16px is
 *    the threshold, not a preference. The rest of the site's forms were already
 *    at 16px; this one arrived at 15px and was the only page that did it.
 *    !important because the size is an inline style on the element.
 *
 * 2. 44px tap targets. The two text links measured 32px and 31px tall. Padding
 *    was the wrong tool: reaching 44px that way needs 21px on top, which shoves
 *    the text visibly down the page and pulls the underline away from the words
 *    it belongs to. An absolutely positioned ::after centres a 44px strip over
 *    each link instead — the hit area grows, the layout does not move at all.
 *    It carries no background, so nothing about the design changes.
 *
 * Both are scoped to `hover: none` so the desktop design is untouched.
 * ------------------------------------------------------------------------ */

@media (hover: none) {

	#industry-brief input,
	#industry-brief textarea {
		font-size: 16px !important;
	}

	#industry-brief a {
		position: relative;
	}

	#industry-brief a::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 44px;
	}
}