/**
 * Responsive CSS - Mobile-first responsive design
 * Include this on all pages for consistent mobile experience
 */

/* ===== Base Mobile Reset ===== */
* {
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* ===== Navigation Responsive ===== */
@media (max-width: 1024px) {
    /* Hide desktop nav items, show mobile menu */
    .nav-desktop-items {
        display: none !important;
    }

    .nav-mobile-toggle {
        display: flex !important;
    }

    /* Navigation adjustments */
    nav .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Logo smaller on tablet */
    nav .w-9 {
        width: 2rem;
        height: 2rem;
    }
}

@media (max-width: 768px) {
    /* Mobile navigation */
    nav {
        height: auto;
        min-height: 56px;
    }

    nav .max-w-7xl {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    /* Hide long text in nav on mobile */
    .nav-link-new span.hidden-mobile,
    nav .hidden-mobile {
        display: none !important;
    }

    /* Dropdown becomes full width overlay on mobile */
    .nav-dropdown-new {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 0 !important;
    }
}

/* ===== Hero Section Responsive ===== */
@media (max-width: 1024px) {
    .hero-bg,
    section.hero-bg {
        min-height: auto;
        padding-top: 6rem;
        padding-bottom: 4rem;
    }
}

@media (max-width: 768px) {
    .hero-bg,
    section.hero-bg {
        padding-top: 5rem;
        padding-bottom: 3rem;
    }

    /* Hero text sizing */
    .hero-bg h1,
    section h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .hero-bg .text-5xl,
    .hero-bg .text-6xl,
    .text-5xl,
    .text-6xl {
        font-size: 2rem !important;
    }

    .hero-bg .text-xl,
    .hero-bg .text-2xl {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .hero-bg h1,
    section h1 {
        font-size: 1.75rem !important;
    }

    .text-5xl,
    .text-6xl {
        font-size: 1.75rem !important;
    }
}

/* ===== Grid Layouts Responsive ===== */
@media (max-width: 1024px) {
    .grid-cols-3,
    .md\\:grid-cols-3,
    .lg\\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-cols-4,
    .md\\:grid-cols-4,
    .lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\\:grid-cols-2,
    .md\\:grid-cols-3,
    .md\\:grid-cols-4,
    .lg\\:grid-cols-3,
    .lg\\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Gap adjustments */
    .gap-6,
    .gap-8 {
        gap: 1rem !important;
    }
}

/* ===== Flex Layouts Responsive ===== */
@media (max-width: 768px) {
    .flex-row,
    .md\\:flex-row {
        flex-direction: column !important;
    }

    .items-center.justify-between {
        align-items: stretch !important;
        gap: 1rem;
    }
}

/* ===== Spacing Responsive ===== */
@media (max-width: 768px) {
    /* Padding adjustments */
    .px-6,
    .px-8,
    .px-10 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-20,
    .py-24,
    .py-32 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Margin adjustments */
    .mb-12,
    .mb-16 {
        margin-bottom: 2rem !important;
    }

    .mt-12,
    .mt-16 {
        margin-top: 2rem !important;
    }

    /* Section spacing */
    section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 480px) {
    .px-4,
    .px-6 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ===== Typography Responsive ===== */
@media (max-width: 768px) {
    .text-4xl,
    .md\\:text-4xl,
    .lg\\:text-4xl {
        font-size: 1.75rem !important;
    }

    .text-3xl,
    .md\\:text-3xl {
        font-size: 1.5rem !important;
    }

    .text-2xl {
        font-size: 1.25rem !important;
    }

    .text-xl {
        font-size: 1rem !important;
    }

    .text-lg {
        font-size: 0.9375rem !important;
    }

    /* Line height adjustments */
    h1, h2, h3 {
        line-height: 1.3 !important;
    }

    p {
        line-height: 1.6 !important;
    }
}

/* ===== Cards Responsive ===== */
@media (max-width: 768px) {
    .glass-card,
    .solution-card,
    .stat-card,
    [class*="card"] {
        padding: 1.25rem !important;
    }

    /* Card icons smaller */
    .w-14 {
        width: 3rem !important;
        height: 3rem !important;
    }

    .w-12 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* ===== Buttons Responsive ===== */
@media (max-width: 768px) {
    .cta-button,
    button[class*="cta"],
    a[class*="cta"] {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.875rem !important;
    }

    /* Full width buttons on mobile */
    .cta-button.w-full-mobile {
        width: 100%;
        text-align: center;
    }
}

/* ===== Footer Responsive ===== */
@media (max-width: 768px) {
    footer .flex {
        flex-direction: column !important;
        text-align: center;
        gap: 1rem !important;
    }

    footer .justify-between {
        justify-content: center !important;
    }
}

/* ===== Images & Media Responsive ===== */
@media (max-width: 768px) {
    .object-cover {
        object-fit: cover;
    }

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

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

/* ===== Hide/Show Elements ===== */
@media (max-width: 768px) {
    .hidden-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .hidden-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }
}

/* ===== Form Elements Responsive ===== */
@media (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 0.75rem !important;
    }

    .form-group {
        margin-bottom: 1rem !important;
    }
}

/* ===== Table Responsive ===== */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    th, td {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* ===== Modal/Overlay Responsive ===== */
@media (max-width: 768px) {
    .modal,
    .overlay {
        padding: 1rem !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0.5rem !important;
    }
}

/* ===== Scroll & Overflow ===== */
@media (max-width: 768px) {
    /* Horizontal scroll containers */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .overflow-x-auto::-webkit-scrollbar {
        display: none;
    }
}

/* ===== Animation Adjustments ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== Safe Area (Notch) Support ===== */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .chat-popup-toggle {
        bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
        right: max(24px, calc(env(safe-area-inset-right) + 16px));
    }
}

/* ===== Print Styles ===== */
@media print {
    .chat-popup-toggle,
    .chat-toggle,
    nav,
    .no-print {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }
}

/* ===== High DPI/Retina Adjustments ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders on retina */
    .border,
    [class*="border"] {
        border-width: 0.5px;
    }
}

/* ===== Landscape Phone ===== */
@media (max-width: 896px) and (max-height: 450px) and (orientation: landscape) {
    .hero-bg,
    section.hero-bg {
        min-height: auto;
        padding-top: 4rem;
        padding-bottom: 2rem;
    }

    nav {
        position: relative;
    }
}

/* ===== Very Small Screens ===== */
@media (max-width: 320px) {
    html {
        font-size: 14px;
    }

    .hero-bg h1,
    h1 {
        font-size: 1.5rem !important;
    }

    .px-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}