/*
 * mobile.css — shared mobile/touch fixes for gisanalytics.uk
 * Added 2026-08-06.
 *
 * The site has no build step and every page carries its own inline <style>, so
 * before this file a mobile fix meant editing ~40 pages. Put shared touch and
 * readability rules HERE and link this file, rather than duplicating them again.
 *
 * Measured problems this fixes (audited at 390px, iPhone-class viewport):
 *  - footer links rendered 19px tall; the hamburger 24px. Both are well under
 *    the 44px minimum Apple and Google both publish, and the footer links sit
 *    2px apart, so mis-taps were near-certain.
 *  - some meta text sat at 10px, below comfortable reading size on a phone.
 *
 * Scoped to <=767px so the desktop layout is untouched.
 *
 * !! CACHE: .htaccess sets `ExpiresByType text/css "access plus 1 year"`, so this
 * file is linked as `/css/mobile.css?v=1`. If you EDIT this file you MUST bump
 * that query string everywhere or returning visitors keep the old copy for a
 * year and your fix appears not to have shipped:
 *     grep -rl 'css/mobile.css?v=1' --include='*.html' . | while IFS= read -r f; do \
 *       sed -i '' 's|mobile.css?v=1|mobile.css?v=2|g' "$f"; done
 *     sed -i '' 's|mobile.css?v=1|mobile.css?v=2|g' update-article.php
 */

@media (max-width: 767px) {

  /* ---- Footer link lists: 19px -> 44px touch target ----------------------
     Block + padding rather than a fixed height, so long labels that wrap to
     two lines still get a correctly sized target instead of being clipped. */
  footer ul li a {
    display: block;
    padding: 11px 0;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* The lists already carry Tailwind's space-y-2; with the new padding that
     doubles up and makes the footer very tall. Collapse the extra margin. */
  footer ul.space-y-2 > li + li {
    margin-top: 0;
  }

  /* Footer contact links (email, LinkedIn) measured 24px. They are laid out
     with Tailwind's `flex items-center`, so extend rather than replace that. */
  footer a.flex {
    min-height: 44px;
    padding: 4px 0;
  }

  /* ---- Hamburger: 24px -> 44px -----------------------------------------
     The generated article pages already set this inline; the hand-written
     pages never did, so the two were inconsistent. */
  #mobile-menu-button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  /* ---- Mobile nav panel links ------------------------------------------
     Most already set min-height:48px inline. This catches any that don't. */
  #mobile-menu a {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* ---- Readability floor -----------------------------------------------
     Nothing textual should render below 11px on a phone. */
  footer p,
  footer li,
  footer a {
    font-size: max(1em, 13px);
  }

  /* ---- Never let media force a sideways scroll -------------------------- */
  img, svg, video, iframe, table, pre {
    max-width: 100%;
  }
}