/* Touch target sizing.
   WCAG 2.5.8 asks for a 44px minimum target on pointer inputs. Measured at
   375x812 across the homepage, /ai, portfolio, service and blog templates,
   these controls came in at 16-42px.

   Scoped to coarse pointers so mouse users keep the current density and the
   desktop layout is untouched.

   Real height is used rather than an invisible expanded hit area: the footer
   links sit at a 36px pitch (24px tall, 12px gap), so an overlay large enough
   to reach 44px would overlap its neighbour, which the spec also prohibits.
   Growing the box pushes siblings down instead, so targets stay adjacent but
   never overlap.

   Inline links inside body copy are deliberately excluded. The spec exempts
   links within a sentence, and padding them out would break text flow. */

@media (pointer: coarse) {
  /* Footer navigation, contact details and the legal line */
  section.footer .nav-menu a,
  section.footer .copyright a,
  /* Blog breadcrumbs */
  section.blog-header nav a,
  /* "See all" above the recent-posts grid */
  .recent-blog-head a,
  /* "See more" on project cards, homepage and portfolio */
  a.project-link,
  /* Service row CTAs, homepage and /ai */
  a.service-right-link,
  /* Header logo link */
  a.navbar-brand-three,
  /* Service card CTAs on the /service/* pages */
  a.service-link,
  /* Empty stretched links over project cards; they carry an aria-label
     but were only 20px tall, so they were hard to hit as well as unnamed */
  a.home-work-link,
  /* Mobile menu toggle, 42px, just short of the baseline */
  .menu-button-2 a.link-block {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Short labels also need horizontal room: "Home" is 35px wide, "Blog" 26px. */
  section.blog-header nav a,
  a.home-work-link {
    min-width: 44px;
  }

  /* The toggle centres its own burger glyph, so keep it centred as it grows. */
  .menu-button-2 a.link-block {
    justify-content: center;
  }
}