/* ===============================================
   KARDERA WEBSITE - MODULAR CSS SYSTEM
   ===============================================
   
   This is the main CSS file that imports all modular components.
   Each file is organized by purpose for better maintainability.
   
   Structure:
   - Base: Core styles (variables, reset, typography, bootstrap overrides)
   - Components: Reusable UI components (navbar, footer, cards, buttons)
   - Layout: Page layout (hero, sections)
   - Pages: Page-specific styles (home, about, contact)
   - Utilities: Helper classes (responsive, animations)
   
   =============================================== */

/* === BASE STYLES === */
@import 'base/variables.css';
@import 'base/reset.css';
@import 'base/typography.css';
@import 'base/bootstrap-overrides.css';

/* === COMPONENT STYLES === */
@import 'components/navbar.css';
@import 'components/footer.css';
@import 'components/cards.css';
@import 'components/buttons.css';
@import 'components/whatsapp.css';

/* === LAYOUT STYLES === */
@import 'layout/hero.css';
@import 'layout/sections.css';

/* === PAGE STYLES === */
@import 'pages/home.css';
@import 'pages/about.css';
@import 'pages/contact.css';

/* === UTILITY STYLES === */
@import 'utilities/responsive.css';
@import 'utilities/animations.css';
@import 'utilities/kardera-utils.css';
@import 'utilities/utils.css';

/* ===============================================
   LEGACY COMPATIBILITY & CUSTOM OVERRIDES
   =============================================== */

/* Ensure proper z-index stacking */
.whatsapp-float {
    z-index: 1050; /* Above Bootstrap modals but below tooltips */
}

.navbar {
    z-index: 1030; /* Bootstrap standard for fixed navbar */
}

/* Global smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Print styles */
@media print {
    .whatsapp-float,
    .navbar,
    .footer {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .hero,
    .page-header {
        background: white !important;
        color: black !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --primary: #B91C38;
        --secondary: #D0D0D0;
        --accent: #B8860B;
        --gray: #666666;
    }
}

/* Dark mode support (future enhancement) */
@media (prefers-color-scheme: dark) {
    /* Dark mode variables would go here if implemented */
    /* Currently not implemented per project requirements */
}

/* Focus management for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary);
    color: var(--white);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1060;
    transition: var(--transition);
}

.skip-link:focus {
    top: 6px;
}

/* Performance optimization */
.fade-in,
.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right {
    will-change: opacity, transform;
}

.hover-lift,
.hover-scale {
    will-change: transform;
}

/* Remove will-change after animation */
.animation-complete {
    will-change: auto;
}