/* ============================================================================
   FILE: base.css
   ============================================================================
   Global Resets, Typography, and Layout Foundations.
   Ensures cross-browser consistency and defines the core structural
   elements like body, containers, typography, and section wrappers.

   TYPOGRAPHY:
   Uses "Inter" (loaded via Google Fonts in index.html) as the primary
   typeface for its exceptional legibility at small sizes and modern feel.
   Falls back to system fonts for performance if Inter fails to load.
   ============================================================================ */

/* --- 1. GLOBAL RESETS --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html {
    scroll-behavior: auto !important; /* Managed by custom JS smooth scroll */
    -webkit-text-size-adjust: 100%; /* Prevents automatic text resizing on mobile */
}

/* --- 2. BODY & CORE TYPOGRAPHY --- */
body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg-body); 
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
}

h1, h2, h3, h4 { 
    font-weight: 700; 
    letter-spacing: -0.02em; 
    color: var(--text-main); 
}

/* --- 3. GLOBAL IMAGE HANDLING --- */
img { 
    -webkit-user-drag: none; 
    pointer-events: none; 
}

/* Allow interaction only on specific, necessary images */
.logo img, .product-img { 
    pointer-events: auto; 
}

/* --- 4. GLOBAL STRUCTURAL CLASSES --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* STRICT LAYOUT FLOW: Prevents any section from overlapping another */
section { 
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    clear: both;
    overflow: hidden;      
    padding-top: var(--section-padding-top) !important; 
    padding-bottom: var(--section-padding-bottom) !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    text-align: center;
    /* Perfect offset so sticky header doesn't cover the titles */
    scroll-margin-top: 90px; 
}

/* --- 5. GLOBAL SECTION TYPOGRAPHY --- */
.section-title { 
    font-size: 2.5rem; 
    margin-bottom: 15px; 
    color: var(--text-main); 
}

.section-subtitle { 
    font-size: 1.1rem; 
    max-width: 700px; 
    margin: 0 auto 25px auto !important; 
    color: var(--text-muted); 
    line-height: 1.6; 
    font-weight: 500; 
}

/* --- 6. REDUCED MOTION ACCESSIBILITY --- */
/* Respects users who prefer minimal or no animations (vestibular disorders) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- 7. MOBILE RESPONSIVENESS (Base Elements) --- */
@media (max-width: 768px) {
    section { 
        scroll-margin-top: 80px; /* Reduced offset for mobile header */
    }

    .section-title { 
        font-size: 2rem !important; 
    }

    .section-subtitle { 
        font-size: 0.95rem !important; 
        margin-bottom: 30px !important; 
    }
}