/* 
 * Modern Renovation Section Styling - Enhanced 2025 Version
 * Theme-aware styles using CSS custom properties
 * Works with the theme-components.css system
 */

/* Import component styles */
@import url('components/variables.css');
@import url('components/base.css');
@import url('components/hero.css');
@import url('components/services.css');
@import url('components/portfolio.css');
@import url('components/calculator.css');
@import url('components/trust.css');
@import url('components/animations.css');

/* Base Styles - Theme Aware */
.renovations-page-wrapper {
  font-family: var(--font-secondary);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ==========================================================================
   SECTION SPACING & ISOLATION SYSTEM
   ========================================================================== */
/* Ensure all sections are properly separated and don't overlap */
.renovations-page-wrapper > section {
  position: relative;
  isolation: isolate; /* Create new stacking context for each section */
  width: 100%;
  clear: both;
}

/* First section after hero needs top margin to prevent overlap */
.renovations-page-wrapper > section:first-of-type {
  margin-top: 0;
}

.renovations-page-wrapper > section:not(:first-of-type) {
  margin-top: 0; /* Sections use padding instead of margin */
}

/* Typography Enhancements */
.renovations-page-wrapper h1,
.renovations-page-wrapper h2,
.renovations-page-wrapper h3,
.renovations-page-wrapper h4,
.renovations-page-wrapper h5,
.renovations-page-wrapper h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

/* Section Headers */
.section-header {
  margin-bottom: var(--space-16);
  position: relative;
  z-index: 2; /* Above section backgrounds */
  width: 100%;
  text-align: center;
}

.section-title {
  font-family: var(--font-primary);
  font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 2; /* Ensure titles are always visible */
  display: block; /* Ensure it's a block element */
  width: 100%;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: calc(-1 * var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--gradient-partner);
  border-radius: var(--radius-full);
  z-index: 1; /* Behind text */
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: var(--line-height-relaxed);
  position: relative;
  z-index: 2; /* Ensure subtitles are always visible */
}

/* Additional utility for form section */
.quote-section {
  padding: var(--space-20) 0;
  background-color: var(--bg-surface);
}

/* Form Styles Override for Renovation Page */
.renovation-inquiry-form .form-control {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-medium);
}

.renovation-inquiry-form .btn-submit {
    width: 100%;
    padding: var(--space-4);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Stats Section Styles */
.stats-section {
    position: relative;
}

.stat-item {
    transition: transform var(--transition-base);
}

.stat-item:hover {
    transform: translateY(-5px);
}

/* Testimonials Styles */
.testimonial-card {
    border-left: 4px solid var(--renovation-partner-color);
}

.testimonial-author img {
    border: 2px solid var(--border-light);
}

/* Trust Section Styles */
.trust-item {
    padding: var(--space-6);
    transition: color var(--transition-base);
}

.trust-item:hover {
    color: var(--renovation-partner-color);
}

.trust-item i {
    transition: transform var(--transition-base);
}

.trust-item:hover i {
    transform: scale(1.1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-title {
        font-size: var(--font-size-3xl);
    }
    
    .renovations-page-wrapper > section {
        padding: var(--space-12) 0;
    }
}