/* ==========================================
   ShopsInCity — Base Responsive Stylesheet
   Ensures zero horizontal overflow, fluid typography, touch target compliance (44px min),
   and smooth responsive behavior across all 8 device breakpoints.
=========================================== */

/* 1. Reset & Global Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: #0F172A;
    color: #1E293B;
    overflow-wrap: anywhere;
}

/* 2. Responsive Images & Media Elements */
img, svg, video, canvas, audio, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 3. Fluid Responsive Typography Rules */
h1 {
    font-size: clamp(2rem, 5vw + 1rem, 4rem); /* 32px on Mobile -> 64px on Desktop */
    line-height: 1.1;
}

h2 {
    font-size: clamp(1.75rem, 3.5vw + 1rem, 3rem); /* 28px on Mobile -> 48px on Desktop */
    line-height: 1.15;
}

h3 {
    font-size: clamp(1.25rem, 2vw + 1rem, 2.25rem); /* 20px on Mobile -> 36px on Desktop */
    line-height: 1.25;
}

p, span, li {
    font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem); /* 16px Mobile -> 18px Desktop */
    line-height: 1.6;
}

/* 4. Touch-Friendly Interactive Elements (WCAG 44x44px Target Compliance) */
button, 
input, 
select, 
textarea,
.touch-target,
.mobile-nav-link,
.nav-cta-btn {
    min-height: 44px;
    touch-action: manipulation;
}

/* Focus States for Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid #16A34A;
    outline-offset: 2px;
}

/* Disabled Animations for Users Requiring Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}