/* ===================================
   BROWSER-SPECIFIC FIXES
   Cross-browser compatibility styles
   =================================== */

/* ===================================
   SAFARI SPECIFIC FIXES
   =================================== */

/* Fix for Safari's handling of 100vh on mobile */
@supports (-webkit-touch-callout: none) {
  .hero {
    min-height: -webkit-fill-available;
  }
}

/* Safari smooth scroll fallback */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    html {
      scroll-behavior: smooth;
    }
  }
}

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

/* Firefox focus outline fix */
@-moz-document url-prefix() {
  button::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
  
  /* Firefox button padding fix */
  button {
    padding: 0.75rem 2rem;
  }
}

/* ===================================
   EDGE/IE SPECIFIC FIXES
   =================================== */

/* Edge Grid fallback */
@supports (-ms-ime-align: auto) {
  .services__grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 2rem 1fr 2rem 1fr;
  }
  
  .footer__grid {
    display: -ms-grid;
    -ms-grid-columns: 1fr 4rem 1fr 4rem 1fr;
  }
}

/* IE11 Flexbox fixes */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .hero__content {
    max-width: 800px;
  }
  
  .hero__cta {
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-wrap: wrap;
  }
  
  .btn {
    -ms-flex: 0 0 auto;
  }
}

/* ===================================
   WEBKIT/BLINK FIXES (Chrome, Safari, Edge Chromium)
   =================================== */

/* Prevent webkit tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Fix for webkit font smoothing */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Webkit autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-white) inset;
  -webkit-text-fill-color: var(--color-charcoal);
}

/* ===================================
   GENERAL CROSS-BROWSER FIXES
   =================================== */

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

/* Fix for older browsers that don't support CSS variables */
@supports not (--css: variables) {
  :root {
    /* Fallback colors */
  }
  
  .hero {
    background-color: #0B1D3A;
  }
  
  .hero__title {
    color: #D4AF37;
  }
  
  .services {
    background-color: #F5F5F0;
  }
  
  .footer {
    background-color: #0B1D3A;
  }
}

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

/* Fix for button appearance across browsers */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
}

/* Fix for image rendering */
img {
  -ms-interpolation-mode: bicubic;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* SVG rendering fix */
svg {
  max-width: 100%;
  height: auto;
}

/* Fix for focus-visible in browsers that don't support it */
@supports not selector(:focus-visible) {
  *:focus {
    outline: 3px solid #D4AF37;
    outline-offset: 3px;
  }
}

/* Ensure smooth scrolling works in all browsers */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Fix for sticky positioning in older browsers */
@supports not (position: sticky) {
  .header {
    position: fixed;
  }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
  /* Ensure proper printing across browsers */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  img {
    page-break-inside: avoid;
    max-width: 100% !important;
  }
  
  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* ===================================
   VENDOR PREFIX FALLBACKS
   =================================== */

/* Flexbox vendor prefixes for older browsers */
.hero__cta,
.services__grid,
.footer__grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* Transform vendor prefixes */
.service-card:hover,
.service-card:focus-within {
  -webkit-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  transform: translateY(-8px);
}

/* Transition vendor prefixes */
.service-card,
.btn,
.footer__text a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

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

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

/* ===================================
   MOBILE BROWSER FIXES
   =================================== */

/* Fix for iOS Safari bottom bar */
@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

/* Prevent zoom on input focus in iOS */
@media screen and (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Fix for Android Chrome address bar */
@media screen and (max-width: 768px) {
  .hero {
    min-height: calc(100vh - 56px);
  }
}

/* ===================================
   HIGH CONTRAST MODE SUPPORT
   =================================== */

/* Windows High Contrast Mode */
@media (prefers-contrast: high) {
  .btn--primary,
  .btn--secondary {
    border: 2px solid currentColor;
  }
  
  .service-card {
    border: 2px solid currentColor;
  }
  
  *:focus-visible {
    outline: 4px solid currentColor;
    outline-offset: 4px;
  }
}

/* ===================================
   DARK MODE SUPPORT (Future Enhancement)
   =================================== */

@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here if needed */
  /* Currently maintaining light theme for brand consistency */
}