/**
 * Home slider arrows — upright hit area.
 * Greg Natale — added Sep 2026. See gn_slider_arrows_assets() in functions.php.
 *
 * The arrows are a 40x40 <button> with only its top and left borders drawn,
 * rotated to make a chevron (app-new.css ~L851 for the box, ~L883/~L888 for
 * `transform: rotate(-45deg)` / `rotate(135deg)`).
 *
 * Rotating the button rotates its HIT AREA with it: on screen the clickable
 * shape is a 56.57px diamond, and the four corners of that bounding box fall
 * through to the slide image behind. Measured on the home page — a click
 * 24px diagonally from the arrow's centre returned `IMG`, not the button, in
 * all four corners. In practice you had to hit the middle of the diamond or
 * you opened the slide instead of advancing it.
 *
 * The fix keeps the chevron exactly as drawn and adds an invisible
 * ::after that COUNTER-rotates by the same angle, so in screen space it is
 * an upright 64x64 square centred on the arrow. A pseudo-element hit-tests
 * as its parent, so clicks anywhere in that square advance the slider, and
 * nothing about the visual changes.
 *
 * 64px also clears the 44px minimum tap target, which the 40px original
 * never did on touch.
 *
 * If the rotation angles in app-new.css ever change, these must change with
 * them — each ::after angle is the negative of its button's.
 */

.main-slider > .slick-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	background: transparent;
}

/* button is rotate(-45deg) */
.main-slider > .slick-prev::after {
	transform: translate(-50%, -50%) rotate(45deg);
}

/* button is rotate(135deg) */
.main-slider > .slick-next::after {
	transform: translate(-50%, -50%) rotate(-135deg);
}