/* Safari iOS Compatibility Fixes */
/* This file contains specific fixes for Safari on iOS devices */

/* 1. Fix viewport sizing issues on iOS */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific styles */
  
  /* Prevent font size adjustment on orientation change */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Fix viewport height issues with iOS Safari */
  body {
    min-height: 100vh;
    /* iOS viewport height fix */
    min-height: -webkit-fill-available;
  }
}

/* 2. Button fixes for Safari iOS */
button,
.button,
.button-secondary,
.button-mini,
.lang-btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  /* Prevent iOS default button styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Ensure consistent sizing */
  min-height: 44px; /* Apple's recommended touch target size */
  min-width: 44px;
  
  /* Fix text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Ensure proper alignment */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Prevent text selection on tap */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  /* Fix iOS tap highlight */
  -webkit-tap-highlight-color: transparent;
  
  /* Ensure proper box model */
  box-sizing: border-box;
  
  /* Add touch feedback */
  touch-action: manipulation;
}

/* 3. Fix flexbox issues on Safari */
.nav-wrapper,
.user-options,
.option-header,
.language-selector,
.audio-controls,
.sentence-types,
.form-group,
.radio-group-inline {
  /* Add Safari flexbox prefixes */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* Fix flex direction */
.user-options,
.option-content,
.form-section {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Fix flex alignment */
.option-header,
.radio-group-inline,
.language-selector {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/* 4. Font size fixes for Safari iOS */
@media screen and (max-width: 768px) {
  /* Prevent iOS from shrinking text */
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Ensure minimum readable font sizes */
  p, li, span, div {
    font-size: max(16px, 1rem);
  }
  
  /* Button text should not shrink */
  button,
  .button,
  .button-secondary,
  .lang-btn {
    font-size: max(16px, 1rem) !important;
  }
  
  /* Form inputs need consistent sizing */
  input,
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
}

/* 5. Fix grid layout issues */
.sentence-types,
.team-grid,
.about-grid,
.contributors-grid {
  /* Add Safari grid prefixes */
  display: -ms-grid;
  display: grid;
}

/* 6. Safari-specific form fixes */
input,
select,
textarea {
  /* Remove iOS default styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Fix iOS form zooming */
  font-size: 16px;
  
  /* Consistent border radius */
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

/* Fix select dropdowns on iOS */
select {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2714%27%20height%3D%278%27%20viewBox%3D%270%200%2014%208%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1%201l6%206%206-6%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
}

/* 7. Mobile menu fixes for Safari */
.mobile-menu-toggle {
  /* Ensure proper sizing on iOS */
  width: 44px;
  height: 44px;
  padding: 10px;
  
  /* Fix positioning */
  position: relative;
  z-index: 1002;
}

.mobile-menu-toggle span {
  /* Ensure spans are visible */
  display: block;
  width: 24px;
  height: 2px;
  background-color: #333;
  margin: 5px 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* 8. Fix overflow scrolling on iOS */
.nav-wrapper.open,
.option-content.expanded,
.info-popup-content {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* 9. Audio player fixes for Safari */
audio {
  width: 100%;
  max-width: 100%;
  height: 40px;
}

/* 10. Language button specific fixes */
.lang-btn {
  /* Ensure consistent padding */
  padding: 12px 20px;
  
  /* Fix text alignment */
  text-align: center;
  
  /* Ensure border is visible */
  border: 1px solid rgba(0, 0, 0, 0.1);
  
  /* Fix background gradient on Safari */
  background-image: none;
  background-color: transparent;
}

.lang-btn.active {
  /* Use solid background for active state */
  background-image: none;
  background-color: #0099ff;
  color: white;
}

/* 11. Fix backdrop filter for Safari */
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
  .menu-overlay,
  header {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* 12. Recording button fixes */
#start-recording,
#stop-recording,
#record-again,
[id*="start-recording"],
[id*="stop-recording"],
[id*="retry-recording"] {
  /* Ensure proper sizing */
  min-width: 150px;
  padding: 12px 24px;
  
  /* Fix alignment */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 13. Fix transform animations on Safari */
@media (prefers-reduced-motion: no-preference) {
  .button:hover,
  .lang-btn:hover,
  .option-card:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
  }
}

/* 14. Safari-specific media query */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    /* Safari-only styles */
    .button,
    .lang-btn {
      /* Additional Safari-specific fixes */
      line-height: normal;
      white-space: nowrap;
    }
  }
}

/* 15. Fix iOS safe area insets */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  
  footer {
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
}

/* 16. Fix font rendering on retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 17. Ensure touch targets are large enough */
a,
button,
input,
select,
textarea,
.clickable {
  /* Minimum touch target size */
  min-height: 44px;
  min-width: 44px;
}

/* Small touch targets need padding */
.info-button,
.button-mini {
  padding: 10px;
}

/* 18. Fix position sticky on Safari */
header {
  position: -webkit-sticky;
  position: sticky;
}

/* 19. Fix CSS Grid on Safari */
@supports (display: grid) {
  .sentence-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
  }
}

/* 20. Prevent double-tap zoom on buttons */
button,
.button,
.lang-btn,
a {
  touch-action: manipulation;
}

/* 21. Sponsor member photo fixes for Safari */
.sponsor-member-photo {
  /* Ensure flexbox works properly on Safari */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.sponsor-member-photo img {
  /* Safari image rendering fixes */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

/* Safari-specific media query for sponsor photos */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .sponsor-member-photo {
      /* Additional Safari-specific fixes */
      overflow: visible;
    }
    
    .sponsor-member-photo img {
      /* Prevent blurry images on Safari */
      will-change: transform;
    }
  }
}