/* ===== U&N Ink Works — Mobile Fix Overrides =====
   Loaded AFTER the main stylesheet so these rules win. */

/* 1. Prevent horizontal scroll / overflow on small screens. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* 2. The floating call button was hidden below the md breakpoint (<768px).
      Show it on mobile too, but keep it on the LEFT (same side as desktop)
      as a single compact circular icon so it never overlaps the WhatsApp
      bubble on the right or spills past the edge of the screen. */
@media (max-width: 767px) {
  div[class*="left-0"][class*="top-1/2"][class*="hidden"][class*="md:flex"] {
    display: flex !important;
    left: 0.75rem !important;
    top: auto !important;
    bottom: 1.5rem !important;
    transform: none !important;
  }

  div[class*="left-0"][class*="top-1/2"] a {
    border-radius: 9999px !important;
    width: 3.25rem !important;
    height: 3.25rem !important;
    max-width: 3.25rem !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  /* Hide the expanding text label on mobile — no hover state exists on
     touch, so a stuck-open label was the cause of buttons "filling" the
     screen. Icon-only keeps it compact and tap-friendly. */
  div[class*="left-0"][class*="top-1/2"] a span {
    display: none !important;
  }
}

/* 3. WhatsApp floating button: safe-area padding so it isn't obscured by
      the iOS home-indicator / Android gesture bar. */
a[href*="wa.me"][class*="fixed"][class*="bottom-6"][class*="right-6"] {
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 60 !important;
}

/* 4. Google Map container: guarantee it never collapses to 0 height. */
.container iframe[title="U&N Ink Works Location"] {
  min-height: 300px;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* 5. Portfolio & Services cards reveal their category/title/description
      only on :hover — which never fires on touch devices, so this content
      was permanently invisible on mobile and tablets. Force it visible
      up to the lg breakpoint (1024px), where hover-capable devices take
      over again. */
@media (max-width: 1023px) {
  #portfolio [class*="opacity-0"][class*="group-hover:opacity-100"],
  #services [class*="opacity-0"][class*="group-hover:opacity-100"] {
    opacity: 1 !important;
  }
  #portfolio [class*="translate-y-4"][class*="group-hover:translate-y-0"] {
    transform: translateY(0) !important;
  }
  #services [class*="max-h-0"][class*="group-hover:max-h-24"] {
    max-height: 6rem !important;
  }
}

/* 6. Hero section's floating showcase cards ("Corporate Bags", "Wedding
      Collection" photo cards + the "500+ Clients" badge) were coded
      `hidden lg:block` — invisible below 1024px, so the whole right-side
      visual was missing on mobile/tablet. Show them, repositioned into a
      slim column along the right edge at a smaller scale so they don't
      collide with the headline text. */
@media (max-width: 1023px) {
  .float-a, .float-b, .float-c {
    display: block !important;
  }
  .float-a {
    top: 8% !important;
    right: 0.6rem !important;
    left: auto !important;
    bottom: auto !important;
    transform: scale(0.55) !important;
    transform-origin: top right !important;
  }
  .float-b {
    top: 32% !important;
    right: 0.4rem !important;
    left: auto !important;
    bottom: auto !important;
    transform: scale(0.55) !important;
    transform-origin: top right !important;
  }
  .float-c {
    bottom: 16% !important;
    top: auto !important;
    right: 0.6rem !important;
    left: auto !important;
    transform: scale(0.62) !important;
    transform-origin: bottom right !important;
  }
}

/* Phones need the cards even smaller and further clear of the headline. */
@media (max-width: 639px) {
  .float-a {
    top: 7% !important;
    right: 0.5rem !important;
    transform: scale(0.46) !important;
  }
  .float-b {
    top: 30% !important;
    right: 0.35rem !important;
    transform: scale(0.46) !important;
  }
  .float-c {
    bottom: 14% !important;
    right: 0.5rem !important;
    transform: scale(0.52) !important;
  }
}

/* 7. "Industries We Serve" — the "Get Industry Specific Quote" CTA carries
      a long phone-number string with fixed desktop padding/font-size, which
      overflowed its container and broke the section's layout on phones.
      Let it wrap cleanly and scale down below the sm breakpoint. */
