/* =============================================
   MAIN.CSS - Master CSS Import System
   Save as: scripts/CSS/main.css
   
   TROUBLESHOOTING CHECKLIST:
   1. All CSS files must be in: scripts/CSS/
   2. Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
   3. Check browser console for 404 errors
   4. Verify file names match exactly (case-sensitive)
   ============================================= */

/* Test: This comment should appear if main.css loads */
/* If variables don't work, check variables.css path */

/* =============================================
   1. FOUNDATION - Core Design System
   ============================================= */

@import url('variables.css');
@import url('reset.css');
@import url('typography.css');

/* =============================================
   2. STRUCTURE - Layout & Containers
   ============================================= */

@import url('containers.css');
@import url('layout.css');
@import url('sections.css');
@import url('navbar.css');

/* =============================================
   3. COMPONENTS - Reusable UI Elements
   ============================================= */

@import url('components.css');

/* =============================================
   4. FEATURES - Specialized Styling
   ============================================= */

@import url('services.css');
@import url('service-features.css');
@import url('order-form.css');
@import url('blog.css');

/* =============================================
   5. RESPONSIVE - Breakpoints & Adaptivity
   ============================================= */

@import url('responsive.css');

/* =============================================
   6. MOTION - Animations & Transitions
   ============================================= */

@import url('animations.css');

/* =============================================
   DEBUG: Add this temporary rule to verify main.css loads
   If the body gets a red border, main.css is working
   ============================================= */

/* UNCOMMENT TO TEST:
body {
    border: 5px solid red !important;
}
*/

/* =============================================
   BROWSER CONSOLE DEBUGGING:
   
   Open DevTools (F12) and check Console tab for:
   - "Failed to load resource" = File path wrong
   - "CORS policy" = Server configuration issue
   - No errors but styles missing = Cascade/specificity issue
   
   Check Network tab to see which CSS files loaded:
   - Green/200 status = File loaded successfully
   - Red/404 status = File not found
   ============================================= */