/* Safari-only fixes */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    /* Safari-only CSS here */
    .fixed {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 9999 !important;
    }
    
    img {
      max-width: 100% !important;
      height: auto !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    .ios-visible, svg {
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    nav button {
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    /* Force mobile menu to be visible on Safari, but ONLY on mobile and tablets */
    @media (max-width: 1023px) {
      .mobile-menu-safari {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
      }
    }
    
    /* Hide mobile menu on larger screens */
    @media (min-width: 1024px) {
      .mobile-menu-safari {
        display: none !important;
      }
    }
    
    /* Mobile menu specific fixes for Safari */
    .fixed div[class*="bg-white"] {
      background-color: #ffffff !important;
      background: #ffffff !important;
    }
    
    /* Make all menu items clearly visible */
    a, button, span {
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    /* Force menu text to be visible */
    a span {
      color: currentColor !important;
      visibility: visible !important;
    }
    
    /* iPad specific fixes - portrait mode */
    @media only screen 
      and (min-device-width: 768px) 
      and (max-device-width: 1024px)
      and (orientation: portrait) {
      /* Force mobile menu on iPad mini in portrait */
      .lg\:block {
        display: none !important;
      }
      .lg\:hidden {
        display: block !important;
      }
      
      button[aria-label="Toggle menu"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
      }
      
      /* Ensure the container has proper spacing */
      .container {
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
    }
    
    /* iPad specific fixes - landscape mode */
    @media only screen 
      and (min-device-width: 768px) 
      and (max-device-width: 1366px)
      and (orientation: landscape) {
      /* Force mobile menu on iPad in landscape */
      html {
        font-size: 16px !important;
      }
      
      /* Override any display classes */
      .hidden {
        display: none !important;
      }
      
      body .lg\:block {
        display: none !important;
      }
      body .lg\:hidden {
        display: block !important;
      }
      body .hidden.lg\:block {
        display: none !important;
      }
      
      button[aria-label="Toggle menu"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
      }
      
      /* Ensure the container has proper spacing in landscape */
      .container {
        width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
      }
      
      /* Force all iPads to use mobile nav in landscape */
      nav .hidden.lg\:block,
      nav div[class*="hidden lg:block"] {
        display: none !important;
      }
      
      nav .lg\:hidden,
      nav div[class*="lg:hidden"] {
        display: block !important;
      }
    }
    
    /* All-iPads override (covers all iPad sizes including Pro) */
    @media only screen 
      and (min-device-width: 768px) 
      and (max-device-width: 1366px) {
      /* Always use mobile nav on iPads regardless of size or orientation */
      .lg\:block {
        display: none !important;
      }
      .lg\:hidden {
        display: block !important;
      }
      
      /* Ensure toggle menu is visible */
      button[aria-label="Toggle menu"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
      }
      
      /* Make sure mobile menu is styled properly */
      .mobile-menu-safari {
        display: block !important;
        position: relative !important;
        z-index: 9999 !important;
      }
    }
  }
}