/* ===========================================================================
   Tap target sizing.

   Loaded last so it wins on specificity ties. Every interactive control gets a
   hit area of at least 44 by 44 CSS pixels, which is the standard the landing
   page spec commits to. Inline links inside a sentence are exempt under
   WCAG 2.5.8 and are left alone, because padding them would break line layout.

   The technique is padding, or a pseudo element that expands the hit area
   without changing the visual box. Never min-height on an inline element,
   which does nothing.
   =========================================================================== */

/* Emergency bar close. Was 24x24. */
.ebar__close{
  width:44px;height:44px;
  display:grid;place-items:center;
  margin-right:-.5rem;                 /* keep the visual gutter unchanged */
}

/* Nav links. Visually unchanged, hit area now spans the bar height. */
.nav__links a{
  display:inline-flex;align-items:center;
  min-height:44px;
  padding-inline:.25rem;
  margin-inline:-.25rem;
}

/* Nav buttons. Bring the compact nav CTAs up to the same floor. */
.nav__inner .btn{min-height:44px;padding-block:.75rem}

/* Brand lockup. */
.nav__brand{min-height:44px}

/* Popular service chips. Was 36px tall. */
.chipcloud__item{min-height:44px;padding-block:.6875rem}

/* Footer link columns. Were 18px tall stacked at 8px apart.
   Padding gives each one a full row without changing the visual rhythm much. */
/* display:block so the whole column row is clickable. Short labels like "Blog"
   would otherwise be only 29px wide. Looks identical, since there is no
   background or underline in the resting state. */
.footer__col a{
  display:block;
  padding-block:.625rem;
  min-height:44px;
}
.footer__col li+li{margin-top:0}       /* padding now supplies the spacing */

/* Footer legal links stay inline inside a sentence, so they are exempt.
   Give them a slightly larger underline offset instead, for legibility. */
.footer__legal a{text-underline-offset:3px}

/* Mobile menu button. Was 38px tall, and it is the only way to reach the nav
   on a phone, so it is the last control that should be hard to hit. */
.nav__burger{
  width:44px;height:44px;
  display:grid;place-items:center;
  padding:0;
}

/* The contents disclosure on a legal document, 24px as a bare summary.
   Sized at every width rather than only on mobile: pointer-events:none stops a
   mouse but a <summary> stays keyboard focusable and operable, so on a desktop
   it was still a 24px control for anyone tabbing through the page. */
.legal__toc-summary{min-height:44px}

/* "Browse all 44 services" on the flow page. It is a standalone call to action
   sitting on its own line, not a link inside a sentence, so the WCAG 2.5.8
   exemption for inline links does not cover it. */
.flow__note a{
  display:inline-flex;align-items:center;
  min-height:44px;
  padding-inline:.25rem;margin-inline:-.25rem;
}