/* Mobile UX fixes — applied on top of compiled Tailwind app.css.
   Loaded after app.css so these win on specificity tie. */

/* iOS HIG tap-target minimum: 44x44px. Apply to header nav, footer links,
   and the why-we-ask trigger which were under-sized in audit. */

/* Footer nav links (in base.html footer) — bump to 44px tap target */
footer ul a {
  display: inline-block;
  min-height: 44px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  line-height: 1.5;
}

/* Header brand link */
header a.font-display {
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
}

/* Header nav links + buttons + cart pill */
header nav a,
header nav button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Result-page footer text links — currently 108x20, bump to 44+ */
.result-footer-link {
  display: inline-block;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  min-height: 44px;
}

/* Why-we-ask quiz trigger */
.why-we-ask-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  margin: -0.5rem -0.25rem;
  font-size: 0.875rem;  /* 14px — readable, was 12px */
}

/* Bump 12px chapter-indicator + spec labels on mobile to 13px so they
   are still subtle but not below comfort threshold */
@media (max-width: 640px) {
  .text-xs.uppercase.tracking-wider,
  .text-xs.tracking-wider {
    font-size: 0.8125rem;  /* 13px */
  }
}

/* Quiz option cards already 1.25rem padding (44px+ height), confirmed OK */

/* Make sure cart-line "remove" links and update buttons aren't tiny on mobile */
form[action="/cart/update"] button {
  min-height: 44px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}