/* ============================================
   PROSPEKT PRODUCT WORKS - MAIN CSS
   Master Stylesheet - Imports All Modules
   ============================================ */

/*
   HOW TO USE THIS FILE:
   ---------------------
   This is the master CSS file that imports all modular stylesheets.
   Link ONLY this file in your HTML:
   
   <link rel="stylesheet" href="css/main.css">
   
   The import order matters! Variables must come first, reset second,
   then typography, layout, components, and sections last.
   
   EDITING WORKFLOW:
   -----------------
   1. Never edit this file directly (except to add/remove imports)
   2. Edit the individual module files:
      - variables.css   → Colors, spacing, typography scales
      - reset.css       → Browser resets, base element styles
      - typography.css  → Headings, body text, font styles
      - layout.css      → Containers, grids, spacing utilities
      - components.css  → Buttons, cards, icons, header, footer
      - sections.css    → Page-specific sections (hero, process, FAQ, etc.)
   
   ADDING CUSTOM STYLES:
   ---------------------
   - For quick overrides, add them to the "Custom Overrides" section below
   - For larger additions, create a new module (e.g., custom.css) and import it
*/

/* ========================================
   CORE MODULES (Required - Do Not Reorder)
   ======================================== */

/* 1. Variables - Must load first */
@import url("variables.css");

/* 2. Reset - Normalizes browser defaults */
@import url("reset.css");

/* 3. Typography - Text styles and headings */
@import url("typography.css");

/* 4. Layout - Grid systems and containers */
@import url("layout.css");

/* 5. Components - Reusable UI elements */
@import url("components.css");

/* 6. Sections - Page-specific layouts */
@import url("sections.css");
/* 7. Hero Tabs - Interactive hero section */
@import url("hero-tabs.css");

/* ========================================
   ADOBE FONTS (Typekit)
   ======================================== */

/* 
   Your Adobe Fonts are loaded via this external stylesheet.
   Fonts used: minion-3, acumin-pro, bahnschrift-condensed
   Make sure your Adobe Fonts account remains active.
*/
@import url("https://use.typekit.net/aax4fbw.css");

/* ========================================
   CUSTOM OVERRIDES & ADDITIONS
   ======================================== */

/* 
   Add any quick custom styles below this line.
   For larger additions, create a separate CSS file and import it.
   
   Example custom styles:
*/

/* Custom work grid scrollbar styling (optional) */
/*
.work-grid::-webkit-scrollbar {
    height: 8px;
}

.work-grid::-webkit-scrollbar-track {
    background: var(--border-subtle);
    border-radius: 4px;
}

.work-grid::-webkit-scrollbar-thumb {
    background: var(--copper);
    border-radius: 4px;
}

.work-grid::-webkit-scrollbar-thumb:hover {
    background: var(--soft-copper);
}
*/

/* ========================================
   PRINT STYLES (Optional)
   ======================================== */

@media print {
  /* Hide non-essential elements when printing */
  .header,
  .footer,
  .btn,
  .contact-buttons {
    display: none !important;
  }

  /* Ensure good contrast for printing */
  body {
    background-color: white;
    color: black;
  }

  /* Remove shadows and transitions */
  * {
    box-shadow: none !important;
    transition: none !important;
  }

  /* Page breaks */
  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }

  img {
    page-break-inside: avoid;
  }
}

/* ========================================
   UTILITY: DARK MODE SUPPORT (Future)
   ======================================== */

/*
   If you want to add dark mode support in the future,
   uncomment and customize this section:
*/

/*
@media (prefers-color-scheme: dark) {
    :root {
        --canvas: rgb(17, 17, 17);
        --rich-black: rgb(245, 238, 228);
        --text-primary: rgb(245, 238, 228);
        --text-invert: rgb(17, 17, 17);
        --bg-primary: rgb(17, 17, 17);
        --border-subtle: rgb(50, 50, 50);
    }
}
*/

/* ========================================
   END OF MAIN.CSS
   ======================================== */

/*
   TROUBLESHOOTING:
   ----------------
   If styles aren't loading:
   1. Check browser console for 404 errors
   2. Verify file paths are correct (all CSS files in same /css/ folder)
   3. Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
   4. Check that main.css is properly linked in HTML <head>
   
   VS CODE TIPS:
   -------------
   - Install "Live Server" extension for instant preview
   - Install "CSS Peek" to jump to CSS definitions
   - Install "IntelliSense for CSS" for auto-completion
   - Use Ctrl+P (Cmd+P on Mac) to quickly open CSS files
   
   FILE ORGANIZATION:
   ------------------
   prospekt-product-works/
   ├── index.html
   ├── css/
   │   ├── main.css          ← You are here
   │   ├── variables.css
   │   ├── reset.css
   │   ├── typography.css
   │   ├── layout.css
   │   ├── components.css
   │   └── sections.css
   ├── js/
   │   └── main.js
   └── images/
       └── ...
*/