/**
 * NAY AGENCE - Mobile Responsive Overrides
 * Ensures the site works well on phones, tablets, and all device sizes
 */

/* ===== Base: Prevent overflow & ensure proper viewport ===== */
html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  min-width: 0;
}

#root {
  overflow-x: hidden;
  min-width: 0;
}

/* ===== Mobile-first: Base styles for small screens (default) ===== */
/* Stack flex columns, reduce padding, fix widths */
@media (max-width: 639px) {
  /* Full-width containers */
  [class*="px-[4vw]"],
  [class*="px-[6vw]"],
  [class*="pl-[6vw]"],
  [class*="pr-[4vw]"],
  [class*="p-[4vw]"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Force single column layouts */
  .grid,
  [class*="grid-cols-2"],
  [class*="grid-cols-3"],
  [class*="grid-cols-4"] {
    grid-template-columns: 1fr !important;
  }

  /* Stack flex rows on mobile */
  .flex.flex-row,
  [class*="flex-row"] {
    flex-direction: column !important;
  }

  .flex.flex-row > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix viewport-width constraints that break on mobile */
  [class*="max-w-[32vw]"],
  [class*="max-w-[34vw]"],
  [class*="max-w-[calc"] {
    max-width: 100% !important;
  }

  /* Section pinned - allow scrolling, reduce min-height on small screens */
  .section-pinned {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow-y: auto !important;
  }

  /* Circle masks - scale down for mobile */
  .circle-mask,
  [class*="w-[clamp"],
  [class*="h-[clamp"] {
    width: min(180px, 45vw) !important;
    height: min(180px, 45vw) !important;
    min-width: 120px !important;
    min-height: 120px !important;
  }

  /* Reduce large gaps */
  [class*="gap-16"],
  [class*="gap-12"],
  [class*="gap-8"] {
    gap: 1.5rem !important;
  }

  [class*="gap-7"] {
    gap: 1rem !important;
  }

  /* Typography - ensure minimum readable sizes */
  [class*="text-[clamp(4rem"] {
    font-size: clamp(2rem, 10vw, 3.5rem) !important;
  }

  [class*="text-[clamp(3rem"] {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }

  [class*="text-[clamp(2.5rem"] {
    font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
  }

  [class*="text-[clamp(13px"],
  [class*="text-[clamp(14px"] {
    font-size: 0.875rem !important;
  }

  /* Images - always responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Buttons - touch-friendly minimum size */
  .btn-primary,
  .btn-secondary,
  button,
  [role="button"],
  a[class*="btn"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.75rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Form inputs - full width, readable */
  input,
  select,
  textarea {
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }

  /* Reduce large padding/margins */
  [class*="py-20"],
  [class*="py-[6vh"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  [class*="p-12"],
  [class*="p-[4vw"] {
    padding: 1.5rem !important;
  }

  [class*="mb-20"],
  [class*="mb-12"] {
    margin-bottom: 2rem !important;
  }

  /* Navigation - ensure it doesn't overflow */
  nav,
  header {
    flex-wrap: wrap !important;
  }

  nav a,
  header a {
    padding: 0.5rem 0.75rem !important;
  }
}

/* ===== Small tablets: 640px - 767px ===== */
@media (min-width: 640px) and (max-width: 767px) {
  [class*="px-[6vw]"],
  [class*="pl-[6vw]"] {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  [class*="gap-16"] {
    gap: 2rem !important;
  }

  .circle-mask,
  [class*="w-[clamp"] {
    width: min(220px, 35vw) !important;
    height: min(220px, 35vw) !important;
  }
}

/* ===== Tablets: 768px - 1023px ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  [class*="max-w-[32vw]"],
  [class*="max-w-[34vw]"] {
    max-width: 50% !important;
  }
}

/* ===== Touch devices: Improve tap targets ===== */
@media (hover: none) and (pointer: coarse) {
  a,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent sticky hover states on touch */
  .hover\:bg-accent:hover,
  .hover\:text-\[\#C8FF2E\]:hover {
    transition: none;
  }
}

/* ===== Safe area for notched devices (iPhone X+, etc.) ===== */
@supports (padding: max(0px)) {
  .fixed,
  header[class*="fixed"],
  nav[class*="fixed"] {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* ===== Fix 100vh on mobile (address bar issue) ===== */
.section-pinned,
.min-h-screen,
.h-screen {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ===== Ensure no horizontal scroll ===== */
* {
  box-sizing: border-box;
}

div, section, article, main, header, footer, nav {
  max-width: 100%;
}