/* Critical CSS inlined for faster rendering */
body { 
  opacity: 0;
  transition: opacity 0.3s;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #ffffff;
  color: #333333;
  text-rendering: optimizeSpeed;
}
.loaded { 
  opacity: 1; 
}

/* Fix layout shift by setting navbar height and ensuring hero has padding */
.navbar {
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* Hero section should have padding to accommodate fixed navbar */
.hero-container {
  min-height: 70vh;
  padding-top: 80px; /* Match navbar height */
  contain: layout;
}

/* Critical hero section styling */
.hero-text {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a202c;
}
.hero-highlight {
  color: #3182ce;
}

/* Layout optimization for mobile */
@media (max-width: 768px) {
  .hero-container {
    padding-top: 80px; /* Ensure consistent space on mobile */
    min-height: 50vh; /* Reduce height on mobile */
  }
  .hero-text {
    font-size: 2rem;
  }
  .navbar {
    height: 80px; /* Keep consistent with desktop */
  }
  
  /* Prevent overflow on mobile */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Improve touch targets on mobile */
  button, a, input[type="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Add content-visibility for non-visible sections */
.below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 1px 5000px;
}

/* Ensure content remains visible during font loading */
.font-display-swap {
  font-display: swap;
}

/* For users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-delay: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Fix for focusable elements that need minimum tap target size for mobile */
button, a, select, input, textarea, [role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Fix for small text on mobile devices */
@media (max-width: 768px) {
  body {
    font-size: 16px; /* Minimum font size for readability */
  }
  
  /* Prevent horizontal overflow */
  .container {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: hidden;
  }
  
  /* Improve tap targets */
  .nav-link {
    padding: 12px;
    margin: 4px 0;
  }
}

/* Prevent layout shifts from images */
img {
  aspect-ratio: attr(width) / attr(height);
}

/* Optimize for browser paint */
.optimize-paint {
  will-change: transform;
  transform: translateZ(0);
}