/* Phase 5 — one type and tap system, applied site-wide on phones.
 *
 * Audited across six pages first (iPhone 13): 465 controls under the 44px
 * tap floor and 301 text nodes under 12px, but they were not 766 separate
 * problems — a handful of repeated components accounted for nearly all of
 * them. The rules below are ordered by how many instances each one fixes.
 *
 * On the 44px figure: Apple's guidance is 44x44 for primary controls, while
 * WCAG 2.5.8 (AA) sets 24x24. Real buttons and navigation here are taken to
 * 44. Dense inline chips are taken to 32 rather than 44 — a row of 44px
 * category chips would push the card content off the screen it is meant to
 * describe — which clears AA with room to spare. Inline links inside running
 * prose are deliberately left alone; WCAG exempts them, and padding them out
 * would wreck the line rhythm of body copy.
 */

@media (max-width:991px){

	/* ── Real controls: 44px floor ───────────────────────────────────────── */
	/* 37x each: the add-to-cart button and the bookmark toggle on every
	   course card in every listing. */
	.tutor-btn.tutor-btn-outline-primary,
	.tutor-btn.tutor-btn-primary,
	.tutor-btn.tutor-btn-md{
		min-height:44px !important;
		display:inline-flex !important; align-items:center; justify-content:center;
	}
	.save-bookmark-btn,
	.tutor-iconic-btn{
		min-width:44px !important; min-height:44px !important;
		display:inline-flex !important; align-items:center; justify-content:center;
	}

	/* Course finder answers, homepage pills, service card CTAs. */
	.ca-opt{ min-height:44px !important; display:inline-flex !important; align-items:center; }
	.hp-pill{ min-height:44px !important; display:inline-flex !important; align-items:center; }
	.sv-card-cta{
		min-height:44px !important; display:inline-flex !important; align-items:center;
	}

	/* Header and drawer controls that sat between 30 and 42px. */
	.btn-nav-close, .bc-nav-home, .biocode-search-btn, .bc-nav-getstarted,
	.navbar-toggler{
		min-width:44px !important; min-height:44px !important;
		display:inline-flex !important; align-items:center; justify-content:center;
	}

	/* The off-canvas menu: standalone navigation, not prose, and its links
	   were 26px. The row is the target, so the whole width is tappable. */
	.navbar-nav .menu-item > a,
	.menu-primary-container .menu-item > a{
		min-height:44px !important;
		display:flex !important; align-items:center;
		padding-top:8px !important; padding-bottom:8px !important;
	}

	/* Footer contact rows and social icons. */
	.biocode-footer__contact-link{
		min-height:44px !important; display:inline-flex !important; align-items:center;
	}
	.biocode-footer__social-link{
		min-width:44px !important; min-height:44px !important;
		display:inline-flex !important; align-items:center; justify-content:center;
	}

	/* ── Dense chips: 32px, and legible ──────────────────────────────────── */
	/* 94 instances at 25px tall with 10.9px text — the single biggest group
	   in both audits. */
	.ca-chip, .sv-pill{
		min-height:32px !important;
		display:inline-flex !important; align-items:center;
		font-size:12px !important; line-height:1.2 !important;
		padding-top:5px !important; padding-bottom:5px !important;
	}

	/* ── 12px text floor ─────────────────────────────────────────────────── */
	/* Small-caps labels and counters that had drifted to 10.9-11.5px. */
	.ca-path-step-n, .ca-path-label, .gs-path-label,
	.sv-card-cat, .sv-card-code, .sv-chip-n,
	.hp-fc-tag, .bc-minicart-head, .biocode-close-esc-hint{
		font-size:12px !important;
	}

	/* Deliberately exempt, and why:
	   .bmn-l  (10.5px) — bottom-bar labels. Native iOS and Android tab bars
	                      run 10-11px; enlarging them truncates "Dashboard".
	   .bmn-badge (10px) — a numeric badge inside a 44px+ target.
	   .skip-link (1px)  — visually hidden until keyboard focus, by design. */
}

/* ── Second pass ─────────────────────────────────────────────────────────
 * The first pass cleared the big component groups; these are the remaining
 * standalone controls the audit surfaced. Everything here is navigation or
 * a call to action — links sitting inside running prose (FAQ answers, body
 * copy) are still left at their natural size on purpose. */
@media (max-width:991px){

	/* 42 instances: the footer link columns are the site's secondary
	   navigation and were 21px tall. */
	.biocode-footer__links li > a,
	.biocode-footer__legal > a{
		min-height:44px !important;
		display:inline-flex !important; align-items:center;
	}

	/* Learning-path step links (10x at 39px) and their start button. */
	.ca-path-steps li > a,
	.ca-path-start{
		min-height:44px !important;
		display:inline-flex !important; align-items:center;
	}

	/* The logo is a link, and a 30px-tall one. */
	.navbar-brand > a{
		min-height:44px !important;
		display:inline-flex !important; align-items:center;
	}

	/* Remaining named CTAs and controls. */
	.hp-workshop-link, .hp-email-link, .sv-chip,
	.tutor-btn.tutor-btn-ghost, .wmc-nav{
		min-height:44px !important;
		display:inline-flex !important; align-items:center;
	}
	.tutor-course-name > a{ min-height:44px !important; display:flex !important; align-items:center; }

	/* Remaining sub-12px labels, badges and stat captions. */
	.ca-stat-lbl, .ca-sc-stat-lbl, .ca-band-eyebrow, .ca-band-from, .ca-kicker,
	.hp-float-lbl, .hp-plan-badge, .hp-img-badge-lbl, .mp-card-badge{
		font-size:12px !important;
	}
}

/* Final stragglers: pagination, the membership monthly/annual toggle, the
   quiz reset and the two remaining inline CTAs. Each appears once or twice,
   but pagination and the price toggle are load-bearing controls. */
@media (max-width:991px){
	.page-numbers, .ca-quiz-reset, .ca-feat-all,
	.ca-sc-nudge-btn, .mp-toggle-btn{
		min-height:44px !important;
		display:inline-flex !important; align-items:center; justify-content:center;
	}
	.page-numbers{ min-width:44px !important; }
	.mp-save-badge, .mp-price-annual-tag, .mp-popular-col-badge,
	.gs-kicker, .gs-route-badge, .bc-bn-secure{ font-size:12px !important; }
}

/* Raising footer links to a 44px row makes their own margins redundant —
   without this the spacing is applied twice and the footer gains ~320px on
   every page just to become tappable. */
@media (max-width:991px){
	/* The column is a flex list with a 12px row gap; a 44px row already
	   separates the links on its own, so the gap can come most of the way
	   down without the targets touching. */
	.biocode-footer__links{ gap:2px !important; }
	.biocode-footer__links li > a{ padding-top:0 !important; padding-bottom:0 !important; }
}