/* =========================================
   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');
@import url('./components/section-divider.css');
@import url('./components/cookie-banner.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?v=20260515-mobile-products');
@import url('./pages/olives.css');
@import url('./pages/oil.css?v=20260515-mobile-products');
@import url('./pages/dairy.css');
@import url('./pages/catalog.css');
@import url('./pages/footer.css');
@import url('./pages/legal.css');

/* --- SHARED SECTION TREATMENTS - loaded last on purpose --- */
@import url('./components/section-background.css');
@import url('./components/rain.css');

@media (max-width: 767px) {
    .dr-hero .hero-scroll-indicator,
    .op-hero--dairy .hero-scroll-indicator {
        display: none !important;
    }
}

/* iOS/Safari can render fixed WebP backgrounds incorrectly on older iPads. */
@supports (-webkit-touch-callout: none) {
    .section-bg:not(.section-bg--product-cta),
    .section-bg-texture {
        background-attachment: scroll !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .section-bg:not(.section-bg--product-cta),
    .section-bg-texture {
        background-attachment: scroll !important;
    }
}

/* =========================================== 
   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;
    }
}


/* ── Scroll indicator (shared) ───────────────────────────── */
.hero-scroll-indicator-black {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    animation: bounce 2s infinite;
}

.hero-scroll-indicator-black span {
    color: rgb(0, 0, 0);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
    display: block;
}

@media (max-width: 640px) {
    .hero-scroll-indicator span,
    .hero-scroll-indicator-black span,
    .hero-scroll-indicator--light span,
    .hero-scroll-indicator--dark span {
        font-size: 0.62rem !important;
        letter-spacing: 0.08em !important;
        white-space: nowrap;
    }
}