/**
 * LIMOKAR - Responsive Enhancements
 * Ensures pixel-perfect responsive design across all devices
 */

/* ==========================================================================
   Breakpoints (matching Tailwind defaults)
   ========================================================================== */

/*
  sm: 640px
  md: 768px
  lg: 1024px
  xl: 1280px
  2xl: 1536px
*/

/* ==========================================================================
   Mobile First - Base Styles (< 640px)
   ========================================================================== */

/* Typography responsive */
html {
    font-size: 16px;
}

h1, .text-4xl, .text-5xl, .text-6xl {
    word-break: break-word;
    hyphens: auto;
}

/* Container responsive padding */
.container,
[class*="max-w-"] {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container,
    [class*="max-w-"] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

/* Sticky header adjustment for mobile */
@media (max-width: 1023px) {
    header {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    header img {
        height: 2rem; /* Smaller logo on mobile */
    }
}

/* Mobile menu improvements */
#mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#mobile-menu nav {
    padding-bottom: 20px;
}

/* Hide sticky CTA when mobile menu is open */
body.mobile-menu-open #sticky-mobile-cta {
    opacity: 0 !important;
    pointer-events: none;
}

#mobile-menu::-webkit-scrollbar {
    width: 4px;
}

#mobile-menu::-webkit-scrollbar-track {
    background: transparent;
}

#mobile-menu::-webkit-scrollbar-thumb {
    background: rgba(195, 151, 45, 0.3);
    border-radius: 4px;
}

/* ==========================================================================
   Hero Sections
   ========================================================================== */

@media (max-width: 767px) {
    /* Hero padding adjustments */
    section.relative[class*="pt-"] {
        padding-top: 5rem !important;
        padding-bottom: 3rem !important;
    }

    /* Hero titles */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }

    /* Hero subtitles */
    .text-xl {
        font-size: 1rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 3rem !important;
    }
}

/* ==========================================================================
   Cards & Grids
   ========================================================================== */

/* Force single column on mobile for complex grids */
@media (max-width: 639px) {
    .grid[class*="md:grid-cols"],
    .grid[class*="lg:grid-cols"] {
        grid-template-columns: 1fr !important;
    }

    /* Card spacing on mobile */
    [class*="gap-"] {
        gap: 1rem !important;
    }
}

/* Tablet adjustments */
@media (min-width: 640px) and (max-width: 767px) {
    .grid.md\\:grid-cols-2,
    .grid.md\\:grid-cols-3,
    .grid.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   Buttons & CTAs
   ========================================================================== */

@media (max-width: 639px) {
    /* Full width buttons on mobile */
    .flex-col a[class*="px-"],
    .flex-col button[class*="px-"] {
        width: 100%;
        justify-content: center;
    }

    /* Button text size */
    a[class*="px-"],
    button[class*="px-"] {
        font-size: 0.875rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ==========================================================================
   Forms
   ========================================================================== */

@media (max-width: 767px) {
    /* Stack form fields on mobile */
    form .grid {
        grid-template-columns: 1fr !important;
    }

    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* ==========================================================================
   Tables
   ========================================================================== */

@media (max-width: 767px) {
    /* Responsive tables */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    thead {
        display: none;
    }

    tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.5rem;
        padding: 1rem;
    }

    tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
    }

    tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #C3972D;
    }
}

/* ==========================================================================
   Pricing Cards
   ========================================================================== */

@media (max-width: 767px) {
    /* Stack pricing cards on mobile */
    .pricing-card {
        margin-bottom: 2rem;
    }

    /* Adjust pricing amounts */
    .text-5xl {
        font-size: 2.5rem !important;
    }
}

/* ==========================================================================
   Testimonials & Carousels
   ========================================================================== */

@media (max-width: 767px) {
    /* Single testimonial visible on mobile */
    .testimonial-carousel {
        overflow: hidden;
    }

    .testimonial-item {
        min-width: 100%;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

@media (max-width: 767px) {
    /* Stack footer columns - keep left aligned like Figma */
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    /* Sticky CTA mobile (WhatsApp + Call) */
    .footer-sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 40;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.95));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        gap: 0.75rem;
    }

    .footer-sticky-cta a {
        flex: 1;
        justify-content: center;
        font-size: 0.875rem;
        padding: 0.875rem 1rem;
    }
}

/* ==========================================================================
   Images & Media
   ========================================================================== */

/* Prevent layout shift on image load */
img {
    height: auto;
    max-width: 100%;
}

/* Aspect ratio helpers */
.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

/* Image performance on mobile */
@media (max-width: 767px) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ==========================================================================
   Touch Improvements
   ========================================================================== */

/* Increase touch targets on mobile */
@media (max-width: 767px) {
    a,
    button,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Better tap highlighting */
    a,
    button,
    [role="button"] {
        -webkit-tap-highlight-color: rgba(195, 151, 45, 0.2);
        tap-highlight-color: rgba(195, 151, 45, 0.2);
    }
}

/* ==========================================================================
   Smooth Scrolling Improvements
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    * {
        scroll-padding-top: 5rem; /* Account for fixed header */
    }
}

/* ==========================================================================
   Safari iOS Fixes
   ========================================================================== */

/* Fix 100vh on iOS Safari */
@supports (-webkit-touch-callout: none) {
    .min-h-screen {
        min-height: -webkit-fill-available;
    }

    body {
        min-height: -webkit-fill-available;
    }
}

/* Prevent horizontal scroll on iOS */
body {
    overflow-x: hidden;
    position: relative;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Hide navigation, footer, buttons */
    header,
    footer,
    .no-print,
    button,
    [class*="fixed"] {
        display: none !important;
    }

    /* Ensure readability */
    body {
        background: white !important;
        color: black !important;
    }

    a {
        text-decoration: underline;
    }

    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    img {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   High DPI / Retina Displays
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ==========================================================================
   Landscape Mobile Adjustments
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce hero heights in landscape */
    section[class*="pt-"] {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    h1 {
        font-size: 1.75rem !important;
    }

    /* Hide large images in landscape */
    .hide-landscape {
        display: none;
    }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Show/hide based on screen size */
.mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
}

.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
}

/* Responsive spacing utilities */
@media (max-width: 639px) {
    .space-y-mobile-sm > * + * {
        margin-top: 0.5rem;
    }

    .space-y-mobile-md > * + * {
        margin-top: 1rem;
    }

    .space-y-mobile-lg > * + * {
        margin-top: 1.5rem;
    }
}