/* 
 * CROSS-BROWSER COMPATIBILITY FIXES
 * Ensures consistent display across all browsers and devices
 * Load this BEFORE other stylesheets
 */

/* ===== CSS RESET & NORMALIZATION ===== */
/* Ensure consistent box-sizing across all browsers */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ===== VENDOR PREFIXES FOR CRITICAL PROPERTIES ===== */

/* Backdrop filter with fallbacks */
.glass-effect,
.nav-contact-btn,
.policies-btn,
.modal-content,
.form-submit {
  /* Fallback for browsers that don't support backdrop-filter */
  background-color: rgba(255, 255, 255, 0.1);
  /* Standard property */
  backdrop-filter: blur(10px) saturate(180%);
  /* Safari */
  -webkit-backdrop-filter: blur(10px) saturate(180%);
}

/* Transform prefixes */
.modal-overlay,
.modal-content,
.social-link,
.nav-contact-btn,
.policies-btn {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

/* Transition prefixes */
* {
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

/* Animation prefixes */
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-moz-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@-o-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== FLEXBOX COMPATIBILITY ===== */
.hero-nav,
.nav-container,
.landing-container,
.action-area,
.modal-overlay,
.form-group {
  /* Old syntax for older browsers */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

/* Flex direction */
.landing-container,
.form-group {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/* Flex alignment */
.hero-nav,
.action-area,
.modal-overlay {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* ===== APPEARANCE NORMALIZATION ===== */
input,
textarea,
select,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ===== MODERN CSS FALLBACKS ===== */

/* Removed unused .hero-title and .hero-subtitle classes */

/* CSS Custom Properties fallbacks */
/* Provide fallback values inline where critical */
body {
  background-color: #0a0a0f; /* Fallback for var(--bg-primary) */
  color: #ffffff; /* Fallback for var(--text-primary) */
}

/* ===== MOBILE & TOUCH DEVICE FIXES ===== */

/* Prevent iOS zoom on input focus */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  font-size: 16px !important; /* Prevents zoom on iOS */
}

/* Remove tap highlight on mobile */
a,
button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
  .social-link:hover,
  .nav-contact-btn:hover,
  .policies-btn:hover,
  .form-submit:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS height fix */
  .modal-overlay {
    min-height: -webkit-fill-available;
  }
  
  /* Momentum scrolling */
  .modal-content,
  .policy-content {
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== SCROLLBAR COMPATIBILITY ===== */

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(89, 68, 97, 0.5) transparent;
}

/* Selection styling for all browsers */
::selection {
  background-color: rgba(89, 68, 97, 0.3);
  color: #ffffff;
}

::-moz-selection {
  background-color: rgba(89, 68, 97, 0.3);
  color: #ffffff;
}

/* ===== FONT LOADING OPTIMIZATION ===== */

/* Prevent FOIT (Flash of Invisible Text) */
@font-face {
  font-family: 'Inter';
  font-display: swap; /* Show fallback font immediately */
}

@font-face {
  font-family: 'Playfair Display';
  font-display: swap;
}

/* ===== INPUT PLACEHOLDER COMPATIBILITY ===== */
::-webkit-input-placeholder { /* Edge/Webkit */
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
::placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

/* ===== BROWSER-SPECIFIC HACKS ===== */

/* Edge-specific fixes */
@supports (-ms-ime-align: auto) {
  .modal-content {
    overflow: auto;
  }
}

/* Safari-specific fixes */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .form-input,
    .form-textarea {
      -webkit-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
    }
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .hero-nav,
  .action-area,
  .modal-overlay {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* ===== PROGRESSIVE ENHANCEMENT ===== */

/* Only apply advanced effects if supported */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .glass-effect {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: high) {
  .nav-contact-btn,
  .policies-btn,
  .form-submit {
    border: 2px solid currentColor !important;
  }
}

/* ===== 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;
    scroll-behavior: auto !important;
  }
}

/* ===== FIREFOX MOBILE SPECIFIC FIXES ===== */

/* Fix social link alignment on Firefox mobile */
@media (max-width: 768px) {
  .action-area {
    /* Force proper flexbox layout on Firefox mobile */
    display: -moz-box !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -moz-box-orient: horizontal !important;
    -webkit-box-orient: horizontal !important;
    -moz-box-direction: normal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -moz-box-pack: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -moz-box-align: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    
    /* Ensure proper spacing with fallback */
    gap: 12px !important; /* Reduced from 32px for better mobile spacing */
    /* Fallback for browsers that don't support gap */
    margin-left: -6px !important;
    margin-right: -6px !important;
    
    /* Prevent wrapping */
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    
    /* Additional Firefox mobile fixes */
    width: 100% !important;
    text-align: center !important;
    
    /* Fix for Firefox mobile specifically */
    min-height: 52px !important;
  }
  
  /* Gap fallback for older browsers */
  .action-area > * {
    margin-left: 6px !important; /* Reduced from 16px for better mobile spacing */
    margin-right: 6px !important;
  }
  
  .social-link,
  .policies-btn {
    /* Ensure consistent sizing on Firefox mobile */
    display: -moz-box !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-flex: 0 !important;
    -moz-box-flex: 0 !important;
    -ms-flex: 0 0 52px !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    
    /* Fix alignment within each icon */
    -moz-box-pack: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -moz-box-align: center !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    
    /* Ensure no margin conflicts except for gap fallback */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    
    /* Maintain circular shape */
    border-radius: 50% !important;
    
    /* Prevent shrinking */
    -webkit-flex-shrink: 0 !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Firefox-specific targeting using feature query */
  @supports (-moz-appearance: none) {
    .action-area {
      /* Extra Firefox-specific fixes */
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
  }
}

/* ===== SAFARI MOBILE BACKGROUND IMAGE FIXES ===== */

/* Safari mobile specific background fixes */
@supports (-webkit-touch-callout: none) {
  /* Safari mobile background container fix */
  .background-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    min-height: -webkit-fill-available !important;
    overflow: hidden !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }
  
  .background-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000px !important;
    perspective: 1000px !important;
  }
  
  /* Safari mobile picture element fix */
  picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Fix for Safari mobile viewport changes */
  @media (max-width: 768px) {
    .background-container {
      /* Use viewport units that work better on Safari */
      height: 100% !important;
      min-height: 100% !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
    }
    
    .background-image {
      /* Ensure image fills container on Safari mobile */
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 100vw !important;
      min-height: 100vh !important;
      -webkit-transform: translate(-50%, -50%) !important;
      transform: translate(-50%, -50%) !important;
      object-fit: cover !important;
      object-position: center center !important;
    }
  }
}

/* ===== CSS GAP PROPERTY FALLBACKS FOR SAFARI ===== */

/* Safari 14.0 and below don't support gap in flexbox */
@supports not (gap: 1px) {
  /* Action area gap fallback */
  .action-area {
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
  
  .action-area > * {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  
  /* Mobile action area gap fallback */
  @media (max-width: 768px) {
    .action-area {
      margin-left: -6px !important;
      margin-right: -6px !important;
    }
    
    .action-area > * {
      margin-left: 6px !important;
      margin-right: 6px !important;
    }
  }
  
  /* Form group gap fallback */
  .form-group {
    margin-bottom: 1rem !important;
  }
  
  /* Policy nav gap fallback */
  .policies-nav {
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
  }
  
  .policies-nav > * {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
}

/* ===== CSS ASPECT-RATIO FALLBACK FOR SAFARI < 15 ===== */
@supports not (aspect-ratio: 1 / 1) {
  /* Aspect ratio fallback using padding-bottom trick */
  .aspect-3-2 {
    position: relative !important;
    padding-bottom: 66.67% !important; /* 2/3 * 100 */
    height: 0 !important;
  }
  
  .aspect-16-9 {
    position: relative !important;
    padding-bottom: 56.25% !important; /* 9/16 * 100 */
    height: 0 !important;
  }
  
  /* Child element positioning */
  .aspect-3-2 > *,
  .aspect-16-9 > * {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ===== CSS INSET PROPERTY FALLBACK FOR SAFARI < 14.1 ===== */
/* Replace inset: 0 with individual properties */
@supports not (inset: 0) {
  [style*="inset:"] {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }
}

/* ===== SAFARI-SPECIFIC JAVASCRIPT ERROR PREVENTION ===== */
/* Hide interactive elements if JavaScript fails to load */
.no-js .nav-contact-btn,
.no-js .policies-btn,
.no-js .modal-overlay {
  display: none !important;
}

/* Add no-js class by default, removed by JavaScript */
html:not(.js-loaded) .nav-contact-btn,
html:not(.js-loaded) .policies-btn {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/* ===== END CROSS-BROWSER COMPATIBILITY ===== */