/* Bootstrap classes used in index.html - override for single breakpoint at 768px */

/* Container */
.container {
    max-width: 1920px !important;
    width: 100% !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.full-width-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: var(--primary-white) !important;
}

/* Grid System */
.row {
    display: flex;
    flex-wrap: wrap;    
}

/* Column Classes */
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-3 { flex: 0 0 100%; max-width: 100%; }
.col-md-4 { flex: 0 0 100%; max-width: 100%; }
.col-md-6 { flex: 0 0 100%; max-width: 100%; }
.col-md-8 { flex: 0 0 100%; max-width: 100%; }
.col-lg-6 { flex: 0 0 100%; max-width: 100%; }

/* Display Utilities */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-md-block { display: none !important; }
.d-md-none { display: block !important; }
.d-md-flex { display: none !important; }

.w-full { width: 100% !important; }
.justify-between { justify-content: space-between !important; }

/* Navbar toggler - ensure it's visible on mobile */
.navbar-toggler {
    display: block !important;
    border: none !important;
    background: none !important;
    padding: 0.25rem 0.75rem !important;
    cursor: pointer !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0.25rem !important;
}

/* Flexbox Utilities */
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-end { justify-content: flex-end !important; }
.flex-shrink { flex-shrink: 1 !important; }

/* Text Utilities */
.text-center { text-align: center !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-decoration-none { text-decoration: none !important; }
.text-white { color: #fff !important; }
.text-md-end { text-align: left !important; }

/* Spacing Utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-md-0 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-md-5 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }

/* Button Classes */
.btn { 
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
}
.btn-primary { background-color: #0d6efd; border-color: #0d6efd; color: #fff; }
.btn-secondary { background-color: #6c757d; border-color: #6c757d; color: #fff; }

/* Navbar Classes */
.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 20px; }
.navbar-brand { padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
.navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.navbar-expand-lg .navbar-nav { flex-direction: row; }
.navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; }
.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 100%; }
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.collapse { display: none; }
.ms-auto { margin-left: auto !important; }

/* Other Utilities */
.img-fluid { max-width: 100%; height: auto; }
.list-unstyled { padding-left: 0; list-style: none; }
.small { font-size: 0.875em; }
.bg-dark { background-color: #212529 !important; }
.fixed-top { position: fixed !important; top: 0; right: 0; left: 0; z-index: 1030; }

/* Gaps */
.gx-6-25 { --bs-gutter-x: 6.5rem; }
.gx-5 { --bs-gutter-x: 5rem; }

/* SINGLE BREAKPOINT - 768px */
@media (max-width: 767px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
        
    .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-lg-6 { 
        flex: 0 0 100% !important; 
        max-width: 100% !important; 
    }

    .col-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    
    .d-md-block { display: none !important; }
    .d-md-none { display: block !important; }
    .d-md-flex { display: none !important; }
    
    /* Mobile menu visibility */
    .navbar-toggler { display: block !important; }
    .mobile-menu-overlay { display: none !important; }
    .mobile-menu-overlay.active { display: flex !important; }
    
    .mb-md-0 { margin-bottom: 0 !important; }
    .my-md-5 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    .text-md-end { text-align: center !important; }
}

@media (min-width: 768px) {
    .col-md-3 { flex: 0 0 25% !important; max-width: 25% !important; }
    .col-md-4 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .col-md-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    .col-md-8 { flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
    .col-lg-6 { flex: 0 0 50% !important; max-width: 50% !important; }
    
    .d-md-block { display: block !important; }
    .d-md-none { display: none !important; }
    .d-md-flex { display: flex !important; }
    
    /* Desktop navigation */
    .navbar-toggler { display: none !important; }
    .mobile-menu-overlay { display: none !important; }
    .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; }
    
    .mb-md-0 { margin-bottom: 0 !important; }
    .my-md-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
    .text-md-end { text-align: right !important; }
}