/* Pro Precision - phone and tablet rules.
   ---------------------------------------------------------------------------
   Everything is inside a media query, so desktop is untouched.

   Measured on a 390px viewport: the layout itself holds up (no grid was
   damaged and nothing scrolls sideways), but almost every control was too
   small to tap reliably - header nav links rendered 18px tall, the free-trial
   buttons 32px, and footer links 16px. 44px is the size of a fingertip.

   Only the touch BOX grows. Type size, colour, spacing and layout are all
   left alone, so the design reads exactly as before. */

@media (max-width: 1024px) {

  /* Header and footer navigation, including the logo link (which is a bare
     <a> in the header, not inside <nav>). */
  header a,
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* In-page jump links - the "Early Edge / Small Group / Elite Academy" pills
     that scroll to a section. They rendered 36px tall. */
  a[href^="#"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The funnel chrome: its logo and "Exit" link sit in a plain div, not a
     <header>, so they are matched by href instead. Each funnel exits to its
     own parent page, hence the two hrefs. */
  a[href="/"],
  a[href="/camps"],
  .fn-logo,
  a[href^="https://www.google.com/maps"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Short links ("Exit", "Home", "Contact") were tall enough once the rules
     above applied but still only 28-40px wide. Padding widens the target
     without moving anything visually. */
  .fn-foot__links a {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  a[href="/"], a[href="/camps"] { padding-left: 4px; padding-right: 4px; }

  /* Calls to action. These are the buttons that start a free trial or a camp
     registration, so a missed tap costs a booking. */
  button,
  a[href*="free-trial" i],
  a[href*="FreeTrial" i],
  a[href*="enroll" i],
  a[href*="register" i] {
    min-height: 44px;
  }

  /* A button that is only as wide as its label is still easy to miss; give
     the inline ones room without changing how they look. The close button on
     the newsletter popup was 30px wide, which is a hard target to hit. */
  button {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  /* Funnel step labels and the logo strapline were 9-10px, small enough to be
     genuinely hard to read on a phone while filling the form in. Nudged to
     11.5-12px: still visibly a caption, but legible. */
  .fn-prog__label { font-size: 11.5px !important; }
  header small,
  .fn-logo small { font-size: 11px !important; }

  /* Form labels sit next to the field a parent is typing into. */
  label { font-size: 12.5px !important; }
}