/* ===========================================================
   Sitewide mobile / touch polish. Loaded on every page.
   Additive to style.css — only fixes real small-screen pain,
   does not restyle desktop.
   =========================================================== */

/* Kill the grey flash box iOS/Android paint on every tap */
* { -webkit-tap-highlight-color: transparent; }

/* iOS zooms the whole page in when you focus an input whose font < 16px.
   Force 16px on form controls at phone width so the viewport stays put. */
@media (max-width: 640px) {
  input, select, textarea,
  .fish-search, #fishSearch {
    font-size: 16px !important;
  }
}

/* Respect the notch / rounded corners / home bar on modern phones */
@supports (padding: max(0px)) {
  .site-header .header-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .site-footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* Keep the nav reachable while scrolling a long product list on a phone.
   Sticky only on small screens so desktop layout is untouched. */
@media (max-width: 768px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}

/* Long user greeting ("Hi, <name>") must never push the nav sideways */
@media (max-width: 768px) {
  .nav-user {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Filter chips: already horizontally scrollable — hint that with momentum
   scroll + a soft right fade so users know there is more to swipe. */
@media (max-width: 600px) {
  .filter-row {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .filter-row .filter-chip { scroll-snap-align: start; }
}

/* Combo cards: full-width image can get tall on phones — cap it and
   keep the whole card comfortably tappable. */
@media (max-width: 600px) {
  .combo-img-wrap { aspect-ratio: 16 / 10; overflow: hidden; }
  .combo-img { width: 100%; height: 100%; object-fit: cover; }
  .combo-cart-btn { min-height: 42px; }
}

/* Hero text should breathe, not crowd the notch, on the smallest phones */
@media (max-width: 380px) {
  .hero h1 { line-height: 1.15; }
  .hero p { font-size: .9rem; }
  .hero-eyebrow { font-size: .66rem; }
}

/* Tables / wide rows (order + cart) must scroll inside themselves,
   never widen the page. Belt-and-braces alongside style.css guard. */
@media (max-width: 600px) {
  .order-summary-box, .admin-order-card, .cart-item { max-width: 100%; }
}

/* Bigger, easier weight + cut toggles on touch without hover feedback */
@media (pointer: coarse) {
  .weight-option, .cut-fish-toggle { cursor: default; }
  .add-cart-btn, .combo-cart-btn, .btn-primary { touch-action: manipulation; }
}

/* ===========================================================
   TAP TARGETS — measured at 320, 360, 390 and 430 px.
   Header nav links were 22px tall and footer links 20px. Both
   Apple and Google ask for ~44px on touch; anything near 20px
   means a mis-tap, and these are the links that reach the cart
   and the phone number.
   Padding does the work, so nothing moves on desktop where the
   pointer is fine — this only applies to coarse pointers.
   =========================================================== */
@media (pointer: coarse) {
  /* Tight enough that the logged-out nav (Catch / Cart / Log in / theme)
     still fits one row at 360px. It was overflowing by 3px, which pushed
     the theme toggle onto a second row and made the sticky header 169px —
     a fifth of the screen. */
  .main-nav { gap: 6px 8px; }
  .main-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 6px;
  }
  .header-inner { padding-block: 8px; }
  /* the underline hangs off the padded box, so pull it back to the text */
  .main-nav a.active::after { left: 6px; right: 6px; bottom: 8px; }

  .brand { min-height: 44px; }

  .footer-col a,
  .footer-note a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Quick Links sit in a column, so the taller rows must not collide */
  .footer-col a { margin-block: -2px; }

  .theme-toggle { min-width: 44px; min-height: 44px; }
}

/* Very narrow phones (320px — iPhone SE 1st gen, older budget Androids).
   Nav needs ~313px and only has 288, so it wrapped to two rows and the
   sticky header took 23% of the screen. Shaving the type and the gaps
   brings it back to one row without touching the 44px tap height. */
@media (pointer: coarse) and (max-width: 360px) {
  .main-nav { gap: 4px 4px; font-size: .86rem; }
  .main-nav a { padding-inline: 4px; }
  .main-nav a.active::after { left: 4px; right: 4px; }
  .brand { font-size: 1.15rem; }
  .brand-mark { width: 28px; height: 28px; }
}