/* =========================================
   MAIN CSS - Modular CSS System
   ========================================= 
   
   This file imports all CSS modules in order:
   1. Base - Resets, variables, typography
   2. Layout - Grids, containers, responsive
   3. Components - Reusable UI components
   4. Pages - Page-specific styles
   
   STRUCTURE:
   ├── base/
   │   ├── variables.css      - CSS custom properties
   │   ├── reset.css          - HTML reset & base styles
   │   └── typography.css     - Font utilities & text styles
   ├── layout/
   │   ├── grid.css           - Container & grid system
   │   ├── responsive.css     - Media queries & breakpoints
   │   └── utilities.css      - Margin, padding, display helpers
   ├── components/
   │   ├── hero.css           - Hero sections
   │   ├── buttons.css        - Button styles
   │   ├── cards.css          - Card components
   │   ├── forms.css          - Form inputs & controls
   │   └── nav.css            - Navigation & header
   └── pages/
       ├── home.css           - Home page specific
       ├── contact.css        - Contact page specific
       ├── pages.css          - Product pages specific
       └── about.css          - About & misc pages

=========================================== */

/* --- BASE LAYER - Resets, Variables, Foundation --- */
@import url('./base/variables.css');
@import url('./base/typography.css');

/* --- LAYOUT LAYER - Grid System & Responsive --- */
@import url('./layout/grid.css');
@import url('./layout/responsive.css');
@import url('./layout/utilities.css');

/* --- COMPONENTS LAYER - Reusable UI Elements --- */
@import url('./components/hero.css');
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/forms.css');
@import url('./components/nav.css');
@import url('./components/breadcrumb.css');

/* --- PAGES LAYER - Page-Specific Styles --- */
@import url('./pages/home.css');
@import url('./pages/contact.css');
@import url('./pages/pages.css');
@import url('./pages/about.css');
@import url('./pages/products.css');
@import url('./pages/olives.css');
@import url('./pages/oil.css');
@import url('./pages/dairy.css');
@import url('./pages/catalog.css');
@import url('./pages/footer.css');
@import url('./pages/legal.css');

/* =========================================== 
   FOOTER & LAYOUT SPECIFIC STYLES
   =========================================== */

footer {
    color: var(--color-text-light);
    padding: 0;
    margin-top: 0;
}

/* Sidebar utility */
.sidebar {
    background-color: var(--color-footer-sidebar);
    color: var(--color-text-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
}

.sidebar h3 {
    color: var(--color-gold);
    margin-bottom: var(--spacing-md);
}

/* Skip to content link (accessibility) */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-gold);
    color: white;
    padding: 8px 16px;
    border-radius: 0 0 4px 0;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* Smooth scrolling support */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Print styles */
@media print {
    nav,
    footer,
    .btn-see-all,
    .contact-form,
    .sidebar {
        display: none;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    body {
        background: white;
        color: black;
    }
}