/* ============================================
   Safari Browser Compatibility Fixes
   AnointTech - Safari-Specific CSS Patches
   ============================================ */

/* ============================================
   FIX #1: Flexbox Gap Fallback for Safari < 14.1
   Impact: Navigation, footer, and button layouts
   ============================================ */

/* Detect lack of gap support and apply margin fallbacks */
@supports not (gap: 1rem) {
  /* Navbar spacing */
  .navbar > * + * {
    margin-left: 2rem; /* --spacing-8 */
  }

  /* Navbar brand elements */
  .navbar-brand > * + * {
    margin-left: 1rem; /* --spacing-4 */
  }

  /* Navigation menu items */
  .navbar-menu {
    margin-left: -1.5rem; /* compensate for first item */
  }

  .navbar-menu > li {
    margin-left: 1.5rem; /* --spacing-6 */
  }

  /* Navbar action buttons */
  .navbar-actions > * + * {
    margin-left: 1rem; /* --spacing-4 */
  }

  /* Social links in footer */
  .social-links {
    margin-left: -1rem;
  }

  .social-links > * {
    margin-left: 1rem; /* --spacing-4 */
  }

  /* Hero action buttons */
  .hero-actions > * + * {
    margin-left: 1rem; /* --spacing-4 */
  }

  /* Footer grid columns */
  .footer-content {
    margin: 0 -1rem;
  }

  .footer-content > * {
    margin: 0 1rem 2rem 1rem; /* --spacing-8 bottom */
  }

  /* Footer bottom links */
  .footer-links-inline > * + * {
    margin-left: 1rem; /* --spacing-4 */
  }

  /* Dots spinner animation */
  .dots-spinner {
    margin-left: -8px;
  }

  .dots-spinner span {
    margin-left: 8px;
  }
}

/* ============================================
   FIX #2: Position Sticky Vendor Prefix
   Impact: Header navigation sticking behavior
   ============================================ */

.header {
  position: -webkit-sticky; /* Safari < 13 */
  position: sticky;
}

/* ============================================
   FIX #3: Background Attachment Fixed (Mobile Safari Fix)
   Impact: Parallax effects on iOS devices
   ============================================ */

/* Disable fixed backgrounds on touch devices (iOS Safari bug) */
@media (hover: none) and (pointer: coarse) {
  .parallax {
    background-attachment: scroll !important;
  }
}

/* Also disable on small screens regardless of hover capability */
@media (max-width: 768px) {
  .parallax {
    background-attachment: scroll !important;
  }
}

/* ============================================
   FIX #4: Transform-Style Preserve-3D Prefix
   Impact: 3D transform effects
   ============================================ */

.tilt-effect {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ============================================
   FIX #5: Animation Vendor Prefixes
   Impact: All animations for older Safari versions
   ============================================ */

/* Spin animation with prefix */
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.spinner,
.loading-spinner {
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

/* Fade animations with prefixes */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* Skeleton loading animation with prefix */
@-webkit-keyframes skeleton {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  -webkit-animation: skeleton 1.5s ease-in-out infinite;
  animation: skeleton 1.5s ease-in-out infinite;
}

/* ============================================
   FIX #6: Grid Fallback for Very Old Safari
   Impact: Footer and hero layouts
   ============================================ */

/* Flexbox fallback for grid layouts */
@supports not (display: grid) {
  .footer-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .footer-content > * {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 250px;
    -ms-flex: 1 1 250px;
    flex: 1 1 250px;
  }

  .hero .container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

/* ============================================
   FIX #7: Clip-Path for Accessibility
   Impact: Screen reader only text
   ============================================ */

.sr-only {
  clip: rect(0, 0, 0, 0); /* Fallback for very old Safari */
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
}

/* ============================================
   FIX #8: Transform Prefixes for Hover Effects
   Impact: Hover animations and transitions
   ============================================ */

.hover-lift:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

.hover-grow:hover {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

.btn-primary:hover {
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}

/* ============================================
   FIX #9: Transition Prefixes
   Impact: Smooth theme transitions
   ============================================ */

body,
.header,
.footer,
.nav-link,
.btn,
input,
textarea,
.card {
  -webkit-transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
  -o-transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

/* ============================================
   FIX #10: Filter Property Prefix
   Impact: Image filters in dark mode
   ============================================ */

[data-theme="dark"] img:not([data-no-theme]) {
  -webkit-filter: brightness(0.9);
  filter: brightness(0.9);
}

.footer-logo img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

/* ============================================
   FIX #11: User Select Prefix
   Impact: Text selection behavior
   ============================================ */

button,
.btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ============================================
   FIX #12: Appearance Property for Form Elements
   Impact: Custom form styling
   ============================================ */

button,
input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ============================================
   FIX #13: Backdrop Filter (if used in future)
   Impact: Glass morphism effects
   ============================================ */

/* If you add blur effects in the future, use this pattern:
.glass-effect {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
*/

/* ============================================
   FIX #14: Box Sizing Prefix (Safety)
   Impact: Box model calculations
   ============================================ */

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ============================================
   FIX #15: Flexbox Prefixes for Maximum Compatibility
   Impact: All flex-based layouts
   ============================================ */

.navbar,
.navbar-brand,
.navbar-menu,
.navbar-actions,
.social-links,
.hero-actions,
.footer-bottom,
.footer-links-inline,
.action-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.mobile-menu-toggle {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.navbar {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/* ============================================
   FIX #16: Safari-Specific Performance Optimizations
   Impact: Scroll and animation performance
   ============================================ */

/* Force GPU acceleration for animations in Safari */
.animate-on-scroll,
.feature-card,
.service-card,
.btn,
.hover-lift,
.hover-grow {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* Smooth text rendering in Safari */
body,
h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================
   FIX #17: Touch Action for Better Mobile Performance
   Impact: Touch scrolling on iOS
   ============================================ */

body {
  -webkit-overflow-scrolling: touch;
}

/* Prevent text size adjustment on orientation change (iOS Safari) */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ============================================
   FIX #18: Fix iOS Safari Input Zoom
   Impact: Form inputs on iPhone
   ============================================ */

@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents zoom on focus in iOS Safari */
  }
}

/* ============================================
   FIX #19: Safe Area Insets for iPhone X+ (Notch)
   Impact: Content near screen edges on newer iPhones
   ============================================ */

@supports (padding: max(0px)) {
  .header,
  .footer,
  .container {
    padding-left: max(var(--spacing-4), env(safe-area-inset-left));
    padding-right: max(var(--spacing-4), env(safe-area-inset-right));
  }

  .footer {
    padding-bottom: max(var(--spacing-8), env(safe-area-inset-bottom));
  }
}

/* ============================================
   FIX #20: Prevent Pull-to-Refresh in Mobile Safari (Optional)
   Impact: iOS Safari pull-to-refresh behavior
   ============================================ */

/* Uncomment if pull-to-refresh interferes with your UI:
body {
  overscroll-behavior-y: contain;
}
*/

/* ============================================
   Safari Version Detection (via JavaScript class)
   Usage: Add 'is-safari' class to <html> element via JS
   ============================================ */

.is-safari .parallax {
  /* Safari-specific parallax handling */
  background-attachment: scroll;
}

/* ============================================
   END OF SAFARI FIXES
   Last Updated: 2025-10-18
   Compatibility: Safari 9+ / iOS Safari 9+
   ============================================ */