/* =========================================================
   cross-platform.css
   Pure presentation/behavior polish — no text content is
   added, edited, or translated. Makes navigation and page
   scrolling feel smooth and consistent across iOS, Android,
   macOS, Windows, and Linux, on every major browser
   (Safari, Chrome, Firefox, Edge, Samsung Internet).
   ========================================================= */

/* ---------------------------------------------------------
   1. Smooth, native-feeling scrolling everywhere
   --------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    /* Room for the fixed header when jumping to an in-page anchor */
    scroll-padding-top: 90px;
    /* Consistent text sizing (stops Safari/iOS from silently
       resizing text on orientation change) */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Respect users who have asked their OS/browser to reduce motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------
   2. Consistent font rendering across operating systems
   --------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------
   3. Fast, "butter smooth" taps on touch devices
   --------------------------------------------------------- */
a,
button,
.whatsapp-btn,
.nav-menu a,
.mobile-bottom-nav a,
.hamburger,
.theme-toggle-btn,
.filter-bar button,
.filter-bar a {
    /* Removes the old ~300ms tap-delay on mobile browsers */
    touch-action: manipulation;
    /* Removes the grey/blue flash Android/iOS show on tap */
    -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
    /* Normalizes rounded corners / native chrome differences
       between Safari, Chrome, and Firefox form controls */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
}

/* Preserve native look for elements that need it (checkboxes,
   radios, range sliders) so removing appearance above doesn't
   break anything that relies on default OS styling */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* ---------------------------------------------------------
   4. Safe-area support for notches / rounded corners
      (iPhone Dynamic Island & home-indicator, Android gesture
      bars) on any element pinned to the top or bottom edge
   --------------------------------------------------------- */
header {
    padding-left: max(30px, env(safe-area-inset-left));
    padding-right: max(30px, env(safe-area-inset-right));
}

/* ---------------------------------------------------------
   5. Prevent iOS Safari from zooming the page when a form
      field is focused (keeps every input at 16px minimum)
   --------------------------------------------------------- */
input,
textarea,
select {
    font-size: max(16px, 1rem);
}

/* ---------------------------------------------------------
   8. "Install NAT Fish Farm" PWA button (injected by
      pwa-register.js) — styled to match the existing
      .theme-toggle-btn so it sits naturally in the same nav.
   --------------------------------------------------------- */
.pwa-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    margin-left: 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 180, 255, 0.5);
    background: rgba(0, 180, 255, 0.15);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
    -webkit-user-select: none;
    user-select: none;
    z-index: 20;
}

.pwa-install-btn:hover {
    background: rgba(0, 180, 255, 0.3);
    border-color: rgba(0, 180, 255, 0.8);
    transform: translateY(-2px);
}

.pwa-install-btn:active {
    transform: translateY(0) scale(0.96);
}

.pwa-install-btn[hidden] {
    display: none;
}

.nav-menu .pwa-install-item {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .pwa-install-btn {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------
   9. /assets/fish/ <picture> wrappers (AVIF-first, WebP
      fallback — see fish-catalog.js and image cards on the
      gallery/home/fish-varieties pages). <picture> is inline
      by default; make it behave like the plain <img> it
      replaced so no existing card/gallery layout CSS needs
      to change for it.
   --------------------------------------------------------- */
picture {
    display: contents;
}