/* Mobile Responsive Design - Expert-Approved Implementation */
/* Developed with input from Design, UI/UX, Technical, Copy, R&D, Story, and QA experts */

/* ===========================
   Mobile-First Base Styles
   =========================== */

/* Performance Optimizations */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Smooth scrolling with performance */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

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

/* ===========================
   Mobile Breakpoint: < 640px
   =========================== */
@media (max-width: 640px) {
    /* Override Tailwind z-50 class for mobile */
    nav.z-50,
    .z-50 {
        z-index: 1000 !important;
    }

    /* Logo should be above menu overlay */
    a.z-50,
    .nav-logo,
    a[href="/"].z-50 {
        z-index: 10003 !important; /* Above hamburger button */
        position: relative !important;
    }

    /* Navigation Mobile */
    .navbar-dark,
    nav.fixed {
        padding: 0.75rem 0;
        z-index: 1000 !important; /* Ensure navbar is above content */
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(10, 14, 39, 0.98) !important;
    }

    .navbar-dark .nav-container {
        padding: 0 1rem;
    }

    .navbar-dark .nav-menu {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background: rgba(10, 14, 39, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 2rem 1.5rem;
        gap: 1rem;
        transition: left 0.3s ease;
        z-index: 998; /* Below hamburger button */
        overflow-y: auto;
    }

    .navbar-dark .nav-menu.active {
        left: 0;
    }

    .navbar-dark .nav-toggle,
    .navbar-dark #nav-toggle,
    #nav-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: 0.5rem;
        z-index: 1010; /* Increased z-index for close button visibility */
        position: relative;
        gap: 3px;
        width: 40px;
        height: 40px;
        -webkit-tap-highlight-color: transparent;
        background: transparent;
        border: none;
        pointer-events: all;
    }

    .navbar-dark .nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        background: white;
        transition: all 0.3s ease;
        border-radius: 1px;
    }

    /* Hamburger button overrides for Tailwind classes */
    button.z-50,
    button[aria-label="Toggle menu"],
    .lg\\:hidden.z-50 {
        z-index: 10001 !important; /* Above mobile menu overlay */
        position: relative !important;
    }

    .navbar-dark .nav-toggle.active {
        z-index: 10000 !important; /* Ensure close button is above everything */
    }

    .navbar-dark .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translateY(7px);
        background: white !important; /* Ensure visibility */
    }

    .navbar-dark .nav-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scale(0);
    }

    .navbar-dark .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translateY(-7px);
        background: white !important; /* Ensure visibility */
    }

    .navbar-dark .nav-cta {
        width: 100%;
        text-align: center;
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }

    /* Hero Split - Stack Vertically */
    .hero-split {
        grid-template-columns: 1fr;
        min-height: auto;
        margin-top: 60px;
        padding-top: 20px; /* Add extra padding to prevent nav overlap */
    }

    /* Hide "Still Planning" on mobile */
    .hero-left {
        display: none;
    }

    /* Hero Right - Full Mobile Optimization */
    .hero-right {
        min-height: calc(100vh - 60px);
        padding: 1rem;
        display: flex;
        align-items: center;
        position: relative;
    }

    .hero-right-content {
        max-width: 100%;
        padding-bottom: 0;
        width: 100%;
    }

    /* Hero Title - Mobile Optimized */
    .hero-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        line-height: 1.15;
        margin-bottom: 1rem;
        letter-spacing: -0.01em;
        font-weight: 700;
        padding-top: 1rem; /* Extra padding to avoid nav cutoff */
    }

    /* Override Tailwind whitespace-nowrap for mobile */
    .whitespace-nowrap {
        white-space: normal !important;
    }

    /* Mobile-specific text handling */
    h1 .whitespace-nowrap,
    h1 span.whitespace-nowrap {
        white-space: normal !important; /* Allow wrapping on mobile */
        display: inline !important;
    }

    /* Fix Digital Transformation text on mobile */
    h1 .text-red-400,
    h1 span.text-red-400 {
        display: inline !important;
        word-break: break-word !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Ensure proper text overflow */
    h1 {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }

    .word-reveal {
        display: inline;
    }

    /* Hero Subtitle - Concise for Mobile */
    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 1.25rem;
        max-width: 100%;
        color: rgba(255, 255, 255, 0.85);
    }

    /* Hero Actions - Stack & Full Width */
    .hero-actions {
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.5rem;
        width: 100%;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding: 1rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        min-height: 48px; /* Touch-friendly */
        border-radius: 25px;
        letter-spacing: 0.2px;
    }

    /* Hide ROI Orbs on Mobile */
    .roi-orbs {
        display: none;
    }

    /* Mobile Ticker - Let JS handle everything */
    .live-ticker,
    .mobile-ticker {
        /* Don't set position or visibility - transformation-ticker.js handles it */
        z-index: 900 !important;
        background: rgba(10, 14, 39, 0.98) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        margin: 0;
        width: 100% !important;
        min-height: 60px;
    }

    /* Ensure body has proper spacing for ticker */
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* HTML setup for flex layout */
    html {
        height: 100%;
        height: -webkit-fill-available;
    }

    /* Ensure nav is not in document flow */
    nav,
    .navbar-dark,
    .nav-container {
        position: fixed !important;
    }

    /* Fix scroll indicator positioning on mobile */
    .absolute.bottom-8 {
        bottom: 80px !important; /* Account for ticker height */
    }

    /* Center scroll indicator properly */
    .animate-bounce {
        left: 50% !important;
        transform: translateX(-50%) !important;
        animation-duration: 2s;
    }

    /* Ensure scroll arrow text is visible */
    .animate-bounce .text-gray-400 {
        white-space: nowrap;
        font-size: 0.875rem;
    }

    /* Move any floating action buttons above ticker with spacing */
    /* Be more specific to avoid matching the ticker itself */
    button[class*="scroll-to-top"],
    button[class*="back-to-top"],
    button[aria-label*="top"],
    button[aria-label*="scroll"],
    a[href="#top"]:not(.live-ticker) {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; /* Above ticker with 10px spacing */
    }

    /* REMOVED - These were matching the ticker incorrectly
    .fixed[class*="bottom"][class*="right"]
    div[style*="position: fixed"][style*="bottom"]
    */


    /* Results Section - Mobile */
    .results-grid {
        gap: 1.5rem;
        padding: 0 1rem;
        max-width: 100%;
    }

    .result-card {
        padding: 1.5rem;
        max-width: 100%;
    }

    .result-metric {
        font-size: 2rem;
    }

    .result-description {
        font-size: 0.95rem;
    }

    /* Approach Section - Mobile */
    .approach-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    /* CTA Section - Mobile */
    .cta {
        padding: 3rem 1rem;
    }

    .cta-title {
        font-size: 2rem;
    }

    .btn-large {
        width: 100%;
        padding: 1rem 2rem;
        min-height: 48px;
    }

    /* Footer - Mobile */
    .footer-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* ===========================
   Tablet Breakpoint: 641px - 768px
   =========================== */
