/* ==========================================================================
   responsive.css — small overrides beyond Tailwind's built-in sm:/md:/lg: utilities
   Most responsiveness is already handled by Tailwind classes directly in the
   markup (e.g. "grid-cols-1 md:grid-cols-3"). This file is only for the few
   things that need a plain CSS media query.
   ========================================================================== */

/* Hide the horizontal scrollbar on the Services page's tab-style nav row while
   keeping it scrollable on narrow phones */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Slightly smaller floating WhatsApp button on small screens so it doesn't
   crowd the corner or overlap content */
@media (max-width: 640px) {
    a[href^="https://wa.me/"] {
        width: 3.25rem;
        height: 3.25rem;
        bottom: 1.25rem;
        right: 1.25rem;
    }
}

/* Keep the fixed grain-texture overlay from causing horizontal scroll on
   mobile Safari, where 100vw can exceed the visible viewport */
@media (max-width: 480px) {
    .grain-texture {
        width: 100%;
    }
}