/* Browser-specific fixes for viewport and layout issues */

/* Fix for Brave browser and other Chromium-based browsers */
@supports (-webkit-appearance: none) {
  body {
    /* Ensure proper viewport handling in Webkit browsers */
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
  }
  
  #root {
    /* Prevent content cutoff in Brave/Webkit browsers */
    min-height: -webkit-fill-available;
    transform: translateZ(0); /* Force hardware acceleration */
  }
}

/* Specific fixes for detected Brave browser */
body.brave-browser {
  /* Prevent scrollbar from causing layout issues */
  overflow-x: hidden;
  /* Ensure content is properly positioned */
  position: relative;
  /* Force hardware acceleration */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.brave-browser #root {
  /* Ensure proper stacking context */
  isolation: isolate;
  /* Prevent any potential negative margins */
  margin: 0 !important;
  padding: 0 !important;
}

/* Fix for hero sections in Brave - only target landing page */
body.brave-browser .landing-page .MuiContainer-root:first-child {
  padding-top: 2rem !important;
  margin-top: 0 !important;
}

body.brave-browser .landing-page .MuiBox-root:first-child {
  padding-top: 1rem !important;
  margin-top: 0 !important;
}

/* Webkit browsers general fixes */
body.webkit-browser {
  /* Prevent zoom on input focus */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Specific fixes for Brave browser (user agent detection fallback) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body {
    /* Prevent scrollbar from causing layout issues */
    overflow-x: hidden;
    /* Ensure content is properly positioned */
    position: relative;
  }
  
  /* Fix for hero sections and full-height containers */
  .MuiBox-root {
    /* Ensure proper box sizing */
    position: relative;
  }
}

/* Mobile viewport fixes */
@media screen and (max-width: 768px) {
  body {
    /* Prevent zoom on input focus */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  #root {
    /* Ensure full viewport usage on mobile */
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

/* Fix for potential layout shifts */
* {
  /* Prevent layout shifts from scrollbars */
  scrollbar-gutter: stable;
}

/* Ensure consistent rendering across browsers */
html {
  /* Prevent horizontal scrolling */
  overflow-x: hidden;
  /* Smooth scrolling for better UX */
  scroll-behavior: smooth;
}

/* Fix for potential content cutoff at the top */
body > #root > * {
  /* Ensure no negative margins cause cutoff */
  margin-top: 0 !important;
}

/* Additional Brave-specific fixes for the landing page only */
body.brave-browser .landing-page .MuiGrid-container {
  margin-top: 0 !important;
}

body.brave-browser .landing-page .MuiContainer-maxWidthLg {
  padding-top: 2rem !important;
}

/* Force proper rendering in all Webkit browsers - landing page specific */
@supports (background: -webkit-named-image(i)) {
  /* This targets Webkit/Blink browsers like Brave */
  body {
    /* Force repaint to fix rendering issues */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  #root {
    /* Ensure proper stacking context */
    isolation: isolate;
  }
  
  /* Specific fix for top content cutoff - landing page only */
  .landing-page .MuiBox-root:first-of-type {
    padding-top: 1rem !important;
    margin-top: 0 !important;
  }
}