@media (min-width: 641px) and (max-width: 768px) {
    /* Tablet-specific adjustments */
    .hero-split {
        grid-template-columns: 1fr;
    }

    .hero-left {
        min-height: 40vh;
        padding: 2rem;
    }

    .hero-right {
        min-height: 60vh;
        padding: 3rem 2rem;
    }

    .hero-title {
        font-size: clamp(2.5rem, 7vw, 3.5rem);
    }

    /* Show ROI orbs in grid on tablet */
    .roi-orbs {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-top: 2rem;
    }

    .roi-orb {
        position: static;
        opacity: 1;
    }

    /* Ticker - Tablet */
    .live-ticker {
        left: 1rem;
        right: 1rem;
        bottom: 40px;
    }

    /* Results grid stays centered on tablet */
    .results-grid {
        max-width: 700px;
        gap: 2rem;
    }
}

/* ===========================
   Landscape Mobile Optimization
   =========================== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-right {
        min-height: auto;
        padding: 2rem;
    }

    .hero-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        margin-bottom: 1.5rem;
    }

    .hero-actions {
        flex-direction: row;
        gap: 1rem;
    }

    .btn-primary,
    .btn-secondary {
        width: auto;
        flex: 1;
    }
}

/* ===========================
   Performance Optimizations
   =========================== */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    .roi-orb {
        animation: none;
    }

    .floating {
        animation: none;
    }

    /* Optimize ticker animations */
    .ticker-item {
        transition: all 0.2s ease;
    }

    /* Disable expensive effects */
    .btn-glow {
        display: none;
    }

    /* Use will-change sparingly */
    .ticker-item.active {
        will-change: auto;
    }
}

