/**
 * Main Stylesheet
 * 
 * This is the main entry point for all CSS styles.
 * It imports all component stylesheets in the correct order
 * to ensure proper cascading and specificity.
 * 
 * Import Order:
 * 1. Core styles (variables, reset, typography)
 * 2. Component styles (navigation, hero, services, etc.)
 * 3. Utility styles (animations, responsive)
 * 
 * @author ShieldStone Labs
 * @version 1.0.0
 */

/* ==========================================================================
   CORE STYLES
   ========================================================================== */

/**
 * CSS Custom Properties and Design Tokens
 * Import first to make variables available to all other stylesheets
 */
@import url('./core/variables.css');

/**
 * CSS Reset and Base Element Styles
 * Establishes consistent baseline across all browsers
 */
@import url('./core/reset.css');

/**
 * Typography System
 * Font imports and typography hierarchy
 */
@import url('./core/typography.css');

/* ==========================================================================
   COMPONENT STYLES
   ========================================================================== */

/**
 * Navigation Component
 * Fixed header with logo, navigation links, and CTA
 */
@import url('./components/navigation.css');

/**
 * Mobile Navigation Component
 * Hamburger menu, slide-out menu, and mobile-specific navigation
 */
@import url('./components/navigation-mobile.css');

/**
 * Hero Section Component
 * Main banner/hero section with headline and CTA
 */
@import url('./components/hero.css');

/**
 * Services Section Component
 * Service cards with featured highlighting
 */
@import url('./components/services.css');

/**
 * Process Timeline Component
 * Step-by-step process visualization with connected timeline
 */
@import url('./components/process.css');

/**
 * About Section Component
 * Personal introduction and expertise showcase
 */
@import url('./components/about.css');

/**
 * Contact Form Component
 * Lead capture form with validation styling
 */
@import url('./components/contact.css');

/* ==========================================================================
   UTILITY STYLES
   ========================================================================== */

/**
 * Animation Utilities
 * Scroll animations, hover effects, and keyframe animations
 */
@import url('./utilities/animations.css');

/**
 * Responsive Design Utilities
 * Responsive visibility, layout, and spacing utilities
 */
@import url('./utilities/responsive.css');

/**
 * Lazy Loading Utilities
 * Performance optimization styles for lazy-loaded content
 */
@import url('./utilities/lazy-loading.css');

/**
 * Responsive Image Utilities
 * Modern image optimization and responsive behavior
 */
@import url('./utilities/responsive-images.css');

/**
 * CSS Containment Utilities
 * Performance optimization through layout, paint, and style containment
 */
@import url('./utilities/containment.css');

/* ==========================================================================
   GLOBAL LAYOUT STYLES
   ========================================================================== */

/**
 * Global section spacing to prevent content cutoff
 * Premium spacing with optimal visual breathing room
 */
.services,
.process,
.about,
.contact {
    padding-top: var(--mobile-space-3xl);
    padding-bottom: var(--mobile-space-2xl);
}

/**
 * Section Header Shared Styles
 * Premium styling for section headers with optimal hierarchy
 */
.section-header {
    max-width: var(--max-width-content);
    margin: 0 auto var(--mobile-space-3xl);
    padding: 0 var(--mobile-padding-container);
    text-align: center;
}

.section-header h2 {
    font-size: var(--mobile-text-3xl); /* Mobile-first approach */
    margin-bottom: var(--mobile-space-lg);
    color: var(--text-primary);
    font-weight: var(--font-weight-normal);
    letter-spacing: -0.025em;
}

.section-header p {
    font-size: var(--mobile-text-base);
    color: var(--text-secondary);
    max-width: 37.5rem; /* 600px */
    margin: 0 auto;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-relaxed);
}

/**
 * Premium Footer Styles
 * Sophisticated footer with elegant typography hierarchy
 */
footer {
    padding: var(--space-2xl) 0;
    background: var(--gradient-primary);
    color: var(--text-inverse);
    text-align: center;
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}

.footer-content {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--padding-container);
}

.footer-copyright {
    font-family: var(--font-display);
    font-size: 1.125rem; /* 18px - larger, more prominent */
    font-weight: var(--font-weight-medium);
    color: var(--white);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.025em;
}

.footer-tagline {
    font-size: 0.875rem; /* 14px - elegant secondary text */
    color: rgba(255, 255, 255, 0.7);
    font-weight: var(--font-weight-light);
    margin-bottom: var(--space-md);
    font-style: italic;
    letter-spacing: 0.25px;
}

