/* Bootstrap 5 to Bootstrap 3 Layout Compatibility Fixes for TJPO */
/* This file contains specific fixes to make Bootstrap 5 layout match the original Bootstrap 3 compact spacing */

/* 1. CONTAINER WIDTH FIXES - Match original Bootstrap 3 widths */
.container,
.container-fluid {
    /* Override Bootstrap 5 default container widths to match original layout */
    max-width: 960px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Header and Footer specific container fixes for better spacing */
.pc_top .container,
.mobile_top .container,
.mobile_top .container-fluid,
footer .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Header and Footer padding for tablet/medium screens (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .pc_top .container,
    .mobile_top .container,
    .mobile_top .container-fluid,
    footer .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Responsive container width adjustments to match layout.css */
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .container,
    .container-fluid {
        max-width: 960px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Header and Footer enhanced padding for 1024px+ screens */
    .pc_top .container,
    .mobile_top .container,
    .mobile_top .container-fluid,
    footer .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (min-width: 1200px) {
    .container,
    .container-fluid {
        max-width: 1200px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Header and Footer enhanced padding for 1200px+ screens */
    .pc_top .container,
    .mobile_top .container,
    .mobile_top .container-fluid,
    footer .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (min-width: 1440px) {
    .container,
    .container-fluid {
        max-width: 1440px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Header and Footer enhanced padding for 1440px+ screens */
    .pc_top .container,
    .mobile_top .container,
    .mobile_top .container-fluid,
    footer .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* 2. GRID SYSTEM FIXES - Reduce Bootstrap 5 gutters to match Bootstrap 3 */
.row {
    /* Bootstrap 5 has 24px gutters by default, Bootstrap 3 had 30px but tighter overall spacing */
    --bs-gutter-x: 20px !important; /* Reduced from default 24px */
    --bs-gutter-y: 0 !important;
    margin-left: calc(-0.5 * var(--bs-gutter-x)) !important;
    margin-right: calc(-0.5 * var(--bs-gutter-x)) !important;
}

.row > * {
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
}

/* 3. SECTION AND ARTICLE WIDTH OVERRIDES - Force original widths */
section article {
    width: 960px !important;
    max-width: 960px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 1200px) {
    section article {
        width: 1200px !important;
        max-width: 1200px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (min-width: 1440px) {
    section article {
        width: 1440px !important;
        max-width: 1440px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* 4. NAVIGATION CONTAINER FIXES */
nav ul.mainNav {
    width: 960px !important;
    max-width: 960px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

@media (min-width: 1200px) {
    nav ul.mainNav {
        width: 1200px !important;
        max-width: 1200px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (min-width: 1440px) {
    nav ul.mainNav {
        width: 1440px !important;
        max-width: 1440px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* 5. BOOTSTRAP 5 SPACING UTILITY OVERRIDES */
/* Reduce default Bootstrap 5 spacing to match tighter Bootstrap 3 layout */
.mb-1 { margin-bottom: 0.15rem !important; } /* was 0.25rem */
.mb-2 { margin-bottom: 0.35rem !important; } /* was 0.5rem */
.mb-3 { margin-bottom: 0.75rem !important; } /* was 1rem */
.mb-4 { margin-bottom: 1.2rem !important; }  /* was 1.5rem */
.mb-5 { margin-bottom: 2.5rem !important; }  /* was 3rem */

.mt-1 { margin-top: 0.15rem !important; }
.mt-2 { margin-top: 0.35rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1.2rem !important; }
.mt-5 { margin-top: 2.5rem !important; }

.py-1 { padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; }
.py-2 { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }

.px-1 { padding-left: 0.15rem !important; padding-right: 0.15rem !important; }
.px-2 { padding-left: 0.35rem !important; padding-right: 0.35rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

/* 6. COMPONENT SPACING FIXES */
/* Reduce spacing on common components */
.card {
    margin-bottom: 1rem !important; /* Reduced from 1.25rem */
}

.card-body {
    padding: 0.75rem !important; /* Reduced from 1rem */
}

/* 7. BODY AND WRAPPER ADJUSTMENTS */
body {
    line-height: 1.5 !important; /* Match original line-height */
}

#wrapper {
    width: 100% !important;
    margin: 0 auto !important;
}

/* 8. OVERRIDE ANY BOOTSTRAP 5 FLEXBOX ISSUES */
/* Ensure sections maintain original display behavior */
section, 
header, 
nav, 
.content, 
.content section, 
footer {
    margin: 0px auto !important;
    position: relative !important;
}

/* 9. SPECIFIC FIXES FOR MAIN CONTENT AREAS */
/* Ensure main content wrapper matches original layout exactly */
.content {
    font-size: 0.9375rem !important; /* 15px - matches original */
    font-family: Verdana !important;
}

/* 10. RESPONSIVE BREAKPOINT ALIGNMENT */
/* Ensure breakpoints match original responsive behavior */
@media (max-width: 767.98px) {
    .container,
    .container-fluid,
    section article,
    nav ul.mainNav {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .row {
        --bs-gutter-x: 15px !important;
    }
}

/* 11. FORCE ORIGINAL FONT FAMILY */
html, body, .container, .container-fluid {
    font-family: Verdana, sans-serif !important;
}

/* 12. ENSURE NO EXTRA SPACING FROM BOOTSTRAP 5 */
/* Remove any extra margins that Bootstrap 5 might add */
.row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Column spacing adjustments */
[class*="col-"] {
    margin-bottom: 0 !important;
}

/* 13. ADDITIONAL SPACING FIXES FOR SPECIFIC ELEMENTS */
/* Main banner/hero section adjustments */
.index_bg {
    padding: 35px 0 !important; /* Reduced from 45px */
    margin: 40px 0 !important; /* Reduced from 50px */
}

/* Content section vertical spacing */
.content section {
    margin-top: 0 !important;
    margin-bottom: 1rem !important; /* Reduced spacing between sections */
}

/* Navigation menu item spacing */
nav ul.mainNav > li > a {
    padding-left: 6px !important; /* Reduced from 8px */
    padding-right: 8px !important; /* Reduced from 10px */
}

/* Ensure text line-height matches original */
p, div, span {
    line-height: 1.5 !important;
}

/* Bootstrap 5 button spacing fixes */
.btn {
    padding: 0.375rem 0.75rem !important; /* Match Bootstrap 3 default */
    margin-bottom: 0 !important;
}

/* Form element spacing */
.form-group {
    margin-bottom: 1rem !important; /* Reduced from 1.25rem */
}

/* Image spacing adjustments */
img {
    margin-bottom: 0 !important;
}

/* 14. SPECIFIC LAYOUT ELEMENT FIXES */
/* Ensure wrapper elements don't add extra spacing */
.wrapper,
#wrapper,
.main-content {
    padding: 0 !important;
    margin: 0 auto !important;
}

/* Footer spacing */
footer {
    margin-top: 2rem !important; /* Reduced from default */
    padding-top: 1.5rem !important;
}

/* Header spacing */
header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 15. BOOTSTRAP 5 FLEX UTILITIES OVERRIDE */
/* Ensure original display behaviors */
.d-flex {
    gap: 0.5rem !important; /* Reduced gap in flex containers */
}

/* 16. RESPONSIVE IMAGE FIXES */
.img-responsive,
.img-fluid {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* 17. TABLE SPACING FIXES */
table {
    margin-bottom: 1rem !important; /* Reduced from 1.25rem */
}

th, td {
    padding: 0.5rem !important; /* Reduced from 0.75rem */
}

/* 18. LIST SPACING FIXES */
ul, ol {
    margin-bottom: 1rem !important;
    padding-left: 1.5rem !important;
}

/* Breadcrumb specific override */
ol.breadcrumb {
    padding-left: 1rem !important;
}

li {
    margin-bottom: 0.25rem !important;
}