/* ===========================
   Accessibility & Touch
   =========================== */
@media (max-width: 768px) {
    /* Ensure all interactive elements are touch-friendly */
    a,
    button,
    .nav-link,
    .nav-cta {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Better focus states for mobile */
    :focus {
        outline: 2px solid #00D9FF;
        outline-offset: 2px;
    }
}

/* ===========================
   Additional Mobile Viewport Fixes
   =========================== */
@media (max-width: 768px) {
    /* Ensure sections use small viewport height to prevent content jumping */
    section {
        /* Use small viewport height as base */
        min-height: 100svh;
        /* Fallback to regular vh */
        min-height: 100vh;
    }

    /* Support check for small viewport units */
    @supports (height: 100svh) {
        section {
            min-height: 100svh;
        }

        /* Main content areas should account for browser chrome */
        main,
        .mobile-content {
            min-height: 100svh;
            padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        }
    }

    /* Ensure ticker doesn't interfere with scrolling */
    .live-ticker,
    .mobile-ticker {
        pointer-events: auto;
        touch-action: none; /* Prevent accidental interactions while scrolling */
    }

    /* iOS 11.0-11.2 compatibility */
    @supports (padding-bottom: constant(safe-area-inset-bottom)) {
        .live-ticker,
        .mobile-ticker {
            /* Only set padding, not position */
            padding-bottom: calc(0.75rem + constant(safe-area-inset-bottom));
        }
    }
}

/* ===========================
   CRITICAL MOBILE OVERRIDES
   Must come after all other mobile styles
   =========================== */
@media (max-width: 768px) {
    /* Fix z-index issues with Tailwind classes */
    nav.fixed.z-50 {
        z-index: 1000 !important;
    }

    /* Hamburger button must be above everything */
    button[aria-label="Toggle menu"],
    .lg\:hidden.z-50,
    button.lg\:hidden {
        z-index: 10002 !important;
        position: relative !important;
    }

    /* Override Tailwind hamburger animations */
    button[aria-label="Toggle menu"] span.rotate-45 {
        transform: rotate(45deg) translateY(7px) !important;
    }

    button[aria-label="Toggle menu"] span.-rotate-45 {
        transform: rotate(-45deg) translateY(-7px) !important;
    }

    /* For the translate-y-2 class override */
    .translate-y-2 {
        transform: translateY(7px) !important;
    }

    .-translate-y-2 {
        transform: translateY(-7px) !important;
    }

    /* Mobile menu overlay */
    .fixed.inset-0.z-\[100\],
    div.z-\[100\] {
        z-index: 9999 !important;
    }

    /* Mobile menu panel */
    .z-\[101\],
    div[x-show="mobileMenuOpen"] {
        z-index: 10000 !important;
    }

    /* Force text wrapping for Digital Transformation */
    h1 span.text-red-400.whitespace-nowrap,
    .text-red-400.whitespace-nowrap {
        white-space: normal !important;
        word-break: break-word !important;
        display: inline !important;
        max-width: 100% !important;
    }

    /* Ensure hero text doesn't overflow */
    section h1,
    .text-4xl,
    .text-6xl,
    .text-8xl {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        padding: 0 0.5rem !important;
    }
}

/* ===========================
   Reduced Motion Preference
   =========================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===========================
   Container Queries (Future-Proof)
   =========================== */
@supports (container-type: inline-size) {
    .hero-right-content {
        container-type: inline-size;
    }

    @container (max-width: 400px) {
        .hero-title {
            font-size: 2rem;
        }
    }
}