/*
 * touch-targets.css — 44px minimums for real controls, on touch only.
 *
 * ── WHY A SEPARATE FILE, WHEN nav-light.css SAYS "DO NOT ADD A SECOND" ──
 *
 * That note guards against loading a LEGACY page stylesheet beside another
 * one, because every legacy extract carries its own :root, reset and body{},
 * and two of them on one page is a second global reset. This file carries
 * none of those three, which is the same argument that makes nav-light.css
 * safe, and it is checked the same way: no :root, no reset, no bare element
 * selector, nothing that is not scoped to the nav or the footer.
 *
 * It exists as a file rather than as rules in home.css because home.css does
 * NOT load on the static pages — each of those loads exactly one legacy
 * stylesheet of its own. The nav and footer are on every page of both kinds,
 * so a fix living in home.css would have covered about half the site and
 * looked complete. Hand-applying a rule to one family of pages and not the
 * other is precisely how ASSET_V missed glass.css for months.
 *
 * THE BAR FOR A THIRD SUCH FILE is the same: no :root, no reset, no body{},
 * no bare element selectors. If it cannot meet that, it belongs in the
 * page's own stylesheet.
 *
 * ── WHY (pointer: coarse) RATHER THAN A WIDTH ──
 *
 * A 44px minimum is about fingers, not about screen size. A desktop window
 * dragged narrow does not grow a finger, and a tablet at 1024px does. This
 * query asks the question the rule is actually about, and it means the
 * desktop design is untouched: nothing here applies to a mouse.
 *
 * ── WHAT WAS MEASURED, 2026-09-11, at 390px on production ──
 *
 *   nav-logo        32px   every page
 *   hamburger       31px   JSX pages
 *   nav-pill        33px   static pages, and it is the primary CTA
 *   mob-close-btn   32px   closes the mobile drawer
 *   footer links    19px   about twenty per page
 *   footer legal    21px
 *
 * Every one of those fails the 44px guideline, and the footer links fail the
 * 24px floor of WCAG 2.5.8 as well. The footer gets materially taller on a
 * phone as a result, which is the honest trade: a footer is scrolled past,
 * and a link that cannot be hit reliably is not a link.
 *
 * DELIBERATELY NOT INCLUDED: links inside sentences. The portal sweep
 * learned this the hard way — a blanket rule on every anchor made body copy
 * unreadable by spacing out inline links. Everything below is scoped to the
 * nav, the footer, or a named control, and the tail of this file lists what
 * was measured and deliberately left short, with the reason for each.
 */

@media (pointer: coarse) {
  /* ── nav ───────────────────────────────────────────────────────────── */

  /* Both navs on the site use these names: the JSX one in layouts/Nav.tsx
     and the copy baked into every static page's markup. */
  .nav-logo,
  .nav-pill,
  .hamburger,
  .mob-close-btn {
    min-height: 44px;
  }

  /* The logo and the pill are laid out as inline boxes, so a min-height
     alone would leave the text at the top of a 44px box rather than
     centring it in the new target. */
  .nav-logo,
  .nav-pill {
    display: inline-flex;
    align-items: center;
  }

  /* The hamburger and the drawer's close button are square icon buttons.
     Width matters as much as height on those, and it is not implied. */
  .hamburger,
  .mob-close-btn {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The blog's category filter sits inside its own <nav> and measured 41px,
     three short. It is the control that decides what the page lists, so it
     is as much navigation as the bar above it. Named explicitly rather than
     reached with `nav a`, which would also catch the mega-menu links that
     are already tall enough and the breadcrumb trail on article pages. */
  .blog-cat {
    min-height: 44px;
  }


  /* ── page controls ─────────────────────────────────────────────────────
     Added 2026-09-11 after the nav and footer pass, from a measurement of
     nineteen pages. NAMED ONE BY ONE, never reached with something broad
     like `main a`, because the same sweep found seventeen links sitting
     INSIDE sentences at 16px and those must not move: spacing out an inline
     link is how body copy becomes unreadable, which the portal sweep already
     paid for once.

     Buttons first. Three separate CTAs measured 43px — one pixel short, on
     the primary call to action of the site. */
  .btn,
  .btn-primary,
  .btn-dark {
    min-height: 44px;
  }

  /* Home page. The testimonial arrows are real controls at 42px; testi-all,
     about-link and cta-text-link are standalone links that end a section
     rather than sitting in a sentence. */
  .testi-arrow,
  .testi-all,
  .about-link,
  .cta-home,
  .cta-text-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The arrows are round icon buttons, so width is not implied by height. */
  .testi-arrow {
    min-width: 44px;
    justify-content: center;
  }

  /* /services: thirty "View →" links, one per card, all 22px. The whole
     point of that page is choosing one of them. */
  /* "Read all" at the foot of a service page's reading list. Turned up only
     on /services/klaviyo in the final sweep, on the twenty-fourth page. */
  .service-reading-all,
  .svc-link,
  /* /reviews: the "View on Fiverr" and "View on Upwork" links are the proof
     the page exists to offer. */
  .agg-tile-link,
  /* Case study back link, and the breadcrumb on the static pages. Both are
     navigation that happens to live in the body. */
  .cs-back,
  .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* /contact is a page of three contact methods, and every one of them was
     under 27px: the mailto, the Calendly button and the three social links.
     Scoped to those blocks so the page's prose is untouched. */
  #contact-body .info-block a,
  #contact-body .info-block button,
  #contact-body .social-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* DELIBERATELY LEFT ALONE, all of them measured and all of them correct
     as they are:

       .ux-pscreen-cta   41px, and it is not a control. It is an "Add to Bag"
                         button drawn inside a fake product page used as an
                         illustration on the home page. Growing it would
                         distort the mockup to fix a button nobody can click.
       /cookies links    20px, seventeen of them, inside legal prose and its
                         list items. These are references in sentences.
       /tarly "Sign in   16px, inside a paragraph.
       here"
       .cs-meta-value a  20px, the client's website inside a metadata line.

     If any of these ever needs to be a target, give it a class and add it
     above rather than widening a selector to catch it. */


  /* ── the other chrome, found by sweeping every page rather than the ones
     I had already looked at ──────────────────────────────────────────────

     /tarly and /va-services are landing pages with their OWN nav and footer
     markup, sharing no class names with the main site: nav-brand, sl-logo,
     nav-cta, and bare anchors at 17 to 22px. Blog posts have breadcrumbs in
     nav.post-crumbs and an author link in the byline. /how-we-work and the
     other document pages have footer.doc-foot.

     None of this was visible from the six pages the first pass measured,
     which is the lesson CLAUDE.md already records in the portal's own words:
     sweep every page before claiming a class of bug is gone.

     `nav a` is safe where `main a` would not be. A nav never contains a
     sentence, so there is no inline link to space out, and min-height only
     ever raises a target that is already too small. */
  nav a,
  nav button,
  .doc-foot a,
  .post-byline-who a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── footer ────────────────────────────────────────────────────────── */

  /* Scoped to the link COLUMNS and the legal row rather than to the footer
     as a whole, so the newsletter copy and the "talk to us" paragraph keep
     their inline links at text size. */
  .footer-col a,
  .footer-legal a,
  .footer-bottom a,
  footer > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The footer's own Book a Free Call is a <button>, not an <a>, so none of
     the rules above reach it. It measured 19px. */
  .footer-col button,
  .footer-bottom button {
    min-height: 44px;
  }
}