/*
 * Tap-target sizing — deliberate deviations from the design prototype.
 *
 * Its own file on purpose. The design stylesheets (shared.css, sections/*.css)
 * are kept byte-identical to the prototype so they stay diffable against it,
 * and wp-overrides.css is reserved for differences WordPress and Elementor
 * cause. This is neither: the prototype was drawn for a mouse, and its footer
 * links are 20–22px tall. Loaded last, so it wins the equal-specificity ties.
 *
 * Measured on the live site before this file existed (390x844 and 768x1024,
 * touch emulation on): 12 controls were under the 24x24 CSS px floor of
 * WCAG 2.5.8 Target Size (Minimum, AA) — the eight footer column links, the
 * three legal links in the footer bar, and "All posts" — and three more sat
 * between 24px and 44px.
 *
 * Two tiers, because they answer different requirements:
 *
 *   - Always: 24px, meeting the AA floor for every pointer type. On a mouse
 *     this grows a 22px link by 2px, which is invisible against the design.
 *   - pointer: coarse only: 44px, which is what Apple's HIG asks for and just
 *     under Android's 48dp. Scoped to touch so the design's desktop spacing is
 *     left exactly as drawn.
 *
 * Sizing is done with min-height and centred content rather than padding: the
 * links sit in flex columns, so padding would leak into the gap and let
 * neighbouring targets overlap, which trades a small-target problem for a
 * mis-tap problem.
 */

/* --- WCAG 2.5.8 (AA) floor: 24px, every pointer type ---------------------- */

.sf-col a,
.sf-bar-links a,
.section-head .see-all {
	/*
	 * Blockified to `flex` inside the flex parents these live in; the
	 * declaration is what makes min-height apply to the anchor at all.
	 */
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* --- Touch pointers: 44px ------------------------------------------------- */

@media (pointer: coarse) {
	/*
	 * The gap is removed and the height carries the spacing instead. A 44px
	 * box around 22px of text puts 11px above and below it — exactly the gap
	 * it replaces — so the heading-to-first-link spacing is unchanged and only
	 * the space between links grows, which is the point.
	 */
	.sf-col {
		gap: 0;
	}

	/*
	 * Height only. .nb-cookie-cat in particular keeps its own
	 * align-items: flex-start — that is what sits its checkbox on the text's
	 * first line — so the added height falls below the text and the checkbox
	 * does not move.
	 */
	.sf-col a,
	.sf-bar-links a,
	.section-head .see-all,
	.lp-nav-logo,
	.nb-cookie-cat {
		min-height: 44px;
	}

	.lp-nav-burger {
		width: 44px;
		height: 44px;
	}
}