/* FixMyBrick Main CSS File */
/* This file imports all CSS modules in the correct order */

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

/* =================================
   2. Layout Components
================================= */
@import 'layout/grid.css';
@import 'layout/header.css';
@import 'layout/footer.css';

/* =================================
   3. UI Components
================================= */
@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/forms.css';
@import 'components/carousel.css';
@import 'components/breadcrumb.css';
@import 'components/services-grid.css';
@import 'components/team.css';
@import 'components/cta.css';
@import 'components/feature-grid.css';
@import 'components/blog-grid.css';
@import 'components/testimonials.css';
@import 'components/stats.css';
@import 'components/faq-accordion.css';

/* =================================
   4. Page-Specific Styles
================================= */
/* These will be added as needed for specific page layouts */
@import 'pages/home.css';
@import 'pages/services.css';
@import 'pages/locations.css';
@import 'pages/blog.css';
@import 'pages/blog-index.css';

/* =================================
   5. Utility Classes
================================= */
@import 'utilities/helpers.css';
@import 'utilities/spacing.css';

/* =================================
   6. Legacy Styles (Temporary)
================================= */
/* Legacy style.css has been removed - all styles migrated to modular system */

/* =================================
   Custom Overrides
================================= */
/* Any site-specific overrides that don't fit into the modular structure */

/* Prevent horizontal overflow globally */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Ensure all elements respect viewport bounds */
* {
    box-sizing: border-box;
}

/* Prevent any element from extending beyond viewport */
.container,
.section,
main,
header,
footer {
    max-width: 100%;
}

/* Additional overflow protection for common layout elements */
.grid,
.flex,
.services-grid,
.testimonials-grid,
.contact-grid,
.locations-grid {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure images and media don't cause overflow */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Ensure smooth transitions during page loads */
body {
    opacity: 1;
    animation: fade-in 0.3s ease-out;
}

/* Print-specific adjustments */
@media print {
    /* Hide unnecessary elements */
    .no-print,
    .header,
    .footer {
        display: none !important;
    }
    
    /* Ensure content fills the page */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    /* Force background colors for important elements */
    .print-bg {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #D00B0E;
        --color-text: #000;
        --color-background: #fff;
        --color-border: #000;
    }
    
    .btn {
        border-width: 2px;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =================================
   Header Light Theme Overrides
   - Light background with dark text for better readability
   - Appended after all imports to ensure precedence
================================= */
.header {
    background: rgba(255, 255, 255, 0.98) !important;
    color: var(--color-text) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header.is-scrolled {
    background: var(--color-background) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.phone-bar {
    background: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

.main-nav {
    background: var(--color-background) !important;
}

.nav-link,
.phone-link,
.mobile-nav-link {
    color: var(--color-text) !important;
}

.nav-link:hover,
.nav-link:focus,
.mobile-nav-link:hover,
.mobile-nav-link:focus,
.phone-link:hover,
.phone-link:focus {
    color: var(--color-primary) !important;
    background-color: rgba(var(--color-primary-rgb), 0.05) !important;
    text-decoration: none;
}

.location-address,
.work-desc {
    color: var(--color-text-light) !important;
}

.hamburger-line {
    background-color: var(--color-text) !important;
}

.dropdown-menu {
    background: var(--color-background) !important;
    border-color: var(--color-border-light) !important;
}

.dropdown-item {
    color: var(--color-text) !important;
}

.dropdown-item:hover {
    background-color: var(--color-surface) !important;
    color: var(--color-primary) !important;
}

/* =================================
   Navigation Enhancements
   - Clean navigation styling without heavy overrides
================================= */

/* Ensure dropdowns work properly */
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}