/* ===================================
   AMAR TU ESENCIA - MAIN STYLESHEET
   Modular CSS Architecture
   =================================== */

/* Base Styles */
@import './base/variables.css';
@import './base/reset.css';
@import './base/typography.css';

/* Layout */
@import './layout/grid.css';

/* Components */
@import './components/buttons.css';
@import './components/navigation.css';
@import './components/forms.css';

/* Sections */
@import './sections/about.css';
@import './sections/services.css';
@import './sections/interactive-tools.css';
@import './sections/contact.css';
@import './sections/footer.css';

/* Utilities */
@import './utils/accessibility.css';
@import './utils/lazy-loading.css';
@import './utils/utilities.css';
@import './utils/animations.css';
@import './utils/mobile.css';

/* Page-specific styles that need to be modularized */

/* Hero Section */
.hero-section {
  /* Background with optimized image support and gradient fallback */
  background: 
    linear-gradient(135deg, rgba(123, 104, 238, 0.8) 0%, rgba(152, 216, 200, 0.8) 100%);
  /* Fallback gradient if image doesn't load */
  background-color: var(--color-primary);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* WebP support for hero background */
.webp-supported .hero-section {
  background-image: 
    linear-gradient(135deg, rgba(123, 104, 238, 0.8) 0%, rgba(152, 216, 200, 0.8) 100%),
    url('../images/hero-background-1920.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* JPEG fallback for hero background */
.webp-not-supported .hero-section,
.hero-section {
  background-image: 
    linear-gradient(135deg, rgba(123, 104, 238, 0.8) 0%, rgba(152, 216, 200, 0.8) 100%),
    url('../images/hero-background-1920.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Responsive hero backgrounds */
@media (max-width: 768px) {
  .webp-supported .hero-section {
    background-image: 
      linear-gradient(135deg, rgba(123, 104, 238, 0.8) 0%, rgba(152, 216, 200, 0.8) 100%),
      url('../images/hero-background-800.webp');
  }
  
  .webp-not-supported .hero-section,
  .hero-section {
    background-image: 
      linear-gradient(135deg, rgba(123, 104, 238, 0.8) 0%, rgba(152, 216, 200, 0.8) 100%),
      url('../images/hero-background-800.jpg');
  }
}

/* Alternative background pattern if no image is available */
.hero-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  z-index: 0;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Dark overlay for better text readability */
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.hero-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
  color: var(--color-white);
}

.hero-subtitle {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-6);
  opacity: 0.9;
  line-height: var(--line-height-relaxed);
}

@media (max-width: 768px) {
  .hero-title {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-3);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-4);
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: var(--font-size-3xl);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-base);
  }
  
  .hero-container {
    padding: 0 var(--space-3);
  }
}

/* TODO: The following sections need to be modularized into separate files:
   - About Section (about.css)
   - Services Section (services.css) 
   - Interactive Tools (interactive-tools.css)
   - Contact Section (contact.css)
   - Animations (animations.css)
   
   For now, they remain in this file to maintain functionality
   while we transition to the modular architecture.
*/