/* ==========================================================================
   Responsive Enhancements for Evergreen Nursery Garden
   Optimized for all gadgets: mobile, tablet, laptop, desktop, and ultra-wide
   ========================================================================== */

/* --- Core Responsive & Fluid Layouts --- */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Ensure standard images scale fluidly, but don't force auto height on full-height images */
img:not(.object-cover):not(.h-full) {
  max-width: 100%;
  height: auto;
}

/* Force hero cover images and card cover images to respect object-fit cover and fill container height */
.object-cover,
img.object-cover,
img.h-full,
[class*="object-cover"] img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  max-width: none !important;
}

/* Hide scrollbar for category selector bar */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* --- General Mobile Viewports (Up to 767px: Phones & Small Tablets) --- */
@media screen and (max-width: 767px) {
  /* Fix navbar vertical alignment and spacing */
  nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 3.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  nav .items-baseline {
    align-items: center !important; /* Override baseline alignment so logo centers vertically */
  }

  nav .flex.gap-6 {
    align-items: center !important;
    gap: 0.875rem !important; /* Tighten navigation links slightly so they don't overflow */
  }

  nav a, nav span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }

  /* Force Hero section image to occupy full background of its section */
  #hero {
    height: 100vh !important;
    height: 100dvh !important;
  }

  #hero .absolute.inset-0.z-0 {
    height: 100% !important;
    width: 100% !important;
  }

  #hero img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
  }
}

/* --- Ultra-Small Mobile Devices (Under 360px: e.g., Galaxy Fold) --- */
@media screen and (max-width: 359px) {
  /* Reduce padding to maximize narrow reading area */
  [class*="px-6"], [class*="px-8"], [class*="px-12"], [class*="px-16"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  [class*="py-16"], [class*="py-24"], [class*="py-32"] {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Shrink navigation to fit single line without overlap */
  nav {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    gap: 0.35rem !important;
  }
  nav .flex.gap-6 {
    gap: 0.35rem !important;
  }
  nav span.text-2xl {
    font-size: 1rem !important;
  }
  nav a {
    font-size: 0.7rem !important;
  }
}

/* --- Small Mobile Devices (360px - 479px) --- */
@media screen and (max-width: 480px) {
  /* Clamp oversized headings to prevent awkward wrapping */
  h1, [class*="text-5xl"], [class*="text-4xl"], [class*="text-7xl"] {
    font-size: clamp(1.5rem, 6vw, 2.3rem) !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }

  h2, [class*="text-3xl"], [class*="text-2xl"] {
    font-size: clamp(1.2rem, 5vw, 1.7rem) !important;
    line-height: 1.3 !important;
  }

  /* Compress padding to fit mobile views */
  [class*="px-8"], [class*="px-12"], [class*="px-16"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  [class*="py-16"], [class*="py-24"], [class*="py-32"] {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Tap targets for mobile accessibility (minimum 44x44px touch zone) */
  button, a[role="button"], [class*="btn"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Ensure forms don't cause automatic iOS zoom on focus */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Reduce margins and gaps for compact mobile screens */
  [class*="gap-8"] {
    gap: 1rem !important;
  }
  [class*="gap-12"] {
    gap: 1.25rem !important;
  }
  [class*="gap-16"] {
    gap: 1.5rem !important;
  }
  [class*="space-y-6"] > :not([class*="hidden"]) ~ :not([class*="hidden"]) {
    margin-top: 1rem !important;
  }
  [class*="p-6"], [class*="p-8"] {
    padding: 1rem !important;
  }
}

/* --- Medium/Large Mobile Screens (480px - 639px) --- */
@media screen and (min-width: 480px) and (max-width: 639px) {
  /* Force a 2-column grid instead of a single giant-sized 450px wide card */
  .grid[class*="sm:grid-cols-2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

/* --- Standard Mobile Range (481px - 767px) --- */
@media screen and (min-width: 481px) and (max-width: 767px) {
  h1, [class*="text-5xl"], [class*="text-4xl"], [class*="text-7xl"] {
    font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
  }

  [class*="px-12"], [class*="px-16"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  [class*="gap-16"] {
    gap: 1.75rem !important;
  }
}

/* --- Tablet / iPad Screens (768px - 1024px) --- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Scale down massive text titles so they fit on tablets in portrait */
  h1, [class*="text-7xl"] {
    font-size: clamp(2.5rem, 6vw, 4rem) !important;
    line-height: 1.15 !important;
  }
  
  /* Ensure grids have breathable but not excessive gaps */
  [class*="gap-16"] {
    gap: 2rem !important;
  }
}

/* --- Touch Interactions & Touch UX --- */
@media (hover: none) and (pointer: coarse) {
  /* Ensure all clickable links have adequate touch targets */
  button, a, [role="button"] {
    min-height: 44px;
    cursor: pointer;
  }

  /* Support smooth touch acceleration scrolling on iOS */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* Remove scale transform effects on touch hover, as they trigger unexpectedly */
  .group:hover .group-hover\:scale-105 {
    transform: none !important;
  }
}

/* --- Ultra-Wide Screen Optimizations (2560px+) --- */
@media screen and (min-width: 2560px) {
  body {
    font-size: 18px;
  }

  /* Restrict maximum width and center content cleanly */
  [class*="max-w-6xl"] {
    max-width: 1600px !important;
  }
}

/* --- Notched Display & Safe Areas (e.g., iPhone X+) --- */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* --- Print Styles --- */
@media print {
  nav, footer, button, [class*="cart"], [class*="chat"], form {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  img {
    max-width: 200px;
  }
}