/* ============================================
   MAIN CSS - PRODUCTION READY
   Optimized Imports | Clean Organization | Professional
   ============================================ */

/* BASE STYLES */
@import 'base.css';

/* LAYOUT */
@import 'layout.css';

/* ============================================
   COMPONENTS - CRITICAL IMPORT ORDER
   DO NOT CHANGE THIS ORDER
   ============================================ */

/* Utility animations and effects */
@import 'components/typing.css';
@import 'components/navbar.css';

/* Hero section - STANDALONE, HIGH PRIORITY */
@import 'components/hero.css';

/* Content sections */
@import 'components/about.css';
@import 'components/services.css';
@import 'components/cards.css';
@import 'components/buttons.css';

/* Modal must come BEFORE forms to avoid conflicts */
@import 'components/modals.css';
@import 'components/demo-modal.css';
@import 'components/forms.css';

/* Additional sections */
@import 'components/filters.css';
@import 'components/footer.css';
@import 'components/emphasis.css';
@import 'components/process.css';
@import 'components/outcomes.css';

/*Pages*/
@import 'components/techproducts.css';

/* ============================================
   BREADCRUMB STYLES
   ============================================ */

.breadcrumb {
    font-size: 0.9rem;
    margin-bottom: 2rem;
    color: var(--gray-400);
}

.breadcrumb a {
    color: var(--gold);
    text-decoration: none;
    transition: all 0.3s ease;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .separator {
    margin: 0 0.5rem;
    color: var(--gray-500);
}

.breadcrumb .current {
    color: var(--white);
    font-weight: 500;
}

/* ============================================
   GLOBAL UTILITY CLASSES
   ============================================ */

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.text-center {
    text-align: center;
}

.text-gold {
    color: #C9A227;
}

.text-white {
    color: white;
}

.bg-black {
    background-color: #000;
}

.bg-gold {
    background-color: #C9A227;
}

/* ============================================
   MARGIN UTILITIES
   ============================================ */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* ============================================
   PADDING UTILITIES
   ============================================ */

.p-0 { padding: 0; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

/* ============================================
   SECTION SPACING
   ============================================ */

.process-section {
    padding: 60px 0 !important;
}

@media (min-width: 769px) {
    .process-section {
        padding: 80px 0 !important;
    }
}

/* ============================================
   GLOBAL STATE CLASSES
   ============================================ */

/* Prevent scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* ============================================
   HERO SECTION OVERRIDES
   ============================================ */

.hero-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    z-index: 1;
}

.typing-bar {
    position: relative;
    z-index: 10;
}

/* ============================================
   GLOBAL BODY & OVERFLOW
   ============================================ */

body {
    overflow-x: hidden;
}

/* ============================================
   MOBILE RESPONSIVE - HERO FIXES
   ============================================ */

@media (max-width: 768px) {
    .hero-section {
        margin-top: 0;
        padding-top: 0;
    }
    
    .typing-bar {
        position: relative;
        z-index: 10;
    }
}

/* ============================================
   ACCESSIBILITY & PRINT STYLES
   ============================================ */

@media print {
    .hero-nav,
    .typing-bar {
        display: none !important;
    }
}