/* Browser-Specific Fixes and Compatibility */

/* Safari Fixes */
@supports (-webkit-backdrop-filter: none) {
  /* Fix for Safari backdrop-filter */
  nav {
    -webkit-backdrop-filter: blur(12px);
  }
  
  /* Fix for Safari button appearance */
  button,
  input[type="submit"],
  input[type="button"] {
    -webkit-appearance: none;
  }
  
  /* Fix for Safari flex issues */
  .flex {
    display: -webkit-flex;
    display: flex;
  }
}

/* Firefox Fixes */
@-moz-document url-prefix() {
  /* Fix for Firefox button styling */
  button::-moz-focus-inner,
  input[type="submit"]::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  
  /* Fix for Firefox number input */
  input[type="number"] {
    -moz-appearance: textfield;
  }
}

/* Edge and IE 11 Fixes */
@supports (-ms-ime-align: auto) {
  /* Fix for Edge backdrop-filter fallback */
  nav {
    background: rgba(255, 255, 255, 0.95);
  }
}

/* Mobile-Specific Fixes */
@media (max-width: 768px) {
  /* Fix for iOS Safari viewport height */
  .min-h-screen {
    min-height: -webkit-fill-available;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
  }
  
  /* Account for fixed navigation on mobile */
  body {
    padding-top: 64px; /* Height of mobile nav */
  }
  
  /* Remove padding for pages with hero sections */
  body.has-hero {
    padding-top: 0;
  }
  
  /* Hero section should use full viewport */
  #vanta-bg {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    padding-top: 0;
  }
  
  /* Ensure hero content has proper spacing from top on mobile */
  #vanta-bg .pt-16 {
    padding-top: 80px; /* Extra padding on mobile to account for nav */
  }
  
  /* Fix for mobile tap highlight */
  a, button {
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Fix for iOS form zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px;
  }
  
  /* Improve mobile scrolling performance */
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .bg-gradient-to-r,
  .bg-gradient-to-br {
    background: var(--fallback-color, #14b8a6);
  }
  
  .text-gray-600 {
    color: #374151;
  }
  
  .border-gray-300 {
    border-color: #374151;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .transform {
    transform: none !important;
  }
}

/* Print Styles */
@media print {
  /* Hide navigation and non-essential elements */
  nav,
  footer,
  .cta-section,
  #vanta-bg,
  button[type="submit"] {
    display: none !important;
  }
  
  /* Improve print layout */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }
  
  .container,
  .max-w-7xl {
    max-width: 100%;
  }
  
  /* Show URLs for links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  /* Page breaks */
  section {
    page-break-inside: avoid;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
  }
}

/* Focus Visible Polyfill */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/* Smooth Scroll Behavior with Fallback */
@supports (scroll-behavior: smooth) {
  html {
    scroll-behavior: smooth;
  }
}

/* Grid Fallback for Older Browsers */
@supports not (display: grid) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .grid > * {
    flex: 1 1 300px;
    margin: 0.5rem;
  }
}

/* Sticky Position Fallback */
@supports not (position: sticky) {
  nav {
    position: fixed;
  }
}

/* Custom Scrollbar Styling (Webkit only) */
@supports (scrollbar-width: thin) or (-webkit-scrollbar-width: thin) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #14b8a6 #f3f4f6;
  }
  
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  *::-webkit-scrollbar-track {
    background: #f3f4f6;
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: #14b8a6;
    border-radius: 4px;
  }
}

/* Form Validation States */
input:invalid,
textarea:invalid,
select:invalid {
  border-color: #ef4444;
}

input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown),
select:valid {
  border-color: #10b981;
}

/* Accessibility Improvements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip to Content Link */
.skip-to-content {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1rem;
  background: #14b8a6;
  color: white;
  text-decoration: none;
}

.skip-to-content:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 1rem;
}