.footer-link {
    margin: 0;
}

.footer-link a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.75rem; /* 12px - subtle link */
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
}

.footer-link a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width var(--duration-normal) var(--ease-out);
}

.footer-link a:hover {
    color: var(--accent);
}

.footer-link a:hover::after {
    width: 100%;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS FOR SHARED STYLES
   ========================================================================== */

/**
 * Mobile adjustments for section headers
 */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: var(--space-2xl);
    }
    
    .section-header h2 {
        font-size: 2.25rem; /* 36px */
    }
    
    .section-header p {
        font-size: 1rem; /* 16px */
    }
}

/**
 * Desktop adjustments for section spacing
 */
@media (min-width: 768px) {
    .services,
    .process,
    .about,
    .contact {
        padding-top: var(--desktop-space-4xl);
        padding-bottom: var(--desktop-space-3xl);
    }
    
    .section-header {
        margin-bottom: var(--desktop-space-4xl);
        padding: 0 var(--desktop-padding-container);
    }
    
    .section-header h2 {
        font-size: 3.5rem; /* 56px - matches about section */
        margin-bottom: var(--desktop-space-xl);
    }
    
    .section-header p {
        font-size: var(--desktop-text-lg);
    }
}

/**
 * Large desktop adjustments for section headers
 */
@media (min-width: 1024px) {
    .services,
    .process,
    .about,
    .contact {
        padding-top: 8rem; /* Premium large desktop spacing */
        padding-bottom: 6rem;
    }
    
    .section-header {
        margin-bottom: 5rem;
    }
    
    .section-header h2 {
        font-size: 4rem; /* 64px - matches about section on desktop */
        margin-bottom: 2rem;
    }
    
    .section-header p {
        font-size: var(--desktop-text-xl);
        max-width: 42rem; /* Slightly wider for large screens */
    }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/**
 * Skip to main content link
 * Allows keyboard users to skip navigation
 */
.skip-to-main {
    position: absolute;
    top: -2.5rem; /* -40px */
    left: 0.375rem; /* 6px */
    background: var(--primary);
    color: var(--white);
    padding: 0.5rem;
    text-decoration: none;
    transition: top var(--duration-fast) var(--ease-out);
    z-index: 9999;
}

.skip-to-main:focus {
    top: 0.375rem; /* 6px */
}

/**
 * Focus-visible polyfill support
 * Enhanced focus styles for better accessibility
 */
.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/**
 * GPU acceleration for animated elements
 * Promotes elements to their own layer for better performance
 */
.hero-content h1,
.hero-content .subtitle,
.hero-cta,
.service-card,
.process-step,
.fade-in {
    will-change: transform, opacity;
}

/**
 * Contain layout shifts
 * Helps prevent cumulative layout shift (CLS) issues
 */
.service-card,
.expertise-item,
.process-step {
    contain: layout style paint;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

/**
 * Print-friendly styles
 * Ensures the website prints well
 */
@media print {
    /* Reset colors for print */
    * {
        color: black !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    /* Hide non-essential elements */
    nav,
    .nav-cta,
    .hero-cta,
    .contact-form,
    footer {
        display: none;
    }
    
    /* Adjust spacing for print */
    .hero,
    .services,
    .process,
    .about,
    .contact {
        padding: 1rem 0;
        page-break-inside: avoid;
    }
    
    /* Ensure headings stay with content */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    /* Add URLs after links */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ==========================================================================
   DEVELOPMENT HELPERS
   ========================================================================== */

/**
 * Development mode styles
 * Only included in development builds
 * 
 * Usage: Add 'debug' class to body element
 */
.debug * {
    outline: 1px solid rgba(255, 0, 0, 0.1);
}

.debug *:hover {
    outline: 1px solid rgba(255, 0, 0, 0.5);
}

/**
 * Component boundary indicators
 * Helps visualize component boundaries during development
 */
.debug .hero,
.debug .services,
.debug .process,
.debug .about,
.debug .contact {
    border: 2px dashed rgba(0, 255, 0, 0.5);
    position: relative;
}

.debug .hero::before,
.debug .services::before,
.debug .process::before,
.debug .about::before,
.debug .contact::before {
    content: attr(class);
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 255, 0, 0.8);
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-family: monospace;
}