/* --------------------------------------------------
   Enhance Home Solutions - Modular CSS System
   Main entry point for all styles
   
   Architecture:
   1. Base - Foundation styles
   2. Components - Reusable UI components  
   3. Layouts - Page layout patterns
   4. Pages - Page-specific styles
   5. Responsive - Media queries
   
   Perfect for programmatic SEO scaling
-------------------------------------------------- */

/* ===== BASE LAYER ===== */
/* Foundation styles - load first */
/* External fonts must be imported before any other rules */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
@import url('base/variables.css');
@import url('base/service-variables.css');
@import url('base/reset.css');
@import url('base/typography.css');
@import url('base/utilities.css');

/* ===== COMPONENTS LAYER ===== */
/* Reusable UI components */
@import url('components/buttons.css');
@import url('components/navigation.css');
@import url('components/forms.css');
@import url('components/enhanced-forms.css');
@import url('components/cards.css');
@import url('components/testimonials.css');
@import url('components/animations.css');
@import url('components/premium-interactions.css');

/* Service-specific components - consolidated for reliable loading */
@import url('components/service-overview.css');
@import url('components/trust-social-proof.css');
@import url('components/service-enhancements.css');
/* Newly included to reduce duplication from pages/service.css */
@import url('components/service-hero.css');
@import url('components/service-buttons.css');
@import url('components/service-stats-grids.css');
@import url('components/process-timeline.css');
@import url('components/contact-forms.css');
@import url('components/success-stories.css');
@import url('components/chat-widget.css');
@import url('components/gallery.css');
@import url('components/analytics.css');
@import url('components/service-filter.css');

/* ===== LAYOUTS LAYER ===== */
/* Page layout patterns */
@import url('layouts/hero.css');
@import url('layouts/sections.css');
@import url('layouts/bento.css');
@import url('layouts/footer.css');

/* ===== PAGES LAYER ===== */
/* Page-specific styles */
@import url('pages/home.css');
@import url('pages/service.css');
@import url('pages/legal.css');
@import url('pages/gallery.css');
@import url('pages/solar-template.css');
@import url('pages/city-pages.css');

/* ===== RESPONSIVE LAYER ===== */
/* Media queries - load last to ensure proper cascade */
@import url('responsive/breakpoints.css');
@import url('responsive/service-accessibility.css');

/* --------------------------------------------------
   Global Enhancements
   Site-wide improvements and utilities
-------------------------------------------------- */

/* Smooth scrolling for the entire site */
html {
    scroll-behavior: smooth;
}

