/* =============================================================
   Mobile Optimizations for BIOPEP PH Reseller Portal
   Targets: screens below 640px (pre-sm) and general fixes
   ============================================================= */

/* Prevent horizontal scroll caused by decorative absolute elements */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  /* iOS safe area for devices with home indicators */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Improve tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   Small screen typography scaling (max-width: 639px)
   Tailwind's sm breakpoint is 640px, so below that we scale
   ============================================================ */
@media (max-width: 639px) {
  /* Hero display headings: 48px → 30px */
  .text-\[48px\] {
    font-size: 1.875rem !important; /* 30px */
    line-height: 1.05 !important;
  }

  /* Section headings: 36px → 26px */
  .text-\[36px\] {
    font-size: 1.625rem !important; /* 26px */
    line-height: 1.15 !important;
  }

  /* Medium headings: 28px → 22px */
  .text-\[28px\] {
    font-size: 1.375rem !important; /* 22px */
  }

  /* Sub-headings: 22px → 18px */
  .text-\[22px\] {
    font-size: 1.125rem !important; /* 18px */
  }

  /* Reduce large section vertical padding */
  .py-16 {
    padding-top: 2.5rem !important;   /* 40px instead of 64px */
    padding-bottom: 2.5rem !important;
  }

  /* Reduce bottom margin on contact/CTA sections */
  .contact-animate.mb-10 {
    margin-bottom: 1.5rem !important;
  }

  /* Ensure max-width text blocks use full width on small screens */
  .max-w-\[520px\],
  .max-w-\[480px\] {
    max-width: 100% !important;
  }

  /* Reduce inset of decorative blobs so they don't cause horizontal scroll */
  .-left-12 {
    left: -1.5rem !important;
  }
  .-right-12 {
    right: -1.5rem !important;
  }
  .-top-12 {
    top: -1.5rem !important;
  }
  .-bottom-12 {
    bottom: -1.5rem !important;
  }

  /* Trust badges: ensure consistent 2-column layout on small screens */
  .trust-badge {
    width: 50% !important;
  }

  /* Improve button touch area — minimum 44px height recommended by Apple HIG */
  .rounded-full.px-7 {
    padding-top: 0.875rem !important;   /* py-3.5 = 14px each side ≈ 44px total */
    padding-bottom: 0.875rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Cart / quick-view sidebar: ensure full-height on mobile */
  .fixed.top-0.right-0.bottom-0.z-\[100\] {
    width: 100% !important;
  }

  /* Hero section: reduce excessive top padding offset on mobile */
  .relative.z-10.flex.flex-col.items-center.text-center.px-4.pt-14 {
    padding-top: 3.5rem !important; /* keep navbar clearance */
  }

  /* Calculator card: tighter padding on mobile */
  .calc-animate.max-w-\[640px\] {
    padding: 1.25rem !important;
  }

  /* Reference table mobile rows: slightly more breathing room */
  .ref-row.sm\:hidden {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Product cards in grid: ensure image containers don't overflow */
  .aspect-square {
    min-height: 0 !important;
  }

  /* Smooth scrolling disabled on mobile to avoid janky behavior with GSAP */
  html {
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Tablet / mid-size improvements (641px – 767px)
   ============================================================ */
@media (min-width: 640px) and (max-width: 767px) {
  .text-\[48px\] {
    font-size: 2.25rem !important; /* 36px */
  }

  .text-\[36px\] {
    font-size: 2rem !important; /* 32px */
  }

  .py-16 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* ============================================================
   iOS-specific fixes
   ============================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  /* Fixed bottom nav area clearance */
  .min-h-\[100dvh\],
  .min-h-screen,
  .min-h-svh {
    min-height: calc(100dvh + env(safe-area-inset-bottom, 0px));
  }

  /* Ensure sidebars respect home indicator */
  .fixed.bottom-0 {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ============================================================
   Navbar: show COA's and Order Guidelines links on mobile
   Both use 'hidden sm:flex' so they're invisible below 640px by default
   ============================================================ */
@media (max-width: 639px) {
  /* Make the hidden-on-mobile nav buttons visible */
  nav button.hidden.sm\:flex.items-center.gap-1\.5.px-3.py-1\.5.rounded-full {
    display: flex !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Tighten right-side item gap so all 4 nav buttons fit the narrow navbar */
  nav > div > div:last-child {
    gap: 0.375rem !important;
  }
}

/* On very small phones (≤ 360px): icons only to prevent overflow */
@media (max-width: 360px) {
  nav button.hidden.sm\:flex.items-center.gap-1\.5.px-3.py-1\.5.rounded-full span {
    display: none !important;
  }
  nav button.hidden.sm\:flex.items-center.gap-1\.5.px-3.py-1\.5.rounded-full {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    gap: 0 !important;
  }
}

/* ============================================================
   Focus / accessibility improvements for mobile
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* On touch devices, remove hover effects that feel laggy */
  .hover\:scale-\[1\.02\]:hover,
  .hover\:scale-\[1\.03\]:hover,
  .hover\:scale-105:hover {
    transform: none !important;
  }
}