@media (max-width: 640px) {
  #industries a[href="tel:+918925250510"] {
    display: block;
    width: 100%;
    max-width: 21rem;
    margin: 0 auto;
  }
  #industries a[href="tel:+918925250510"] [class*="px-10"] {
    width: 100%;
    white-space: normal !important;
    text-align: center;
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
    padding: 0.9rem 1.25rem !important;
  }
}

/* 7b. "Why Leading Businesses Choose Us" section has the same kind of long
      "Partner With Us -> phone number" CTA button, with the same fixed
      desktop padding/font-size that overflows and breaks the layout on
      phones. Same fix as rule 7, scoped to this section's button. */
@media (max-width: 640px) {
  #why-us a[href="tel:+918925250510"] {
    display: block;
    width: 100%;
    max-width: 21rem;
    margin: 0 auto;
  }
  #why-us a[href="tel:+918925250510"] [class*="px-10"] {
    width: 100%;
    white-space: normal !important;
    text-align: center;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    padding: 0.9rem 1.1rem !important;
  }
}
@media (max-width: 400px) {
  #why-us a[href="tel:+918925250510"] [class*="px-10"] {
    font-size: 0.7rem !important;
  }
}

/* 8. Floating call button — nudge it down 20px from dead-centre so it
      clears the header/hero content above it, and make sure its
      hover/tap-expanding label can never sit underneath the WhatsApp
      button or hero floating cards (raise its stacking order and stop it
      intercepting taps once collapsed). Applies on desktop and mobile. */
div[class*="left-0"][class*="top-1/2"][class*="-translate-y-1/2"] {
  top: calc(50% + 20px) !important;
  z-index: 55 !important;
}

/* On mobile the expanding label is hidden entirely (rule #2 above), but the
   wrapping link itself must not stretch full-width and sit over page text —
   cap it to its collapsed circular size. */
@media (max-width: 767px) {
  div[class*="left-0"][class*="top-1/2"] a {
    max-width: 3.25rem !important;
  }
}

/* Keep the WhatsApp bubble above the floating call button and hero cards so
   the two floating buttons never visually merge into one messy cluster,
   and give it a touch more breathing room from the corner on small screens. */
a[href*="wa.me"][class*="fixed"][class*="bottom-6"][class*="right-6"] {
  z-index: 65 !important;
}
@media (max-width: 767px) {
  a[href*="wa.me"][class*="fixed"][class*="bottom-6"][class*="right-6"] {
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    right: 1rem !important;
  }
}

/* Hero floating cards must stay visually behind both floating action
   buttons, and never intercept clicks on the hero content underneath. */
.float-a, .float-b, .float-c {
  z-index: 10 !important;
  pointer-events: none !important;
}

/* 10. "WORKFLOW" giant watermark behind the "How We Work" section.
      It was sized at 22vw (huge on any screen) and colored a light gray
      (#F7F8FA) meant to sit almost invisibly on a WHITE section
      background. But the site defaults to dark mode, and dark mode
      force-repaints that section's background dark (.dark .bg-white
      above) — so the same near-white letters that were supposed to be a
      faint watermark became a giant, glaring block of white text
      overlapping the header/CTA bar above the section. Shrink it to a
      sane responsive size and give it a proper faint color per theme so
      it goes back to being a subtle background detail instead of the
      dominant thing on screen. */
#process > span[class*="text-[22vw]"] {
  font-size: clamp(3rem, 11vw, 9rem) !important;
  color: rgba(47, 51, 58, 0.05) !important;
}
.dark #process > span[class*="text-[22vw]"] {
  color: rgba(255, 255, 255, 0.035) !important;
}

/* 9. On mobile/tablet the hero's floating showcase cards (rule #6) sit in a
      column pinned to the right edge. The hero text column, however, still
      stretches close to full width (`max-w-3xl`), so the eyebrow label,
      headline, and description run underneath those cards instead of
      wrapping clear of them. Reserve a right-hand gutter on the text
      column so nothing ever renders behind the floating cards. */
@media (max-width: 1023px) {
  div[class*="max-w-3xl"][class*="pt-28"][class*="pb-44"] {
    padding-right: 6.5rem !important;
  }
}
@media (max-width: 639px) {
  div[class*="max-w-3xl"][class*="pt-28"][class*="pb-44"] {
    padding-right: 5.75rem !important;
  }
}