/* Enhanced focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--secondary-green);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Print optimization */
@media print {
    /* Hide non-essential elements when printing */
    .navbar,
    .mobile-call-button,
    .footer,
    .btn,
    button,
    .animations {
        display: none !important;
    }

    /* Ensure readable text - but exclude testimonial elements to prevent black-on-black */
    body {
        background: white !important;
    }

    *:not(.testimonial-card):not(.testimonial-text):not(.testimonial-author-name):not(.testimonial-content):not(.testimonial-avatar):not(.testimonial-author-info):not(.testimonial-author-location):not(.testimonials):not(.testimonials-hero):not(.testimonials-scorecard):not(.testimonials-highlights) {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Apply print-friendly colors to main content areas only */
    .service-hero,
    .contact-section,
    main > section:not(.testimonials),
    article:not(.testimonial-card),
    .content-wrapper {
        background: white !important;
        color: black !important;
    }
}

/* Performance optimizations */
.hero-image,
.hero-video,
.service-hero-image {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Preload critical fonts */

/* --------------------------------------------------
   Critical Contrast Fixes
   Must load last to override dark mode issues
-------------------------------------------------- */

/* Force correct text colors in light mode (default) */
.service-overview .section-title,
.service-overview .service-description h2,
.service-overview .service-description h3,
.service-overview h3,
.service-benefits .benefits-title,
.water-concerns h3 {
    color: var(--text-primary) !important;
}

.service-overview .section-subtitle,
.service-overview .service-description p,
.service-overview p,
.concern-item,
.concern-item span {
    color: var(--text-secondary) !important;
}

/* Light theme defaults for roofing sections */
[data-theme='light'] .roofing-services .section-title,
[data-theme='light'] .roofing-services h1,
[data-theme='light'] .roofing-services h2,
[data-theme='light'] .roofing-services h3,
[data-theme='light'] .roofing-materials .section-title,
[data-theme='light'] .roofing-materials h2,
[data-theme='light'] .roofing-materials h3,
[data-theme='light'] .design-process .section-title,
[data-theme='light'] .design-process h2,
[data-theme='light'] .design-process h3 {
    color: var(--text-primary) !important;
}

[data-theme='light'] .roofing-services .section-subtitle,
[data-theme='light'] .roofing-services p,
[data-theme='light'] .roofing-materials .section-subtitle,
[data-theme='light'] .roofing-materials p,
[data-theme='light'] .design-process .section-subtitle,
[data-theme='light'] .design-process p {
    color: var(--text-secondary) !important;
}

@media (prefers-color-scheme: light) {
    html:not([data-theme='dark']) .roofing-services .section-title,
    html:not([data-theme='dark']) .roofing-services h1,
    html:not([data-theme='dark']) .roofing-services h2,
    html:not([data-theme='dark']) .roofing-services h3,
    html:not([data-theme='dark']) .roofing-materials .section-title,
    html:not([data-theme='dark']) .roofing-materials h2,
    html:not([data-theme='dark']) .roofing-materials h3,
    html:not([data-theme='dark']) .design-process .section-title,
    html:not([data-theme='dark']) .design-process h2,
    html:not([data-theme='dark']) .design-process h3 {
        color: var(--text-primary) !important;
    }
    html:not([data-theme='dark']) .roofing-services .section-subtitle,
    html:not([data-theme='dark']) .roofing-services p,
    html:not([data-theme='dark']) .roofing-materials .section-subtitle,
    html:not([data-theme='dark']) .roofing-materials p,
    html:not([data-theme='dark']) .design-process .section-subtitle,
    html:not([data-theme='dark']) .design-process p {
        color: var(--text-secondary) !important;
    }
}

/* Dark theme text for roofing sections */
[data-theme='dark'] .roofing-services .section-title,
[data-theme='dark'] .roofing-services h1,
[data-theme='dark'] .roofing-services h2,
[data-theme='dark'] .roofing-services h3,
[data-theme='dark'] .roofing-materials .section-title,
[data-theme='dark'] .roofing-materials h2,
[data-theme='dark'] .roofing-materials h3,
[data-theme='dark'] .design-process .section-title,
[data-theme='dark'] .design-process h2,
[data-theme='dark'] .design-process h3 {
    color: #ffffff !important;
}

[data-theme='dark'] .roofing-services .section-subtitle,
[data-theme='dark'] .roofing-services p,
[data-theme='dark'] .roofing-materials .section-subtitle,
[data-theme='dark'] .roofing-materials p,
[data-theme='dark'] .design-process .section-subtitle,
[data-theme='dark'] .design-process p {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Only white text in actual dark mode */
@media (prefers-color-scheme: dark) {
    html:not([data-theme='light']) .service-overview .section-title,
    html:not([data-theme='light']) .service-overview .service-description h2,
    html:not([data-theme='light']) .service-overview .service-description h3,
    html:not([data-theme='light']) .service-overview h3,
    html:not([data-theme='light']) .water-concerns h3,
    html:not([data-theme='light']) .service-benefits .benefits-title,
    html:not([data-theme='light']) .benefits-title {
        color: #ffffff !important;
    }
    html:not([data-theme='light']) .service-overview .section-subtitle,
    html:not([data-theme='light']) .service-overview .service-description p,
    html:not([data-theme='light']) .service-overview p,
    html:not([data-theme='light']) .concern-item,
    html:not([data-theme='light']) .concern-item span {
        color: rgba(255, 255, 255, 0.92) !important;
    }
}

/* Explicit dark theme override via data attribute */
[data-theme='dark'] .service-overview .section-title,
[data-theme='dark'] .service-overview .service-description h2,
[data-theme='dark'] .service-overview .service-description h3,
[data-theme='dark'] .service-overview h3,
[data-theme='dark'] .water-concerns h3,
[data-theme='dark'] .service-benefits .benefits-title,
[data-theme='dark'] .benefits-title {
    color: #ffffff !important;
}

[data-theme='dark'] .service-overview .section-subtitle,
[data-theme='dark'] .service-overview .service-description p,
[data-theme='dark'] .service-overview p,
[data-theme='dark'] .concern-item,
[data-theme='dark'] .concern-item span {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* --------------------------------------------------
   Light-mode emergency guarantee fix
   Ensure readable text on light backgrounds in emergency section
-------------------------------------------------- */

/* Use dark text and solid light surface in light mode only */
[data-theme='light'] .emergency-services .emergency-guarantee,
html:not([data-theme='dark']) .emergency-services .emergency-guarantee {
    background: var(--surface-elevated-2);
    border: 1px solid var(--border-soft);
}

[data-theme='light'] .emergency-services .emergency-guarantee span,
html:not([data-theme='dark']) .emergency-services .emergency-guarantee span {
    color: var(--text-primary) !important;
}

/* --------------------------------------------------
   Module System Benefits:
   
   ✅ Maintainable - Each module has a single responsibility
   ✅ Scalable - Easy to add new components and pages  
   ✅ Performance - Load only what you need
   ✅ Team-friendly - Multiple developers can work on different modules
   ✅ Cache-friendly - Individual modules can be cached separately
   ✅ SEO-ready - Perfect for programmatic page generation
   
   Usage for new pages:
   1. Create page-specific CSS in pages/
   2. Add @import to main.css
   3. Use existing components and layouts
   4. Override with page-specific styles as needed
   
   Usage for new components:
   1. Create component in components/
   2. Follow BEM-like naming
   3. Use CSS custom properties from variables.css
   4. Add @import to main.css
-------------------------------------------------- */

/* --------------------------------------------------
   FINAL OVERRIDE: Service Hero Mobile Centering
   This must be at the end to override all other styles
-------------------------------------------------- */
@media (max-width: 768px) {
    .service-hero {
        text-align: center !important;
    }

    .service-hero .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .service-hero-content {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .service-hero-title {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .service-hero-title::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .service-hero-subtitle {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .service-hero-buttons {
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .service-hero-buttons .btn {
        width: 100% !important;
        max-width: 400px !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* --------------------------------------------------
   Testimonials now use CSS Grid layout
   See assets/css/components/testimonials.css for all styling
-------------------------------------------------- */