/* 
TOFU iOS-Native Enhancements - Progressive Enhancement Only
This file ONLY adds iOS-specific features without modifying existing styles
Designed to preserve your existing design while adding iOS-native behaviors
*/

/* Only apply to iOS devices */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-device-width: 430px) and (-webkit-min-device-pixel-ratio: 2) {
    
    /* iOS Safe Area Support - Disabled to prevent navigation conflicts */
    /* Note: Safe area handling is now managed per-component to avoid visual artifacts */
    /*
    body.ios-enhanced:not(.hero-section) {
      padding-top: max(env(safe-area-inset-top), var(--original-padding-top, 0));
      padding-bottom: max(env(safe-area-inset-bottom), var(--original-padding-bottom, 0));
      padding-left: max(env(safe-area-inset-left), var(--original-padding-left, 0));
      padding-right: max(env(safe-area-inset-right), var(--original-padding-right, 0));
    }
    */

    /* Prevent iOS enhancements from affecting hero text */
    .hero-text-enhanced {
      /* Override any iOS-specific text modifications */
      -webkit-text-size-adjust: 100% !important;
      text-size-adjust: 100% !important;
    }

    /* iOS-style smooth scrolling enhancement */
    html {
      -webkit-overflow-scrolling: touch;
    }

    /* Liquid Glass-inspired button enhancements */
    button:not(.no-ios-enhancement),
    .button:not(.no-ios-enhancement),
    [role="button"]:not(.no-ios-enhancement),
    input[type="button"]:not(.no-ios-enhancement),
    input[type="submit"]:not(.no-ios-enhancement),
    /* Target common Tailwind button classes */
    .bg-blue-600:not(.no-ios-enhancement),
    .bg-black:not(.no-ios-enhancement),
    /* Target common CTA elements */
    [class*="cta"]:not(.no-ios-enhancement),
    [class*="button"]:not(.no-ios-enhancement) {
      position: relative;
      transition: transform 0.15s cubic-bezier(0.2, 0, 0.13, 1.5), 
                  backdrop-filter 0.2s ease,
                  background-color 0.2s ease,
                  box-shadow 0.2s ease !important;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* iOS Native Button Press Effect */
    button:not(.no-ios-enhancement):active,
    .button:not(.no-ios-enhancement):active,
    [role="button"]:not(.no-ios-enhancement):active,
    input[type="button"]:not(.no-ios-enhancement):active,
    input[type="submit"]:not(.no-ios-enhancement):active,
    .bg-blue-600:not(.no-ios-enhancement):active,
    .bg-black:not(.no-ios-enhancement):active,
    [class*="cta"]:not(.no-ios-enhancement):active,
    [class*="button"]:not(.no-ios-enhancement):active {
      transform: scale(0.95) !important;
    }

    /* Liquid Glass effect for cards/containers - targeting your FloatingCards */
    .card:not(.no-ios-enhancement),
    .container:not(.no-ios-enhancement),
    .panel:not(.no-ios-enhancement),
    /* Target common card patterns */
    [class*="card"]:not(.no-ios-enhancement),
    [class*="container"]:not(.no-ios-enhancement),
    /* Target Tailwind card-like classes */
    .rounded-lg:not(.no-ios-enhancement),
    .rounded-xl:not(.no-ios-enhancement),
    .bg-white:not(.no-ios-enhancement),
    .shadow-lg:not(.no-ios-enhancement),
    .shadow-xl:not(.no-ios-enhancement),
    /* Target your specific components */
    [class*="floating"]:not(.no-ios-enhancement) {
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      position: relative;
    }

    /* Add subtle glass overlay without changing existing background */
    .card:not(.no-ios-enhancement)::before,
    .container:not(.no-ios-enhancement)::before,
    .panel:not(.no-ios-enhancement)::before,
    [class*="card"]:not(.no-ios-enhancement)::before,
    [class*="container"]:not(.no-ios-enhancement)::before,
    .rounded-lg:not(.no-ios-enhancement)::before,
    .rounded-xl:not(.no-ios-enhancement)::before,
    .bg-white:not(.no-ios-enhancement)::before,
    .shadow-lg:not(.no-ios-enhancement)::before,
    .shadow-xl:not(.no-ios-enhancement)::before,
    [class*="floating"]:not(.no-ios-enhancement)::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: inherit;
      pointer-events: none;
      z-index: -1;
    }

    /* iOS-style focus states */
    button:not(.no-ios-enhancement):focus,
    input:not(.no-ios-enhancement):focus,
    textarea:not(.no-ios-enhancement):focus,
    select:not(.no-ios-enhancement):focus,
    [tabindex]:not(.no-ios-enhancement):focus {
      outline: 2px solid rgba(0, 122, 255, 0.6);
      outline-offset: 2px;
    }

    /* Haptic feedback simulation through enhanced animations */
    @keyframes ios-tap-feedback {
      0% { transform: scale(1); }
      50% { transform: scale(0.95); }
      100% { transform: scale(1); }
    }

    /* iOS keyboard handling */
    body.ios-enhanced.ios-keyboard-open {
      /* Adjust layout when keyboard is open */
      padding-bottom: max(env(safe-area-inset-bottom, 0), 20px);
    }

    /* Enhanced scrolling for iOS */
    body.ios-enhanced {
      scroll-behavior: smooth;
    }

    /* Target your M&A metrics cards specifically */
    [class*="metric"]:not(.no-ios-enhancement),
    [class*="pipeline"]:not(.no-ios-enhancement),
    [class*="opportunity"]:not(.no-ios-enhancement) {
      backdrop-filter: blur(15px) saturate(150%);
      -webkit-backdrop-filter: blur(15px) saturate(150%);
      transition: transform 0.2s ease, backdrop-filter 0.3s ease;
    }

    [class*="metric"]:not(.no-ios-enhancement):hover,
    [class*="pipeline"]:not(.no-ios-enhancement):hover,
    [class*="opportunity"]:not(.no-ios-enhancement):hover {
      transform: translateY(-2px);
      backdrop-filter: blur(25px) saturate(200%);
      -webkit-backdrop-filter: blur(25px) saturate(200%);
    }
  }
}

/* Dark mode enhancements for iOS */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-device-width: 430px) and (prefers-color-scheme: dark) {
    .card:not(.no-ios-enhancement)::before,
    .container:not(.no-ios-enhancement)::before,
    .panel:not(.no-ios-enhancement)::before,
    [class*="card"]:not(.no-ios-enhancement)::before,
    [class*="container"]:not(.no-ios-enhancement)::before,
    .rounded-lg:not(.no-ios-enhancement)::before,
    .rounded-xl:not(.no-ios-enhancement)::before,
    .bg-white:not(.no-ios-enhancement)::before,
    .shadow-lg:not(.no-ios-enhancement)::before,
    .shadow-xl:not(.no-ios-enhancement)::before,
    [class*="floating"]:not(.no-ios-enhancement)::before {
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
}

/* PWA-specific styles for standalone mode */
@media all and (display-mode: standalone) {
  body.ios-enhanced {
    /* Additional spacing for standalone app */
    padding-top: max(env(safe-area-inset-top), 44px);
  }
  
  /* Hide elements that shouldn't appear in standalone mode */
  .browser-only {
    display: none !important;
  }
}