/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 /* styles.css */
body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

/* Layout shift prevention */
#signup-form-container {
  min-height: 245px;
  contain: layout;
  display: flex;
  flex-direction: column;
}

#signup-form {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Preventing layout shifts for images */
img {
  max-width: 100%;
  height: auto;
  transform: translateZ(0); /* Hardware acceleration */
}

/* Image container fixes */
.rounded-xl.overflow-hidden {
  overflow: hidden; /* Ensure content doesn't spill out */
  background-color: white; /* Fallback background color */
}

.rounded-xl.overflow-hidden img {
  display: block; /* Remove potential spacing */
  width: 100%; /* Ensure image fills container */
  object-fit: cover; /* Maintain aspect ratio while filling */
}

/* Mobile Optimizations */
@media (max-width: 768px) {
  #signup-form-container {
    min-height: 230px;
  }
  
  .container {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Custom color overrides if needed */
.bg-blue-900 {
  background-color: #003366 !important;
}

.bg-lime-500 {
  background-color: #00FF00 !important;
}

.bg-lime-600 {
  background-color: #00CC00 !important; /* Slightly darker for hover */
}

.text-gray-300 {
  color: #CCCCCC !important;
}

.bg-gray-300 {
  background-color: #CCCCCC !important;
}

.bg-gray-100 {
  background-color: #F5F5F5 !important; /* Slightly lighter than #CCCCCC for body */
}

.bg-gray-200 {
  background-color: #E5E5E5 !important; /* Footer background */
}

.text-gray-600 {
  color: #666666 !important;
}