/* ===========================================================
   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; }
}