/*
 * mobile-ux.css — Mochi de los Huertos
 * Mobile-first UX patch: additive only, no breaking changes.
 * Loaded from index.html before the Vite bundle.
 * Last updated: 2026-06-24
 */

/* ─── 1. BASE: html overflow + scroll ─────────────────────────────── */
html {
  overflow-x: hidden;           /* prevent horizontal scroll on any viewport */
  /* h-svh is already in Tailwind utilities; ensure body uses it */
}

/* ─── 2. iOS: fix background-attachment:fixed (GPU repaint on scroll) */
/*   .bg-gradient-nature uses background-attachment:fixed which causes
     a full repaint on every iOS Safari scroll frame.
     We override to 'scroll' on touch devices.                          */
@media (hover: none) and (pointer: coarse) {
  .bg-gradient-nature {
    background-attachment: scroll !important;
  }
}
/* Also cover iOS via -webkit-overflow-scrolling detection */
@supports (-webkit-touch-callout: none) {
  .bg-gradient-nature {
    background-attachment: scroll !important;
  }
}

/* ─── 3. SAFE AREA: ElevenLabs voice button + any fixed bottom element */
/*   viewport-fit=cover is now in viewport meta.
     Any element with class .fixed-bottom-safe gets home bar clearance. */
.fixed-bottom-safe {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
/* ElevenLabs widget is injected into DOM with fixed positioning.
   We target the most common ElevenLabs widget bottom offset pattern. */
@media (max-width: 768px) {
  /* Elevate voice button above home indicator bar */
  [class*="elevenlabs"],
  [data-testid*="voice"],
  .elevenlabs-widget,
  .voice-button-wrapper {
    bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 0.75rem)) !important;
  }
}

/* ─── 4. FLYING INSECTS: performance on mobile ─────────────────────── */
/*   The DOM has ~30+ position:fixed animated insects/butterflies.
     On mobile these run 100% GPU constantly. We hide the majority,
     keeping 1 bee and 1 butterfly to preserve the Mochi garden character. */
@media (max-width: 768px) {
  /* Hide all flying bees except the first one */
  .flying-bee-2,
  .flying-bee-3,
  .flying-bee-4,
  .flying-bee-5,
  .flying-bee-6,
  .flying-bee-7,
  .flying-bee-8,
  .flying-bee-9,
  .flying-bee-10,
  .flying-bee-11,
  .flying-bee-12,
  .flying-bee-13,
  .flying-bee-14,
  /* bumblebees */
  .flying-bumblebee-1,
  .flying-bumblebee-2,
  .flying-bumblebee-3,
  /* butterflies: keep #1 only */
  .flying-butterfly-2,
  .flying-butterfly-3,
  .flying-butterfly-4,
  /* insects: hide all */
  .flying-insect-1,
  .flying-insect-2,
  .flying-insect-3,
  .flying-insect-4,
  /* swallows */
  .flying-swallow-1,
  .flying-swallow-2,
  .flying-swallow-3,
  /* dragonflies */
  .flying-dragonfly-1,
  .flying-dragonfly-2,
  /* moth, hoverfly, ladybirds */
  .flying-moth-1,
  .flying-hoverfly-1,
  .flying-ladybird-1,
  .flying-ladybird-2,
  .flying-ladybird-3 {
    display: none !important;
  }

  /* Keep flying-bee-1 and flying-butterfly-1 but slow them down for battery */
  .flying-bee-1 {
    animation-duration: 28s !important;
  }
  .flying-butterfly-1 {
    animation-duration: 36s !important;
  }
}

/* Extra: on very low-res (likely older/low-end devices), hide all flying elements */
@media (max-width: 768px) and (max-resolution: 1.5dppx) {
  .flying-bee-1,
  .flying-butterfly-1 {
    display: none !important;
  }
}

/* ─── 5. TOUCH TARGETS: 48px minimum on interactive elements ─────── */
/*   WCAG 2.5.5 / Apple HIG: 44px min, 48px recommended.
     The existing CSS has min-height:44px on buttons globally.
     We raise it to 48px on mobile and ensure inline icons scale. */
@media (max-width: 768px) {
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .button-like,
  a[href] > button {
    min-height: 48px;
    min-width: 48px;
  }

  /* Audio player controls: larger hit area */
  audio::-webkit-media-controls-play-button,
  audio::-webkit-media-controls-timeline,
  audio::-webkit-media-controls-volume-slider {
    transform: scale(1.15);
  }

  /* Custom audio play buttons: ensure they hit 48px */
  [class*="play"],
  [class*="pause"],
  [aria-label*="play" i],
  [aria-label*="pause" i],
  [aria-label*="Play" i],
  [aria-label*="Pause" i] {
    min-height: 48px !important;
    min-width: 48px !important;
  }
}

/* ─── 6. VIEWPORT HEIGHT: svh preferred over vh ─────────────────────── */
/*   iOS Safari's bottom bar causes vh to exceed the visible area.
     Override the most impactful cases. The Tailwind h-svh class exists
     already; this covers any inline styles or direct vh usages.          */
@supports (height: 100svh) {
  .min-h-screen {
    min-height: 100svh !important;
  }
  .h-screen {
    height: 100svh !important;
  }
}

/* ─── 7. SCROLL UX ─────────────────────────────────────────────────── */
/*   Prevent pull-to-refresh overscroll on the root (already in main CSS
     as overscroll-behavior:none on body, but we reinforce + add rubber
     band only within scroll containers).                                 */
html, body {
  overscroll-behavior-y: none;
}

/* Scrollable containers inside the app should still allow native bounce */
.overflow-y-auto,
.overflow-auto,
[class*="scroll"] {
  overscroll-behavior-y: contain;
}

/* ─── 8. FONT SIZE: prevent iOS auto-zoom on focus ──────────────────── */
/*   iOS zooms in when input font-size < 16px. The main CSS already sets
     font-size:16px on inputs; this reinforces it for any we missed.      */
input,
select,
textarea {
  font-size: max(16px, 1rem) !important;
}

/* ─── 9. IMAGE RENDERING: crisp on retina ───────────────────────────── */
img {
  image-rendering: auto; /* override -webkit-optimize-contrast on non-Chrome */
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ─── 10. TAP HIGHLIGHT: remove blue flash ──────────────────────────── */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ─── 11. GRID: kids pages responsive tightening ────────────────────── */
/*   On very small screens (< 360px), 2-col grids are too tight.
     Force single column below 360px.                                     */
@media (max-width: 359px) {
  .grid-cols-2,
  .sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ─── 12. NOTCH / SAFE AREA: header and fixed nav ───────────────────── */
/*   With viewport-fit=cover, the header needs left padding on landscape
     notched devices.                                                      */
@supports (padding: env(safe-area-inset-left)) {
  header,
  nav,
  [role="navigation"] {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* ─── 13. REDUCE MOTION: honour system preference ────────────────────── */
/*   Already in main CSS, but the flying insects bypass it.
     We override here to ensure none run for users who prefer no motion.  */
@media (prefers-reduced-motion: reduce) {
  .flying-bee-1,
  .flying-butterfly-1,
  [class*="flying-"],
  [class*="animate-"] {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── 14. CONTENT CONTAINMENT: scroll performance ───────────────────── */
/*   Paint containment on heavy animated sections. */
@media (max-width: 768px) {
  .garden-footer,
  .garden-bed,
  .garden-plants {
    contain: layout paint;
    will-change: auto;
  }
}