/* Scrollbar Layout Shift Fix */

/* Force scrollbar to always be visible to prevent layout shift */
html {
  overflow-y: scroll !important;
  /* Modern browsers - reserve space for scrollbar */
  scrollbar-gutter: stable;
}

/* Prevent horizontal scrollbar */
html,
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Ensure all elements use border-box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent layout shift on fixed elements */
.modern-header,
.mobile-header {
  width: 100%;
  box-sizing: border-box;
  /* Use viewport width minus scrollbar */
  width: calc(100vw - (100vw - 100%));
}

/* Fix container to prevent shifting */
.header-container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Ensure consistent layout */
.container {
  box-sizing: border-box;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .header-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .modern-header,
  .mobile-header {
    width: 100%;
  }
}

/* Fallback for older browsers */
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll !important;
  }

  body {
    padding-right: 0;
  }
}