/* Reellu mobile polish — global tweaks loaded on every page.
   Keeps existing desktop layout intact, only patches mobile-specific issues
   that audited badly at iPhone-15 viewport (390 x 844).
*/

/* -------------------------------------------------------------------------
   1) iOS-zoom-on-input fix.
   iOS Safari zooms the whole page when a user taps any input whose computed
   font-size is < 16px. Many of our .input / .field / .select / .textarea
   classes are 14-15px, which triggers this on every form across the site.
   Patch: at any viewport, lock form-control font-size at 16px. Visual
   difference is tiny; UX difference is huge (no more disorienting zoom).
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select,
  .input,
  .field,
  .textarea,
  .select {
    font-size: 16px !important;
  }
}

/* -------------------------------------------------------------------------
   2) Minimum tap target heights for common controls on mobile.
   Apple HIG recommends 44pt minimum; we use 40 as a practical floor since
   some footer / inline links genuinely benefit from being smaller. The rule
   only kicks in on mobile.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  button,
  [role="button"],
  .btn,
  .btn-primary,
  .btn-secondary {
    min-height: 40px;
  }
  /* Filter / tab pill rows on /clippers.html etc. — keep them readable */
  .filter-pill,
  .tab-pill,
  button[data-filter],
  button[data-tab] {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* -------------------------------------------------------------------------
   3) Better hamburger / menu button hit area on /profile.html.
   The "Open menu" toggle was 35x40 — bumping to 44x44 without changing icon.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  button[aria-label="Open menu"],
  #mobile-nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* -------------------------------------------------------------------------
   4) Make the standalone-PWA respect the iOS notch + home indicator.
   These pad the body with the safe-area insets so content doesn't tuck
   under the notch or get cut by the bottom indicator.
   ------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  /* Bottom-pinned bars (mobile nav, install banner, etc.) get the bottom inset */
  .mobile-nav-bottom,
  #reellu-ios-install {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* -------------------------------------------------------------------------
   5) Standalone-mode polish — when the user has "Add to Home Screen"-ed
   Reellu, hide the install banner that pwa-install.js may still try to show
   if the localStorage flag hasn't synced.
   ------------------------------------------------------------------------- */
@media (display-mode: standalone) {
  #reellu-ios-install { display: none !important; }
}